/* Animation for RTL (right to left) */
.appear-rtl {
    opacity: 0; /* Start with opacity 0 */
    transform: translateX(100px); /* Move 100px to the right */
    transition: opacity 0.8s ease-in, transform 0.6s ease-in; /* Transition for opacity and transform properties */
}

.appear-rtl.appeared {
    opacity: 1; /* Opacity 1 when the image has appeared */
    transform: translateX(0); /* Reset the translation */
}

/* Animation for LTR (left to right) */
.appear-ltr {
    opacity: 0; /* Start with opacity 0 */
    transform: translateX(-100px); /* Move 100px to the left */
    transition: opacity 0.8s ease-in, transform 0.6s ease-in; /* Transition for opacity and transform properties */
}

.appear-ltr.appeared {
    opacity: 1; /* Opacity 1 when the image has appeared */
    transform: translateX(0); /* Reset the translation */
}