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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Open Sans',sans-serif;
    background:#040b14;
    color:#fff;
    overflow-x:hidden;
}

.container{
    width:92%;
    max-width:1450px;
    margin:auto;
}

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

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:9999;

    background:rgba(6,18,15,.35);

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

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

    transition:.4s;

}

.header .container{

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

    height:90px;

}

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

.logo{

    display:flex;

    align-items: right;

    text-decoration:none;

}

.logo img{

    height:70px;

    width:auto;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.05);

}

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

.navbar ul{

    display:flex;
    align-items:center;

    list-style:none;

    gap:30px;

}

.navbar ul li{

    position:relative;

}

.dropdown>a i{
    margin-left:6px;
    font-size:10px;
    transition:.3s;
}

.dropdown:hover>a i{
    transform:rotate(180deg);
}

.dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    width:220px;

    background:#1a1f24;

    border-top:4px solid #8cf8c0;

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s ease;

    z-index:9999;

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

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    width:100%;

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

}

.dropdown-menu li:last-child{

    border-bottom:none;

}

.dropdown-menu li a{

    display:block;

    color:#fff;

    padding:16px 22px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

    text-decoration:none;

}

.dropdown-menu li a:hover{

    background:#24313a;

    color:#8cf8c0;

    padding-left:30px;

}

.navbar ul li a{

    text-decoration:none;

    color:#fff;

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

    text-transform:uppercase;

    transition:.35s;

    white-space:nowrap;

}

.navbar ul li a:hover,
.navbar ul li a.active{

    color:#8affc1;

}

.navbar ul li::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:0;
    height:2px;

    background:#8affc1;

    transition:.35s;

}

.navbar ul li:hover::after{

    width:100%;

}

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

.header-btn{

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

    padding:13px 28px;

    text-decoration:none;

    color:#04120d;
    background:#8affc1;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.header-btn:hover{

    transform:translateY(-3px);

    background:#fff;

}

/*==========================
HAMBURGER
==========================*/

.menu-toggle{

    display:none;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}

/*==========================
STICKY
==========================*/

.header.sticky{

    background:#06120f;

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

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:1200px){

    .navbar ul{

        gap:20px;

    }

    .navbar ul li a{

        font-size:14px;

    }

}

@media(max-width:991px){

/*==========================
MOBILE DROPDOWN FIX
==========================*/

.dropdown{
    display:block;
    width:100%;
}

/* DEFAULT CLOSED */
.navbar .dropdown > .dropdown-menu,
.navbar .dropdown:hover > .dropdown-menu{

    position:static !important;

    display:none !important;

    width:100%;

    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;

    background:#1b2026;

    border:none;
    border-top:3px solid #8cf8c0;

    box-shadow:none;

    margin:0;
    padding:0;

    transition:none;

}

/* ONLY ACTIVE OPEN */
.navbar .dropdown.active > .dropdown-menu,
.navbar .dropdown.active:hover > .dropdown-menu{

    display:flex !important;

    flex-direction:column;

}

.dropdown-menu li{

    display:block;

    width:100%;

    min-height:auto;

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

}

.dropdown-menu li:last-child{

    border-bottom:none;

}

.dropdown-menu li a{

    display:block;

    width:100%;

    padding:16px 32px !important;

    color:#fff;

    font-size:14px;

    font-weight:600;

    border-bottom:none !important;

}

.dropdown-menu li a:hover{

    background:#24313a;

    color:#8cf8c0;

    padding-left:40px !important;

    transform:none;

}

/* ARROW */

.dropdown > .dropdown-toggle i{

    margin-left:7px;

    transition:.3s;

}

/* DESKTOP HOVER EFFECT MOBILE PAR OFF */

.dropdown:hover > .dropdown-toggle i{

    transform:none;

}

/* ACTIVE ARROW */

.dropdown.active > .dropdown-toggle i,
.dropdown.active:hover > .dropdown-toggle i{

    transform:rotate(180deg);

}

.dropdown-toggle{

    cursor:pointer;

}
    
        
    .menu-toggle{

        display:block;

    }

    .header-btn{

        display:none;

    }

    .navbar{

        position:absolute;

        top:90px;
        left:0;

        width:100%;

        background:#06120f;

        display:none;

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

    }

    .navbar.active{

        display:block;

    }

   .navbar > ul{

        display:flex;

        flex-direction:column;

        gap:0;

        width:100%;

    }       

    .navbar > ul > li{

        width:100%;

    }

    .navbar ul li::after{

        display:none;

    }

    .navbar > ul > li > a{

        display:block;

        padding:18px 25px;

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

    }

    

}

@media(max-width:576px){
    
    .logo img{

        height:55px;

    }

    .logo{

        font-size:22px;

    }

    .header .container{

        height:75px;

    }

    .navbar{

        top:75px;

    }

}