/*Animation Settings*/

/* Smooth fade-out class */
.fade-out {
    animation: fadeOutEffect 0.5s ease-out forwards;
}

/* Define the animation steps */
@keyframes fadeOutEffect {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* Smooth fade-in class */
.fade-in {
    pointer-events: auto;
    /* Restores click functionality */
    animation: fadeInEffect 0.5s ease-in forwards;
}

/* Define the animation steps */
@keyframes fadeInEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Define the keyframe animation */
@keyframes slideFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
        /* Starts 50px to the left */
    }

    to {
        opacity: 1;
        transform: translateX(0);
        /* Moves to its natural position */
    }
}

/* Apply the class to any element */
.slide-in-left {
    animation: slideFadeInLeft 0.6s ease-out forwards;
}

/* Define the keyframe animation */
@keyframes slideFadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
        /* Starts 50px to the right */
    }

    to {
        opacity: 1;
        transform: translateX(0);
        /* Moves to its natural position */
    }
}

/* Apply the class to your element */
.slide-in-right {
    animation: slideFadeInRight 0.6s ease-out forwards;
}

/* Define the keyframe animation */
@keyframes slideFadeInTop {
    from {
        opacity: 0;
        transform: translateY(50px);
        /* Starts 50px to the right */
    }

    to {
        opacity: 1;
        transform: translateX(0);
        /* Moves to its natural position */
    }
}

/* Apply the class to your element */
.slide-in-top {
    animation: slideFadeInBottom 0.6s ease-out forwards;
}

/* Define the keyframe animation */
@keyframes slideFadeInBottom {
    from {
        opacity: 0;
        transform: translateY(-50px);
        /* Starts 50px to the right */
    }

    to {
        opacity: 1;
        transform: translateX(0);
        /* Moves to its natural position */
    }
}

/* Apply the class to your element */
.slide-in-down {
    animation: slideFadeInBottom 0.6s ease-out forwards;
}