/* Navbar styles */
/* =========================
   NAVBAR
========================= */

.navbar{
    padding:12px 0;
    background:#ffffff !important;
    backdrop-filter:blur(10px);
    transition:.3s;
    z-index:999;
}

.logo-img{
    height:90px;
    width:auto;
    transition:.3s;
}

/* =========================
   NAV LINKS
========================= */

.navbar-nav{
    align-items:center;
}

.nav-link{
    font-size:15px;
    font-weight:500;
    color:#222 !important;
    margin-left:12px;
    position:relative;
    transition:.3s;
}

/* Hover Effect */

.nav-link:hover{
    color:#22c55e !important;
}

/* Active Link */

.nav-link.active{
    color:#22c55e !important;
}

/* Underline Animation */

.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:#22c55e;
    transition:.3s;
}

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

/* =========================
   TOGGLER
========================= */

.navbar-toggler{
    border:none;
    box-shadow:none !important;
}

.navbar-toggler:focus{
    box-shadow:none !important;
}

/* =========================
   STICKY NAVBAR
========================= */

.sticky-top{
    box-shadow:
    0 5px 20px rgba(0,0,0,.08);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

    .navbar{
        padding:10px 0;
    }

    .logo-img{
        height:60px;
    }

    .navbar-nav{
        padding-top:15px;
    }

    .nav-link{
        margin-left:0;
        padding:10px 0;
    }

    .nav-link::after{
        display:none;
    }
}

@media(max-width:576px){

    .logo-img{
        height:50px;
    }

}