/* Define the fade-in animation */
@keyframes fadeInDivAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInScaleUpAnimation {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply the animation to the div */
.fade-in-div {
    animation-name: fadeInDivAnimation;
    animation-duration: 1.25s;
    /* Adjust the time to control the speed of the fade-in */
    animation-fill-mode: forwards;
    /* Keeps the div visible after the animation completes */
}

/* Optional: Make sure the div is initially hidden */
.fade-in-div {
    opacity: 0;
}

/* Define the fade-in and scale-up animation */

/* Apply the animation to images with a specific class */
.image-fade-in-scale-up {
    animation-name: fadeInScaleUpAnimation;
    animation-duration: 1s;
    /* Adjust the time to control the speed of the effect */
    animation-fill-mode: forwards;
    /* Keeps the image visible and scaled up after the animation completes */
    /* Ensure the image is initially hidden and scaled down */
    opacity: 0;
    transform: scale(0.95);
}

.image-fade-in-scale-up-soft {
    animation-name: fadeInScaleUpAnimation;
    animation-duration: 0.5s;
    /* Adjust the time to control the speed of the effect */
    animation-fill-mode: forwards;
    /* Keeps the image visible and scaled up after the animation completes */
    /* Ensure the image is initially hidden and scaled down */
    opacity: 0;
    transform: scale(0.95);
}