/* Keep the presentation prominent without changing other page layouts. */
section.hero.incloud-video-hero {
  min-height: 100svh;
  padding-top: 8.5rem;
  padding-bottom: 3.5rem;
}

.incloud-video-hero > .container {
  max-width: 1600px;
  padding-inline: clamp(0.75rem, 2.25vw, 2.5rem);
}

.incloud-video-hero .hero-content,
.incloud-video-hero .hero-media {
  min-width: 0;
  max-width: none;
}

.incloud-video-hero .hero-video-box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Keep decorative background particles behind the media and its controls. */
.incloud-video-hero .hero-media {
  z-index: 2;
}

/* Native controls must not be covered by the floating contact widget. */
body:has(.incloud-video-hero .hero-video:not(.d-none)) .whatsapp-container {
  display: none;
}

@media (min-width: 992px) {
  .incloud-video-hero .hero-content {
    flex: 0 0 35%;
    width: 35%;
    padding-right: clamp(1.5rem, 2.5vw, 3rem);
  }

  .incloud-video-hero .hero-media {
    flex: 0 0 65%;
    width: 65%;
  }

  .incloud-video-hero h1.hero-title {
    font-size: clamp(1.75rem, 2.2vw, 2.375rem);
  }

  html[lang="en"] .incloud-video-hero h1.hero-title {
    font-size: clamp(1.625rem, 2vw, 2.125rem);
  }

  .incloud-video-hero .hero-subtitle {
    font-size: clamp(1rem, 1.2vw, 1.1875rem);
    line-height: 1.65;
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;
  }

  .incloud-video-hero .hero-actions {
    gap: 0.75rem;
  }

  .incloud-video-hero .btn-hero {
    font-size: 0.9375rem;
    min-height: 50px;
  }

  .incloud-video-hero .hero-stats {
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

@media (max-width: 991.98px) {
  .incloud-video-hero .hero-content {
    margin-top: var(--bs-gutter-y, 0);
  }

  .incloud-video-hero h1.hero-title {
    font-size: clamp(2rem, 4.5vw, 2.625rem);
  }

  html[lang="en"] .incloud-video-hero h1.hero-title {
    font-size: clamp(1.875rem, 4.2vw, 2.5rem);
  }

  .incloud-video-hero .hero-media {
    margin-top: 2rem;
  }
}