/*==================================================
    Village Welfare Society
    Premium Navigation Bar
==================================================*/

/*-----------------------------
    Navbar
------------------------------*/

#mainNavbar{

    background:transparent;

    height:var(--navbar-height);

    transition:all var(--transition-normal);

    z-index:var(--z-navbar);

    padding:0;

}

/*-----------------------------
    Container
------------------------------*/

#mainNavbar .container{

    height:100%;

}

/*-----------------------------
    Scroll Effect
------------------------------*/

#mainNavbar.scrolled{

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

    backdrop-filter:blur(12px);

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

    box-shadow:var(--shadow-md);

    height:var(--navbar-scroll-height);

}

/*-----------------------------
    Logo
------------------------------*/

.logo{

    height:70px;

    width:auto;

    transition:all var(--transition-normal);

}

#mainNavbar.scrolled .logo{

    height:58px;

}

/*-----------------------------
    Navigation Links
------------------------------*/

.navbar-nav{

    gap:18px;

}

.nav-link{

    position:relative;

    color:#ffffff;

    font-family:var(--heading-font);

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    padding:12px 6px !important;

    transition:all var(--transition-fast);

}

/* White navbar text */

#mainNavbar.scrolled .nav-link{

    color:var(--secondary-color);

}

/* Hover */

.nav-link:hover{

    color:#ffffff;

}

#mainNavbar.scrolled .nav-link:hover{

    color:var(--primary-color);

}

/* Active */

.nav-link.active{

    color:#ffffff;

}

#mainNavbar.scrolled .nav-link.active{

    color:var(--primary-color);

}

/*-----------------------------
    Underline Animation
------------------------------*/

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:4px;

    width:0;

    height:3px;

    background:var(--accent-color);

    border-radius:30px;

    transition:width .35s ease;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}

/*-----------------------------
    Dropdown
------------------------------*/

.dropdown-menu{

    border:none;

    border-radius:15px;

    box-shadow:var(--shadow-lg);

    padding:12px 0;

    margin-top:20px;

}

.dropdown-item{

    padding:10px 22px;

    font-size:15px;

    transition:all .25s;

}

.dropdown-item:hover{

    background:var(--primary-color);

    color:#ffffff;

}

/*-----------------------------
    Donate Button
------------------------------*/

/* Donate Button */

.donate-btn{

    background:linear-gradient(135deg,#0F62FE,#3B82F6);

    color:#fff;

    padding:14px 32px;

    border-radius:50px;

    font-weight:600;

    font-family:var(--heading-font);

    transition:.35s;

    border:none;

    box-shadow:0 15px 35px rgba(15,98,254,.30);

}

.donate-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 25px 45px rgba(15,98,254,.45);

    color:#fff;

}

/*-----------------------------
    Toggle Button
------------------------------*/

.navbar-toggler{

    border:none;

    box-shadow:none !important;

}

/* White icon */

.navbar-toggler-icon{

    filter:brightness(100);

}



/*-----------------------------
    Mobile
------------------------------*/


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

.mobile-menu-overlay{

    display:none;

}


/*==================================================
        MOBILE ONLY
==================================================*/

