/********** Mobile-First Responsive — Rugarama Hospital 2026 **********/

/* ── Extra-Small: 0–575px ── */
@media (max-width: 575.98px) {

    /* General spacing */
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Carousel */
    #header-carousel .carousel-item img {
        height: 50vh;
        min-height: 300px;
    }

    .carousel-caption .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        margin-bottom: 5px;
    }

    .carousel-caption h1,
    .carousel-captions {
        font-size: 1.1rem !important;
        line-height: 1.3;
    }

    .carousel-caption h5 {
        font-size: 0.65rem !important;
        letter-spacing: 1px;
        margin-bottom: 0.5rem !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2rem;
        height: 2rem;
        padding: 1rem;
    }

    /* Banner cards */
    .banner .col-lg-4>div {
        height: auto !important;
        min-height: 180px;
        padding: 1.5rem !important;
    }

    .banner h3 {
        font-size: 1.1rem;
    }

    /* Section titles */
    .section-title h5 {
        font-size: 0.72rem;
    }

    .section-title h1,
    .section-title .display-5 {
        font-size: 1.3rem;
    }

    /* About slider */
    #sliders {
        height: auto;
        min-height: 300px;
    }

    #sliders label {
        width: 240px;
        height: 350px;
    }

    .section-size {
        height: 360px !important;
    }

    /* Service items */
    .service-item {
        margin-bottom: 1rem;
    }

    /* Event cards */
    .event {
        flex-direction: column;
    }

    .event img {
        width: 100% !important;
        height: 140px !important;
    }

    /* Team */
    .team-item {
        margin-bottom: 2rem;
    }

    .team-item .position-absolute.start-50 {
        flex-wrap: wrap;
        padding: 0.5rem !important;
    }

    .team-item .btn-square {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    /* Contact form */
    .containers {
        flex-direction: column;
        margin: 0 0.5rem 2rem;
    }

    .contactinfo,
    .contactform {
        padding: 1.5rem;
    }

    .inputbox.w50 {
        width: 100%;
    }

    /* Gallery */
    .portfolio-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .portfolio-gallery .item .inner img {
        height: 150px;
    }

    .filter-btns {
        gap: 0.3rem;
    }

    .filter-btns li {
        padding: 0.4rem 1rem;
        font-size: 0.78rem;
    }

    /* Footer */
    .footer-main .col-lg-3 {
        margin-bottom: 1.5rem;
    }

    /* Stats */
    .wrapper-counter {
        gap: 1rem;
    }

    .container-wrapper {
        min-width: 140px;
        padding: 1.5rem;
    }

    .container-wrapper .num {
        font-size: 2rem;
    }

    /* Navbar mobile */
    .navbar-brand img {
        height: 36px !important;
        width: auto !important;
    }

    .navbar-brand h4 {
        font-size: 1rem;
    }

    .navbar .btn-primary,
    .navbar .btn-pill {
        margin-top: 0.75rem;
        width: 100%;
        text-align: center;
    }

    /* Hero header subpages */
    .hero-header {
        padding: 50px 0;
    }

    .hero-header h1 {
        font-size: 1.5rem !important;
    }

    .hero-header a {
        font-size: 0.85rem;
    }

    /* Testimonials */
    .testimonial-carousel {
        padding: 1.5rem !important;
    }

    .testimonial-carousel .owl-nav {
        display: none;
    }

    .testimonial-item .fs-5 {
        font-size: 0.9rem !important;
    }

    /* Appointment form */
    .appointment-form {
        padding: 1.5rem !important;
    }

    .appointment-form h1 {
        font-size: 1.3rem;
    }

    /* Blog card */
    .blogmain {
        padding: 2rem 1rem;
    }

    /* Offer section */
    .offer-text {
        padding: 1.5rem !important;
    }

    .offer-text h1 {
        font-size: 1.3rem !important;
    }

    /* FAQs */
    .faq {
        padding: 1rem;
    }

    .question_answer h4 {
        font-size: 0.9rem;
    }

    /* Mission/Vision/Core Values */
    .service {
        padding: 1.5rem 1rem;
    }

    .service h2 {
        font-size: 1.2rem;
    }

    .service-logo {
        width: 60px;
        height: 60px;
    }

    /* WhatsApp */
    #bp2 {
        padding: 8px 12px;
        font-size: 12px;
        bottom: 12px;
        left: 8px;
    }

    /* Back to top */
    .back-to-top {
        width: 40px;
        height: 40px;
        right: 16px;
        bottom: 16px;
    }

    /* Top bar – always hidden on mobile */
    .container-fluid.bg-light.d-none.d-lg-block {
        display: none !important;
    }

    /* Social share floating */
    .a2a_floating_style {
        display: none !important;
    }
}

/* ── Small: 576–767px ── */
@media (min-width: 576px) and (max-width: 767.98px) {
    #header-carousel .carousel-item img {
        height: 55vh;
    }

    .carousel-caption h1,
    .carousel-captions {
        font-size: 1.4rem !important;
    }

    .banner .col-lg-4>div {
        height: auto !important;
        min-height: 200px;
    }

    .portfolio-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    #sliders label {
        width: 280px;
        height: 400px;
    }
}

/* ── Medium: 768–991px ── */
@media (min-width: 768px) and (max-width: 991.98px) {

    .carousel-caption h1,
    .carousel-captions {
        font-size: 1.8rem !important;
    }

    .banner .col-lg-4>div {
        height: auto !important;
        min-height: 220px;
    }

    .containe {
        grid-template-columns: 1fr;
        padding: 0 2rem;
    }

    .sfeeds {
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .containers {
        max-width: 700px;
    }

    .navbar-light .navbar-nav .nav-link {
        padding: 12px 0;
    }
}

/* ── Large: 992px+ ── */
@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 28px 16px;
    }

    .banner {
        margin-top: -100px;
        z-index: 1;
    }
}

/* ── Print styles ── */
@media print {

    .navbar,
    .back-to-top,
    #bp2,
    .watsapp,
    .a2a_floating_style,
    .carousel-control-prev,
    .carousel-control-next,
    #spinner {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        text-decoration: underline;
        color: #000;
    }
}