/**
 * ============================================================================
 * Shivanya Healthcare
 * File      : assets/css/footer.css
 * Purpose   : Website Footer Styles
 * Bootstrap : 5.x
 * Version   : 1.0.0
 * ============================================================================
 */


/* ==========================================================================
   Main Footer
   ========================================================================== */

.site-footer {

    background: #0f172a;

    color: #ffffff;

    padding: 3rem 0 0;

    font-size: .95rem;

}


/* ==========================================================================
   Footer Headings
   ========================================================================== */

.site-footer h5 {

    color: #ffffff;

    font-weight: 600;

    margin-bottom: 1rem;

}


/* ==========================================================================
   Footer Paragraph
   ========================================================================== */

.site-footer p {

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

    line-height: 1.8;

    margin-bottom: 1rem;

}


/* ==========================================================================
   Footer Links
   ========================================================================== */

.site-footer ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.site-footer ul li {

    margin-bottom: .60rem;

}

.site-footer a {

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

    text-decoration: none;

    transition: all .20s ease;

}

.site-footer a:hover {

    color: #ffffff;

    padding-left: 4px;

}


/* ==========================================================================
   Contact List
   ========================================================================== */

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: .75rem;

}

.footer-contact i {

    color: #0d6efd;

    margin-top: 4px;

    min-width: 18px;

}


/* ==========================================================================
   Social Icons
   ========================================================================== */

.footer-social {

    display: flex;

    gap: .75rem;

    margin-top: 1rem;

}

.footer-social a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color: #ffffff;

    transition: all .25s ease;

}

.footer-social a:hover {

    background: #0d6efd;

    color: #ffffff;

}

/* ==========================================================================
   Footer Trust Badges
   ========================================================================== */

.footer-badges {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;

    margin-top: 1rem;

}

.footer-badge {

    display: inline-flex;

    align-items: center;

    gap: .50rem;

    padding: .50rem .75rem;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: .50rem;

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

    color: #ffffff;

    font-size: .875rem;

}

.footer-badge i {

    color: #0d6efd;

}


/* ==========================================================================
   Payment Methods
   ========================================================================== */

.footer-payments {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;

    margin-top: 1rem;

}

.footer-payments img {

    height: 32px;

    width: auto;

}


/* ==========================================================================
   Copyright Bar
   ========================================================================== */

.footer-bottom {

    margin-top: 2.5rem;

    padding: 1rem 0;

    border-top: 1px solid rgba(255,255,255,.10);

    background: rgba(0,0,0,.15);

    font-size: .90rem;

}

.footer-bottom p {

    margin: 0;

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

}

.footer-bottom a {

    color: #ffffff;

}


/* ==========================================================================
   Scroll To Top
   ========================================================================== */

.scroll-top {

    position: fixed;

    right: 20px;

    bottom: 20px;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: none;

    align-items: center;

    justify-content: center;

    background: #0d6efd;

    color: #ffffff;

    border: none;

    cursor: pointer;

    z-index: 1050;

    transition: all .25s ease;

}

.scroll-top:hover {

    background: #0b5ed7;

    transform: translateY(-2px);

}

.scroll-top.show {

    display: flex;

}


/* ==========================================================================
   WhatsApp Floating Button
   ========================================================================== */

.whatsapp-float {

    position: fixed;

    left: 20px;

    bottom: 20px;

    width: 56px;

    height: 56px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #25D366;

    color: #ffffff;

    text-decoration: none;

    font-size: 1.5rem;

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

    z-index: 1050;

    transition: all .25s ease;

}

.whatsapp-float:hover {

    color: #ffffff;

    transform: scale(1.05);

}


/* ==========================================================================
   Responsive Footer
   ========================================================================== */

@media (max-width: 991.98px) {

    .site-footer {

        text-align: center;

    }

    .footer-contact li {

        justify-content: center;

    }

    .footer-social,

    .footer-badges,

    .footer-payments {

        justify-content: center;

    }

    .footer-bottom {

        text-align: center;

    }

}

@media (max-width: 575.98px) {

    .site-footer {

        padding-top: 2rem;

    }

    .footer-social a {

        width: 38px;

        height: 38px;

    }

    .scroll-top,

    .whatsapp-float {

        width: 50px;

        height: 50px;

    }

}