/* Form Container */
*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}
.custom-contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #b3e0e5; 
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Custom Form Columns */
.contact-form-column-1,
.contact-form-column-2 {
		flex: 1; 
    min-width: 300px;
}

/* Label Styling */
.contact-form-label {
    display: block;
    font-weight: bold;
    color: #333;
}

/* Input and Textarea Styles */
.contact-form-input,
.contact-form-textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
    border-color: #0073aa;
    outline: none;
}

/* Checkbox Group Title */
.contact-form-checkbox-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

/* Checkbox Styling */
.contact-form-checkbox-group {
    display: flex;
    gap: 20px; /*Space between checkboxes */
}

.contact-form-checkbox-group input[type="checkbox"] {
    margin-right: 8px;
} 

/* Submit button container */
.contact-form-submit-container{
		 display: flex;
    justify-content: center;
    width: 100%; 
}

/* Submit Button */
.contact-form-submit {
		flex: 1;
    width: 100%;
    padding: 12px; 
    background-color: #0073aa; 
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
		font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.contact-form-submit:hover {
    background-color: #005d87;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .contact-form-column-1,
    .contact-form-column-2 {
        min-width: 100%;
    }
}





/* Style the form container */
#wpcf7-f5-o1 form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

/* Title styling */
#form-title, #personal-info-title, #caregiver-preferences-title, #resume-upload-title {
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

/* Row and field styling */
#personal-info-row-1, #personal-info-row-2, #personal-info-row-3, #personal-info-row-4,
#caregiver-preferences-row-1, #caregiver-preferences-row-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

#first-name-field, #last-name-field, #preferred-name-field, #email-field, #sex-field, #ethnicity-field,
#zipcode-field, #experience-field, #pet-preference-field,
#client-gender-field, #client-age-field, #resume-upload-field {
  flex: 1;
  min-width: 220px;
}

#first-name-field label, #last-name-field label, #preferred-name-field label, #email-field label, #sex-field label, #ethnicity-field label,
#zipcode-field label, #experience-field label, #pet-preference-field label,
#client-gender-field label, #client-age-field label, #resume-upload-field label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

#first-name-field input[type="text"], #last-name-field input[type="text"], #preferred-name-field input[type="text"], #email-field input[type="email"],
#sex-field select, #ethnicity-field select, #zipcode-field input[type="text"],
#experience-field select, #pet-preference-field select, #client-gender-field select,
#client-age-field select, #resume-upload-field input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Submit button styling */
#submit-button {
  background-color: #6B99E1;
	width: 100%;
  color: white;
  font-size: 16px;
	font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#submit-button:hover {
  background-color: #002e57;
}

/* Responsive design */
@media (max-width: 768px) {
  #personal-info-row-1, #personal-info-row-2, #personal-info-row-3,
  #caregiver-preferences-row-1, #caregiver-preferences-row-2 {
    flex-direction: column;
  }
}