/* =========================================
   Modern Split Hero Section (New Layout)
   ========================================= */
.hero-modern-split {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
  padding-top: 80px; /* Header height offset */
}

/* Left Side: Text Content */
.hero-modern-text-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background-color: #f8fafc; /* Very light slate/gray background */
}

.hero-content-wrapper {
  max-width: 600px;
  width: 100%;
}

/* Right Side: Image */
.hero-modern-image-area {
  flex: 1.2; /* Slightly wider images */
  position: relative;
  overflow: hidden;
}

.hero-modern-image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Slideshow Styles */
/* Slideshow Styles */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Transition for fading OUT when class is removed */
    transition: opacity 3s ease-in-out; 
    z-index: 1;
}

/* Show pointer if link exists */
.hero-slide[data-link] {
    cursor: pointer;
}


.hero-slide.active {
    opacity: 1;
    z-index: 2;
    /* Animation: 7s zoom + 1s hold = 8s total sequence */
    animation: zoomFade 8s ease-out forwards;
}

@keyframes zoomFade {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    15% { /* Fade in quickly */
        opacity: 1;
    }
    87.5% { /* 7 seconds: Finish zoom at scale 1 */
        opacity: 1;
        transform: scale(1);
    }
    100% { /* 8 seconds: Hold full size */
        opacity: 1;
        transform: scale(1);
    }
}

/* Hover Effect on Hero Image (Optional Subtle Zoom) */
.hero-modern-split:hover .hero-modern-image-area img {
  /* Disable hover zoom as it conflicts with the slideshow animation */
  transform: none; 
}

/* Responsive Adjustments */
@media (max-width: 900px) {
  .hero-modern-split {
    flex-direction: column-reverse; /* Text below, Image above */
    height: auto;
    min-height: auto;
  }

  .hero-modern-image-area {
    width: 100%;
    height: 300px; /* Fixed height for image on mobile */
    flex: none;
  }

  .hero-modern-text-area {
    width: 100%;
    padding: 40px 20px;
    text-align: center;
  }
  
  /* Center text elements on mobile override */
  .hero-title, 
  .hero-subtitle {
     text-align: center !important;
  }

  .split-cta-container {
     grid-template-columns: 1fr !important; /* Stack buttons */
  }
  
  .cta-box-horizontal {
      flex-direction: column;
      text-align: center !important;
  }
  
  .cta-box-horizontal div {
      text-align: center !important;
  }
}