/* =========================================================
   HOME PAGE — RESPONSIVE WIDTH FIX
   Based on the working .container system
   ========================================================= */

/* ---------- GLOBAL SAFETY ---------- */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Never allow media to create horizontal overflow */
img,
video,
iframe {
    max-width: 100%;
}


/* =========================================================
   COMMON HOMEPAGE CONTAINER
   Same approach as the working About page
   ========================================================= */

.index-page .container,
body.home-page .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HOMEPAGE SECTIONS
   ========================================================= */

.hero,
.stats,
.about,
.services,
.why-us,
.why-choose,
.doctor,
.process,
.testimonials,
.cta {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1201px) {

    .hero .container,
    .stats .container,
    .about .container,
    .services .container,
    .why-us .container,
    .why-choose .container,
    .doctor .container,
    .process .container,
    .testimonials .container,
    .cta .container {
        width: calc(100% - 80px);
        max-width: 1200px;
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 769px) and (max-width: 1200px) {

    .hero .container,
    .stats .container,
    .about .container,
    .services .container,
    .why-us .container,
    .why-choose .container,
    .doctor .container,
    .process .container,
    .testimonials .container,
    .cta .container {
        width: calc(100% - 50px);
        max-width: 1100px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .hero .container,
    .stats .container,
    .about .container,
    .services .container,
    .why-us .container,
    .why-choose .container,
    .doctor .container,
    .process .container,
    .testimonials .container,
    .cta .container {
        width: calc(100% - 32px);
        max-width: none;
    }

    /* Prevent flex/grid children from forcing page wider */
    .hero *,
    .stats *,
    .about *,
    .services *,
    .why-us *,
    .why-choose *,
    .doctor *,
    .process *,
    .testimonials *,
    .cta * {
        max-width: 100%;
    }

    /* Images and videos */
    .hero img,
    .hero video,
    .about img,
    .about video,
    .doctor img,
    .doctor video,
    .testimonials video {
        max-width: 100%;
        height: auto;
    }
}


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

@media (max-width: 480px) {

    .hero .container,
    .stats .container,
    .about .container,
    .services .container,
    .why-us .container,
    .why-choose .container,
    .doctor .container,
    .process .container,
    .testimonials .container,
    .cta .container {
        width: calc(100% - 24px);
        max-width: none;
    }

    /* Cards must stay inside viewport */
    .service-card,
    .why-card,
    .doctor-card,
    .process-card,
    .testimonial-card,
    .stat-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Long content */
    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    a,
    span {
        overflow-wrap: anywhere;
    }

    /* Buttons */
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        max-width: 100%;
    }

    /* Videos */
    video,
    iframe {
        width: 100%;
        max-width: 100%;
    }
}


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

@media (max-width: 360px) {

    .hero .container,
    .stats .container,
    .about .container,
    .services .container,
    .why-us .container,
    .why-choose .container,
    .doctor .container,
    .process .container,
    .testimonials .container,
    .cta .container {
        width: calc(100% - 20px);
    }
}