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

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

/* General styling for sections */
.section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    gap: 20px;
    margin-bottom: 50px;
    opacity: 0; /* Hidden initially */
    transition: opacity 0.5s ease;
}

/* Animation trigger classes */
.animate-left {
    animation: slideInLeft 1s forwards;
}

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