/* Keyframes for the zoom-out effect */
    @keyframes zoomOut {
        0% {
            transform: scale(1.2); /* Start slightly zoomed in */
            opacity: 0; /* Start as invisible */
        }
        100% {
            transform: scale(1); /* End at normal size */
            opacity: 1; /* End as fully visible */
        }
    }
    
    /* Apply the zoom-out effect to slider elements */
    .single-slider {
        animation: zoomOut 2s ease-out;
        background-size: cover;
        background-position: center;
        opacity: 0; /* Ensure it starts invisible */
        position: absolute; /* Stack slides on top of each other */
        width: 100%;
        height: 100%;
        transition: opacity 1s ease-in-out;
    }
    
    /* Ensure the currently active slide is visible */
    .slider-active .single-slider {
        opacity: 1; /* Ensure the active slide is visible */
    }
    
    /* Additional style to manage the visibility of the slides */
    .slider-active {
        position: relative; /* Make sure it's positioned relative for proper stacking */
        width: 100%;
        height: 100%;
    }