.fadeinLeft {
    opacity: 0; /* Start hidden */
    transform: translateX(-20px); /* Optional: start slightly off-screen */
    transition: opacity 0.5s, transform 0.5s; /* Default transition */
}

.fadeinLeft.visible {
    opacity: 1; /* Fade in */
    transform: translateX(0); /* Move to original position */
}


.fadeinLeft1 {
    opacity: 0; /* Start hidden */
    transform: translateX(-20px); /* Optional: start slightly off-screen */
    transition: opacity 0.5s, transform 0.5s; /* Default transition */
}

.fadeinLeft1.visible {
    opacity: 1; /* Fade in */
    transform: translateX(0); /* Move to original position */
}

.fadeinLeft2 {
    opacity: 0; /* Start hidden */
    transform: translateX(-20px); /* Optional: start slightly off-screen */
    transition: opacity 0.5s, transform 0.5s; /* Default transition */
}

.fadeinLeft2.visible {
    opacity: 1; /* Fade in */
    transform: translateX(0); /* Move to original position */
}

.fadeinTop {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(0, -100px);
  }
  
.fadeinTop.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.fadeinLeft {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(-100px, 0); /* Start from the left */
}

.fadeinLeft.visible {
    opacity: 1;
    transform: translate(0, 0); /* Move to original position */
}

.fadeinRight {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(100px,0);
}

.fadeinRight.visible {
    opacity: 1;
    transform: translate(0, 0);
}