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

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    padding:28px 0;

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

    transform:translateY(0);
}

.navbar.scrolled{
    background:rgba(15,15,15,.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    padding:18px 0;

    box-shadow:0 8px 30px rgba(0,0,0,.15);
}

.navbar.hide{
    transform:translateY(-100%);
}

/* ==========================================
   CONTAINER
========================================== */

.nav-container{
    width:min(92%,1400px);
    margin:auto;

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

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

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

.logo img{
    width:145px;
    height:auto;
    display:block;

    transition:.35s ease;
}

.navbar.scrolled .logo img{
    width:130px;
}

/* ==========================================
   DESKTOP NAVIGATION
========================================== */

.nav-menu{
    display:flex;
    align-items:center;
}

.nav-menu ul{
    display:flex;
    align-items:center;
    gap:48px;

    margin:0;
    padding:0;

    list-style:none;
}

.nav-menu a,
.nav-dropdown-toggle{

    position:relative;

    color:#F5EFE2;

    text-decoration:none;

    background:none;
    border:none;
    padding:0;
    cursor:pointer;

    font-family:"Grotta",sans-serif;
    font-size:12px;
    font-weight:500;

    letter-spacing:2px;
    text-transform:uppercase;

    transition:.35s;
}

.nav-menu a::after,
.nav-dropdown-toggle::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:1px;

    background:#D9B46B;

    transition:.35s;
}

.nav-menu a:hover,
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle{

    color:#D9B46B;
}

.nav-menu a:hover::after,
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after{

    width:100%;
}


.nav-dropdown{

    position:relative;
}

.nav-dropdown-menu{

    position:absolute;
    top:calc(100% + 22px);
    left:50%;

    min-width:210px;
    padding:16px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;

    background:rgba(15,15,15,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    opacity:0;
    visibility:hidden;
    transform:translate(-50%, 10px);

    transition:.3s ease;
}

.nav-dropdown-menu a{

    display:block;
    padding:13px 14px;

    border-radius:6px;

    white-space:nowrap;
}

.nav-dropdown-menu a::after{

    display:none;
}

.nav-dropdown-menu a:hover{

    background:rgba(217,180,107,.12);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{

    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
}

/* ==========================================
   MENU BUTTON
========================================== */

.menu-toggle{

    display:none;

    width:42px;
    height:42px;

    padding:0;

    background:none;
    border:none;
    outline:none;

    cursor:pointer;

    position:relative;

    transition:.3s;
}

.menu-toggle span{

    position:absolute;
    left:8px;

    width:26px;
    height:2px;

    border-radius:999px;

    background:#F5EFE2;

    transition:
        transform .3s ease,
        opacity .25s ease,
        top .3s ease,
        background .3s ease;
}

.menu-toggle span:nth-child(1){
    top:12px;
}

.menu-toggle span:nth-child(2){
    top:20px;
}

.menu-toggle span:nth-child(3){
    top:28px;
}

.menu-toggle:hover span{

    background:#D9B46B;
}

.menu-toggle.active span:nth-child(1){

    top:20px;

    transform:rotate(45deg);
}

.menu-toggle.active span:nth-child(2){

    opacity:0;
}

.menu-toggle.active span:nth-child(3){

    top:20px;

    transform:rotate(-45deg);
}

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

.mobile-menu{

    position:fixed;
    inset:0;

    background:rgba(12,12,12,.98);
    backdrop-filter:blur(20px);

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

    opacity:0;
    visibility:hidden;

    transition:.45s ease;

    z-index:999;
}

.mobile-menu.active{

    opacity:1;
    visibility:visible;
}

.mobile-menu-content{

    text-align:center;
}

.mobile-menu ul{

    list-style:none;

    margin:0;
    padding:0;
}

.mobile-menu li{

    margin:30px 0;
}

.mobile-menu a{

    display:inline-block;

    color:#F5EFE2;

    font-family:"Grotta",sans-serif;
    font-size:34px;
    font-weight:300;

    text-transform:uppercase;
    letter-spacing:3px;

    transition:.35s;
}

.mobile-menu a:hover{

    color:#D9B46B;
}

.mobile-menu-panel{

    display:none;
}

.mobile-menu-panel.active{

    display:block;
}

.mobile-menu-link,
.mobile-menu-back{

    background:none;
    border:none;
    padding:0;

    color:#F5EFE2;

    font-family:"Grotta",sans-serif;
    font-weight:300;
    text-transform:uppercase;

    cursor:pointer;
    transition:.35s;
}

.mobile-menu-link{

    font-size:34px;
    letter-spacing:3px;
}

.mobile-menu-back{

    margin-bottom:42px;

    color:#D9B46B;

    font-size:13px;
    font-weight:500;
    letter-spacing:2px;
}

.mobile-menu-link:hover,
.mobile-menu-back:hover{

    color:#D9B46B;
}

.mobile-menu-panel-pdfs.active ~ .mobile-contact{

    display:none;
}

.mobile-contact{

    margin-top:70px;

    color:#8f8f8f;

    font-size:14px;

    line-height:2;
    letter-spacing:1px;
}

/* Prevent scrolling */

body.menu-open{

    overflow:hidden;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width:991px){

    .navbar{

        padding:22px 0;
    }

    .nav-container{

        width:94%;
    }

    .logo img{

        width:125px;
    }

    .navbar.scrolled .logo img{

        width:115px;
    }

    .nav-menu ul{

        gap:28px;
    }

    .nav-menu a,
    .nav-dropdown-toggle{

        font-size:11px;
        letter-spacing:1.5px;
    }

}

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

@media (max-width:768px){

    .navbar{

        padding:18px 0;
    }

    .nav-container{

        width:92%;
    }

    .logo img{

        width:110px;
    }

    .navbar.scrolled .logo img{

        width:100px;
    }

    .nav-menu{

        display:none;
    }

    .menu-toggle{

        display:block;
        flex-shrink:0;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width:480px){

    .navbar{

        padding:16px 0;
    }

    .logo img{

        width:95px;
    }

    .mobile-menu a,
    .mobile-menu-link{

        font-size:28px;
    }

    .mobile-contact{

        font-size:13px;
    }

}