/* Slide in from the left */
     @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Slide in from the right */
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Slide in from the top */
    @keyframes slideInTop {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Slide in from the bottom */
    @keyframes slideInBottom {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Initial hidden state for sliding elements */
    .slide-in-left, .slide-in-right, .slide-in-top, .slide-in-bottom {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
        will-change: transform, opacity; 
    }

    /* Classes to make elements visible when in view */
    .visible {
        opacity: 1;
        visibility: visible;
    }

    .visible-left {
        animation: slideInLeft 1s ease forwards;
    }

    .visible-right {
        animation: slideInRight 1s ease forwards;
    }

    .visible-top {
        animation: slideInTop 1s ease forwards;
    }

    .visible-bottom {
        animation: slideInBottom 1s ease forwards;
    }
/*@media(max-width: 767px){
    .slide-in-bottom,.slide-in-top{
        animation: none;
    }
}*/