.raffhero p.eyebrow {
    color: #f79a20;
}
.video-background {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Places the video above the image */
}
.gradient-overlay {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 5, 13, 0.78) 0%, rgba(0, 5, 13, 0.3) 100%);
  z-index: 2; /* Places the gradient overlay above the video */
}
.gradient-bg {
  position: relative; /* Ensures that the child elements are positioned relative to this container */
  overflow: hidden; /* Prevents any overflow issues */
}


/* Hidden by default */
.bg-image.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in; /* Optional fade-in */
}

/* When visible */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 1;
  visibility: visible;
}

/* Animation for desktop (768px and above) */
@media (min-width: 768px) {
  .bg-image.delay {
    opacity: 0; /* Initially hidden */
    animation: fadeInImage 2s ease-in forwards 2s; /* 2-second delay */
  }
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}
.raffhero {
  height: fit-content;
  max-width: 840px;
  margin: 0 auto;
  text-align:center;
  padding-bottom: 100px;
  padding-top: 220px;
      z-index: 9;
    position: relative;
}

.raffhero h1 {
  color: #fff;
  letter-spacing: -2px;
  line-height: 1.1;
  text-shadow: 2px 2px 8px rgba(5, 102, 141, .3);
  margin-bottom: 30px;
}

.raffhero h2,
.raffhero h3,
.raffhero h4,
.raffhero h5,
.raffhero h6,
.raffhero p {
  color: white;
}

@media (max-width: 1410px) {
  .raffhero {
        padding-left: 20px;
        padding-right: 20px;
  }
}

@media (max-width: 767px) {
  
  .gradient-overlay {
    background: linear-gradient(to bottom, rgba(0, 5, 13, 0.5) 0%, #0d1c29 100%);
  }
  .raffhero h1 {
    font-size: 2em;
    letter-spacing: normal;
  }

  .raffhero {
    grid-template-columns: 1fr;
    max-width: 100%;
    grid-gap: 50px;
    align-items: center;
    display: grid;
  }

  .video-background {
    display: none; /* Completely hide the video on mobile */
  }

  .bg-image {
    display: block; /* Ensure the background image remains visible */
    background-size: cover;
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
    background-attachment: inherit;
  }
}
  
  
}