/* Define a fade-in animation */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Apply the fade-in animation to elements with the .fade-in class */
.fade-in {
    animation: fade-in 1s ease-out;
}

/* Define a slide-in animation */
@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Apply the slide-in animation to elements with the .slide-in class */
.slide-in {
    animation: slide-in 0.5s ease-in;
}

/* Define a hover grow effect */
.hover-grow {
    transition: transform 0.3s ease-in-out;
}
.hover-grow:hover {
    transform: scale(1.05);
}

/* Define a focus grow effect */
.focus-grow:focus {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}