/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================================================
   VARIABLES
========================================================== */

:root{
    --color-primary:#5F7F39;
    --color-primary-dark:#17372A;
    --color-heading:#17372A;
    --color-text:#56635B;
    --color-background:#FCFBF8;
    --color-white:#FFFFFF;
    --color-border:#DCE4D8;

    --font-heading:"Playfair Display",serif;
    --font-body:"Inter",sans-serif;

    --container-width:1280px;
}

/* ==========================================================
   BASE
========================================================== */

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;
    color:var(--color-text);
    background:var(--color-background);
    -webkit-font-smoothing:antialiased;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    text-decoration:none;
    color:inherit;
}

ul,ol{
    list-style:none;
}

.container{
    width:min(calc(100% - 64px),1280px);
    margin-inline:auto;
}

section{
    position:relative;
}

/* ==========================================================
   HEADER
========================================================== */

.header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;

    height:78px;
    padding:0;

    gap:32px;
}

.header-logo{
    display:flex;
    align-items:center;
}

.header-logo img{
    width:185px;
    height:auto;
    display:block;
}

.header-nav{
    margin-left:auto;
}

.header-menu{
    display:flex;
    align-items:center;
    gap:38px;
}

.header-menu a{
    color:var(--color-heading);
    font-size:15px;
    font-weight:500;
    line-height:1;
    transition:color .25s ease;
}

.header-menu a:hover{
    color:var(--color-primary);
}

.header-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:46px;
    padding:0 28px;

    border-radius:999px;

    background:var(--color-primary);
    color:#fff;

    font-size:15px;
    font-weight:600;

    transition:.25s ease;
}

.header-button:hover{
    background:#4E6B2F;
    transform:translateY(-1px);
}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer{
    width:100%;
    background:#102C22;
    color:#ffffff;
}

.site-footer-container{
    width:min(1200px, calc(100% - 72px));
    min-height:62px;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.site-footer-copyright{
    margin:0;

    color:rgba(255,255,255,.58);

    font-size:11px;
    line-height:1.4;
}

.site-footer-links{
    display:flex;
    align-items:center;
    gap:24px;
}

.site-footer-links a{
    color:rgba(255,255,255,.62);

    font-size:11px;
    line-height:1.4;

    transition:color .25s ease;
}

.site-footer-links a:hover{
    color:#ffffff;
}


/* ==========================================================
   FOOTER RESPONSIVE
========================================================== */

@media (max-width:600px){

    .site-footer-container{
        width:min(100% - 32px, 560px);
        min-height:76px;

        flex-direction:column;
        justify-content:center;

        gap:9px;

        text-align:center;
    }

    .site-footer-links{
        gap:18px;
    }

}

/* ==========================================================
   HEADER RESPONSIVE — MOBILE
   Home / About / Contact
========================================================== */

@media (max-width: 700px){

    .container{
        width:calc(100% - 32px);
    }

    .header .container{
        height:68px;
        padding:0;
        gap:14px;
    }

    .header-logo{
        flex:0 0 auto;
    }

    .header-logo img{
        width:108px;
        height:auto;
    }

    .header-nav{
        margin-left:auto;
        flex:1 1 auto;
    }

    .header-menu{
        justify-content:flex-end;
        gap:18px;
    }

    .header-menu a{
        font-size:14px;
        white-space:nowrap;
    }

    .header-button{
        flex:0 0 auto;
        width:auto;
        min-width:116px;
        height:44px;
        padding:0 18px;
        font-size:14px;
        white-space:nowrap;
    }
}

@media (max-width:420px){

    .header .container{
        width:calc(100% - 24px);
        gap:10px;
    }

    .header-logo img{
        width:82px;
    }

    .header-menu{
        gap:13px;
    }

    .header-menu a{
        font-size:13px;
    }

    .header-button{
        min-width:104px;
        height:42px;
        padding:0 14px;
        font-size:13px;
    }
}