/* ===============================
   RESET
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===============================
   HERO SECTION (DESKTOP)
================================ */
.hero-scroll {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background: #000;
}

/* ===============================
   BACKGROUND IMAGE
================================ */
.bg-img-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}

/* ===============================
   OVERLAY
================================ */
.overlay {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* ===============================
   FADE IMAGES
================================ */
.fade-img-hero {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: min(60vw, 400px);
  max-width: 90%;
  height: auto;
  opacity: 0;
  object-fit: contain;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-img-hero.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ===============================
   TABLET
================================ */
@media (max-width: 1024px) {
  .fade-img-hero {
    width: min(65vw, 380px);
  }
}

/* ===============================
   MOBILE (CRITICAL FIX)
================================ */
@media (max-width: 768px) {
  /* Let image control height → removes gap */
  .hero-scroll {
    height: auto;
    min-height: unset;
  }

  .bg-img-hero {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: #000;
  }

  .overlay {
    position: absolute;
    inset: 0;
  }

  .fade-img-hero {
    top: 40%;
    transform: translate(-50%, 0);
    width: min(65vw, 200px);
  }
}




/* ===============================
   SMALL MOBILE
================================ */
@media (max-width: 480px) {
  .fade-img-hero {
    top: 50%;
    width: min(55vw, 130px);
  }
}




/* ===============================
   SHORT SCREENS
================================ */
@media (max-height: 700px) and (max-width: 768px) {
  .fade-img-hero {
    top: 35%;
  }
}