/* ==========================================================
   NAVIGATION
========================================================== */

.navbar{

    position:absolute;

    top:0rem;

    left:0;

    width:100%;

    z-index:1000;

}
.navbar__wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    padding:1rem 0rem;

    border-radius:1rem;

    /* background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

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

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

    box-shadow:0 10px 35px rgba(0,0,0,.12); */
    transition:.35s ease;

}
.navbar.scrolled .navbar__wrapper{

    padding:.5rem .5rem;

}
.navbar__logo img{

    width:100px;
     transition:.3s;

}

.logo{

    position: relative;
    transition: opacity .3s ease;

}
.logo--colored{
    display: none;

}

.navbar.scrolled .logo--white{

    display: none;

}
.navbar.scrolled .logo--colored{
    display: block;
}



.navbar.scrolled .navbar__logo img{

   
    object-fit: cover;

}
.navbar__menu{

    display:flex;

    align-items:center;

    gap:2rem;

    list-style:none;

}
.navbar__menu a{

    position:relative;

    color: var(--clr-light);

    text-decoration:none;

    font-weight:500;

    transition:.3s ease;

}
.navbar__menu a:hover{

    color: var(--clr-secondary);

}
.navbar__menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--clr-secondary);

    transition:.3s;

}

.navbar__menu a:hover::after{

    width:100%;

}
.navbar__actions{

    display:flex;

    align-items:center;

    gap:1rem;

}
.navbar__toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    cursor:pointer;

    padding:0;

}
.navbar__toggle span{

    display:block;

    width:26px;

    height:2px;

    margin:6px auto;

    background:#ffffff;

    transition:.35s;

}
.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:min(340px,100%);

    height:100vh;

    background:#ffffff;

    z-index:1100;

    transition:.45s ease;

}
.mobile-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:1050;
    backdrop-filter:blur(3px);

}
.mobile-menu.active{

    right:0;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}
.mobile-menu__nav li{

    opacity:0;

    transform:translateX(25px);

    transition:.35s ease;

}
.mobile-menu.active .mobile-menu__nav li{

    opacity:1;

    transform:none;

}
.mobile-menu.active li:nth-child(1){transition-delay:.08s;}
.mobile-menu.active li:nth-child(2){transition-delay:.12s;}
.mobile-menu.active li:nth-child(3){transition-delay:.16s;}
.mobile-menu.active li:nth-child(4){transition-delay:.20s;}
.mobile-menu.active li:nth-child(5){transition-delay:.24s;}
.mobile-menu.active li:nth-child(6){transition-delay:.28s;}
/* ==========================================================
   HAMBURGER ANIMATION
========================================================== */

.navbar__toggle.active span:nth-child(1){

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

}

.navbar__toggle.active span:nth-child(2){

    opacity:0;

}

.navbar__toggle.active span:nth-child(3){

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

}
.mobile-menu{

    display:flex;

    flex-direction:column;

    padding:2rem;

}
.mobile-menu__header{

    margin-bottom:3rem;

}

.mobile-menu__header img{

    width:170px;

}
.mobile-menu__nav{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}
.mobile-menu__nav a{

    display:block;

    padding:1rem 0;

    color:#040158;

    text-decoration:none;

    font-size:1.1rem;

    font-weight:600;

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

    transition:.3s;

}

.mobile-menu__nav a:hover{

    color:#15ADEA;

}
.mobile-menu__cta{

    margin-top:2rem;

}
.mobile-menu__cta{

    margin-top:2rem;

}

/* Sticky onscroll*/

.navbar.scrolled{

    position:fixed;

    top:1rem;

    left:0;

    animation:navbarFade .3s ease;

}
.navbar.scrolled .navbar__wrapper{

    background:#ffffff;

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

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

}
.navbar.scrolled .navbar__menu a{

    color:var(--text-dark);

}

.navbar.scrolled .navbar__toggle span{

    background:#040158;

}
.navbar__menu a.active{

    color:#06E7AB;

}

.navbar__menu a.active::after{

    width:100%;

}
.mobile-menu__nav a.active{

    color:#15ADEA;

    font-weight:700;

}

@media(max-width:992px){

    .navbar__menu{

        display:none;

    }

    .navbar .btn{

        display:none;

    }

    .navbar__toggle{

        display:block;

    }

}

@media(max-width:430px){
   .navbar{
    top: .5rem;
   } 
}