:root{
    --blue: #0066ff;
    --white: #faf7f0;

    --xlarge-vertical-margin: 120px;
    --large-vertical-margin: 100px;
    --medium-vertical-margin: 50px;
    --small-vertical-margin: 20px;
    --horizontal-margin: 5vw;
}





@font-face {
    font-family: Poppins_Bold;
    src: url(typography/Poppins-Bold.ttf);
}
@font-face {
    font-family: Poppins_Medium;
    src: url(typography/Poppins-Medium.ttf);
}





*{
    margin: 0;
    padding: 0;
}




html{
    background-color: var(--white);
}





h1,h2,h3,p,li,form,input, input input{
    font-family: sans-serif;
    color: var(--blue);
}
h1,h2,h3{
    font-family: Poppins_Bold;
}

h1{
    font-size: 4.4em;
    margin-bottom: 1.5em;
    line-height: 1.1;
}
h2{
    font-size: 1.5em;
    margin-bottom: 1.5em;
}

h2,h3,p,li,.grid_typography_container{
    width: 30vw;
    hyphens: auto;
}
h3,p,li,form{
    font-size: 1.1em;
    line-height: 1.4;
}
h3,p,form,input{
    margin-bottom: 1.8em;
}
p,li,form,input{
    font-family: Poppins_Medium;
}
li{
    margin-left: 20px;
}


.white-text{
    color: var(--white);
}


.grid_typography_container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5em;
}
    .sticky_container .grid_typography_container div{
        margin-bottom: 0;
    }
    .grid_typography_container h3, .grid_typography_container p, .grid_typography_container li{
        width: unset;
    }
    .grid_typography_container p{
        margin-bottom: 0;
    }



a{
    cursor: pointer;
    text-decoration: none;
    color: unset;
}
.button{
    border-radius: 2em;
    display: inline-table;
    padding: 5px 15px 5px 15px;
}
    .button p{
        margin: 0;
        width: unset;
    }

.white_button{
    border: 2px solid var(--blue);
    background-color: var(--white);
}
    .white_button:hover{
        border: 2px solid var(--white);
        background-color: var(--blue);
    }
    .white_button:hover p{
        color: var(--white);
    }

.blue_button{
    border: 2px solid var(--white);
    background-color: var(--blue);
}
    .blue_button p{
        color: var(--white);
    }
    .blue_button:hover{
        border: 2px solid var(--blue);
        background-color: var(--white);
    }
    .blue_button:hover p{
        color: var(--blue);
    }




svg{
    stroke-linecap: round;
}





nav{
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 30px;
    width: calc(100vw - 2* var(--horizontal-margin));
    z-index: 100;
}
    nav .blue_button:hover{
        border: 2px solid var(--white);
        background-color: var(--blue);
    }
    nav .blue_button:hover p{
        color: var(--white);
    }





body, #hero_section{
    padding-left: var(--horizontal-margin);
    padding-right: var(--horizontal-margin);
}

body{
    padding-left: var(--horizontal-margin);
    padding-right: var(--horizontal-margin);
    padding-top: 100vh;
}

#hero_section{
    background-color: var(--blue);
    width: calc(100vw - 2 * var(--horizontal-margin));
    height: 100vh;
    position: absolute;
    top: 0; left: 0;
    display: flex;
    align-items: end;
}
    #hero_section h1{
        color: var(--white);
        width: 40vw;
    }
    
.sticky_section{
    height: 200vh;
    padding-top: var(--large-vertical-margin);
    padding-bottom: var(--large-vertical-margin);
    margin-bottom: var(--large-vertical-margin);
}
    .sticky_container{
        position: sticky;
        top: var(--large-vertical-margin);
        display: flex;
        justify-content: space-between;
    }

.image_section{
    position: relative;
    height: 100vh;
    margin-bottom: var(--large-vertical-margin);
}
    .image_container{
        position: absolute;
        border-radius: 15px;
        overflow: hidden;
    }
    .portrait{
        width: 40vw;
        height: 90vh;
    }
    .landscape{
        width: 45vw;
        height: 50vh;
    }
        .image_container img{
            object-fit: cover;
            width: 100%; height: 100%;
        }
    .review_textcontainer{
        position: absolute;
    }





