/* CSS Code */
.fade-left-to-right {
    opacity: 0;
    transform: translateX(-100px); 
    transition: opacity 0.2s ease-out, transform 1s ease-out; 
}

.fade-left-to-right.is-visible {
    opacity: 1;
    transform: translateX(0); 
}

.fade-left-to-right1 {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.2s;
}
.fade-left-to-right1.is-visible {
    opacity: 1;
    transform: translateX(0); 
}

.fade-left-to-right2 {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.4s;
}
.fade-left-to-right2.is-visible {
    opacity: 1;
    transform: translateX(0); 
}


/* Right To left fade */
.fade-right-to-left {
    opacity: 0;
    transform: translateX(100px); 
    transition: opacity 0.2s ease-out, transform 1s ease-out; 
}

.fade-right-to-left.is-visible {
    opacity: 1;
    transform: translateX(0); 
}

.fade-right-to-left-d1 {
    opacity: 0;
    transform: translateX(100px); 
    transition: opacity 1s ease-out, transform 1s ease-out; 
}

.fade-right-to-left-d1.is-visible {
    opacity: 1;
    transform: translateX(0); 
}

/* bottom to top */

/* CSS Code */
.fade-bottom-to-top {
    opacity: 0;
    transform: translateY(100px); /* Starts 100px below its final position */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-bottom-to-top.is-visible {
    opacity: 1;
    transform: translateY(0); /* Moves to its final position */
}

.fade-bottom-to-top1 {
    opacity: 0;
    transform: translateY(100px); /* Starts 100px below its final position */
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.2s;
}

.fade-bottom-to-top1.is-visible {
    opacity: 1;
    transform: translateY(0); /* Moves to its final position */
}

.fade-bottom-to-top2 {
    opacity: 0;
    transform: translateY(100px); /* Starts 100px below its final position */
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.4s;
}

.fade-bottom-to-top2.is-visible {
    opacity: 1;
    transform: translateY(0); /* Moves to its final position */
}

.fade-bottom-to-top3 {
    opacity: 0;
    transform: translateY(100px); /* Starts 100px below its final position */
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.4s;
}

.fade-bottom-to-top3.is-visible {
    opacity: 1;
    transform: translateY(0); /* Moves to its final position */
}



.fade-in {
    /* Start completely invisible */
    opacity: 0;
    /* Smoothly transition opacity over 1 second */
    transition: opacity 1s ease-out;
}

.fade-in.is-visible {
    /* Become fully visible when 'is-visible' class is added */
    opacity: 1;
}