.formatto-contact {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  align-items: flex-start;
  width: 100%;
  padding: 8rem 19.9375rem;
  background: var(--color-background);
}

.formatto-contact h1,
.formatto-contact h2,
.formatto-contact p,
.formatto-contact label,
.formatto-contact button,
.formatto-contact a,
.formatto-contact span {
  margin: 0;
  font-family: var(--font-body);
  text-box-edge: cap alphabetic;
}

.formatto-contact__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 39.5rem;
}

.formatto-contact__intro h1 {
  width: 39.5rem;
  color: var(--color-blue-600);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.035rem;
  word-break: break-word;
}

.formatto-contact__intro h1 strong {
  color: #00588a;
  font-weight: 600;
}

.formatto-contact__copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 39.5rem;
  margin-top: 2.5rem;
  color: #004972;
}

.formatto-contact__copy p {
  width: 100%;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.0125rem;
}

.formatto-contact__copy strong {
  font-weight: 700;
}

.formatto-contact__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.formatto-contact__form {
  width: 39rem;
}

.formatto-contact__fields {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: flex-start;
  width: 100%;
}

.formatto-contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  width: 100%;
  border-radius: 0.375rem;
}

.formatto-contact__message {
  width: 100%;
  padding: 1rem;
  border-radius: 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01rem;
}

.formatto-contact__message--success {
  color: #00588a;
  background: #dcf3ff;
}

.formatto-contact__message--error {
  color: #ca292e;
  background: #fff0f0;
}

.formatto-contact__field > span {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: #00588a;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01rem;
  white-space: nowrap;
}

.formatto-contact__field > span strong {
  color: #ca292e;
  font-weight: 400;
}

.formatto-contact__field-error {
  color: #ca292e;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.00875rem;
}

.formatto-contact input[aria-invalid="true"] {
  border-color: #ca292e;
}

.formatto-contact input,
.formatto-contact textarea {
  width: 100%;
  border: 0.09375rem solid #f1f2f3;
  border-radius: 0.625rem;
  outline: none;
  color: #484e52;
  background: #f1f2f3;
  box-shadow: 0 0.0625rem 0.125rem rgba(13, 13, 13, 0.04);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01rem;
  text-box-edge: auto;
  text-box-trim: none;
}

.formatto-contact input {
  height: 3.625rem;
  padding: 1rem;
}

.formatto-contact textarea {
  min-height: 10.5rem;
  padding: 1rem;
  resize: vertical;
}

.formatto-contact__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 1.25rem 1.75rem;
  border: 0;
  border-radius: 0.375rem;
  color: var(--color-blue-50);
  background: var(--color-blue-600);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01rem;
  cursor: pointer;
}

