/* =========================================================
   HOME PAGE – RESPONSIVE FIXES (append at end of style.css)
   ========================================================= */

/* ---------- 0. Safety: no horizontal scroll ---------- */
body {
    overflow-x: clip; /* doesn't break the sticky header */
}

/* ---------- 1. HERO BANNER ---------- */
/* Overrides the fixed inline height (650px) so the banner
   follows the responsive slide heights */
.banner {
    height: 720px !important;
    overflow: hidden;
}

/* Neutralizes the inline margin-top:-100px on all captions */
.carousel .carousel-caption {
    margin-top: 0 !important;
}

@media (max-width: 1199.98px) {
    .banner { height: 560px !important; }
}

@media (max-width: 992px) {
    .banner { height: 450px !important; }

    .carousel .carousel-caption .display-1 {
        font-size: 2.4rem;
        line-height: 1.15;
    }

    .carousel .carousel-caption p { font-size: .95rem; }
}

/* Phones – move thumbnail indicators to the bottom (horizontal)
   so the caption gets the full width */
@media (max-width: 768px) {
    .banner { height: 470px !important; }
    .carousel .carousel-item { height: 470px; }

    .carousel .carousel-indicators {
        top: auto;
        bottom: 12px;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        margin: 0;
    }

    .carousel .carousel-indicators [data-bs-target] {
        width: 46px;
        height: 46px;
        margin: 0 4px;
    }

    .carousel .carousel-caption {
        padding: 1.25rem 1.25rem 5.75rem; /* bottom room for indicators */
        align-items: center;
        text-align: center;
    }

    .carousel .carousel-caption .display-1 {
        font-size: 1.9rem;
        margin-bottom: .75rem !important;
    }

    .carousel .carousel-caption p {
        font-size: .85rem;
        margin-bottom: 1rem !important;
    }

    .carousel .carousel-caption .hero-btn {
        padding: .65rem 1.4rem !important;
        font-size: .85rem;
    }
}

@media (max-width: 576px) {
    .banner { height: 480px !important; }
    .carousel .carousel-item { height: 480px; }

    .carousel .carousel-indicators [data-bs-target] {
        width: 38px;
        height: 38px;
    }

    .carousel .carousel-caption .display-1 { font-size: 1.5rem; }

    /* Optional: tighter hero on tiny screens – uncomment to hide text
    .carousel .carousel-caption p { display: none; }
    */
}

/* ---------- 2. SECTION SPACING (pt-6/pb-6/mt-6/mb-6 = 5rem) ---------- */
@media (max-width: 768px) {
    .pt-6 { padding-top: 3rem !important; }
    .pb-6 { padding-bottom: 3rem !important; }
    .mt-6 { margin-top: 3rem !important; }
    .mb-6 { margin-bottom: 3rem !important; }
}

@media (max-width: 576px) {
    .pt-6 { padding-top: 2.25rem !important; }
    .pb-6 { padding-bottom: 2.25rem !important; }
    .mt-6 { margin-top: 2.25rem !important; }
    .mb-6 { margin-bottom: 2.25rem !important; }
}

/* ---------- 3. SECTION TITLES ---------- */
@media (max-width: 576px) {
    .display-6 { font-size: 1.45rem; line-height: 1.3; }
    .ts-section-title { margin-bottom: 30px; }
    .ts-section-title p { font-size: .9rem; }
}

/* ---------- 4. ABOUT ---------- */
@media (max-width: 991.98px) {
    .about-img {
        max-width: 520px;
        margin: 0 auto 2.5rem;
    }
}

@media (max-width: 576px) {
    .about-img { padding-left: 22px; }

    .about-img::before {
        width: 90px;
        height: 140px;
        border-width: 4px;
    }

    .about-btn {
        padding: .7rem 1.4rem !important;
        font-size: .85rem;
    }
}

/* ---------- 5. SERVICES ---------- */
@media (max-width: 576px) {
    .service .service-item { margin-top: 30px; }
    .service .service-inner { margin-top: 30px; }
    .service .service-item img { height: 210px !important; }
}

/* ---------- 6. FEATURES / COUNTERS  (IMPORTANT FIX) ---------- */
/* The desktop gradient is light on the left → dark on the right,
   but on mobile the white text covers the whole width = unreadable.
   Flatten it to a dark overlay on tablet/mobile. */
@media (max-width: 991.98px) {
    .feature {
        background:
            linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),
            url(../img/carousel-1.jpg) center center no-repeat;
        background-size: cover;
    }

    .feature .pt-5 { padding-top: 0 !important; }
    .feature .mt-5 { margin-top: 0 !important; }
}

@media (max-width: 576px) {
    .feature h1 { font-size: 1.8rem; }
    .feature .p-5 { padding: 1.25rem !important; }
}

/* ---------- 7. PROCESS CARDS ---------- */
@media (max-width: 576px) {
    .service-process-number { font-size: 34px; }
    .service-process-card h5 { font-size: 1rem; }
}

/* ---------- 8. CTA ---------- */
@media (max-width: 576px) {
    .ts-cta-title { font-size: 22px; }

    .ts-cta .col-lg-4 { text-align: center !important; }

    .ts-cta .btn {
        width: 100%;
        margin-right: 0 !important;   /* kills .me-2 gap on mobile */
        margin-bottom: .75rem !important;
    }

    .ts-cta .btn:last-child { margin-bottom: 0 !important; }
}