/* Container with overflow hidden */
.overflow-hidden {
    overflow: hidden;
}

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

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

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

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

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

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

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

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

/* Base fadeinRight (already present) */
.fadeinRight {
    opacity: 0;
    transition: all 1s;
    transform: translate(100px, 0);
}

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

/* Sequential fadeinRight variations */

.fadeinRight1 {
    opacity: 0;
    transition: all 1s;
    transition-delay: 0.2s;
    transform: translate(100px, 0);
}

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

.fadeinRight2 {
    opacity: 0;
    transition: all 1s;
    transition-delay: 0.4s;
    transform: translate(100px, 0);
}

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

.fadeinRight3 {
    opacity: 0;
    transition: all 1s;
    transition-delay: 0.6s;
    transform: translate(100px, 0);
}

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

.fadeinRight4 {
    opacity: 0;
    transition: all 1s;
    transition-delay: 0.8s;
    transform: translate(100px, 0);
}

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


/* Sequential Zoom in effect - faster animation */
/* First zoom-in effect */
/*.zoomin {
    opacity: 0;
    transform: scale(0.5); 
    transition: transform 2s ease, opacity 0.4s ease;
    transition-delay: 0.1s;
}

.zoomin.visible {
    opacity: 1;
    transform: scale(1); 
}*/

/* Second zoom-in effect */
.zoomin {
    opacity: 0;
    transform: scale(0.5); /* Start small */
    transition: transform 0.5s ease, opacity 0.5s ease;
    transition-delay: 0.2s; /* Shorter delay for the second element */
}

.zoomin.visible {
    opacity: 1;
    transform: scale(1); /* Normal size */
}

/* Third zoom-in effect */
.zoomin1 {
    opacity: 0;
    transform: scale(0.5); /* Start small */
    transition: transform 0.6s ease, opacity 0.6s ease;
    transition-delay: 0.3s; /* Shorter delay for the third element */
}

.zoomin1.visible {
    opacity: 1;
    transform: scale(1); /* Normal size */
}

/* Fourth zoom-in effect */
.zoomin2 {
    opacity: 0;
    transform: scale(0.5); /* Start small */
    transition: transform 0.7s ease, opacity 0.7s ease;
    transition-delay: 0.4s; /* Shorter delay for the fourth element */
}

.zoomin2.visible {
    opacity: 1;
    transform: scale(1); /* Normal size */
}

/* Fifth zoom-in effect */
.zoomin3 {
    opacity: 0;
    transform: scale(0.5); /* Start small */
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition-delay: 0.5s; /* Shorter delay for the fifth element */
}

.zoomin3.visible {
    opacity: 1;
    transform: scale(1); /* Normal size */
}




/* sixth zoom-in effect */
.zoomin4 {
    opacity: 0;
    transform: scale(0.5); /* Start small */
    transition: transform 0.9s ease, opacity 0.8s ease;
    transition-delay: 0.5s; /* Shorter delay for the fifth element */
}

.zoomin4.visible {
    opacity: 1;
    transform: scale(1); /* Normal size */
}

/* Zoom-out effect */
.zoomout {
    opacity: 0;
    transform: scale(0.5); /* Start at normal size */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Faster zoom out */
}

.zoomout.visible {
    opacity: 1;
    transform: scale(1); /* Shrink */
}


/* Flip effect (Y-axis) */
.flip {
    opacity: 0;
    transform: rotateY(90deg);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform-origin: center;
}

.flip.visible {
    opacity: 1;
    transform: rotateY(0deg);
}

.flipY {
    opacity: 0;
    transform: rotateY(0deg);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform-origin: center;
}

.flipY.visible {
    opacity: 1;
    transform: rotateY(90deg);
}

/* Flip effect (X-axis) */
.flipX {
    opacity: 0;
    transform: rotateX(90deg);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform-origin: center;
}

.flipX.visible {
    opacity: 1;
    transform: rotateX(0deg);
}

/* Extra 3D depth effect on hover (Optional) */
.flip:hover,
.flipX:hover {
    transform: scale(1.05); /* Slight zoom for effect */
}