/* =========================
   HERO BASE
========================= */

.hero {
  position: relative;
  overflow: hidden;
  background: #0b0f1a;
}

/* background overlay (optional) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #0b0f1a 50%, #111c2e 50%);
  z-index: 0;
}

/* container */
.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* row must be full width */
.hero-row {
  min-height: 420px;
}

/* =========================
   LEFT TEXT SIDE
========================= */

.hero-text {
  padding: 60px;
  color: #fff;
  z-index: 3;
  position: relative;
}

/* =========================
   RIGHT SLIDER SIDE
========================= */

.hero-slider-wrapper {
  padding: 0;              /* 🔥 removes Bootstrap spacing */
  margin: 0;
  position: relative;
}

/* slider box */
.mockup-slider {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 12px;
}

/* =========================
   SLIDES FIX (CRITICAL)
========================= */

.slide {
  position: absolute;
  inset: 0;                 /* 🔥 FIXES LEFT CROP ISSUE */
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 1s ease;
}

.slide.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.slide.prev {
  opacity: 0;
  transform: translateX(-100%);
  z-index: 1;
}

/* =========================
   IMAGE FIX (MOST IMPORTANT)
========================= */

.mockup {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center; /* 🔥 fixes left cropping illusion */
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

  .hero-text {
    padding: 30px;
    text-align: center;
  }

  .mockup-slider {
    height: 300px;
  }

  .hero-row {
    min-height: auto;
  }

}