.hero-section {
    position: relative;
    height: 100vh; /* Full height of the viewport */
    overflow: hidden; /* Hide overflowing content */
}

.hero-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Ensure the slides are in a row */
    transition: transform 1s ease-in-out; /* Smooth transition for slide changes */
    z-index: -10;
}
.hero-slide {
    min-width: 100%; /* Each slide takes full width */
    height: 100%;
    background-size: cover; /* Cover the entire slide */
    background-position: center; /* Center the background image */
    opacity: 0; /* Start with opacity 0 */
    transition: opacity 1s ease-in-out; /* Smooth transition for opacity */
    position: absolute; /* Position absolutely within the hero-carousel */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    z-index: 1; /* Ensure slides are on top */
}

.hero-slide.active {
    opacity: 1; /* Only the active slide is fully visible */
    z-index: 2; /* Bring the active slide to the front */
}