/*
===================================================================
  responsive-fixes.css  —  RS Majmudar & Co. (rsmajmudar.com)
-------------------------------------------------------------------
  Purpose : Surgical responsive fixes for 320px → 3840px (4K).
            Loaded AFTER style.css + responsive.css so the theme's
            design, colors, fonts and animations are untouched.
            Only layout/overflow/scaling issues are corrected.

  Sections:
    1. Global safety nets (all screen sizes)
    2. Footer bottom bar — horizontal overflow fix (≤991px)
    3. Contact page Google-map height (≤1199px)
    4. Small-phone polish (≤480px)
    5. Large displays — 2K (≥2400px) and 4K (≥3500px) scaling

  Author  : Dalia Web & Soft Solution
===================================================================
*/


/* =================================================================
   1. GLOBAL SAFETY NETS  (all screen sizes)
   - The theme already sets  img { max-width:100%; height:auto }.
     We extend the same protection to other replaced/embedded
     elements so nothing can ever push the page sideways.
   ================================================================= */

iframe,
video,
embed,
object,
svg {
    max-width: 100%;
}

/* Long unbroken words (e.g. "Registration", email addresses) can
   overflow very narrow phones (320px). Allow safe word breaking
   in headings without changing typography. */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Bootstrap: a .row nested DIRECTLY inside another .row doubles the
   negative gutters (-30px total) because there is no padded column
   in between. This caused a 15px horizontal overflow on phones on
   the "Industries We Serve" page. Neutralising the inner row's
   negative margins fixes the overflow and aligns the cards with
   every other section — desktop layout is unaffected. */
.row > .row {
    margin-left: 0;
    margin-right: 0;
}

/* The small service icons (class .img-pos) sit inside absolutely
   positioned .icon-box containers that have no width limit. The
   current icons are 60–64px wide, so nothing changes visually —
   this only guarantees an oversized icon uploaded in the future
   can never push the layout sideways on phones. */
.single-item .icon-box img.img-pos {
    max-width: 70px;
    height: auto;
}

/* Data tables (e.g. "Common RERA Challenges & Our Solutions").
   If a table is ever wider than the phone screen, the section
   scrolls horizontally INSIDE itself instead of breaking the page. */
.rera-table-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* smooth momentum scroll on iOS */
}


/* =================================================================
   2. FOOTER BOTTOM BAR — HORIZONTAL OVERFLOW FIX  (≤ 991px)
   -----------------------------------------------------------------
   Bug found: .footer-bottom uses  d-block d-md-flex  with columns
   `col-lg-6`, `col-lg-2 col-12`, `col-lg-4 col-12`.
   Between 768px and 991px the container becomes a flex row while
   each `col-12` still demands 100% width (flex: 0 0 100%), so the
   row totalled ≈300% width → ~824px of horizontal overflow on
   EVERY page of the site.

   Fix: below 992px let the flex row wrap, so the three items stack
   exactly like they already do on mobile. Desktop (≥992px) is
   completely untouched.
   ================================================================= */

@media (max-width: 991.98px) {

    .footer-bottom .auto-container.d-md-flex {
        flex-wrap: wrap;
    }

    /* Stack all three bottom-bar items full-width and centred,
       matching the existing mobile look. */
    .footer-bottom .auto-container.d-md-flex > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
}


/* =================================================================
   3. CONTACT PAGE — GOOGLE MAP HEIGHT  (≤ 1199px)
   -----------------------------------------------------------------
   The map iframe uses height="100%". On desktop the column is
   stretched next to the form, so 100% works. Once the columns
   stack (below 1200px) the parent has no height and the map
   collapses. Give it a proper fixed height there.
   ================================================================= */

@media (max-width: 1199.98px) {

    .contact-style-two iframe {
        width: 100%;
        height: 400px;
        min-height: 400px;
        display: block;
    }
}

@media (max-width: 575.98px) {

    .contact-style-two iframe {
        height: 320px;
        min-height: 320px;
    }
}


/* =================================================================
   4. SMALL-PHONE POLISH  (≤ 480px)
   -----------------------------------------------------------------
   Comfortable tap targets and safe table cells on narrow phones.
   Visual design (colors, fonts, spacing rhythm) is unchanged.
   ================================================================= */

@media (max-width: 480px) {

    /* Keep the two-column RERA table readable on very small phones */
    .rera-table th,
    .rera-table td {
        padding: 10px 12px;
        word-break: break-word;
    }

    /* Ensure buttons/links inside the mobile menu and forms remain
       easy to tap (WCAG recommends ≥44px touch targets). */
    .mobile-menu .navigation li > a {
        min-height: 44px;
    }
}


/* =================================================================
   5. LARGE DISPLAYS — 2K & 4K SCALING
   -----------------------------------------------------------------
   The design is built on a 1170px container, which looks perfect
   from 1200px up to Full-HD (1920px). On 2K (2560px) and 4K
   (3840px) monitors the site rendered very small in the middle of
   the screen.

   `zoom` scales the ENTIRE design proportionally — every section,
   font, image and animation keeps its exact proportions, so the
   desktop design is preserved 1:1, just at a comfortable size.
   Supported by Chrome, Edge, Safari and Firefox 126+.
   Browsers without support simply show the normal 1920px layout
   (graceful degradation — nothing breaks).

   NOTE: kept below 1× per hardware pixel so text and images stay
   sharp on high-DPI / Retina panels.
   ================================================================= */

/* 2K / QHD displays (2560×1440 and similar) */
@media (min-width: 2400px) {
    body {
        zoom: 1.3;
    }
}

/* 4K / UHD displays (3840×2160 and above) */
@media (min-width: 3500px) {
    body {
        zoom: 1.9;
    }
}