@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes flip {
    0% {
        opacity: 0;
        transform: rotateY(-180deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0);
    }
}
@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes flipUp {
    0% {
        opacity: 0;
        transform: rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0);
    }
}

@keyframes flipDown {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0);
    }
}
@keyframes flipLeft {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0);
    }
}

@keyframes flipRight {
    0% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0);
    }
}

.flip-left {
    opacity: 0;
    animation: flipLeft var(--animation-duration, 1s) ease-out forwards;
}

.flip-right {
    opacity: 0;
    animation: flipRight var(--animation-duration, 1s) ease-out forwards;
}

.flip-up {
    opacity: 0;
    animation: flipUp var(--animation-duration, 1s) ease-out forwards;
}

.flip-down {
    opacity: 0;
    animation: flipDown var(--animation-duration, 1s) ease-out forwards;
}

.fade-down {
    opacity: 0;
    animation: fadeDown var(--animation-duration, 1s) ease-out forwards;
}

.zoom-in {
    opacity: 0;
    animation: zoomIn var(--animation-duration, 1s) ease-out forwards;
}

.zoom-out {
    opacity: 1;
    animation: zoomOut var(--animation-duration, 1s) ease-out forwards;
}

.flip {
    opacity: 0;
    animation: flip var(--animation-duration, 1s) ease-out forwards;
}

.fade-in {
    opacity: 0;
    animation: fadeIn var(--animation-duration, 1s) ease-out forwards;
}

.fade-up {
    opacity: 0;
    animation: fadeUp 1s ease-out forwards;
    animation-fill-mode: both; /* Ensure the element remains visible after animation */
}

.fade-left {
    opacity: 0;
    animation: fadeLeft var(--animation-duration, 1s) ease-out forwards;
}

.fade-right {
    opacity: 0;
    animation: fadeRight var(--animation-duration, 1s) ease-out forwards;
}
.fade-up-delay-1 {
    animation-delay: 0.2s;
}

.fade-up-delay-2 {
    animation-delay: 0.4s;
}

.fade-up-delay-3 {
    animation-delay: 0.6s;

}

.fade-up-delay-4 {
    animation-delay: 0.8s;
}

.fade-up-delay-5 {
    animation-delay: 1s;
}

.fade-up-delay-6 {
    animation-delay: 1.2s;
}

.fade-up-delay-7 {
    animation-delay: 1.4s;
}
.fade-up-delay-8 {
    animation-delay: 1.6s;
}