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

.site-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    transition:.35s ease;
	background:transparent;
}

.site-header.scrolled{
    position:fixed;
    background:rgba(7,7,7,.92);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(212,175,55,.15);
}

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

.container{
    width:100%;
    max-width:1380px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}

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

.header-inner{

    display:grid;

     grid-template-columns:260px 1fr 200px;

    align-items:center;

    height:78px;
	gap:40px;

}

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

.site-logo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    text-decoration:none;
    font-family:"Cormorant Garamond",serif;
    font-size:34px;
    font-weight:700;
    color:#fff;
}

.site-logo span{
    color:#D4AF37;
}

.site-logo strong{

    color:#D4AF37;

    font-weight:700;

}

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

.main-nav{

    justify-self:center;

}

.nav-list{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:36px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-link{

    position:relative;

    text-decoration:none;

    color:#ffffff;

    font-size:16px;

    font-weight:500;

    transition:.3s;

}

.nav-link:hover{

    color:#D4AF37;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:#D4AF37;

    transition:.3s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}

.nav-link.active{

    color:#D4AF37;

}

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

.header-action{

    justify-self:end;

}

.btn-whatsapp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 28px;

    border-radius:50px;

    background:#7A1632;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.btn-whatsapp:hover{

    background:#D4AF37;

    color:#111;

}

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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:2px;

    margin:6px auto;

    background:#fff;

    transition:.3s;

}

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

@media (max-width:991px){
.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:rgba(7,7,7,.92);

    backdrop-filter:blur(16px);

    z-index:10000;

}
    .header-inner{
        grid-template-columns:1fr auto;
        height:72px;
        gap:0;
    }

    .site-logo{
        font-size:30px;
		 position:relative;

    z-index:10001;
    }

    /* Desktop WhatsApp Hide */

    .header-action{
        display:none;
    }

    /* Hamburger Show */

    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        width:44px;
        height:44px;
        background:none;
        border:none;
        cursor:pointer;
        padding:0;
        z-index:10000;
    }

    .menu-toggle span{
        width:24px;
        height:2px;
        margin:3px 0;
        background:#ffffff;
        transition:.35s ease;
    }

    /* Mobile Menu */

    .main-nav{

        position:fixed;

        top:0;
        right:-100%;

        width:300px;
        max-width:85%;

        height:100vh;

        background:#111111;

        padding:70px 30px 40px;

        transition:right .35s ease;

        z-index:9999;

        display:block;
		   overflow-y:auto;

    }

    .main-nav.active{
        right:0;
    }

    .nav-list{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        margin:0;
        padding:0;
    }

    .nav-list li{
        width:100%;
        list-style:none;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-link{
        display:block;
        width:100%;
        padding:18px 0;
        font-size:17px;
    }

    /* Overlay */

    .mobile-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.6);
        opacity:0;
        visibility:hidden;
        transition:.35s;
        z-index:9998;
    }

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

    body.menu-open{
        overflow:hidden;
    }

}