/* Body and HTML */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'MetaPro', Arial, sans-serif;
    overflow: auto;
  }

/* Video Background Container */
.video-background-container {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  height: 95vh; /* Set the minimum height for the video section */
  position: relative; /* Keep it within the flow */
  overflow: hidden; /* Prevent overflow issues */
}

/* Background Video */
#bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* Ensure it stays behind the overlay */
}

/* Video Overlay */
.video-overlay {
  position: absolute;
  z-index: 1;
  text-align: center;
  top: 40%;
  left: 0%;
  width: 100%; /* Make the overlay span the full width of the screen */
  transform: translate(0%,-35%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.video-overlay h1 {
  font-size: 5em; /* Large screens */
  font-weight: 400;
  line-height: 1.75; /* Increases the space between lines inside a paragraph */
  color: var(--white);
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  padding: 0 10px;
}


/* Upcoming Events Section */
.upcoming-events .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Consistent spacing between cards */
  padding-top: 1rem; /* Adjust as necessary */
  margin: 0;
  padding: 0;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Styles for iPads (medium screens) */
@media only screen and (max-width: 1024px) {
  .video-overlay h1 {
      font-size: 4.5em; /*  text for iPads */
  }

}

   
/* Fallback for mobile devices */
@media only screen and (max-width: 768px) {
  #bg-video {
      display: none;
  }

  .video-background-container {
      background-image: url("../images/fallback-image.jpg");
      background-size: cover;
      background-position: center;
  }

  .video-overlay h1 {
    font-size: 3.5em; /* text for iPhones */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }

}