/* ==========================================

   HEADER

========================================== */



header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

}



/* ==========================================

   NAVBAR

========================================== */



.navbar{



    max-width:1400px;

    margin:0 auto;



    height:90px;



    padding:0 40px;



    display:flex;

    justify-content:space-between;

    align-items:center;



    position:relative;



    background:rgba(8,10,22,.88);

    backdrop-filter:blur(18px);



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



}



/* ==========================================

   LOGO

========================================== */



.logo{



    text-decoration:none;

    color:#fff;



    font-size:34px;

    font-weight:900;



    letter-spacing:1px;

    text-transform:uppercase;



    white-space:nowrap;



}



.logo span{



    color:#4DA3FF;



}



/* ==========================================

   MENU

========================================== */



.menu{



    display:flex;

    align-items:center;



    gap:40px;



    margin:0;

    padding:0;



    list-style:none;



}



.menu li{



    list-style:none;



}



.menu a{



    position:relative;



    color:#fff;



    text-decoration:none;



    font-size:17px;

    font-weight:600;



    transition:.30s;



}



.menu a:hover{



    color:#4DA3FF;



}



.menu a::after{



    content:"";



    position:absolute;



    left:0;

    bottom:-8px;



    width:0;

    height:2px;



    background:#4DA3FF;



    transition:.30s;



}



.menu a:hover::after{



    width:100%;



}



.menu a.active{



    color:#4DA3FF;



}



.menu a.active::after{



    width:100%;



}



/* ==========================================

   BUTTON

========================================== */



.btn-nav{



    display:inline-flex;



    align-items:center;

    justify-content:center;



    padding:15px 34px;



    border-radius:999px;



    text-decoration:none;



    background:linear-gradient(135deg,#FFD54A,#FFB300);



    color:#111;

    font-weight:700;



    transition:.30s;



}



.btn-nav:hover{



    transform:translateY(-3px);



    box-shadow:0 15px 35px rgba(255,193,7,.35);



}

/* ==========================================

   HAMBURGER

========================================== */



.menu-toggle{



    display:none;



    background:none;

    border:none;



    color:#fff;



    font-size:30px;



    cursor:pointer;



    transition:.3s;



}



.menu-toggle:hover{



    color:#4DA3FF;



}



.desktop-btn{



    display:inline-flex;



}



.mobile-btn{



    display:none;



}



/* ==========================================

   TABLET

========================================== */



@media (max-width:1100px){



    .navbar{



        padding:0 25px;



    }



    .menu{



        gap:24px;



    }



}



/* ==========================================

   MOBILE

========================================== */



@media (max-width:900px){



    .navbar{



        height:80px;



    }



    .logo{



        font-size:28px;



    }



    .desktop-btn{



        display:none;



    }



    .menu-toggle{



        display:block;



        z-index:10001;



    }



    .menu{



        position:absolute;



        top:80px;

        left:0;



        width:100%;



        display:none;



        flex-direction:column;



        gap:0;



        background:#08101f;



        padding:20px 0;



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



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



    }



    .menu.show{



        display:flex;



    }



    .menu li{



        width:100%;



        text-align:center;



    }



    .menu a{



        display:block;



        padding:18px 20px;



    }



    .menu a::after{



        display:none;



    }



    .mobile-btn{



        display:block;



        margin-top:15px;



    }



    .mobile-btn .btn-nav{



        display:inline-flex;



    }



}

/* ==========================================

   SMALL PHONES

========================================== */



@media (max-width:600px){



    .navbar{



        padding:0 18px;



    }



    .logo{



        font-size:22px;



    }



    .menu-toggle{



        font-size:28px;



    }



    .menu a{



        font-size:18px;



    }



    .mobile-btn .btn-nav{



        width:220px;



        padding:14px 24px;



    }



}



/* ==========================================

   LARGE DESKTOP

========================================== */



@media (min-width:1600px){



    .navbar{



        max-width:1500px;



    }



}