.formatto-contact__info {
  display: flex;
  flex: 0 0 34.25rem;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  width: 34.25rem;
  padding: 3.75rem;
  border-radius: 2rem;
  background: linear-gradient(103.53deg, var(--color-blue-600) 2.6148%, #0069a8 102.67%);
}

.formatto-contact__info h2 {
  color: #eef9ff;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02rem;
  white-space: nowrap;
}

.formatto-contact__items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.formatto-contact__item {
  display: flex;
  gap: 0.8125rem;
  align-items: center;
  justify-content: center;
  color: #dcf3ff;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01125rem;
  text-decoration: none;
  white-space: nowrap;
}

.formatto-contact__icon {
  position: relative;
  display: flex;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 53.5714375rem;
  background: linear-gradient(96.42deg, #00bdff 2.6489%, #00a4f2 102.78%);
}

.formatto-contact__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.formatto-contact__icon--mail {
  padding: 0.857125rem;
}

.formatto-contact__mail-glyph {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 1.2856875rem;
  height: 0.8789375rem;
  transform: scaleY(-1);
}

.formatto-contact__mail-glyph img {
  position: absolute;
  left: 0;
  display: block;
  width: 1.2856875rem;
  max-width: none;
}

.formatto-contact__mail-line {
  top: 0.339375rem;
  height: 0.5398125rem;
}

.formatto-contact__mail-shape {
  top: 0;
  height: 0.793625rem;
}

.formatto-contact__icon--location img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
}

.formatto-contact__icon--location img {
  width: 1.1415625rem;
  height: 1.4269375rem;
}

@media (min-width: 1280px) and (max-width: 1919px) {
  .formatto-contact {
    padding-right: calc((100vw - 80rem) / 2);
    padding-left: calc((100vw - 80rem) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formatto-contact {
    gap: 4.375vw;
    padding: 10vw 5vw;
  }

  .formatto-contact__body {
    gap: 4.375vw;
    justify-content: flex-start;
  }

  .formatto-contact__intro,
  .formatto-contact__intro h1,
  .formatto-contact__copy {
    width: 49.375vw;
  }

  .formatto-contact__intro h1 {
    font-size: 4.375vw;
    letter-spacing: -0.04375vw;
  }

  .formatto-contact__copy {
    gap: 1.875vw;
    margin-top: 3.125vw;
  }

  .formatto-contact__copy p {
    font-size: 1.5625vw;
    letter-spacing: -0.015625vw;
  }

  .formatto-contact__form {
    width: 48.75vw;
  }

  .formatto-contact__fields {
    gap: 1.09375vw;
  }

  .formatto-contact__field {
    gap: 0.625vw;
    border-radius: 0.46875vw;
  }

  .formatto-contact__message {
    padding: 1.25vw;
    border-radius: 0.78125vw;
  }

  .formatto-contact__field > span,
  .formatto-contact input,
  .formatto-contact textarea,
  .formatto-contact__submit,
  .formatto-contact__message {
    font-size: 1.25vw;
    letter-spacing: -0.0125vw;
  }

  .formatto-contact__field-error {
    font-size: 1.09375vw;
    letter-spacing: -0.010938vw;
  }

  .formatto-contact input,
  .formatto-contact textarea {
    border-width: 0.117188vw;
    border-radius: 0.78125vw;
    box-shadow: 0 0.078125vw 0.15625vw rgba(13, 13, 13, 0.04);
  }

  .formatto-contact input {
    height: 4.53125vw;
    padding: 1.25vw;
  }

  .formatto-contact textarea {
    min-height: 13.125vw;
    padding: 1.25vw;
  }

  .formatto-contact__submit {
    min-height: 4.375vw;
    padding: 1.5625vw 2.1875vw;
    border-radius: 0.46875vw;
  }

  .formatto-contact__info {
    flex-basis: 36.875vw;
    gap: 3.125vw;
    width: 36.875vw;
    padding: 4.6875vw;
    border-radius: 2.5vw;
  }

  .formatto-contact__info h2 {
    font-size: 2.5vw;
    letter-spacing: -0.025vw;
  }

  .formatto-contact__items {
    gap: 1.875vw;
  }

  .formatto-contact__item {
    gap: 1.015625vw;
    font-size: 1.40625vw;
    letter-spacing: -0.014063vw;
  }

  .formatto-contact__icon {
    flex-basis: 3.75vw;
    width: 3.75vw;
    height: 3.75vw;
  }

  .formatto-contact__icon--mail {
    padding: 1.071406vw;
  }

  .formatto-contact__mail-glyph {
    width: 1.607109vw;
    height: 1.098672vw;
  }

  .formatto-contact__mail-glyph img {
    width: 1.607109vw;
  }

  .formatto-contact__mail-line {
    top: 0.424219vw;
    height: 0.674766vw;
  }

  .formatto-contact__mail-shape {
    height: 0.992031vw;
  }

  .formatto-contact__icon--location img {
    width: 1.426953vw;
    height: 1.783672vw;
  }
}

@media (max-width: 767px) {
  .formatto-contact {
    gap: 10vw;
    padding: 10vw 5vw;
  }

  .formatto-contact__intro,
  .formatto-contact__intro h1,
  .formatto-contact__copy,
  .formatto-contact__body,
  .formatto-contact__form,
  .formatto-contact__info {
    width: 90vw;
  }

  .formatto-contact__intro h1 {
    font-size: 8.75vw;
    letter-spacing: -0.0875vw;
  }

  .formatto-contact__copy {
    gap: 4vw;
    margin-top: 8vw;
  }

  .formatto-contact__copy p {
    font-size: 4.071247vw;
    letter-spacing: -0.040712vw;
  }

  .formatto-contact__body {
    flex-direction: column;
    gap: 10vw;
  }

  .formatto-contact__fields {
    gap: 4vw;
  }

  .formatto-contact__field {
    gap: 2vw;
    border-radius: 1.5vw;
  }

  .formatto-contact__message {
    padding: 4.071247vw;
    border-radius: 2.544529vw;
  }

  .formatto-contact__field > span,
  .formatto-contact input,
  .formatto-contact textarea,
  .formatto-contact__submit,
  .formatto-contact__message {
    font-size: 4.071247vw;
    letter-spacing: -0.040712vw;
  }

  .formatto-contact__field-error {
    font-size: 3.562341vw;
    letter-spacing: -0.035623vw;
  }

  .formatto-contact input,
  .formatto-contact textarea {
    border-width: 0.381679vw;
    border-radius: 2.544529vw;
  }

  .formatto-contact input {
    height: 14.758269vw;
    padding: 4.071247vw;
  }

  .formatto-contact textarea {
    min-height: 42.748092vw;
    padding: 4.071247vw;
  }

  .formatto-contact__submit {
    width: 100%;
    min-height: 14.249364vw;
    padding: 5.089059vw 7.124682vw;
    border-radius: 1.526718vw;
  }

  .formatto-contact__info {
    flex-basis: auto;
    gap: 8vw;
    padding: 8vw;
    border-radius: 6vw;
  }

  .formatto-contact__info h2 {
    font-size: 6.10687vw;
    letter-spacing: -0.061069vw;
    white-space: normal;
  }

  .formatto-contact__items {
    gap: 6vw;
  }

  .formatto-contact__item {
    gap: 3.307888vw;
    font-size: 4.071247vw;
    letter-spacing: -0.040712vw;
    white-space: normal;
  }

  .formatto-contact__icon {
    flex-basis: 6.10687vw;
    width: 6.10687vw;
    height: 6.10687vw;
  }

  .formatto-contact__icon--mail {
    padding: 1.744784vw;
  }

  .formatto-contact__mail-glyph {
    width: 2.617176vw;
    height: 1.788677vw;
  }

  .formatto-contact__mail-glyph img {
    width: 2.617176vw;
  }

  .formatto-contact__mail-line {
    top: 0.69084vw;
    height: 1.098881vw;
  }

  .formatto-contact__mail-shape {
    height: 1.61514vw;
  }

  .formatto-contact__icon--location img {
    width: 2.323283vw;
    height: 2.903054vw;
  }
}