@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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



@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-slide-down {
    animation: slideDown 0.6s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}















/* animation css starts*/

/* Base State */
[class*="reveal-"] {
    opacity: 0;
    transition: all 0.8s ease;
}

/* Directions */
.reveal-bottom {
    transform: translateY(100px);
}

.reveal-top {
    transform: translateY(-100px);
}

.reveal-right {
    transform: translateX(100px);
}

.reveal-left {
    transform: translateX(-100px);
}

/* When in view */
.reveal-visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* animation css ends */