/* ==============================================
   HERO IMAGE FIX - Additional CSS
   Tambahan untuk perbaikan tampilan gambar hero
   ============================================== */

/* Alternative approach untuk slide 3 yang bermasalah */
.slide[data-index="2"] {
  background: linear-gradient(135deg, #0A2342 0%, #C8A951 100%);
}

.slide[data-index="2"] .slide-bg {
  /* Option 1: Show full image without cropping */
  object-fit: contain !important;
  object-position: center center !important;
  background-color: rgba(10, 35, 66, 0.8); /* Fallback background */
}

/* Alternative option 2: Better cropping position */
/*
.slide[data-index="2"] .slide-bg {
  object-fit: cover !important;
  object-position: center 30% !important;
}
*/

/* Option 3: Scale and position for better visibility */
/*
.slide[data-index="2"] .slide-bg {
  object-fit: cover !important;
  object-position: 70% center !important;
  transform: scale(1.1) !important;
}
*/

/* Responsive adjustments for the problematic slide */
@media (max-width: 900px) {
  .slide[data-index="2"] .slide-bg {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
}

/* Ensure text remains readable on slide 3 */
.slide[data-index="2"] .slide-content {
  background: rgba(0, 0, 0, 0.3);
  padding: 3rem 2rem;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

/* ==============================================
   QUICK FIXES - Uncomment yang terbaik
   ============================================== */

/* Fix 1: Full image display (recommended untuk testing) */
.hero-image-fix-contain .slide-bg {
  object-fit: contain !important;
  background: linear-gradient(135deg, #0A2342 0%, #C8A951 100%);
}

/* Fix 2: Better crop position */
.hero-image-fix-crop .slide-bg {
  object-fit: cover !important;
  object-position: center 25% !important;
}

/* Fix 3: Scale up for better visibility */
.hero-image-fix-scale .slide-bg {
  object-fit: cover !important;
  transform: scale(1.2) !important;
  object-position: center center !important;
}