/* ==========================================================================
   responsive.css
   Site-wide mobile/responsive overrides for Salam Pools.
   Loaded after the main theme stylesheet (style.css / style-ar.css) so these
   rules win without touching the large bundled theme file.
   Rules are written direction-neutral so they work for both LTR and RTL.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Kill horizontal scrolling (most common mobile bug)
   -------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Media (images / video / embeds) should never force the page wider */
img,
svg,
video,
iframe {
    max-width: 100%;
}

    /* keep responsive images proportional, but never shrink the fixed-size logo */
    img:not(.logo-dark):not(.logo-light) {
        height: auto;
    }

/* --------------------------------------------------------------------------
   2) Page hero / section heading
   The views set an inline "padding: 120px 0" which is far too tall on phones.
   Inline styles are beaten here by !important inside a media query.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .section-heading {
        padding: 80px 0 !important;
        background-position: center center !important;
    }
}

@media (max-width: 575.98px) {
    .section-heading {
        padding: 56px 16px !important;
    }
}

/* --------------------------------------------------------------------------
   3) Heading scaling on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    h1, .h1 {
        font-size: calc(1.5rem + 1.2vw);
    }

    h2, .h2 {
        font-size: calc(1.325rem + 0.9vw);
    }

    h3, .h3 {
        font-size: calc(1.2rem + 0.6vw);
    }

    .fs-60px {
        font-size: 38px !important;
    }

    .fs-30px {
        font-size: 24px !important;
    }
}

/* --------------------------------------------------------------------------
   4) Google reCAPTCHA widget (fixed 304px) overflows narrow phones.
   Scale it down so it fits without a horizontal scrollbar.
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .g-recaptcha {
        transform: scale(0.75);
        transform-origin: top left;
    }

    [dir="rtl"] .g-recaptcha {
        transform-origin: top right;
    }
}

@media (max-width: 340px) {
    .g-recaptcha {
        transform: scale(0.65);
        transform-origin: top left;
    }
     
}
/* --------------------------------------------------------------------------
   5) Admin tables (DataTables) should scroll horizontally instead of
   breaking the layout on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        white-space: nowrap;
    }

    /* DataTables top controls (length + search) stack on phones */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: start;
        float: none;
        width: 100%;
        margin-bottom: .5rem;
    }

        .dataTables_wrapper .dataTables_filter input {
            max-width: 100%;
        }
}

/* --------------------------------------------------------------------------
   6) Contact Us page
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* The decorative SVG wave is absolutely positioned at a fixed top:275px,
       which no longer lines up once the hero shrinks. Hide it on phones. */
    .elementor-shape.elementor-shape-bottom {
        display: none !important;
    }

    .icon-contact {
        font-size: 24px;
    }
}

/* --------------------------------------------------------------------------
   7) "Up to footer" call-to-action band: center the button under the text
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .p-85 {
        padding: 32px !important;
    }
}

/* --------------------------------------------------------------------------
   8) Footer spacing tightens up on phones
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .footer .ft-head {
        margin-bottom: 1.25rem !important;
        font-size: 19px;
    }

    .footer-top {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
}

/* --------------------------------------------------------------------------
   9) Floating WhatsApp icon: smaller and safe from the mobile bottom bar
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .fixed-icon {
        bottom: 80px;
        left: 16px;
        font-size: 20px;
    }

    [dir="rtl"] .fixed-icon {
        left: auto;
        right: 16px;
    }
}

/* --------------------------------------------------------------------------
   10) Home page fixed-height sections
   -------------------------------------------------------------------------- */
/* Top hero banner is a fixed 500px tall box; too tall on phones/tablets. */
@media (max-width: 991.98px) {
    .home-hero-banner {
        height: 380px !important;
    }
}

@media (max-width: 575.98px) {
    .home-hero-banner {
        height: 300px !important;
    }

        .home-hero-banner .display-1 {
            font-size: calc(1.6rem + 1.5vw);
        }
}

/* "Why choose us" band: a fixed 800px box with overflow:hidden and content
   absolutely centered. On phones the stacked cards are taller than 800px and
   get clipped. Let the section grow with its content instead. */
@media (max-width: 991.98px) {
    .home-feature-band {
        height: auto !important;
        overflow: visible !important;
        padding: 48px 0;
    }

        /* turn the foreground image into a real background cover layer */
        .home-feature-band > img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100% !important;
            z-index: 0;
        }

        /* let the centered content flow normally so it defines the height */
        .home-feature-band .container.position-absolute {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
        }
}

/* Paragraphs using .pd-25 (padding: 0 25%) become too narrow on phones */
@media (max-width: 991.98px) {
    .pd-25 {
        padding: 0 8% !important;
    }
}

@media (max-width: 575.98px) {
    .pd-25 {
        padding: 0 !important;
    }
}

/* Scale Bootstrap display headings down on phones */
@media (max-width: 767.98px) {
    .display-1 {
        font-size: calc(1.625rem + 2vw);
    }

    .display-2 {
        font-size: calc(1.575rem + 1.8vw);
    }

    .display-3 {
        font-size: calc(1.525rem + 1.6vw);
    }

    .display-4 {
        font-size: calc(1.475rem + 1.4vw);
    }
}

/* --------------------------------------------------------------------------
   11) Generic safety: long words / links shouldn't push layout width
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    p, a, span, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

@media (max-width: 430px) {
    .recaptcha-wrapper .g-recaptcha {
        transform: scale(0.75);
    }
}

@media (max-width: 360px) {
    .recaptcha-wrapper .g-recaptcha {
        transform: scale(0.68);
    }
}