.contact-container {
  background: white;
  column-gap: 2rem;
  flex-direction: row;
  padding: 2rem;
  container: contact_container / inline-size;

  @media (width < 800px) {
      flex-direction: column;
  }
  @media (width < 480px) {
    padding: 0;
  }
}

.contact-container .contact-form {
  width: 50%;
  row-gap: 1em;
  column-gap: 1em;
  flex-direction: row;
  flex-wrap: wrap;
  align-content:flex-start;
  padding: 2em 1em;

  @container (max-width: 800px) {
    & {
      width: 100%;
    }
  }
}

.contact-form .input {
  width: calc(50% - .5em);
}

.contact-form .input {
  row-gap: .5em;
}

.contact-form .input-textarea {
  height: auto;
  width: 100%;
  row-gap: .5em;
  min-height: 10em;
}

.contact-form textarea {
  height: 100%;
  max-height: 25em;
}

.contact-form .input :is( select, input, textarea) {
  padding: .25em;
  border: 1px solid var(--gray-3) !important;
  border-radius: 0;
  color: var(--gray-3);
}

.contact-form button {
  padding: .5em 1em;
  color: white;
  background: var(--primary-color-5);
}


h4 {
			font-size: 33px;
			font-weight: 300;
			color: var(--primary-color-6);
		}

.contact-container p {
	line-height: 1.5;
	color: var(--gray-4);
	width: 50%;
	padding: 2rem;

  @media (width < 480px) {
    width:100% !important;
  }
		 
	& a {
	color: var(--primary-color-5);
	font-weight: 600;

		&:hover {
			text-decoration-line: underline;
		}
	}
}