@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}




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

/* Add the animations to respective sections */
.scroll-animate.left-to-right {
    opacity: 0;
    animation: slideInFromLeft 1s forwards;
    overflow: hidden;
}

.scroll-animate.bottom-to-top {
    opacity: 0;
    animation: slideInFromBottom 1s forwards;
}

.scroll-animate.fade {
    opacity: 0;
    animation: fadeIn 1s forwards;
}