/* --- Hero Slider Styles --- */

.hero-image-slider {
    position: relative; /* Establishes a positioning context for absolute children */
    /* IMPORTANT: Define the height or aspect ratio of your slider.
       Adjust this based on your image dimensions or desired hero size. */
    aspect-ratio: 16 / 7; /* Example: A common widescreen ratio, adjust as needed */
    /* Or use a fixed height: */
    /* height: 600px; */
    overflow: hidden; /* Ensures content outside the container is hidden */
  }
  
  .hero-slide {
    position: absolute; /* Position slides on top of each other */
    top: 0;
    left: 0;
    opacity: 0; /* Hide slides by default */
    visibility: hidden; /* Hide from accessibility tree and rendering */
    transition: opacity 1.5s ease-in-out; /* Smooth fade transition (1 second duration) */

  }
  
  .hero-slide.active {
    opacity: 1; /* Make the active slide visible */
    visibility: visible; /* Make it accessible and visible */
  }