/* ============================================================
   MOBILE RESPONSIVE FIXES — Dr. Olivia Ganguly
   Paste this AFTER your existing styles in style.css
   (or add as a <style> block just before </body>)
   ============================================================ */


/* ── 1. TOPBAR / HEADER ──────────────────────────────────── */

/* Let the topbar row wrap naturally on mobile */
.container-fluid.bg-dark .row {
    height: auto !important;
    padding: 8px 0;
}

/* Stack the two columns vertically on mobile */
@media (max-width: 991px) {
    .container-fluid.bg-dark {
        padding: 8px 12px !important;
    }

    .container-fluid.bg-dark .col-lg-8,
    .container-fluid.bg-dark .col-lg-4 {
        width: 100% !important;
        text-align: center !important;
    }

    /* Left group: hamburger + call + email */
    .container-fluid.bg-dark .col-lg-8 .d-flex {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 8px;
        padding-left: 0 !important;
    }

    /* Shrink call/email pills on tiny screens */
    .call-email-btn {
        font-size: 12px !important;
        padding: 5px 12px !important;
    }

    /* Social icons row: center + reduce gap */
    .social-icons {
        justify-content: center !important;
        margin-top: 8px;
        gap: 8px !important;
    }

    .social-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
}


/* ── 2. BANNER / CAROUSEL ────────────────────────────────── */

@media (max-width: 576px) {
    .header-carousel-item,
    .header-carousel .header-carousel-item img {
        height: 220px !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 577px) and (max-width: 991px) {
    .header-carousel-item,
    .header-carousel .header-carousel-item img {
        height: 350px !important;
        margin-top: 0 !important;
    }
}


/* ── 3. TESTIMONIAL ARROWS ───────────────────────────────── */

/* On wide desktop the arrows sit outside the card at -100px.
   On anything narrower we pull them inside the card. */
@media (max-width: 1100px) {
    /* Card itself needs overflow visible so arrows aren't clipped */
    .olivia-slide-inner {
        padding: 30px 60px !important; /* give room for in-card arrows */
    }

    .olivia-prev {
        left: 8px !important;
    }

    .olivia-next {
        right: 8px !important;
    }
}

@media (max-width: 576px) {
    .olivia-slider-shell {
        width: 100% !important;
    }

    .olivia-slide-inner {
        padding: 24px 50px !important;
        width: 95% !important;
    }

    .olivia-text {
        font-size: 15px !important;
    }

    .olivia-prev,
    .olivia-next {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* Keep arrows inside the card on very small screens */
    .olivia-prev {
        left: 4px !important;
    }

    .olivia-next {
        right: 4px !important;
    }
}


/* ── 4. ACCOLADES ────────────────────────────────────────── */

/* The 25%-wide cards look broken on tablets/phones */
@media (max-width: 1199px) {
    .acc-card-cont {
        width: 48% !important; /* 2-column grid on tablets */
    }
}

@media (max-width: 767px) {
    .acc-card-cont {
        width: 100% !important; /* full-width single column on phones */
    }

    /* The first (full-width) accolades card was already col-xl-12;
       make sure it stays full width */
    .acc-cont .row.g-4 > .col-xl-12 {
        width: 100% !important;
    }
}


/* ── 5. FOOTER ───────────────────────────────────────────── */

/* Remove nowrap so footer columns stack on mobile */
@media (max-width: 991px) {
    .footer-container {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    /* Each footer column goes full width */
    .footer-container .col-lg-6,
    .footer-container [class*="col-"] {
        width: 100% !important;
        margin-bottom: 24px;
    }

    /* Social buttons in footer */
    .footer .btn-square {
        width: 38px !important;
        height: 38px !important;
    }

    /* Call / Email buttons row */
    .call-email-us-btn {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
    }

    /* Footer heading */
    .footer-head {
        font-size: 2rem !important;
    }
}

@media (max-width: 576px) {
    .footer-container {
        flex-direction: column !important;
    }

    .footer-container .col-lg-6,
    .footer-container [class*="col-"] {
        width: 100% !important;
    }

    .footer-head {
        font-size: 1.6rem !important;
    }
}