#footer{
    height: 500px; width: 100vw;
    background-color: var(--blue);
    margin-top: var(--large-vertical-margin);
    margin-left: calc(-1 * var(--horizontal-margin));
    position: relative;
}
    #footerSVGD{
        position: absolute;
        left: 0; top: 0;
        width: 100vw;
        height: 500px;
        overflow: hidden;
        fill: var(--white);
    }
    #footerSVGM{
        display: none;
    }
        #footer_text_container{
            position: absolute;
            left: 10vw; top: 60px;
        }
            #footer_text_container img{
                width: 35vw;
                margin-bottom: 25px;
            }
            #footer_text_container a p{
                display: inline-table;
                width: unset;
            }
            #footer_text_container a p:hover{
                text-decoration: underline;
            }
            #footer_phoneNumber,#footer_email{
                margin-bottom: 0;
            }
                #footer_text_container .button p:hover{
                        text-decoration: none;
                }





@media only screen and (max-width:1300px) {

    h1{
        font-size: 3em;
    }
    h2,h3,p,li,.grid_typography_container{
        width: 40vw;
    }
    h3,p,form,input{
        margin-bottom: 1.3em;
    }



    #hero_section h1{
        width: 80vw;
    }


    .review_textcontainer p, .review_textcontainer h3{
        width: 30vw;
    }
}




/* Mobile Class Styles */

    .mobile_only{
        display: none;
    }

    

    .nav_mobile{
            background-color: var(--blue);
            border: 1px solid var(--white);
            width: 100vw; height: 100vh;
            top: -1px; left: 100vw;
            padding-left: var(--horizontal-margin);
            padding-right: var(--horizontal-margin);
            padding-top: 50vh;
            flex-direction: column;
            justify-content: start;
        }
        .nav_mobile .blue_button, .nav_mobile .white_button, .nav_mobile .blue_button:hover, .nav_mobile .white_button:hover{
            border: none;
            background-color: rgba(0,0,0,0);
            padding: 0;
            margin-bottom: 5px;
            display: flex;
        }
            .nav_mobile .navbar_flexbox_container{
                margin-bottom: 50px;
            }
            .nav_mobile .blue_button p, .nav_mobile .white_button p, .nav_mobile .blue_button:hover p,.nav_mobile .white_button:hover p{
                color: var(--white);
                font-size: 1.2em;
                margin-right: 100px;
            }

        #navIcon,#navSVG,#navPointer{
            display: none;
            z-index: 100;
        }
        #navIcon{
            position: fixed;
            top: 20px; right: 10px;
            width: 50px;
            overflow: visible;
        }
            #navIcon path{
                fill: var(--blue);
                stroke: var(--white);
                stroke-miterlimit: 1;
            }
        #navPointer{
            fill: var(--white);
        }
        #navSVG{
            position: absolute;
            top: 0; left: 0;
            z-index: -5;
            fill: none;
            stroke: var(--white);
            stroke-width: 40px;
            width: 100vw;
        }
        .nav_leftMargin{
            width: 15px;
            margin-right: 5px;
        }




        
@media only screen and (max-width:900px) {

    :root{
        --horizontal-margin: 10vw;
    }



    h1{
        font-size: 2.5em;
    }
    h2{
        font-size: 1.2em;
    }

    h3,p,li,form{
        font-size: 0.9em;
    }
    h2,h3,p,li,.grid_typography_container,.review_textcontainer p, .review_textcontainer h3{
        width: 80vw;
    }


    .grid_typography_container{
        row-gap: 1em;
    }


    

    #hero_section{
        height: 100vh;
    }

    #hero_section h1{
        margin-bottom: var(--medium-vertical-margin);
        width: 80vw;
    }

    .sticky_section{
        padding-top: 0;
        padding-bottom: var(--large-vertical-margin);
    }
        .sticky_container{
            top: var(--medium-vertical-margin);
            flex-direction: column;
            justify-content: start;
        }
            .sticky_container div{
                margin-bottom: var(--medium-vertical-margin);
            }

    .image_section{
        margin-bottom: var(--large-vertical-margin);
        height: unset;
    }
        .image_container{
            position: static;
            margin-bottom: var(--small-vertical-margin);
        }
        .portrait, .landscape{
            width: 80vw;
        }
        .portrait{
            height: 70vh;
        }
        .landscape{
            height: 30vh;
        }
        .review_textcontainer{
            position: static;
            margin-bottom: var(--large-vertical-margin);
        }
    




    #footer,#footerSVGM{
        height: 100vh;
        padding: 0;
    }
        #footerSVGD{
            display: none;
        }
        #footerSVGM{
            display: block;
            width: 100vw;
            fill: var(--white);
        }
        
        #footer_text_container{
            margin-top: 40vh;
        }
            #footer_text_container img{
                width: 80vw;
                margin-bottom: var(--small-vertical-margin);
            }
}



@media only screen and (max-width:850px) {

    nav{
        display: inline;
        text-align: center;
    }
        .navbar_flexbox_container .button{
            margin-bottom: 5px;
        }

}