.elementor-8 .elementor-element.elementor-element-bd7339a{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-bd7339a:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-bd7339a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-7fcdbf3{--display:flex;--min-height:80vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-7fcdbf3:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-7fcdbf3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background:url("https://royaleconstruction.com.au/wp-content/uploads/2025/08/REN_VID_RLC_1071_Website-Hero_v2.0_placeholder.jpg") 50% 50%;background-size:cover;}.elementor-8 .elementor-element.elementor-element-7fcdbf3::before, .elementor-8 .elementor-element.elementor-element-7fcdbf3 > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-7fcdbf3 > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-7fcdbf3 > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-7fcdbf3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-7fcdbf3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}:root{--page-title-display:none;}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-bd7339a{--min-height:95vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-8 .elementor-element.elementor-element-7fcdbf3{--width:100%;--min-height:75vh;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-bd7339a{--width:100%;}.elementor-8 .elementor-element.elementor-element-7fcdbf3{--width:90%;}}/* Start custom CSS for container, class: .elementor-element-7fcdbf3 *//* ===== Mobile hero video: 75% height, centered, no flash ===== */
:root { --header-h: 72px; }  /* adjust to your header height if it's fixed */

.hero-video { position: relative; overflow: hidden; }

/* Mobile rules */
@media (max-width: 767px) {
  /* Lock the section height to 75% of the small viewport */
  .hero-video {
    height: 80svh;       /* key line: replaces aspect-ratio */
    min-height: 75svh;
    /* If your header is fixed/sticky and overlaps, uncomment the next two lines: */
    /* margin-top: var(--header-h); */
    /* scroll-margin-top: var(--header-h); */ /* helps when linking to this section */
  }

  /* Make Elementor's background video wrapper fill the box */
  .hero-video .elementor-background-video-container,
  .hero-video .elementor-background-video-embed,
  .hero-video .elementor-background-video-hosted {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
  }

  /* Hard-center + cover for hosted <video> to avoid quadrant crop */
  .hero-video .elementor-background-video-container video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* If it’s a YouTube/Vimeo iframe background instead */
  .hero-video .elementor-background-video-embed iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    pointer-events: none;
  }
}/* End custom CSS */