:root{
    --primary:#6f8f6a;

    --white:#ffffff;
    --black:#111111;

    --text-light:rgba(255,255,255,.92);

    --container:1380px;

    --transition:300ms ease;
}

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter,sans-serif;
    background:#fff;
    color:#111;
}

a{
    text-decoration:none;
}

button{
    font:inherit;
}

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

.container{
    width:min(92%, var(--container));
    margin-inline:auto;
}

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

.site-header{
    position:absolute;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:
    background .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}

.site-header::before{
    content:"";

    position:absolute;

    inset:0;

    height:180px;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.34),
        rgba(0,0,0,.16),
        transparent
    );

    pointer-events:none;

    z-index:-1;

    transition:.35s ease;
}

/* =========================
   NAVBAR
========================= */

.navbar{
    padding:2.4rem 0;

    transition:
    padding .35s ease,
    background .35s ease;
}

.navbar-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;

    align-items:center;
}

/* =========================
   NAV GROUPS
========================= */

.nav-group{
    display:flex;
    align-items:center;

    gap:3rem;
}

.nav-left{
    justify-content:flex-end;
}

.nav-right{
    justify-content:flex-start;
}

/* =========================
   LINKS
========================= */

.nav-group a,
.dropdown-toggle{
    position:relative;

    display:inline-flex;
    align-items:center;

    white-space:nowrap;

    color:#ffffff;

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

    letter-spacing:.14em;
    text-transform:uppercase;

    text-shadow:
    0 2px 10px rgba(0,0,0,.28),
    0 4px 24px rgba(0,0,0,.18);

    transition:
    color .25s ease,
    opacity .25s ease;

    background:none;
    border:none;

    cursor:pointer;
}

.nav-group a::after,
.dropdown-toggle::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;
    height:1px;

    background:rgba(255,255,255,.95);

    transition:width .28s ease;
}

.nav-group a:hover::after,
.dropdown-toggle:hover::after{
    width:100%;
}

/* =========================
   LOGO
========================= */

.logo-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    margin-inline:5.5rem;

    transform:translateY(-2px);

    color:#fff;

    transition:.35s ease;
}

.logo-center img{
    width:78px;
    height:auto;

    transition:.35s ease;

    filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.24))
    drop-shadow(0 14px 34px rgba(0,0,0,.18));
}

.logo-center span{
    margin-top:.45rem;

    font-size:9px;
    font-weight:500;

    letter-spacing:.18em;
    text-transform:uppercase;

    white-space:nowrap;

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

    transition:.35s ease;

    text-shadow:
    0 2px 12px rgba(0,0,0,.30),
    0 4px 26px rgba(0,0,0,.20);
}

/* =========================
   DROPDOWN
========================= */

.nav-dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;

    top:calc(100% + 1.2rem);
    right:0;

    min-width:220px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(14px);

    border-radius:20px;

    padding:1.4rem 1.6rem;

    display:flex;
    flex-direction:column;

    gap:1rem;

    box-shadow:
    0 20px 60px rgba(0,0,0,.10);

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.dropdown-menu a{
    color:#111;

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

    letter-spacing:.14em;
    text-transform:uppercase;

    text-shadow:none;
}

.nav-dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

/* =========================
   MOBILE BUTTON
========================= */

.mobile-toggle{
    display:none;

    width:48px;
    height:48px;

    border:none;
    background:none;

    cursor:pointer;
}

.mobile-toggle span{
    display:block;

    width:28px;
    height:2px;

    margin:6px auto;

    background:#fff;

    box-shadow:
    0 2px 8px rgba(0,0,0,.24);

    transition:.35s ease;
}

/* =========================
   MOBILE MENU
========================= */

.mobile-menu{
    position:fixed;

    inset:0;

    background:#f7f7f7;

    z-index:9999;

    overflow-y:auto;

    opacity:0;
    visibility:hidden;

    transition:
    opacity .25s ease,
    visibility .25s ease;
}

.mobile-menu.active{
    opacity:1;
    visibility:visible;
}

body.menu-open{
    overflow:hidden;
}

.mobile-close-arrow{
    position:sticky;

    top:0;

    width:100%;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;

    background:#f7f7f7;

    color:#666;

    font-size:1.9rem;
    font-weight:300;

    cursor:pointer;

    border-bottom:1px solid rgba(0,0,0,.06);

    z-index:2;
}

.mobile-nav{
    width:100%;
}

.mobile-nav a{
    display:flex;
    align-items:center;

    height:44px;

    padding-inline:1.3rem;

    border-bottom:1px solid rgba(0,0,0,.06);

    color:#222;

    font-size:.9rem;
    font-weight:400;

    transition:
    background .2s ease,
    color .2s ease;
}

.mobile-nav a:hover{
    background:#5eb764;
    color:#fff;
}

.mobile-nav a:first-child{
    border-top:1px solid rgba(0,0,0,.06);
}

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

.site-header.scrolled{
    position:fixed;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(14px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.06);
}

.site-header.scrolled::before{
    opacity:0;
}

.site-header.scrolled .navbar{
    padding:1rem 0;
}

.site-header.scrolled .nav-group a,
.site-header.scrolled .dropdown-toggle{
    color:#111;

    text-shadow:none;
}

.site-header.scrolled .nav-group a::after,
.site-header.scrolled .dropdown-toggle::after{
    background:#111;
}

.site-header.scrolled .logo-center span{
    color:#111;

    text-shadow:none;
}

.site-header.scrolled .logo-center img{
    width:64px;

    filter:none;
}

.site-header.scrolled .mobile-toggle span{
    background:#111;

    box-shadow:none;
}

/* =========================
   INTERNAL PAGES
========================= */

.internal-page .site-header{
    position:sticky;

    top:0;

    background:#fff;

    box-shadow:
    0 4px 24px rgba(0,0,0,.04);
}

.internal-page .site-header::before{
    display:none;
}

.internal-page .navbar{
    padding:1rem 0;
}

.internal-page .nav-group a,
.internal-page .dropdown-toggle{
    color:#111;

    text-shadow:none;
}

.internal-page .nav-group a::after,
.internal-page .dropdown-toggle::after{
    background:#111;
}

.internal-page .logo-center span{
    color:#111;

    text-shadow:none;
}

.internal-page .logo-center img{
    width:64px;

    filter:none;
}

.internal-page .mobile-toggle span{
    background:#111;

    box-shadow:none;
}

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

@media(max-width:1200px){

    .nav-group{
        gap:1.8rem;
    }

}

@media(max-width:1100px){

    .nav-group{
        display:none;
    }

    .navbar-inner{
        grid-template-columns:auto 1fr auto;
    }

    .logo-center{
        justify-self:center;

        margin-inline:0;
    }

    .mobile-toggle{
        display:block;

        justify-self:end;
    }

}

@media(max-width:768px){

    .navbar{
        padding:1.4rem 0;
    }

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

    .logo-center span{
        font-size:8px;

        letter-spacing:.16em;
    }

    .site-header.scrolled .logo-center img,
    .internal-page .logo-center img{
        width:58px;
    }

}