/* Home page */
.slider_area {
  min-height: 90vh;
  background-color: #025376;
}

/* Keep the navbar in its own row above the hero instead of over the video. */
.header-area,
.header-area .main-header-area:not(.sticky) {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
}

#myVideo,
.fallbackVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.slider_area .content {
  position: relative;
  z-index: 2;
}

.fallbackImage {
  background-image: var(--hero-fallback-bg);
  background-size: cover;
  background-position: center;
}

.fallbackVideo {
  z-index: 1;
  background: #025376;
}

.hero-lead {
  font-weight: bold;
  font-size: 45px;
}

.Ai {
  background-image: var(--ai-section-bg);
}

.testmonial_area {
  background-image: var(--testimonials-bg);
}

.logo-slid .slide-track img {
  animation-play-state: paused;
}

.logo-slid .slide-track.is-in-view img {
  animation-play-state: running;
}

#form-response-message {
  margin-top: 15px;
  font-weight: bold;
  display: none;
}

#form-response-message.is-visible {
  display: block;
}

#form-response-message.is-success {
  color: #28a745;
}

#form-response-message.is-error {
  color: #dc3545;
}

@media (max-width: 991.98px) {
  #myVideo {
    display: none !important;
  }

  .fallbackVideo {
    display: block !important;
  }
}

@media (min-width: 992px) {
  /*
    Let the desktop video establish the hero height from its intrinsic ratio.
    This displays the complete frame instead of cropping it with object-fit: cover.
  */
  .slider_area {
    display: block;
    min-height: 0;
    height: auto;
  }

  #myVideo {
    position: relative;
    inset: auto;
    display: block !important;
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
  }

  .slider_area .content {
    position: absolute;
    top: 35%;
    left: 0;
    width: calc(100% - clamp(64px, 8.3vw, 125px));
    margin-left: clamp(64px, 8.3vw, 125px);
    margin-bottom: 0;
  }
}