.about-us-sec2 .container-fluid {
    padding: 0 !important;
}

.map-section .container-fluid {
    padding: 0 !important;
}

.content-only-image-section .container-fluid, .content-only-image-section .container-xxl {
    padding-top: 0 !important;
}

/* Hero video/image background box (content.blade.php): 560px on desktop keeps
   the vertical crop on a wide-screen 16:9 video down to a reasonable amount.
   That same fixed height, uncorrected, would eat up to 84% of a small phone's
   screen (iPhone SE) before any page content is visible - the box's own inline
   style sets the height directly, so this needs !important to win.
   380px keeps the hero at roughly 40-55% of screen height across common
   phones, matching the 767px breakpoint already used elsewhere in
   frontend/css/responsive.css for the same phone/tablet split. */
@media only screen and (max-width: 767px) {
    .hero-video-box {
        height: 380px !important;
    }

    .hero-video-frame {
        min-height: 380px !important;
        min-width: calc(380px * 16 / 9) !important;
    }
}