/* ==========================================================
   NAVBAR V2 - D DIGITAL
========================================================== */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:90px;

    display:flex;

    align-items:center;

    z-index:9999;

    background:rgba(9,9,11,.55);

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

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

    transition:.35s ease;

}

.navbar.scrolled{

    height:74px;

    background:rgba(9,9,11,.82);

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

}

.nav-container{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.logo{

    display:flex;

    align-items:center;

    z-index:10001;

}

.logo img{

    height:44px;

    transition:.35s;

}

.navbar.scrolled .logo img{

    height:38px;

}

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

.menu{

    display:flex;

    align-items:center;

    gap:42px;

}

.menu a{

    position:relative;

    color:#D7DBE7;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:linear-gradient(90deg,#3B82F6,#7C3AED);

    transition:.35s;

}

.menu a:hover{

    color:#fff;

}

.menu a:hover::after{

    width:100%;

}

.menu a.active{

    color:#fff;

}

.menu a.active::after{

    width:100%;

}

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

.desktop-cta{

    display:inline-flex;

}

.mobile-cta{

    display:none;

}

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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    padding:0;

    border:0;

    background:none;

    cursor:pointer;

    position:relative;

    z-index:10002;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:2px;

    margin:6px auto;

    background:#FFFFFF;

    border-radius:50px;

    transition:.35s;

}

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

    transform:translateY(8px) rotate(45deg);

}

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

    opacity:0;

}

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

    transform:translateY(-8px) rotate(-45deg);

}

/*==========================================
OVERLAY
==========================================*/

.menu-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9997;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

/*==========================================
TABLET
==========================================*/

@media(max-width:992px){

    .desktop-cta{

        display:none;

    }

    .mobile-cta{

        display:flex;

        justify-content:center;

        width:100%;

        margin-top:25px;

    }

    .menu-toggle{

        display:block;

    }

    .menu{

        position:fixed;

        top:0;

        right:-100%;

        width:340px;

        max-width:90vw;

        height:100vh;

        padding:120px 35px 40px;

        background:#09090B;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:28px;

        transition:.40s ease;

        z-index:9998;

        overflow-y:auto;

        border-left:1px solid rgba(255,255,255,.06);

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

    }

    .menu.active{

        right:0;

    }

    .menu a{

        width:100%;

        font-size:18px;

    }

    .menu a::after{

        display:none;

    }

}

/*==========================================
MOBILE
==========================================*/

@media(max-width:576px){

    .navbar{

        height:78px;

    }

    .navbar.scrolled{

        height:70px;

    }

    .logo img{

        height:38px;

    }

    .navbar.scrolled .logo img{

        height:34px;

    }

    .menu{

        width:100%;

        max-width:100%;

        padding:110px 30px 40px;

    }

}