/*=========================================================
                    NAVBAR.CSS
    Manasadwip Ramakrishna Mission Praktani Samsad
==========================================================*/


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

.custom-navbar{
    background:var(--primary);
    position:sticky;
    top:0;
    z-index:999;
    padding:0;
    transition:.35s ease;
}


/*=========================================================
                SHADOW ON SCROLL
==========================================================*/

.custom-navbar.navbar-scrolled{
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}


/*=========================================================
                NAVBAR CONTAINER
==========================================================*/

.custom-navbar .container{
    position:relative;
}


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

.mobile-logo{
    width:42px;
    height:42px;
    object-fit:contain;
}


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

.custom-navbar .navbar-collapse{
    justify-content:center;
}

.custom-navbar .navbar-nav{
    gap:5px;
}

.custom-navbar .nav-item{
    position:relative;
}

.custom-navbar .nav-link{

    color:#fff;
    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;
    padding:18px 16px;
    text-transform:uppercase;
    transition:.30s;
    position:relative;

}

.custom-navbar .nav-link:hover{

    color:var(--secondary);

}

.custom-navbar .nav-link.active{

    color:var(--secondary);

}


/*=========================================================
                    UNDERLINE
==========================================================*/

.custom-navbar .nav-link::after{

    content:"";
    position:absolute;
    left:16px;
    bottom:10px;

    width:0;
    height:2px;

    background:var(--secondary);

    transition:.30s;

}

.custom-navbar .nav-link:hover::after,
.custom-navbar .nav-link.active::after{

    width:40%;

}


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

.navbar-toggler{

    border:none;
    color:#fff;
    padding:6px;
    font-size:28px;

}

.navbar-toggler:focus{

    box-shadow:none;

}


/*=========================================================
                    OFFCANVAS
==========================================================*/

.offcanvas{

    width:310px;

}

.offcanvas-header{

    border-bottom:1px solid #ececec;

    padding:18px;

}

.mobile-brand{

    display:flex;
    align-items:center;
    gap:14px;

}

.offcanvas-logo{

    width:55px;
    height:55px;
    object-fit:contain;

}

.mobile-brand h5{

    margin:0;
    color:var(--primary);
    font-size:18px;
    font-weight:700;

}

.mobile-brand small{

    color:#777;

}

.btn-close{

    box-shadow:none;

}


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

.mobile-menu{

    margin:0;
    padding:0;
    list-style:none;

}

.mobile-menu li{

    border-bottom:1px solid #ececec;

}

.mobile-menu li:last-child{

    border-bottom:none;

}

.mobile-menu a{

    display:flex;
    align-items:center;
    gap:15px;

    padding:16px 5px;

    color:#333;
    font-weight:500;

    transition:.30s;

}

.mobile-menu a:hover{

    color:var(--primary);
    padding-left:12px;

}

.mobile-menu i{

    width:22px;
    color:var(--primary);
    text-align:center;

}


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

.mobile-buttons{

    margin-top:20px;

}

.mobile-buttons .btn{

    border-radius:8px;
    font-weight:600;
    padding:12px;

}


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

@media(max-width:991px){

.custom-navbar{

    padding:8px 0;

}

.custom-navbar .navbar-collapse{

    display:none !important;

}

}


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

@media(min-width:992px){

.mobile-logo{

    display:none;

}

.navbar-toggler{

    display:none;

}

.offcanvas{

    display:none;

}

}


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

@media(max-width:576px){

.mobile-logo{

    width:38px;
    height:38px;

}

.navbar-toggler{

    font-size:24px;

}

.offcanvas{

    width:280px;

}

.mobile-menu a{

    font-size:15px;
    padding:15px 4px;

}

.mobile-buttons .btn{

    font-size:14px;

}

}