/* Slowing down the animation for text and button */
.slide-in-down {
    animation-name: slideInDown;
    animation-duration: 2.5s; /* Slow down the animation */
    animation-fill-mode: both;
}

/* Define fade-out to match the existing behavior */
.fade-out {
    animation-name: fadeOut;
    animation-duration: 2.5s;
    animation-fill-mode: both;
}

/* Custom button animation */
.animated-button {
    animation-name: slideInDown;
    animation-duration: 2.5s; /* Slow down button animation to match text */
    animation-fill-mode: both;
}

/* Add keyframes for the animations */
@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}