@media(max-width:991px){

/*==================================================
        MOBILE SCROLL DONATE BUTTON
==================================================*/

.mobile-scroll-donate{

    display:none;

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:9px 14px;

border-radius:50px;

background:#2563EB;

color:#ffffff;

text-decoration:none;

font-size:12px;

font-weight:700;

    box-shadow:
        0 6px 18px rgba(37,99,235,.25);

}


/*==================================================
        SCROLLED MOBILE HEADER
==================================================*/

body.mobile-scrolled .mobile-scroll-donate{

    display:flex;

}

/*==================================================
        HIDE BOTTOM BAR ON SCROLL
==================================================*/

body.mobile-scrolled::after{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


	/*==================================================
        MOBILE BOTTOM MENU BAR
          ==================================================*/

body::after{

    content:"";

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    height:76px;

    background:rgba(219,234,254,.94);

    backdrop-filter:blur(10px);

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

    box-shadow:
        0 -5px 20px rgba(15,23,42,.08);

    z-index:2190;

    pointer-events:none;

}

    /*----------------------------------------------
            NORMAL MOBILE HEADER
    ----------------------------------------------*/

    #mainNavbar{

        height:72px;

        min-height:72px;

        background:#ffffff;

        box-shadow:
            0 6px 25px rgba(15,23,42,.10);

        z-index:2300;

    }


    #mainNavbar .container{

        min-height:72px;

        position:relative;

    }


    .logo{

        height:52px;

        width:auto;

    }


    #mainNavbar.scrolled .logo{

        height:48px;

    }


    /*----------------------------------------------
            HIDE BOOTSTRAP MOBILE COLLAPSE
    ----------------------------------------------*/

    #navbarContent{

        display:none !important;

    }


    /*----------------------------------------------
            FLOATING MENU BUTTON
    ----------------------------------------------*/

    .mobile-menu-trigger{

        position:fixed;

        left:50%;

        bottom:7px;

        transform:translateX(-50%);

        width:68px;

        height:68px;

        padding:0;

        border:none;

        border-radius:50%;

        background:

            linear-gradient(
                135deg,
                #2563EB,
                #0F62FE
            );

        display:flex;

        align-items:center;

        justify-content:center;

        z-index:2300;

        box-shadow:

            0 10px 28px rgba(15,98,254,.35),

            0 0 0 5px rgba(255,255,255,.95);

        cursor:pointer;

        transition:

        transform .35s ease,

        box-shadow .35s ease,

        width .35s ease,

        height .35s ease,

        top .35s ease,

        bottom .35s ease;

    }


    .mobile-menu-trigger:hover{

    transform:
        translateX(-50%)
        translateY(-2px);

    box-shadow:
        0 14px 32px rgba(15,98,254,.45),
        0 0 0 5px rgba(255,255,255,.95);

}
/*==================================================
        MOBILE MENU — SCROLL STATE
==================================================*/

body.mobile-scrolled .mobile-menu-trigger{

    position:fixed;

    left:50%;

    top:36px;

    bottom:auto;

    transform:
        translate(-50%,-50%);

    width:50px;

    height:50px;

}


/* Hover while scrolled */

