@media(min-width:1200px){    
    .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;
    }
}