.elementor-7386 .elementor-element.elementor-element-faceb89{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7386 .elementor-element.elementor-element-80b40d0 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-7386 .elementor-element.elementor-element-80b40d0 .elementor-custom-embed-play i{color:#FFFFFF;font-size:64px;}.elementor-7386 .elementor-element.elementor-element-80b40d0 .elementor-custom-embed-play svg{fill:#FFFFFF;width:64px;height:64px;}@media(max-width:1024px){.elementor-7386 .elementor-element.elementor-element-80b40d0 .elementor-custom-embed-play i{font-size:48px;}.elementor-7386 .elementor-element.elementor-element-80b40d0 .elementor-custom-embed-play svg{width:48px;height:48px;}}@media(max-width:767px){.elementor-7386 .elementor-element.elementor-element-80b40d0 .elementor-custom-embed-play i{font-size:32px;}.elementor-7386 .elementor-element.elementor-element-80b40d0 .elementor-custom-embed-play svg{width:32px;height:32px;}}/* Start custom CSS for container, class: .elementor-element-faceb89 *//* ==========================================================================
   Elementor Video Image Overlay - Mathematical Centering Engine
   ========================================================================== */

/* 1. Force the image overlay container to cover 100% of the card bounds */
.property-video-gallery-card .elementor-custom-embed-image-overlay {
  position: absolute !important;
  inset: 0 !important; /* top:0, right:0, bottom:0, left:0 */
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
  background-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 1.5. Cinematic Dark Overlay (30% Black Transparency) */
.property-video-gallery-card .elementor-custom-embed-image-overlay::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  z-index: 1 !important;
  pointer-events: none !important; /* Allows clicks to pass cleanly through to the parent */
}

/* 2. Absolute center the play button box */
.property-video-gallery-card .elementor-custom-embed-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* Centering math: Offset 50% width/height, plus optical right-shift (+3px X) */
  transform: translate(calc(-50% + 3px), -50%) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important; /* Keeps the play button safely above the dark overlay */
}

/* 3. Ensure SVG scales cleanly without bounding-box leaks */
.property-video-gallery-card .elementor-custom-embed-play svg {
  display: block !important;
  margin: 0 auto !important;
}


/* ==========================================================================
   Smart Video State Management
   ========================================================================== */

/* 1. Hide the overlay smoothly when the video is playing */
.property-video-gallery-card.is-playing .elementor-custom-embed-image-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Enforce a smooth cinematic fade transition */
.property-video-gallery-card .elementor-custom-embed-image-overlay {
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
}


/* ==========================================================================
   Aspect Ratio & Canvas Management
   ========================================================================== */

/* 1. Default Paused State: Video acts as a background cover (Cropped to fill 4:3) */
.property-video-gallery-card video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; 
  cursor: pointer !important;
  background-color: #000000 !important; /* Ensures black bars look seamless */
}

/* 2. Active Playing State: Video reveals true uncropped aspect ratio (Contain) */
.property-video-gallery-card.is-playing video {
  object-fit: contain !important;
}

/* 3. Ensure the Elementor wrapper doesn't force a white background behind the video */
.property-video-gallery-card .elementor-wrapper {
  background-color: #000000 !important;
}/* End custom CSS */