/* Only fix MediaElement.js controls positioning - blend in naturally */
.video-holder .mejs__controls {
  position: absolute !important;
  border-bottom: 10px #284f60;
  left: 0 !important;
  right: 0 !important;
  background: #284f60 !important;
  border-radius: 0 !important;
  z-index: 10 !important;
}

/* Making sure MediaElement.js doesn't interfere with container sizing */
.video-holder .mejs__container {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  aspect-ratio: 16/9 !important; /* Force 16:9 aspect ratio */
}

.mejs__container {
  background: #3a7189 !important;
}

.video-holder .mejs__mediaelement {
  width: 100% !important;
  height: 100% !important;
}

/* Preserve original video sizing behavior */
.video-holder video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Use cover instead of contain to fill container */
}

.overlay_text {
  position: absolute;
  width: 100%;
  text-align: center;
  height: 100%;
  background: rgb(58, 113, 137);
  padding-top: 45%;
  top: 0;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0.7;
}
 
#page h3 {
  font-size: 16px;
  color: #fff;
}
 
.overlay_text p {
  margin: 0;
  color: #fff;
}