/* ============= */
/* CONTACT PAGE  */
/* ============= */
body {
  overflow-y: auto;
}
.contact-page {
  margin-block-start: 10rem;
  margin-block-end: 16rem;
}

.contact-page .container {
  max-width: 75%;
  margin-inline: auto;
}

.contact-page__form {
  margin-block-start: 6rem;
  font-family: var(--font-poppins);
}

.contact-page__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-page__field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-page__field--full {
  grid-column: 1 / -1;
}

.contact-page__label {
  font-family: var(--font-poppins);
  font-weight: var(--font-semi);
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--blue-color);
}

.contact-page__input,
.contact-page__textarea {
  font-family: var(--font-poppins);
  font-weight: var(--font-regular);
  font-size: 1.6rem;
  background: none;
  border: none;
  border-bottom: var(--blue-color) 1px solid;
  padding-block: 1rem;
  color: var(--black-color);
  outline: none;
  transition: border-color var(--transition-1);
  resize: none;
}

.contact-page__input::placeholder,
.contact-page__textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: var(--font-light);
}

.contact-page__input:focus,
.contact-page__textarea:focus {
  border-bottom-color: var(--black-color);
}

.contact-page__submit {
  margin-block-start: 4rem;
}

.contact-page__submit-btn {
  padding-block: 1.2rem;
  padding-inline: 6rem;
  letter-spacing: 2px;
  font-family: var(--font-poppins);
  font-weight: var(--font-medium);
  font-size: 1.4rem;
  color: var(--white-color);
  background-color: var(--blue-color);
  border: var(--blue-color) 1px solid;
  transition: var(--transition-1);
}

:is(.contact-page__submit-btn):is(:hover, :focus) {
  color: var(--blue-color);
  background-color: var(--white-color);
}

/* Single column on mobile */
@media (max-width: 600px) {
  .contact-page__fields {
    grid-template-columns: 1fr;
  }

  .contact-page__field--full {
    grid-column: 1;
  }
}