#form-left-side{padding-right: 0px;}
#form-right-side{padding-left: 0px;}
#card-form{
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius:0 10px 10px 0; border:none; display: flex; flex-direction: column; height: 100%;
}
#card-form-header{
    background:#381f60; padding:10px; border-radius:10px; color:#fff; border-bottom-left-radius:0px; border-top-left-radius:0px; border-bottom-right-radius:0px;
}
#card-form-header-text{
    font-size: 25px;
    margin-top: 10px;
}
#card-form-body{
    flex: 1 1 auto;
    padding-top: 30px;
}
#form-img-div{
    position: relative; height: 100%; min-height: 400px; border-radius: 10px 0 0 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#form-img{
   object-fit: cover; position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
#form-overlay{
    background: #381f60; opacity: 0.6; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
#form-img-span{
    position: absolute; width: 100%; height: 100%;
}
#form-span{
    color: #fff; font-size: 2rem; font-weight: bold; padding-left: 50px; text-align: center; padding-right: 50px; line-height: 1.1;
}

/* Small devices (sm) */
@media (max-width: 576px) {
    /* Your CSS for small devices here */
    #form-left-side{
        padding-right:1.5rem !important
    }
    #form-right-side{
        padding-left:1.5rem !important
    }
}

/* Medium devices (md) */
@media (min-width: 577px) and (max-width: 768px) {
    /* Your CSS for medium devices here */
     #form-left-side{
        padding-right:1.5rem !important
    }
    #form-right-side{
        padding-left:1.5rem !important
    }
}