.pdqhero a.button.button-secondary {
    background: transparent;
    border-color: white;
}
.pdqhero a.button.button-secondary:hover {
    background: white;
  color:#0079c2;
    border-color: white;
}

.pdqhero p.eyebrow {
  color: #78ccff;

}
.video-background {
position: absolute;
    top: -190px;
    left: 440px;
    width: 100%;
    height: 159%;
    object-fit: cover;
    z-index: 1;
}
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(16 113 175) 0%, rgb(16 113 175) 25%, #33aaff36 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: 100%;
  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;
  }
}
.pdqhero {
  height: fit-content;
  max-width: 600px;
padding-bottom: 160px;
    padding-top: 230px;
  z-index: 9;
  position: relative;
}

.pdqhero h1 {
  color: #fff;
  letter-spacing: -1px;
  font-size: 3.3em;
  line-height: 1.2 !important;
  text-shadow: 2px 2px 8px rgba(5, 102, 141, .3);
  margin-bottom: 30px;
}

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

@media (max-width: 1410px) {
  .pdqhero {
    padding-left: 0px;
  }
}

@media (max-width: 767px) {

  .gradient-overlay {
    background: linear-gradient(to right, rgb(16 113 175) 0%, #33aaffd9 100%);
  }
  .pdqhero h1 {
    font-size: 2.5em;
    letter-spacing: normal;
  }

  .pdqhero {
grid-template-columns: 1fr;
        max-width: 100%;
        grid-gap: 50px;
        align-items: center;
        display: grid;
        padding-bottom: 100px;
        padding-top: 170px;
  }

  .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;
  }
}


}