/* ==========================================
   PREMIUM NAVBAR
========================================== */

.keja-navbar{

    position: fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    padding:18px 0;

    transition:.4s ease;

    background:rgba(10,18,25,.15);

    backdrop-filter:blur(16px);

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

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

}

.keja-navbar.scrolled{

    background:#ffffff;

    padding:12px 0;

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

}

.container{

    max-width:1320px;

}

.navbar-brand{

    font-size:2rem;

    font-weight:700;

    color:#fff !important;

    letter-spacing:-.5px;

}

.navbar-brand span{

    color:var(--secondary);

}

.keja-navbar.scrolled .navbar-brand{

    color:var(--dark) !important;

}

.navbar-nav{

    gap:18px;

}

.nav-link{

    position:relative;

    color:#fff !important;

    font-weight:500;

    font-size:.97rem;

    transition:.3s;

}

.keja-navbar.scrolled .nav-link{

    color:#222 !important;

}

.nav-link:hover{

    color:var(--secondary) !important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.nav-link:hover::after{

    width:100%;

}

.nav-login{

    background:var(--secondary);

    color:#fff;

    border:none;

    border-radius:50px;

    padding:11px 28px;

    font-weight:600;

    transition:.35s;

}

.nav-login:hover{

    transform:translateY(-3px);

    background:#b8870a;

    color:#fff;

    box-shadow:0 15px 30px rgba(212,160,23,.35);

}

.navbar-toggler{

    border:none;

    box-shadow:none !important;

}

.navbar-toggler:focus{

    box-shadow:none;

}
/* ==========================================
   MOBILE NAVBAR
========================================== */

@media(max-width:991px){

    .keja-navbar{

        background:#fff;

    }

    .navbar-brand{

        color:var(--dark)!important;

    }

    .nav-link{

        color:#222!important;

        padding:14px 0;

    }

    .navbar-collapse{

        background:#fff;

        margin-top:20px;

        padding:25px;

        border-radius:20px;

        box-shadow:0 20px 50px rgba(0,0,0,.08);

    }

}