@charset "utf-8";
/* CSS Document */

/* Contact form layout */
#contact-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
	margin: 0 auto 20px auto;   /* centers the whole block within #content */
	justify-content: center;     /* centers the left/right forms inside */
}

/* Left / right columns */
#formLeft,
#formRight {
	box-sizing: border-box;
	flex: 0 1 465px;             /* preferred width for each column */
	max-width: 465px;            /* upper limit so they don't stretch too much */
	border: 1px solid #006600;
	background-color: #FFFFFF;
	padding: 10px 10px;
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
/* On small screens, stack columns */
@media screen and (max-width: 800px) {
	#formLeft,
	#formRight {
		max-width: 100%;
	}
}

#rowTop {
	clear: both;
}

/* Section headings */
#formLeft h2,
#formRight h2 {
	background-color: #99CC33;
	padding: 6px 8px;
	margin: 0 0 10px 0;
	font-size: 1.1em;
	color: #003300;
}

/* Form table styling */
.contact-table {
	width: 100%;
	border-collapse: collapse;
}

.contact-table td {
	font-family: inherit;
	font-size: inherit;
	padding: 4px 2px;
	vertical-align: top;
}

/* Labels & fields */
.form-label {
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
}

.form-note {
	font-size: 14ps;
	color: #555555;
}

/* Inputs, selects, textareas */
#formLeft input[type="text"],
#formLeft select,
#formLeft textarea,
#formRight input[type="text"],
#formRight select,
#formRight textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 4px 6px;
	border: 1px solid #B0B0B0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 1.1em; 
}

#formRight textarea {
	min-height: 220px;
	resize: vertical;
}

/* Focus styles */
#formLeft input[type="text"]:focus,
#formLeft select:focus,
#formRight textarea:focus {
	border-color: #006600;
	outline: none;
	box-shadow: 0 0 3px rgba(0,102,0,0.3);
}

/* Buttons */
.form-actions {
	text-align: center;
	margin-top: 10px;
}

.form-actions input[type="submit"],
.form-actions input[type="reset"] {
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: 600;
	padding: 6px 14px;
	margin: 0 6px;
	border-radius: 4px;
	border: 1px solid #006600;
	background-color: #99CC33;
	color: #003300;
	cursor: pointer;
}

.form-actions input[type="submit"]:hover,
.form-actions input[type="reset"]:hover {
	background-color: #7BA826;
}