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

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

    background:rgba(11,18,32,0.92);
    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(212,175,55,0.15);

    box-shadow:0 5px 25px rgba(0,0,0,0.25);
}

.nav{
    max-width:1400px;
    margin:auto;

    height:90px;

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

    padding:0 40px;
}

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

.logo{
    display:flex;
    align-items:center;
    gap:15px;

    text-decoration:none;
}

.logo img{
    height:125px;
    width:auto;

    /* transform:scale(1.2); */
}
.logo:hover img{
    transform:scale(1.05);
}

.logo-text h2{
    color:#ffffff;

    font-size:26px;
    font-weight:800;

    letter-spacing:1px;

    margin:0;
}

.logo-text p{
    color:#D4AF37;

    font-size:13px;

    letter-spacing:2px;

    margin-top:2px;
}

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

.menu{
    display:flex;
    align-items:center;
    gap:10px;

    list-style:none;
}

.menu li{
    list-style:none;
}

.menu li a{

    position:relative;

    display:block;

    color:#ffffff;

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

    text-decoration:none;

    padding:12px 22px;

    border-radius:30px;

    transition:.3s;
}

/* Hover */

.menu li a:hover{

    color:#D4AF37;

    background:rgba(212,175,55,0.08);
}

/* Active */

.menu li a.active{

    background:#D4AF37;

    color:#0B1220;

    font-weight:700;

    box-shadow:
    0 0 20px rgba(212,175,55,0.35);
}

/* Gold Line */

.menu li a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:4px;

    width:0;

    height:2px;

    background:#D4AF37;

    transition:.3s;

    transform:translateX(-50%);
}

.menu li a:hover::after{

    width:50%;
}

/* ===========================
   MOBILE
=========================== */
@media (max-width: 768px){

    .nav{
        padding: 12px 15px;
    }

    .logo{
        display:flex;
        align-items:center;
        gap:10px;
        flex:1;
    }

    .logo img{
        width:100px !important;
        height:auto;
        display:block;
    }

    .logo-text h2{
        font-size:18px !important;
        line-height:1.1;
        margin:0;
    }

    .logo-text p{
        font-size:11px !important;
        margin-top:2px;
        letter-spacing:2px;
    }

    .menu-toggle{
        font-size:30px;
        margin-left:auto;
    }
}
.menu-toggle{
    display:none;

    color:white;

    font-size:28px;

    cursor:pointer;
}

@media(max-width:768px){

    .nav{
        padding:0 20px;
        height:80px;
    }

    .logo img{
        height:60px;
    }

    .logo-text h2{
        font-size:20px;
    }

    .logo-text p{
        font-size:11px;
    }

    .menu{

        position:fixed;

        top:80px;
        right:-100%;

        width:280px;
        height:100vh;

        background:#0B1220;

        flex-direction:column;

        align-items:flex-start;

        padding:40px 25px;

        transition:.4s;
    }

    .menu.active{
        right:0;
    }

    .menu li{
        width:100%;
    }

    .menu li a{
        width:100%;
    }

    .menu-toggle{
        display:block;
    }
}
.menu-toggle{
    display:none;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

@media(max-width:768px){

    .menu-toggle{
        display:block;
    }

    .menu{
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        background:#081a33;
        flex-direction:column;
        gap:20px;
        padding:25px 0;
        display:none;
        text-align:center;
        box-shadow:0 10px 30px rgba(0,0,0,.3);
    }

    .menu.active{
        display:flex;
    }

    .nav{
        position:relative;
    }

    .logo-text h2{
        font-size:24px;
    }

    .logo img{
        width:60px;
    }
}