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

:root{

    --gold:#D4AF37;
    --white:#ffffff;
    --text:#f5f5f5;
    --dark:#0b0b0b;

}

#header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    padding:22px 0;

    background:transparent;

    transition:.4s ease;

}

#header.active{

    padding:14px 0;

    background:rgba(8,8,8,.55);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}

#header .container{

    max-width:1400px;

}

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.logo{

    text-decoration:none;

    font-size:34px;

    font-weight:800;

    color:var(--white);

    letter-spacing:2px;

    font-family:'Space Grotesk',sans-serif;

}

.logo span{

    background:linear-gradient(90deg,#FFD9E8,#D4AF37,#fff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:42px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-menu li a{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    position:relative;

    transition:.35s;

}

.nav-menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

}

.nav-menu li a:hover{

    color:var(--gold);

}

.nav-menu li a:hover::after{

    width:100%;

}

.nav-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.theme-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:100px;

    text-decoration:none;

    color:#111;

    background:linear-gradient(135deg,#FFD9E8,#D4AF37);

    font-weight:700;

    transition:.35s;

}

.theme-btn:hover{

    transform:translateY(-3px);

    color:#111;

}

.menu-toggle{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    display:none;

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

    backdrop-filter:blur(15px);

    cursor:pointer;

    position:relative;

}

.menu-toggle span{

    position:absolute;

    left:12px;

    width:24px;

    height:2px;

    background:#fff;

    transition:.35s;

}

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

    top:15px;

}

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

    top:23px;

}

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

    top:31px;

}

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

    transform:rotate(45deg);

    top:23px;

}

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

    opacity:0;

}

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

    transform:rotate(-45deg);

    top:23px;

}

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:#0f0f0f;

    transition:.4s;

    padding:110px 35px;

    z-index:9998;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu ul{

    list-style:none;

    padding:0;

    margin:0;

}

.mobile-menu li{

    margin-bottom:28px;

}

.mobile-menu a{

    text-decoration:none;

    color:#fff;

    font-size:20px;

    transition:.3s;

}

.mobile-menu a:hover{

    color:var(--gold);

}

@media(max-width:991px){

    .nav-menu{

        display:none;

    }

    .theme-btn{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

}

@media(max-width:576px){

    #header{

        padding:18px 0;

    }

    .logo{

        font-size:26px;

    }

    .mobile-menu{

        width:100%;

    }

}