/* Keyframes for sliding in from the top */
@keyframes slideInTopp {
    0% {
        transform: translateX(100%); /* Start above the section */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* End at original position */
        opacity: 1;
    }
}

@keyframes slideOutTopp {
    0% {
        transform: translateX(0); /* Start at original position */
        opacity: 1;
    }
    100% {
        transform: translateX(-100%); /* Move above the section while fading out */
        opacity: 0;
    }
}

/* Classes for animations */
.start-hiddenn {
    opacity: 0;
    transform: translateX(-100%); /* Hide above */
}

.slide-in-topp {
    animation: slideInTopp 0.8s ease forwards;
    /* animation-delay: 1s; 1 second delay */
}

.slide-out-topp {
    animation: slideOutTopp 0.8s ease forwards; /* Move out upwards */
}