/* Initial state: Hidden and moved */
.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease-out;
}

/* Active state: Visible and in position */
.scroll-reveal-left.reveal-active,
.scroll-reveal-right.reveal-active {
    opacity: 1;
    transform: translateX(0);
}