/* Fade in from bottom */
.fadeInUp {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1.5s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from top */
.fadeInDown {
    opacity: 0;
    transform: translateY(-50px);
    animation: fadeInDown 1.5s ease forwards;
}

@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from left */
.fadeInLeft {
    opacity: 0;
    transform: translateX(-50px);
    animation: fadeInLeft 1.5s ease forwards;
}

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in from right */
.fadeInRight {
    opacity: 0;
    transform: translateX(50px);
    animation: fadeInRight 1.5s ease forwards;
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Fade out towards top */
.fadeOutUp {
    opacity: 1;
    transform: translateY(0);
    animation: fadeOutUp 1.5s ease forwards;
}

@keyframes fadeOutUp {
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/* Fade out towards bottom */
.fadeOutDown {
    opacity: 1;
    transform: translateY(0);
    animation: fadeOutDown 1.5s ease forwards;
}

@keyframes fadeOutDown {
    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

/* Fade out towards left */
.fadeOutLeft {
    opacity: 1;
    transform: translateX(0);
    animation: fadeOutLeft 1.5s ease forwards;
}

@keyframes fadeOutLeft {
    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

/* Fade out towards right */
.fadeOutRight {
    opacity: 1;
    transform: translateX(0);
    animation: fadeOutRight 1.5s ease forwards;
}

@keyframes fadeOutRight {
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}