.contact-us-form { height: 100%; padding: 0 5%; background-color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 2rem; } .form-section { display: flex; flex-direction: column; gap: 2rem; } .form-label{ font-size: 16px; font-weight: 600; } .form-text { display: flex; flex-direction: column; gap: 0.5rem; } .contact-us-button{ padding: 15px 50px; } /* Remove default input field styling */ /* Remove default input field styling */ .form-control { width: 100%; border: 0; border-bottom: 1px solid black; /* Add a horizontal line */ padding-bottom: 5px; /* Optional: Add some space between the line and text */ margin-bottom: 20px; /* Optional: Adjust margin as needed */ outline: none; /* Remove the outline */ } .error { color: #f78ab8; font-weight: 400; line-height: 1.4; transition-property: all; margin-bottom: 4px; } .img-section{ display: flex; flex-direction: column; } .img-thumbnail { flex: 1; object-fit: contain; width: 100%; height: 40vh; } .btn-submit{ margin-top: 20px; } .form-text{ display: flex; flex-direction: column; gap: 1rem; font-size: 18px; font-weight: 600; } .mailto-link{ color: #4288ea; } .drop-us-text{ font-size: 2vw; font-weight: 600; } .help-text{ padding-top: 20px; } .form-section{ padding: 30px 0 0 0; } /* media queries */ @media (max-width: 575.98px) { .img-section { display: none; } .form-text{ font-size: 14px; font-weight: 500; } .drop-us-text{ font-size: 6vw; font-weight: 600; } } @media (min-width: 576px) and (max-width: 767.98px) { .img-section { display: none; } .form-text{ font-size: 14px; font-weight: 500; } .drop-us-text{ font-size: 5vw; font-weight: 600; } } @media (min-width: 768px) and (max-width: 991.98px) { .form-text{ font-size: 18px; font-weight: 600; } .help-text { padding: 0; } } @media (min-width: 992px) and (max-width: 1199.98px) { .form-text{ font-size: 18px; font-weight: 600; } } @media (min-width: 1200px) and (max-width: 1399.98px) {}