.fade-in-element {
    opacity: 0; /* Hidden initially */
    transform: translateY(30px); /* Move 30px down */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Apply transition */
}

    /* Class to trigger the fade-in animation */
    .fade-in-element.show {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Reset translation */
    }

/* Initial styles for the element */
.fade-out-element {
    opacity: 1; /*Initially visible */
    transform: translateY(0); /*Initially at its normal position */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /*Transition properties */
}

    /* Class to trigger the fade-out animation */
    .fade-out-element.hide {
        opacity: 0; /* Fade out */
        /*transform: translateY(-30px); */ /* Move up by 30px */
    }