/* =====================================================================
   Sapling Global - responsive fixes
   Loaded LAST (after every other stylesheet) from Site.master and index.aspx.
   Only adds small-screen rules / overflow guards; desktop (>= 1024px)
   layout is unchanged.
   ===================================================================== */

/* ---------- 1. Never scroll sideways ---------- */
body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) {
    /* "clip" does not break position:sticky (Contact form) like "hidden" can */
    body { overflow-x: clip; }
}
img, video, iframe { max-width: 100%; }

/* Bootstrap .row inside containers that have no side padding pushed the page 4-40px wider */
.footerNew .row,
.bnrRow,
.mbCol-reverse { margin-left: 0 !important; margin-right: 0 !important; }

/* ISO logo carousel must clip its long track */
.owl-carousel,
.owl-carousel .owl-stage-outer { overflow: hidden; }

/* Flip cards had a fixed 340px width */
.custom-card-flip { max-width: 100%; }

/* Long words / e-mail addresses wrap instead of overflowing */
.footerNew li, .footerNew a { overflow-wrap: anywhere; }

/* newFigma.css forces .container to 1130px from 992px up, which cut the
   home page off on 992-1150px screens (small laptops / tablets in landscape) */
@media only screen and (min-width: 992px) and (max-width: 1150px) {
    .container { width: 100% !important; }
}

/* ---------- 2. Tablet / small laptop (<= 1080px): use the mobile menu ---------- */
/* At 768-1080px the desktop menu wrapped onto two lines and the hero text
   overlapped the photo, so these widths use the mobile layout. */
@media only screen and (max-width: 1080px) {
    .mobNavigation { visibility: visible !important; display: block !important; }
    .mm-toggle { display: block !important; }
    /* keep the menu bar above headers that are position:fixed (EthicsTrack page) */
    .mobNavigation { position: relative; z-index: 1001; }
    .main-header .nav-outer .main-menu { display: none !important; }
    .main-header .nav-outer { float: none; width: 100%; }
    .header-style-two .header-upper .logo-outer { width: 100%; padding: 0; float: none; text-align: center; }
    .header-style-two .header-upper .logo-outer .logo { display: inline-block; }

    /* Footer: 2 columns instead of 4 squeezed ones */
    .footerNew .row > [class*="col-md-3"] { flex: 0 0 50%; max-width: 50%; width: 50%; margin-bottom: 15px; }

    /* Feature / value cards: 2 per row */
    .row.features > .col { flex: 0 0 50%; max-width: 50%; margin-bottom: 15px; }


    /* Big "Learn more about..." banner text on Audit page */
    .content-box-more { position: relative; width: 100%; bottom: auto; padding: 25px; }
    .content-box-more h3 { font-size: 36px; }
    .content-box-more span { font-size: 22px; }
}

/* Home hero on tablets: the banner photo sits in the right half of the image and was
   cut in half behind the text. Show only the soft left half (same look as on phones). */
@media only screen and (min-width: 600px) and (max-width: 1080px) {
    .hero-banner { background-size: 200% auto !important; background-position: left center !important; background-color: #f1f7fd; }
}

/* ---------- 3. Phones (<= 767px) ---------- */
@media only screen and (max-width: 767px) {
    /* Rows inside .custom-container (no side padding on phones) */
    .custom-container > .row { margin-left: 0; margin-right: 0; }

    /* Buttons with long labels wrap instead of pushing the page wider */
    .btn, .hero-btn, .compliance-btn, .coverage-btn, .svc-cta, .redbg, .morebutton,
    .roadmap-btn a, .hero-buttons a { white-space: normal; max-width: 100%; }

    /* Page banners */
    .mainBanner-sec-about { height: auto; min-height: 160px; padding: 30px 15px; }
    .mainBanner-sec-about h1, .mainBanner-sec h1, .bnrCont-leftSec h1 { font-size: 30px; line-height: 1.25; word-break: break-word; }

    /* Headings that were too large for a phone */
    .content-box-more h3 { font-size: 28px; }
    .content-box-more span { font-size: 18px; }

    /* EthicsTrack hero */
    .hero-content { max-width: 100%; }
    .hero-content .hero-buttons { flex-wrap: wrap; }

    /* Feature / value cards: 1 per row */
    .row.features > .col { flex: 0 0 100%; max-width: 100%; }

    /* Enquiry pop-ups use the full width */
    .modal-dialog, .myCystom-modal { width: auto !important; max-width: none !important; margin: 10px !important; }

    /* Captcha image + code input stack on narrow forms */
    .captcha_text { flex-wrap: wrap; }
    .wpcf7-form-control-wrap .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }

    /* Academy course header: title, price and hours wrap neatly */
    .moduletitle { flex-wrap: wrap; gap: 8px; }

    /* Back-to-top and chat buttons don't cover content */
    .chatboxmain { right: 10px !important; bottom: 70px !important; }
}

/* ---------- 4. Small phones (<= 400px) ---------- */
@media only screen and (max-width: 400px) {
    /* Footer: single column */
    .footerNew .row > [class*="col-md-3"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
    .mainBanner-sec-about h1, .mainBanner-sec h1, .bnrCont-leftSec h1 { font-size: 26px; }
    .main-header{top:50px!important}
    .custom-container2 {
        height: 390px
    }

    .svc-wrap {
        width: 320px
    }

    .compliance-system {
        padding: 20px !important;
    }
}