/* Scroll Animation Styles for About Page */

.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-animate-scale.animate-in {
    opacity: 1;
    transform: scale(1);
}

.scroll-animate-slide-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-animate-slide-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Optional: Add more animation variants */
.scroll-animate-slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-animate-slide-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-fade {
    opacity: 0;
    transition: opacity 0.7s ease-out;
}

.scroll-animate-fade.animate-in {
    opacity: 1;
}