/* Ensure the parent div is positioned relatively for proper animation context */
#form-row {
    overflow: hidden; /* Prevent overflow during animation */
   
}

#form-card, .show-attachments, #submit, #cancel {
    animation: fadeIn 1.3s ease-in-out;
}
    /* Base styles for the columns */
    #form-row .col-md-6{
        opacity: 0; /* Start invisible */
        animation-duration: 0.8s; /* Animation duration */
        animation-fill-mode: forwards; /* Keep the final state after animation */
        animation-timing-function: ease-out; /* Smooth easing */
    }
        /* Animate odd-numbered columns (1st, 3rd, 5th, etc.) from left to center */
        #form-row .col-md-6:nth-child(odd) {
            animation-name: slideInFromLeft;
            transform: translateX(-100%); /* Start position: off-screen to the left */
        }
        /* Animate even-numbered columns (2nd, 4th, 6th, etc.) from right to center */
        #form-row .col-md-6:nth-child(even) {
            animation-name: slideInFromRight;
            transform: translateX(100%); /* Start position: off-screen to the right */
        }

/* Keyframes for sliding from left to center */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* Keyframes for sliding from right to center */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Optional: Add a slight delay for each div to create a staggered effect */
#form-row .col-md-6:nth-child(1) {
    animation-delay: 0.1s;
}

#form-row .col-md-6:nth-child(2) {
    animation-delay: 0.2s;
}

#form-row .col-md-6:nth-child(3) {
    animation-delay: 0.3s;
}

#form-row .col-md-6:nth-child(4) {
    animation-delay: 0.4s;
}

#form-row .col-md-6:nth-child(5) {
    animation-delay: 0.5s;
}

#form-row .col-md-6:nth-child(6) {
    animation-delay: 0.6s;
}

#form-row .col-md-6:nth-child(7) {
    animation-delay: 0.7s;
}