/**
 * Theme Name:     Website Energizers Divi Child Theme
 * Author:         Website Energizerrs
 * Template:       Divi
 * Text Domain:	   website-energizers-child-theme
 * Description:    Divi Child Theme
 */

.video-container {
  position: relative;
  width: 100%; /* or adjust to the video's width */
}

.video-container video {
  width: 100%;
  display: block; /* Remove extra space/line below video */
}

.video-container .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* Black with 20% opacity */
  display: none; /* Hide overlay initially */
}

.video-container .hover-image {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the image */
  opacity: 0; /* Set image transparent initially */
  transition: opacity 0.5s ease; /* Smooth transition for the opacity */
  z-index: 2; /* Ensure image is on top of the overlay */
}

.video-container:hover .video-overlay,
.video-container:hover .hover-image {
  display: block; /* Show overlay and image on hover */
  opacity: 1; /* Make overlay and image fully visible on hover */
}