/* Smooth enter and leave with fade-out before fade-in */
.slide-enter-active, .slide-leave-active {
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.slide-enter, .slide-leave-to {
    opacity: 0; /* Initially, both entering and leaving elements have 0 opacity */
}

.slide-enter-to, .slide-leave {
    opacity: 1; /* The element is fully visible after the transition */
}

.slide-leave {
    opacity: 0;
    position: absolute; /* Prevent the leaving step from affecting the layout */
    z-index: 1; /* Ensures it stays above the new entering step */
}