.animate__animated {
    opacity: 0;
   /* Initially set opacity to 0 for all animations */
}
/* Simple fade-in */
@keyframes fadeIn {
    0% {
        opacity: 0;
   }
    100% {
        opacity: 1;
   }
}
.animate__animated.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* Fade-in from the top */
@keyframes fadeTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
   }
    100% {
        opacity: 1;
        transform: translateY(0);
   }
}
.animate__animated.fadeTop {
    animation-name: fadeTop;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* Fade-in from the left */
@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
   }
    100% {
        opacity: 1;
        transform: translateX(0);
   }
}
.animate__animated.fadeLeft {
    animation-name: fadeLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* Fade-in from the right */
@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
   }
    100% {
        opacity: 1;
        transform: translateX(0);
   }
}
.animate__animated.fadeRight {
    animation-name: fadeRight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* Fade-in from the bottom */
@keyframes fadeBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
   }
    100% {
        opacity: 1;
        transform: translateY(0);
   }
}
.animate__animated.fadeBottom {
    animation-name: fadeBottom;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}