/* reference of font names:
as per figma styles + adobe references

    h1: Gyst, Bold, 48
    adobe ref: 
        font-family: gyst-variable, sans-serif;
        font-style: bold;
        font-variation-settings: "wght" 700;
        font-size: 48;

    h2: gyst, light, italic, 32
    adobe ref:
        font-family: gyst-variable, sans-serif;
        font-style: italic;
        font-variation-settings: "wght" 100;
        font-size: 32;

    h3: stolzl, medium, 20
    adobe ref:
        font-family: stolzl, sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 20px;

    b1: stolzl, light 16
    adobe ref:
        font-family: "stolzl", sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 16px;

    b2: stolzl, light, 13
    adobe ref:
        font-family: "stolzl", sans-serif;
        font-variation-settings: "wght" 100;
        font-style: light;
        font-size: 13px;

*/



/* default changes */
html, body {
    margin: 0;
    padding: 0;
    font-family: "stolzl", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 16px;

}

h1, h2, h3, p {
    margin: 0px;
    padding: 0px;
}




/* NAVIGATION */
nav {
    background-color: #8A3812;
    
    padding: 50px;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#logo {
    width: 75px;
    height: 75px;
    border-radius: 50px;

    display: flex;
    justify-content: flex-start;

}


#main_title {
    font-family: gyst-variable, sans-serif;
    font-style: bold;
    font-variation-settings: "wght" 700;
    font-size: 48px;

    margin: 50px 0, 0, 0;

    display: flex;
    justify-content: center;

    color: #EADECE;
}

.menu {
    display: flex;
    list-style: none;
    
    margin: 0px;
    padding-inline-start: 0px;
}

.li_menu {
    padding: 0px 0px 0px 25px;
}

a {
    font-family: "stolzl", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 16px;

    color: #EADECE;
    text-decoration: none;
    
}

a:hover {
    color: #521B14;
}





/* HERO*/

.hero {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    background-image: url('../Images/Hero\ Image\ \(by\ harp&crown\).jpg');
    background-size: cover;
    background-position: center; 

    width: 100vw;
    height: 100vh;

    margin: 0px;
    padding: 0px;

}

h2 {
    font-family: gyst-variable, sans-serif;
    font-style: italic;
    font-variation-settings: "wght" 100;
    font-size: 32px;

    color: white;
    text-decoration: underline;

}

.cta1 {
    margin-right: 50px;
    height: 30vh;
}




/* MISSION */

.mission {
    padding: 25px 50px;
    background-color: #EADECE;
    color:#8A3812;
    text-align: center;

    display: flex;
    flex-direction: column;
}

#mission {
    height: 180px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h3 {
    font-family: stolzl, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
}

.h3mission {
    margin: 0px 0px 25px 0px;
}

p {
    color: #2C1106;
}

.pmission {
    margin: 0px 150px 25px 150px;
}

.cta2 {
    display: flex;
    justify-content: flex-end;
}

#cta2 {
    color: #4C4924;
    margin: 25px 0px;
}




/* TESTIMONIALS */

.testimonials {
    padding: 50px;
    background-color:#4C4924;

    display: flex;

}

#testimonials {
    list-style: none;
   
    margin: 0px;
    padding-inline-start: 0px;

    display: flex;
    justify-content: space-between;
}

.li_testimonials {
    font-family: stolzl, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    
    text-align: center;
    color:#EADECE;

    margin: 0px 300px 0px 0px;
}

#li_test_final {
    margin: 0px;
}


/* FOOTER */

footer {
    background-color:#521B14;

    padding: 50px 50px;

    display:flex;
    justify-content: space-between;

}

.socials {
    list-style: none;
    
    display: flex;
    padding-inline-start: 0%;
    margin: 0px;
}

.icons {
    margin: 0px 25px;
}

.footer_menu {
    list-style: none;
    
    display: flex;
    padding-inline-start: 0%;
    margin: 0px;
}

.li_foot_menu{
    margin: 0px 25px;
    text-wrap: wrap;
    color:#EADECE;
}

.li_foot_menu:hover {
    color:#8A3812;
}

.footer_contact {
    list-style: none;
    
    display: flex;
    padding-inline-start: 0%;
    margin: 0px;
}

.contact_info {
    margin: 0px 0px 0px 25px;
    text-wrap: wrap;
    text-align: right;
    color:#EADECE;
    width: 180px;
}