@import "../assets/css/style.v2.css";

.content {
  display: flex;
  flex-direction: column;
}

.contact-us {
  padding: 3.33vw 0 6.25vw 4.74vw;
}

.contact-us__title {
  font: var(--title-h2);
}

.contact-us__subtitle {
  max-width: 37.14vw;
  font: 400 1.25vw/1.4 var(--font);
  margin-top: 36px;
}

.form-quiz {
  margin: 4.17vw 0 0 7.76vw;
  width: 53.33vw;
}

.form-quiz-steep, .form-quiz-steep:last-of-type {
  width: 100%;
}

.follow-us {
  margin-top: 6.25vw;
  border-radius: 3.33vw;
  background: center/cover url("../assets/img/contact-us/grid.svg") no-repeat var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6.77vw 0;
}

.follow-us__title {
  font: var(--title-h5);
  color: var(--white);
}

.follow-us__mail {
  color: var(--green);
  font: var(--title-h2);
  margin-top: 16px;
}

.follow-us__social-title {
  margin-top: 3.33vw;
  color: var(--white);
  font: 700 1.04vw/1.4 var(--font);
}

.follow-us__social {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.follow-us__social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.33vw;
  height: 3.33vw;
  border-radius: 50%;
  border: 1px solid var(--white);
  transition: var(--normal);

  > svg {
    height: 30px;
    transition: var(--normal);
    stroke: var(--white);
  }

  &:hover {
    background: var(--white);

    > svg {
      stroke: var(--black);
    }
  }
}

.our-offices {
  padding: 6.25vw 4.17vw 6.25vw 4.74vw;
}

.our-offices__title {
  font: var(--title-h2);
}

.offices-addresses {
  display: grid;
  grid-template-columns: 1fr 45.78vw;
  align-items: center;
  margin-top: 2.5vw;
}

.offices-addresses__img {
  border-radius: 1.67vw;
  overflow: hidden;
}

.offices-addresses__city {
  display: block;
  font: var(--title-h5);
}

.offices-addresses__text {
  font: 400 1.04vw/1.4 var(--font);
  margin-top: 16px;

  + .offices-addresses__city {
    margin-top: 48px;
  }
}

@media (max-width: 1280px) {
  .contact-us__subtitle {
    max-width: 100%;
    font: 400 2.34vw/1.35 var(--font);
    margin-top: 3.13vw;
  }

  .offices-addresses {
    grid-template-columns: 1fr 54.69vw;
    margin-top: 4.69vw;
    gap: 7.81vw;
  }

  .offices-addresses__text {
    font-size: 2.08vw;
    margin-top: 1.04vw;
  }

  .follow-us__social-title {
    margin-top: 4.69vw;
    font-size: 2.08vw;
  }

  .follow-us__social-link {
    width: 6.25vw;
    height: 6.25vw;

    > svg {
      height: 2.6vw;
    }
  }

  .follow-us {
    margin-top: 0;
    border-radius: 3.13vw;
    padding: 16.93vw 0;
  }

  .form-quiz {
    margin: 6.25vw 0 0;
    width: 100%;
  }

  .form-quiz-steep {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .contact-us__subtitle {
    font-size: 4.8vw;
    margin-top: 24px;
  }

  .offices-addresses {
    grid-template-columns: 1fr;
    margin-top: 36px;
    gap: 24px;
  }

  .offices-addresses__img {
    border-radius: 4.8vw;
  }

  .offices-addresses__text {
    font-size: 4.27vw;
    margin-top: 8px;
  }

  .follow-us {
    border-radius: 6.4vw;
    padding: 15.47vw 16px;
  }

  .follow-us__title {
    text-align: center;
  }

  .follow-us__social-title {
    margin-top: 24px;
    font-size: 4.27vw;
  }

  .follow-us__social-link {
    width: 12.8vw;
    height: 12.8vw;

    > svg {
      height: 5.33vw;
    }
  }

  .form-quiz {
    margin: 9.6vw 0 0;
  }

  .form-quiz-list__text {
    padding: 0 5.33vw 0 11.33vw;
  }

  .form-quiz-list__text {
    &::before {
      left: 3.33vw;
    }
  }
}