/*==========================================================
ENTITY ENTERPRISES
Navbar
==========================================================*/

#navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    z-index:999;

    transition:.45s cubic-bezier(.16,1,.3,1);

}

#navbar.scrolled{

    height:78px;

    backdrop-filter:blur(20px);

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

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

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

    box-shadow:

    0 15px 40px rgba(0,0,0,.04);

}


/*==========================================================
Wrapper
==========================================================*/

.nav-wrapper{

    width:min(92%,1400px);

    height:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


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

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.logo img{

    height:36px;

    width:auto;

    transition:.45s;

}

#navbar.scrolled .logo img{

    height:30px;

}

.logo-text{

    font-size:1.15rem;

    font-weight:800;

    color:var(--clr-heading);

    letter-spacing:0.08em;

    text-transform:uppercase;

    transition:color 0.35s, font-size 0.35s;

}

.logo-text-sub{

    font-weight:300;

    color:#666;

}

#navbar.scrolled .logo-text{

    font-size:1.05rem;

}


/*==========================================================
Links
==========================================================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:54px;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    position:relative;

    color:var(--clr-heading);

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:.35s;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:100%;

    height:1px;

    background:var(--clr-primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s cubic-bezier(.16,1,.3,1);

}

.nav-links a:hover{

    color:var(--clr-primary);

}

.nav-links a:hover::after{

    transform:scaleX(1);

}

.nav-links a.active{

    color:var(--clr-primary);

}

.nav-links a.active::after{

    transform:scaleX(1);

}


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

.nav-cta{

    display:flex;

    align-items:center;

    gap:18px;

}


/*==========================================================
Mobile Toggle
==========================================================*/

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    position:relative;

    cursor:pointer;

}

.menu-toggle span{

    position:absolute;

    left:50%;

    width:24px;

    height:2px;

    background:var(--clr-primary);

    transition:.35s;

    transform:translateX(-50%);

}

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

    top:14px;

}

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

    top:22px;

}

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

    top:30px;

}


/*==========================================================
Opened
==========================================================*/

#navbar.mobile-open .menu-toggle span:nth-child(1){

    transform:

    translateX(-50%)

    rotate(45deg);

    top:22px;

}

#navbar.mobile-open .menu-toggle span:nth-child(2){

    opacity:0;

}

#navbar.mobile-open .menu-toggle span:nth-child(3){

    transform:

    translateX(-50%)

    rotate(-45deg);

    top:22px;

}


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

@media(max-width:992px){

.menu-toggle{

display:block;

z-index:1002;

}

.nav-links{

position:fixed;

left:0;

top:0;

width:100%;

height:100vh;

background:#ffffff;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:45px;

transform:translateY(-100%);

transition:.6s cubic-bezier(.16,1,.3,1);

z-index:1000;

}

#navbar.mobile-open .nav-links{

transform:translateY(0);

}

.nav-links a{

font-size:1.3rem;

}

.nav-cta{

display:none;

}

.nav-wrapper > nav {
    transform: none !important;
    animation: none !important;
}

#navbar.mobile-open.has-dark-hero .nav-links a {
    color: #071c3d !important;
}

}


/*==========================================================
Desktop Hover Line
==========================================================*/

@media(min-width:993px){

.nav-links:hover a{

opacity:.45;

}

.nav-links a:hover{

opacity:1;
position: relative;
transition: color .35s ease;

}
.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:#0D3B8C;
    transition:width .35s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after{
    width:100%;
}

}


/*==========================================================
Progress Indicator
==========================================================*/

#navbar::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(13,35,70,.12),

    transparent

    );

    opacity:0;

    transition:.4s;

}

#navbar.scrolled::after{

    opacity:1;

}


/*==========================================================
Animation
==========================================================*/

.nav-wrapper>*{

    animation:navFade .8s ease both;

}

@keyframes navFade{

from{

opacity:0;

transform:translateY(-25px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==========================================================

PREMIUM NAVBAR

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

.navbar{

transition:.45s ease;

}

.navbar-scrolled{

background:rgba(6,22,41,.82);

backdrop-filter:blur(20px);

padding:12px 0;

box-shadow:

0 10px 35px rgba(0,0,0,.15);

}

.nav-link{

position:relative;

transition:.3s;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#2F80ED;

transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

width:100%;

}

.nav-cta{

padding:14px 28px;

border-radius:999px;

background:#2F80ED;

color:white;

font-weight:600;

transition:.35s;

}

.nav-cta:hover{

transform:translateY(-2px);

background:#1f6fe0;

}

/*==========================================================
Dark Hero Navbar Variant
==========================================================*/

#navbar.has-dark-hero:not(.scrolled) .nav-links a {
    color: rgba(255, 255, 255, 0.85);
}

#navbar.has-dark-hero:not(.scrolled) .nav-links a::after {
    background: rgba(255, 255, 255, 0.6);
}

#navbar.has-dark-hero:not(.scrolled) .nav-links a:hover {
    color: white;
}

#navbar.has-dark-hero:not(.scrolled) .nav-links a.active {
    color: white;
}

#navbar.has-dark-hero:not(.scrolled) .logo img {
    filter: brightness(0) invert(1);
}

#navbar.has-dark-hero:not(.scrolled) .logo-text {
    color: white;
}

#navbar.has-dark-hero:not(.scrolled) .logo-text-sub {
    color: rgba(255, 255, 255, 0.6);
}

#navbar.has-dark-hero:not(.scrolled) .menu-toggle span {
    background: white;
}