/* Hero Video Background Styles */

.hero-video-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-image: none !important;
  background: transparent !important;
}

.hero-background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
}

/* Force remove any background images from hero section */
.elementor-element-5f1686c9,
.elementor-element-5f1686c9 > .elementor-background-overlay {
  background-image: none !important;
}

/* Ensure content is above the video and overlay */
.hero-video-section > .elementor-element {
  position: relative;
  z-index: 2;
}

/* Optional: Add overlay for better text readability */
.hero-video-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* 40% dark overlay for better text visibility */
  z-index: 1;
  pointer-events: none;
}

/* Ensure video stays behind overlay */
.hero-video-section .hero-background-video {
  z-index: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-background-video {
    /* On mobile, you might want to hide video and use a poster image instead */
    /* Uncomment below to hide video on mobile */
    /* display: none; */
  }

  .hero-video-section {
    min-height: 80vh;
  }
}

/* Ensure text is white/visible over video */
.hero-video-section .trx-addons-advanced-title,
.hero-video-section .elementor-widget-text-editor,
.hero-video-section .elementor-button {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* --- HIDE MEDIAELEMENT.JS CONTROLS --- */

/* This hides the main control bar container */
.hero-video-section .mejs-controls {
  display: none !important;
  visibility: hidden !important;
}

/* This hides the big play button in the center */
.hero-video-section .mejs-overlay-play {
  display: none !important;
  visibility: hidden !important;
}

/* This hides any other layers the script might add */
.hero-video-section .mejs-layer {
  display: none !important;
  visibility: hidden !important;
}

/*
  And just to be 100% safe, we'll keep the
  original rules in case the script fails to load.
*/
.hero-background-video {
  pointer-events: none;
}

.hero-background-video::-webkit-media-controls {
  display: none !important;
}

.hero-background-video::-media-controls {
  display: none !important;
}