/*==================================================
 UNIVERSAL SEVA SANKALP HELPING FOUNDATION
 Topbar CSS
 Version : 1.0
==================================================*/

/*=========================================
 TOPBAR
=========================================*/

.topbar{
    position:relative;
    background:#0d6efd;
    color:#ffffff;
    font-size:14px;
    z-index:1040;
    overflow:hidden;
}

.topbar::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.08),
        transparent,
        rgba(255,255,255,.05)
    );
    pointer-events:none;
}

.topbar .container{
    position:relative;
    z-index:2;
}

.topbar .row{
    min-height:52px;
}

/*=========================================
 LEFT SECTION
=========================================*/

.topbar-left{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
}

.topbar-left a,
.topbar-left span{
    display:flex;
    align-items:center;
    color:#ffffff;
    text-decoration:none;
    font-weight:500;
    transition:all .35s ease;
}

.topbar-left a:hover{
    color:#FFD54F;
}

.topbar-left i{
    width:18px;
    margin-right:8px;
    text-align:center;
    color:#FFD54F;
    font-size:15px;
}

/*=========================================
 RIGHT SECTION
=========================================*/

.topbar-right{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:18px;
}

/*=========================================
 SOCIAL CONTAINER
=========================================*/

.topbar-social{
    display:flex;
    align-items:center;
    gap:10px;
}

/*=========================================
 SOCIAL ICONS
=========================================*/

.topbar-social a{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#ffffff;
    text-decoration:none;
    transition:all .35s ease;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.topbar-social a:hover{
    background:#ffffff;
    color:#0d6efd;
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.18);
}

.topbar-social i{
    font-size:15px;
}

/*=========================================
 DONATE BUTTON
=========================================*/

.topbar-donate{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 20px;
    background:#FFD54F;
    color:#212529;
    text-decoration:none;
    font-weight:600;
    border-radius:50px;
    transition:all .35s ease;
    white-space:nowrap;
    box-shadow:0 8px 20px rgba(255,213,79,.25);
}

.topbar-donate i{
    font-size:15px;
}

.topbar-donate:hover{
    background:#ffffff;
    color:#0d6efd;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
}

/*=========================================
 HOVER EFFECTS
=========================================*/

.topbar-left a:hover i{
    transform:scale(1.15);
}

.topbar-left i,
.topbar-social a,
.topbar-donate,
.topbar-donate i{
    transition:all .35s ease;
}

/*=========================================
 DIVIDERS
=========================================*/

.topbar-left a:not(:last-child){
    position:relative;
}

.topbar-left a:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-14px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:18px;
    background:rgba(255,255,255,.25);
}

/*=========================================
 FOCUS STATES
=========================================*/

.topbar a:focus-visible{
    outline:2px solid #FFD54F;
    outline-offset:3px;
    border-radius:6px;
}

/*=========================================
 SMOOTH TRANSITIONS
=========================================*/

.topbar,
.topbar *{
    transition:
        background-color .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease,
        opacity .35s ease;
}

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

/*==============================
 1200px
==============================*/

@media (max-width:1199.98px){

    .topbar-left{
        gap:18px;
    }

    .topbar-right{
        gap:15px;
    }

}

/*==============================
 992px
==============================*/

@media (max-width:991.98px){

    .topbar{
        padding:10px 0;
    }

    .topbar .row{
        row-gap:12px;
    }

    .topbar-left{
        justify-content:center;
        gap:15px;
    }

    .topbar-right{
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }

}

/*==============================
 768px
==============================*/

@media (max-width:767.98px){

    .topbar{
        display:none;
    }

}

/*==============================
 OPTIONAL MOBILE VERSION
 Remove display:none above if
 you want to show the topbar
 on mobile devices.
==============================*/

@media (max-width:575.98px){

    .topbar-left{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .topbar-left a,
    .topbar-left span{
        justify-content:center;
        font-size:13px;
    }

    .topbar-left a::after{
        display:none;
    }

    .topbar-right{
        flex-direction:column;
        gap:12px;
    }

    .topbar-social{
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
    }

    .topbar-social a{
        width:34px;
        height:34px;
        font-size:14px;
    }

    .topbar-donate{
        width:100%;
        justify-content:center;
        padding:12px 18px;
        font-size:14px;
    }

}

/*==================================================
 ACCESSIBILITY
==================================================*/

@media (prefers-reduced-motion:reduce){

    .topbar *,
    .topbar *::before,
    .topbar *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}

/*==================================================
 END TOPBAR CSS
==================================================*/