.animate-on-scroll {
    opacity: 0;

    transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}

/* Left to Right */
.fade-in-left {
    transform: translateX(-80px);
}

.fade-in-right {
    transform: translateX(80px);
}

/* Bottom to Top */
.fade-in-bottom {
    transform: translateY(80px);

    /* transform: scale3d(1, 1, 1); */

}

@keyframes fade-in-bottom {
    0% {
        -webkit-backdrop-filter: blur(10px);
        /* Reduced from 100px to make it subtle */
        backdrop-filter: blur(10px);
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        opacity: 1;
        transform: translateY(0);
    }
}



@keyframes fade-in-left {
    0% {
        -webkit-backdrop-filter: blur(10px);
        /* Reduced from 100px to make it subtle */
        backdrop-filter: blur(10px);
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        opacity: 1;
        transform: translateX(0);
    }
}




@keyframes fade-in-right {
    0% {
        -webkit-backdrop-filter: blur(10px);
        /* Reduced from 100px to make it subtle */
        backdrop-filter: blur(10px);
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        opacity: 1;
        transform: translateX(0);
    }
}

/* When Element is Visible */
.show {
    opacity: 1;
    transform: translateX(0) translateY(0);
}