#contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 30px;
  width: 90%;
  margin: 40px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

#form-quote-fields {
	display: flex;
  flex-direction: column;
  gap: 15px;
}

#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form button {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  border: 1px solid var(--lightgray);
  border-radius: var(--border-radius);
  background-color: var(--white);
  transition: all 0.3s ease;
	font-family: 'Ibarra Real Nova', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--greenalpha);
  outline: none;
}

.custom-select select {
  appearance: none;
  background-size: 12px;
  cursor: pointer;
  color: black;
}

.form-row {
  display: flex;
  gap: 15px;
  width: 100%;
}

.form-row > * {
  flex: 1;
}

.form-row > input[name="city"] {
  flex: 4;
}

.form-row-3 {
  display: flex;
  gap: 15px;
}

.form-row-3 > * {
  flex: 1;
}

.form-row-3 > input[name="street"] {
  flex: 4;
}

#contact-form {
  width: auto;
}

#contact-form label {
  font-size: 1rem;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 10px;
}

#contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

#contact-form button {
  background: var(--green);
  color: white;
  font-weight: bold;
  font-size: 1.3em;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

#contact-form button:hover {
  background: var(--accent);
}

.form-output {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 3px solid var(--green);
	width: 100%;
	background-color: var(--lightgray);
	border-radius: var(--border-radius);
	opacity: 1;
	animation: hideAfter10s 10s forwards;
}

@keyframes hideAfter10s {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; display: none; }
}

.g-recaptcha {
	display: block;
	margin: 0 auto;
}

/* Media */

@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
	#contact-form {
		padding: 10px;
		width: 95%;
	}
}

@media (max-width: 480px) {
	#contact-form {
		padding: 10px;
		width: 100%;
	}

	.form-row {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	
	.form-row-3 {
		display: flex;
		gap: 15px;
		flex-direction: column;
	}
}