.contact {
  &.section {
  }
  &__form {
    .form-header {
      max-width: 410px;
      width: 100%;

      .form-title {
        font-weight: 500;
        margin-bottom: 15px;

        @include breakpoint(max-md) {
          margin-bottom: 10px;
        }
      }
      p {
        font-size: 16px;
        line-height: 162.5%;
      }
    }
    .contact-form {
      margin-top: 50px;

      @include breakpoint(max-lg) {
        margin-top: 40px;
      }
      @include breakpoint(max-md) {
        margin-top: 30px;
      }
      .form-control {
        border-radius: 0;
        color: $color-white;
        font-size: 16px;
        font-weight: 400;
        line-height: 162.5%;
        border: none;
        border-bottom: 1px solid $color-5;
        background-color: transparent;
        padding: 0;
        padding-block: 18px;
        resize: none;

        @include breakpoint(max-md) {
          padding-block: 12px;
        }

        &:focus,
        &:active {
          box-shadow: none;
        }
        &::placeholder {
          color: $color-white;
          opacity: 0.7;
        }
      }
    }
  }
  &__info {
    border-radius: 40px;
    background: $color-2;
    padding: 60px 50px 70px;

    @include breakpoint(max-lg) {
      padding: 50px 40px;
      border-radius: 20px;
    }
    @include breakpoint(max-md) {
      padding: 40px 30px;
      border-radius: 20px;
    }
    .info-title {
      margin-bottom: 45px;

      @include breakpoint(max-xl) {
        margin-bottom: 40px;
      }
      @include breakpoint(max-lg) {
        margin-bottom: 30px;
      }
    }
    .contact-infos {
    }
  }
  &__map {
    width: 100vw;
    height: 623px;

    @include breakpoint(max-lg) {
      height: 500px;
    }
    @include breakpoint(max-md) {
      height: 480px;
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  }
}

.contact-info-box {
  .title {
    color: $color-5;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    line-height: 162.5%;
    margin-bottom: 8px;
    i {
      color: $color-primary;
    }
  }
  ul {
    li {
      color: $color-white;
      font-size: 16px;
      line-height: 162.5%;
      &:not(:last-of-type) {
        margin-bottom: 3px;
      }

      a {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
      }
    }
  }
}
