@import '../helpers/helpers';

.home-movers {
  &__hero,
  &__thank {
    background: $gray-bg;
  }

  &__hero {
    padding: 20px;

    .home-movers {
      &__header {
        p {
          margin-bottom: 20px;
        }
      }
    }
  }

  &__thank {
    padding: 20px;

    p {
      margin-bottom: 0;
    }
  }

  &__form {
    .home-movers {
      &__header {
        padding: 0;
      }
    }
  }

  &__header {
    text-align: center;

    span {
      display: block;
    }
  }

  &__title {
    font-size: 1.625rem;
    line-height: 28px;
    margin-bottom: 10px;
    text-transform: none;
  }

  &__description {
    text-align: center;
  }

  .terms {
    padding: 20px 0;
    border: 0;

    &__title {
      margin-bottom: 0;
      color: $blue;
    }

    &__title,
    &__description {
      font-size: .875rem;
      font-weight: 400;
      line-height: 20px;
    }
  }

  .notification {
    margin-bottom: 1.5rem;
  }
}

.movers-form {
  background: $gray-bg;

  &__title {
    font-size: 1.25rem;
  }

  &__warning {
    margin-bottom: 15px;
  }

  .form-row {
    margin-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
  }

  &__action {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 20px;

    .btn {
      width: 200px;
    }
  }
}

@include media-breakpoint-up(sm) {
  .home-movers {
    &__header {
      span {
        display: inline;
      }
    }

    &__thank {
      padding: 30px 20px;
    }
  }
}

@include media-breakpoint-up(md) {
  .home-movers {
    &__description {
      font-size: 1rem;
    }

    &__hero {
      padding-top: 40px;

      .home-movers {
        &__title {
          margin-bottom: 20px;
        }
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .home-movers {
    &__container {
      @include make-col(10);
      margin: 0 auto;
      padding: 0 10px;
    }
  }
}