/* ==========================================================================
   Marji V9 — clean full-bleed hero
   The slide images supplied by the client (GREE AI LEARNING / SMART HUMIDITY
   CONTROL / CLIVIA) already carry their own headline + product copy, so
   we hide our text overlay and let the image fill the entire slide.
   Dots/arrows still float on top.
   ========================================================================== */

/* Hide the headline / sub / actions / inline counter that previously sat
   on top of the hero image (each slide's image already has them). */
.hero-slide-text > * { display: none !important; }

/* Reclaim the slide-text container — it no longer needs width nor padding */
.hero-slide-text {
  flex: 0 0 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Drop the V8 gradient overlay since there's no text to make readable */
.hero-slide .row::before { display: none !important; }

/* Image column takes up the full slide */
.hero-slide .row > [class*="col-"]:not(.hero-slide-text) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
.hero-slide-media {
  width: 100%;
  height: 100%;
}
.hero-slide-media img,
.hero-slide-media video {
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Make sure the slide itself respects the natural image height */
.hero-slide,
.hero-slide .row { min-height: 560px; }

/* Pagination dots over the image */
.hero-slider .swiper-pagination {
  position: absolute;
  bottom: 22px;
  left: 0; right: 0;
  z-index: 4;
  text-align: center;
}
.hero-slider .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.7);
  width: 11px;
  height: 11px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  opacity: 1;
  margin: 0 5px !important;
}
.hero-slider .swiper-pagination-bullet-active {
  background: var(--color-primary);
  width: 30px;
  border-radius: 5px;
}

@media (max-width: 991px) { .hero-slide, .hero-slide .row { min-height: 420px; } }
@media (max-width: 767px) { .hero-slide, .hero-slide .row { min-height: 280px; } }