.get-in-touch-container {
  background-image: url("../../images/contact-bg.webp");
  background-size: cover;
  min-height: 100vh;
  margin-top: -111px;
  padding: 150px 20px 30px;
}

.get-in-touch-container .form-wrapper {
  max-width: 40rem;
}

.get-in-touch-container h1 {
  font-size: 40px;
  font-family: var(--font-ideal-sans-regular);
  color: var(--color-bright-yellow);
  letter-spacing: 2px;
  font-weight: 600;
}

.get-in-touch-container .form-wrapper .form-element {
  background-color: #e1eaec;
  color: #02295f;
  font-family: var(--font-ideal-sans-light);
  font-size: 18px;
}

.get-in-touch-container .form-wrapper input[type="text"],
.get-in-touch-container .form-wrapper input[type="email"] {
  border-radius: 2rem;
  padding: 1rem 1.5rem;
  width: 100%;
}

.get-in-touch-container .form-wrapper textarea {
  border-radius: 2.5rem;
  padding: 1.5rem 1.5rem;
}

.get-in-touch-container .form-wrapper input[type="text"]::placeholder,
.get-in-touch-container .form-wrapper input[type="email"]::placeholder,
.get-in-touch-container .form-wrapper textarea::placeholder {
  color: #02295f;
  opacity: 1; /* Firefox reduces opacity by default */
}

.get-in-touch-container .form-wrapper .webform-button--submit {
  background-color: #ecea16;
  border-radius: 2rem;
  color: #02295f;
  width: 150px;
  border: none;
  font-size: 20px;
}

.url-textfield {
  opacity: 0;
}

@media (min-width: 500px) {
  .get-in-touch-container h1 {
    font-size: 45px;
  }
}

@media (min-width: 768px) {
  .get-in-touch-container {
    padding: 105px 50px 0;
    align-content: center;
  }

  .get-in-touch-container .form-wrapper .form-element {
    font-size: 19px;
  }

  .get-in-touch-container .form-wrapper .webform-button--submit {
    width: 170px;
    font-size: 22px;
  }
}

@media (min-width: 992px) {
  .get-in-touch-container h1 {
    font-size: 55px;
  }

  .get-in-touch-container .form-wrapper input[type="text"],
  .get-in-touch-container .form-wrapper input[type="email"],
  .get-in-touch-container .form-wrapper textarea {
    padding: 1rem 1.5rem;
  }
}

@media (min-width: 1200px) {
  .get-in-touch-container .form-wrapper .form-element {
    font-size: 20px;
  }

  .get-in-touch-container h1 {
    font-size: 60px;
  }
}

@media (min-width: 1700px) {
  .get-in-touch-container {
    padding: 105px 96px 0;
  }
}
