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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:84px;

    gap:2rem;

}

.header.scrolled{

    backdrop-filter:blur(20px);

    background:rgba(6,11,22,.78);

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

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

}

/* ==========================================================
   Logo
========================================================== */

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

    text-decoration:none;

}

.logo img{

    display:block;

    width:auto;

    height:44px;

    max-width:180px;

    object-fit:contain;

}

@media(max-width:768px){

    .logo img{

        height:36px;

    }

}

/* ==========================================================
   Navigation
========================================================== */

.navbar{

    display:flex;

    align-items:center;

    gap:2.8rem;

}

.navbar a{

    position:relative;

    color:var(--text-secondary);

    font-size:.95rem;

    font-weight:600;

    transition:.3s;

}

.navbar a:hover{

    color:#ffffff;

}

/* underline */

.navbar a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    right:0;

    width:0;

    height:2px;

    border-radius:99px;

    background:var(--gradient-primary);

    transition:.3s;

}

.navbar a:hover::after{

    width:100%;

}

/* ==========================================================
   CTA
========================================================== */

.header .btn{

    flex-shrink:0;

}

/* ==========================================================
   Mobile Menu Button
========================================================== */

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

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

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

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:24px;

    height:2px;

    background:#ffffff;

    position:relative;

}

.menu-toggle span::before,

.menu-toggle span::after{

    content:"";

    position:absolute;

    left:0;

    width:24px;

    height:2px;

    background:#ffffff;

}

.menu-toggle span::before{

    top:-7px;

}

.menu-toggle span::after{

    top:7px;

}

/* ==========================================================
   Header Blur Line
========================================================== */

.header::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    opacity:0;

    transition:.35s;

}

.header.scrolled::after{

    opacity:1;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1100px){

    .navbar{

        gap:2rem;

    }

}

@media (max-width:992px){

    .navbar{

        display:none;

    }

    .header .btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}

@media (max-width:768px){

    .header .container{

        height:78px;

    }

}
/* Mobile Menu */

.mobile-menu{

    position:fixed;

    top:0;

    left:0;

    width:320px;

    max-width:85vw;

    height:100vh;

    background:#08111f;

    padding:8rem 2rem;

    display:flex;

    flex-direction:column;

    gap:2rem;

    transform:translateX(-100%);

    transition:.45s cubic-bezier(.22,1,.36,1);

    z-index:2000;

    box-shadow:20px 0 60px rgba(0,0,0,.4);

}

.mobile-menu.active{

    transform:none;

}

.mobile-menu a{

    font-size:1.15rem;

    color:white;

}

.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1900;

}

.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;

}

/* hamburger animation */

.menu-toggle.active span{

    background:transparent;

}

.menu-toggle.active span::before{

    top:0;

    transform:rotate(45deg);

}

.menu-toggle.active span::after{

    top:0;

    transform:rotate(-45deg);

}

/* hide header */

.header.hide{

    transform:translateY(-100%);

}

/* active nav */

.navbar a.active{

    color:white;

}

.navbar a.active::after{

    width:100%;

}