.banner-img {
    height: 40vh;           
    object-fit: fill;
    object-position: top;
    width: 100%;
}

@media (max-width: 768px) {
    .banner-img {
        height: 25vh;
    }

    .banner-img_department {
        height: 5vh;           
        object-fit: cover;
        object-position: top;
    }

    .max-height {
        height: 10px;        /* Set the height you want */
        object-fit: cover;    /* Crops instead of stretching */
        width: 100%;          /* Ensures it fills the card width */
    }

    .card-group .card-img-top {
        height: 200px;       /* Set desired uniform height */
        object-fit: cover;   /* Crop image to fit */
        width: 100%;         /* Make sure it fills the card width */
    }
}

.card-img-top {
    width: 100%;        /* full width of card */
    height: 350px;      /* pick the uniform height */
    object-fit: contain;  /* crop instead of stretching */
}

.card-body {
    display: flex;
    flex-direction: column;
}

.card-body .btn {
    margin-top: auto; /* pushes the button down */
}

.form-area {
    width: 100%;
    max-width: 500px;
    border: 1px solid #ddd; 
    background-color: #fff; 
}