body.mobile-scrolled .mobile-menu-trigger:hover{

    transform:
        translate(-50%,-50%)
        scale(1.04);

}

    /*----------------------------------------------
            MENU ICON
    ----------------------------------------------*/

    .menu-icon{

        width:28px;

        height:22px;

        display:flex;

        flex-direction:column;

        justify-content:space-between;

        position:relative;

    }


    .menu-icon span{

        width:100%;

        height:3px;

        border-radius:20px;

        background:#ffffff;

        transition:

            transform .35s ease,

            opacity .25s ease;

    }


    /*----------------------------------------------
            X STATE
    ----------------------------------------------*/

    .mobile-menu-trigger.menu-open
    .menu-icon span:nth-child(1){

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

    }


    .mobile-menu-trigger.menu-open
    .menu-icon span:nth-child(2){

        opacity:0;

    }


    .mobile-menu-trigger.menu-open
    .menu-icon span:nth-child(3){

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

    }


    /*----------------------------------------------
            BUBBLE OVERLAY
    ----------------------------------------------*/

    .mobile-menu-overlay{

        display:block;

        position:fixed;

        inset:0;

        background:

            linear-gradient(
                145deg,
                #0F3B82 0%,
                #1558B0 55%,
                #0B326E 100%
            );

        z-index:2100;

        visibility:hidden;

        opacity:0;

        clip-path:

            circle(
                0% at
                50%
                calc(100% - 57px)
            );

        transition:

            clip-path .75s cubic-bezier(.77,0,.18,1),

            opacity .2s ease,

            visibility 0s linear .75s;

        overflow:hidden;

    }


    /*----------------------------------------------
            OPEN STATE
    ----------------------------------------------*/

    .mobile-menu-overlay.menu-visible{

        visibility:visible;

        opacity:1;

        clip-path:

            circle(
                150%
                at
                50%
                calc(100% - 57px)
            );

        transition:

            clip-path .75s cubic-bezier(.77,0,.18,1),

            opacity .2s ease;

    }


    /*----------------------------------------------
            DECORATIVE BUBBLES
    ----------------------------------------------*/

    .mobile-menu-overlay::before{

        content:"";

        position:absolute;

        width:280px;

        height:280px;

        border-radius:50%;

        background:

            rgba(96,165,250,.16);

        top:-100px;

        right:-90px;

    }


    .mobile-menu-overlay::after{

        content:"";

        position:absolute;

        width:220px;

        height:220px;

        border-radius:50%;

        background:

            rgba(255,255,255,.07);

        bottom:60px;

        left:-100px;

    }


    /*----------------------------------------------
            MENU CONTENT
    ----------------------------------------------*/

    .mobile-menu-inner{

        position:relative;

        z-index:3;

        width:100%;

        height:100%;

        overflow-y:auto;

        padding:

            95px
            28px
            120px;

    }


    .mobile-menu-links{

        width:100%;

        max-width:500px;

        margin:0 auto;

    }


    /*----------------------------------------------
            MENU LINKS
    ----------------------------------------------*/

    .mobile-menu-link{

        width:100%;

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:18px 4px;

        color:#ffffff;

        background:transparent;

        border:none;

        border-bottom:

            1px solid
            rgba(255,255,255,.16);

        text-decoration:none;

        font-family:var(--heading-font);

        font-size:20px;

        font-weight:600;

        text-align:left;

        cursor:pointer;

        transition:

            color .25s ease,

            padding-left .25s ease;

    }


    .mobile-menu-link:hover{

        color:#BAE6FD;

        padding-left:12px;

    }


    /*----------------------------------------------
            SUBMENU
    ----------------------------------------------*/

    .mobile-submenu-trigger{

        appearance:none;

    }


    .mobile-submenu-trigger i{

        font-size:13px;

        transition:transform .3s ease;

    }


    .mobile-menu-group.submenu-open
    .mobile-submenu-trigger i{

        transform:rotate(180deg);

    }


    .mobile-submenu{

        max-height:0;

        overflow:hidden;

        opacity:0;

        transition:

            max-height .4s ease,

            opacity .3s ease;

    }


    .mobile-menu-group.submenu-open
    .mobile-submenu{

        max-height:600px;

        opacity:1;

    }


    .mobile-submenu a{

        display:block;

        padding:12px 18px;

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

        text-decoration:none;

        font-size:16px;

        border-bottom:

            1px solid
            rgba(255,255,255,.08);

    }


    .mobile-submenu a:hover{

        color:#ffffff;

    }


    /*----------------------------------------------
            DONATE BUTTON
    ----------------------------------------------*/

    .mobile-menu-donate{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:10px;

        margin-top:30px;

        padding:16px 24px;

        border-radius:50px;

        background:#ffffff;

        color:#1558B0;

        text-decoration:none;

        font-size:17px;

        font-weight:700;

        box-shadow:

            0 12px 30px rgba(0,0,0,.18);

        transition:

            transform .3s ease,

            box-shadow .3s ease;

    }


    .mobile-menu-donate:hover{

        color:#1558B0;

        transform:translateY(-3px);

        box-shadow:

            0 18px 35px rgba(0,0,0,.25);

    }

}


/*==================================================
        SMALL PHONES
==================================================*/

@media(max-width:390px){

    .mobile-menu-inner{

        padding:
            82px
            22px
            110px;

    }


    .mobile-menu-link{

        padding:15px 4px;

        font-size:18px;

    }


    .mobile-menu-donate{

        margin-top:24px;

        padding:14px 20px;

        font-size:16px;

    }


    .mobile-menu-trigger{

        width:64px;

        height:64px;

        bottom:8px;

    }

}




/* @media(max-width:991px){

#mainNavbar{

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

    backdrop-filter:blur(10px);

}

.nav-link{

    color:var(--secondary-color);

    padding:14px 0 !important;

}

.nav-link:hover{

    color:var(--primary-color);

}

.navbar-collapse{

    padding:25px 0;

}

.nav-buttons{

    margin-top:20px;

}

.logo{

    height:58px;

}

} */

@media(max-width:991px){

    body.mobile-menu-active{

        overflow:hidden;

    }

}