.about-hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.about-hero-parallax {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero-bg-video,
.hero-image {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

/* Video-specific fixes */
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
}

/* Image inside picture */
.image-bg,
.image-bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
}

/* Mobile and Tablet Responsiveness */
@media (max-width: 768px) {
  .about-hero-section {
    height: 500px; /* Reduce height for mobile */
  }

  .hero-bg-video,
  .hero-image {
    height: 100%; /* Ensure video/image fills container */
    object-position: center; /* Ensure the content is centered */
  }

  .hero-bg-video {
    height: auto; /* Allow video to resize based on the container */
  }

  .image-bg,
  .image-bg img {
    width: 100%;
    height: auto; /* Keep aspect ratio intact for image */
  }

  /* Adjust for small screens */
  .hero-image {
    object-position: center center; /* Center the hero image */
  }
}

@media (max-width: 480px) {
  .about-hero-section {
    height: 400px; /* Further reduce height for very small screens */
  }

  .hero-bg-video,
  .hero-image {
    height: 100%;
    object-position: center center;
  }

  .hero-bg-video {
    height: 100%; /* Ensure video is fully responsive */
  }

  .image-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}