/* Hero Component Styles */
/* Video Background Styles */
.video-background,
.image-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.image-background .image-container {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-position: center;
  background-size: cover;
}

/* Overlay Style */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Black with 0.3 opacity */
}

/* Hero Text Section */
.hero-text {
  /* padding: 20px; */
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 90px;
  padding-bottom: 90px;
}

.hero-column-left {
  width: 40%; /* Give a little space between columns */
}

.hero-column-right {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.group-time-location {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.group-time-location .group-time,
.group-time-location .group-location {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

/* XXL Screens (1800px and up) */
@media (min-width: 1800px) {
}

/* XL Screens (1600px-1799px) */
@media (min-width: 1600px) and (max-width: 1799px) {
}

/* Large Screens (1400px-1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
}

/* Medium-Large Screens (1200px-1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
}

/* Small-Medium Screens (max-width: 1199px) */
@media (max-width: 1199px) {
}

/* Small Screens (max-width: 992px) */
@media (max-width: 992px) {
}

/* Mobile Screens (max-width: 768px) */
@media (max-width: 768px) {
  .hero-text {
    padding-top: 48px;
    padding-bottom: 48px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
  }

  .hero-text .hero-column-left {
    width: 100%;
  }
}