.hover-button:hover {
    color: red;
    background-color: white;
}

@keyframes slideInRight {

    from {
        transform: translateX(100%); /* Start off-screen to the right */
        opacity: 0; /* Start with opacity 0 */
    }

    to {
        transform: translateX(0); /* End at the original position */
        opacity: 1; /* End with opacity 1 */
    }
}

@keyframes fade-out {

    from {
        opacity: 1; /* Start with opacity 0*/
    }

    to {
        opacity: 0; /* End with opacity 1 */
    }
}

@keyframes slideOutLeft {

    from {
        transform: translateX(0); /* Start off-screen to the right */
        opacity: 1; /* Start with opacity 0 */
    }

    to {
        transform: translateX(-100%); /* End at the original position */
        opacity: 0; /* End with opacity 1 */
    }
}

.moving-images-in {
    animation: slideInRight 0.5s ease-out; /* 1 second duration, ease-out timing function */
    
}

.moving-images-out {
    animation: slideOutLeft 0.5s ease-out; /* 1 second duration, ease-out timing function */
   
}

.fading-out{
    animation:fade-out 0.5s ease-out;
}