/* =============================================================
   Shared mobile / tablet fixes for components that appear on
   every page (header, footer, page title, CTA band, counters,
   export carousel).

   Load AFTER style.min.css / responsive.css / color-2.css and
   BEFORE any page-specific mobile stylesheet.
   ============================================================= */

/* ---------- Tablet and below ---------- */
@media only screen and (max-width: 991px) {

    /* Nothing should be able to push the page sideways */
    .page-wrapper {
        overflow-x: hidden;
    }

    /* Bootstrap rows carry -15px side margins that the parent's
       padding normally cancels. These two parents have their
       padding stripped (.p-0 / no auto-container padding), so the
       row hangs 15px off each edge and the page gets clipped. */
    .main-header .header-lower .wrapper-box.row,
    .main-footer .upper-box .container-fluid > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Footer map iframe is height:100% inside an auto-height column,
       which collapses to 0 once the row stacks. */
    .main-footer .map-side iframe {
        height: 300px;
        min-height: 300px;
        display: block;
    }
}

/* ---------- Phones ---------- */
@media only screen and (max-width: 767px) {

    /* ---------- Page title / sub-header banner ---------- */
    /* Base rule is a flat height:400px with 100px of padding top
       and bottom, which on a phone is a near-empty background
       image the visitor has to scroll past. */
    .page-title {
        height: auto;
        min-height: 0;
    }

    .page-title .content-box {
        padding: 110px 0 34px;
    }

    .page-title .content-box h1 {
        font-size: 24px;
        line-height: 1.3;
        margin-top: 0;
        text-align: left;
        width: 100%;
    }

    /* =========================================================
       SECTION-LEVEL SPACING UTILITIES
       Templates lean on Bootstrap's pt-5 / my-5 / mt-4 on the
       top-level sections. Those are desktop-scale (48px, 3rem)
       and stack up into large dead bands on a phone. Scoped to
       direct children of .page-wrapper so inner .pt-5 / .my-5
       usages are untouched.
       ========================================================= */
    .page-wrapper > .pt-5 {
        padding-top: 34px !important;
    }

    .page-wrapper > .pb-5 {
        padding-bottom: 34px !important;
    }

    .page-wrapper > .my-5 {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    .page-wrapper > .mt-5 {
        margin-top: 24px !important;
    }

    .page-wrapper > .mb-5 {
        margin-bottom: 24px !important;
    }

    .page-wrapper > .mt-4,
    .page-wrapper > .mt-3 {
        margin-top: 16px !important;
    }

    /* =========================================================
       SECTION RHYTHM
       These sections carry 90-120px of desktop padding each. On a
       phone that reads as dead space between every band, so trim
       them to a consistent mobile rhythm.
       ========================================================= */
    .about-section-five,
    .our-facts-section-three {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    /* Base pairs padding:180px 0 60px with margin-top:-180px so the
       background bleeds up behind the previous section. Trimming
       the padding without also zeroing that margin would pull the
       section 180px up over its neighbour. */
    .whychoose-us-section {
        padding-top: 34px;
        padding-bottom: 34px;
        margin-top: 0;
    }

    /* Bootstrap spacing utilities are !important, so they need to
       be matched to be beaten. */
    .whychoose-us-section.pt-5 {
        padding-top: 34px !important;
    }

    .whychoose-us-section.mt-3,
    .clients-logo-section.mt-3,
    .our-facts-section-three.mt-3 {
        margin-top: 0 !important;
    }

    /* 30px margin + 40px padding under every block is 70px of air
       between six stacked items. */
    .why-choose-us-block .inner-box {
        margin-bottom: 0;
        padding-bottom: 26px;
    }

    .why-choose-us-block:last-child .inner-box {
        padding-bottom: 0;
    }

    .clients-logo-section.style-four {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* ---------- CTA band ---------- */
    /* .cta-section is position:relative with top:-70px so the card
       floats over the band above it. The layout box stays put, so
       it also leaves ~70px of dead space underneath. At phone size
       the float reads as a misalignment rather than a design, and
       the trimmed band padding above no longer has room to absorb
       the overlap. */
    .cta-section {
        top: 0;
        margin: 20px 0;
    }

    /* responsive.css forces .cta-section .theme-btn to a flat
       200px; two of those plus margins overflow a 390px screen. */
    .cta-section .wrapper-box {
        padding: 26px 18px;
    }

    .cta-section h2,
    .cta-section h3 {
        font-size: 20px;
        line-height: 1.35;
        text-align: center;
        justify-content: center;
        margin-bottom: 18px;
    }

    .cta-section .link-btn {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .cta-section .link-btn .theme-btn {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        justify-content: center;
    }

    /* ---------- Counter band (component/fact-section.php) ---------- */
    /* col-lg-3 col-md-6 goes full-width below 768px, turning four
       numbers into ~1200px of scrolling. */
    .our-facts-section-three .column {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Card padding lives on .inner — 40px 20px 41px 40px in the
       base rule and 40px 30px in the .style-two variant, which is
       most of the card at phone width. The .style-two selector has
       to be matched or it wins on specificity. */
    .our-facts-section-three .facts-block .inner,
    .our-facts-section-three.style-two .facts-block .inner {
        height: 100%;
        padding: 22px 14px 20px;
    }

    .our-facts-section-three .column {
        margin-bottom: 14px;
    }

    /* .icon-two is an oversized watermark behind the number. */
    .our-facts-section-three .facts-block .icon-two {
        display: none;
    }

    .our-facts-section-three .facts-block .icon {
        font-size: 26px;
        line-height: 1;
        margin-bottom: 12px;
    }

    /* Vertical rule between cards is meant for a 4-across row. */
    .our-facts-section-three .facts-block .inner .content:before {
        display: none;
    }

    .our-facts-section-three .facts-block .count-outer {
        font-size: 28px;
        line-height: 32px;
    }

    .our-facts-section-three .facts-block .text {
        font-size: 12.5px;
        line-height: 1.4;
    }

    /* ---------- Export countries carousel ---------- */
    /* responsive.css pins these flags to a flat 250px, which
       overflows once two share a 390px row. */
    .clients-logo-section.style-four .single-client-logo img {
        width: 100%;
        max-width: 140px;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .clients-logo-section.style-four .single-client-logo {
        padding: 0 8px;
    }

    .clients-logo-section.style-four .single-client-logo p {
        text-align: center;
        font-size: 13.5px;
        margin-top: 8px;
    }

    /* ---------- Footer ---------- */
    .main-footer .contact-widget-two h5 {
        font-size: 15px;
        line-height: 1.6;
        word-break: break-word;
    }

    .footer-bottom.style-two .social-links {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    /* The floating Call / WhatsApp bar is fixed at bottom:40px and
       covers the social icons. .footer-bottom sits OUTSIDE <footer>,
       so it has to be targeted on its own class. */
    .footer-bottom.style-two {
        padding-bottom: 105px;
    }
}

/* ---------- Small phones ---------- */
@media only screen and (max-width: 575px) {

    .page-title .content-box {
        padding: 100px 0 28px;
    }

    .page-title .content-box h1 {
        font-size: 21px;
        margin-top: 0;
    }

    .our-facts-section-three .facts-block .count-outer {
        font-size: 25px;
        line-height: 28px;
    }

    .our-facts-section-three .facts-block .text {
        font-size: 11.5px;
    }
}