.contact-form .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.contact-form .row .field {
    flex: 1;
    margin-right: 5px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.contact-form .row .field:last-child {
    margin-right: 0;
}

.contact-form .row.full-width .field {
    flex: 2;
}

.contact-form button {
    padding: 10px 20px;
    background-color: #00594f;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.contact-form button:hover {
    background-color: #003d33;
}

.contact-form-container {
    max-width: 800px; /* You can adjust this value to your preference */
    margin: 0 auto; /* Center the container on the page */
    padding: 20px; /* Add some padding around the form */
}

input[type="date"],
select {
    appearance: none; /* Remove default appearance */
    background-color: #f4f4f4; /* Set background color */
    border: 1px solid #ccc; /* Set border */
    border-radius: 5px; /* Add rounded corners */
    padding: 10px; /* Add padding */
    font-size: 16px; /* Set font size */
    width: 100%; /* Set width */
}

.ui-selectmenu-button.ui-button {
    font-family: 'Arial', sans-serif;
    background-color: #ffffff;
    color: #757575;
    font-size: 13px;
    width: 100%;
    border: 1px solid #ccc; /* Add border */
    box-shadow: none;
    padding: 10px; /* Adjust padding as needed */
    border-radius: 5px;
}

.ui-selectmenu-button.ui-button:hover {
    border: 1px solid #aaa; /* Add hover effect */
}

.ui-selectmenu-menu .ui-menu {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #757575;
    font-size: 13px;
    width: 100%;
}

.field {
    width: 100%; /* Set to 100% width */
    max-width: 100%; /* Ensure it doesn't exceed 100% */
    min-width: 0; /* Remove any minimum width */
    box-sizing: border-box; /* Include padding and border in the width */
}

.row {
    display: flex; /* Use flexbox layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: space-between; /* Space items evenly */
}

.row > .field {
    flex: 1 1 calc(50% - 10px); /* Allow fields to flex, but keep some space between */
    margin-bottom: 10px; /* Add some space below each field */
}

.row.full-width > .field {
    flex: 1 1 100%; /* Full-width fields take up the whole row */
}

.submit-row {
    display: flex;
    justify-content: space-between; /* Aligns the button and agreement to opposite sides */
    align-items: center;
}

.agreement {
    display: flex;
    align-items: center;
}

.agreement label {
    font-size: 11px; /* Adjust as needed */
    margin-left: 5px; /* Space between the checkbox and label */
}

.agreement a {
    color: #00594f; /* Link color, adjust as needed */
}

.recaptcha-container {
    display: flex;
}

.g-recaptcha {
    flex: 1 1 auto;
    min-width: 300px; /* Adjust as needed */
}

.right-side {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the left */
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adjust this value to align with the top of the captcha */
}

input[type="checkbox"] {
    margin-right: 10px; /* Add space between checkbox and text */
}

button[type="submit"] {
    display: block;
    margin-top: -5px; /* Adjust this value to align with the bottom of the captcha */
}

/* Media query for window width below 839px */
@media (max-width: 839px) {
    .recaptcha-container {
        flex-direction: column;
        align-items: center; /* Center align items including captcha */
    }

    .right-side {
        flex-direction: row; /* Change to row layout */
        align-items: center; /* Center align items */
        justify-content: center; /* Center align horizontally */
    }

    .checkbox-container {
        margin-top: 15px; /* Add gap between captcha and checkbox + text */
        margin-left: 10px; /* Add gap between button and checkbox + text */
        text-align: left; /* Align the text to the left */
    }

    button[type="submit"] {
        margin-top: 15px; /* Add gap between captcha and button */
    }
}