@import "../variables";
@import "../mixin";
@import "../buttons/buttons";

/*===== call action two =====*/

.call-action-two {
  background-color: var(--light-2);
  padding-top: 50px;
  padding-bottom: 100px;

  & .call-action-content {
    margin-top: 45px;

    & .action-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 40px;
      color: var(--black);

      @media #{$xs} {
        font-size: 24px;
        line-height: 35px;
      }
    }

    & .text {
      color: var(--dark-3);
      margin-top: 16px;
    }
  }

  & .call-action-form {
    position: relative;
    margin-top: 50px;

    & input {
      width: 100%;
      height: 60px;
      border: 1px solid var(--gray-3);
      background: var(--white);
      padding: 0 25px;
      border-radius: 50px;

      @media #{$xs} {
        height: 50px;
      }

      @media #{$sm} {
        height: 60px;
      }

      @include placeholder {
        opacity: 1;
        color: var(--dark-3);
      }

      &:focus {
        border-color: var(--primary);
      }
    }

    & .action-btn {
      position: absolute;
      top: 7px;
      right: 5px;

      .primary-btn {
        @extend %primary-btn;

        @media #{$xs} {
          width: 100%;
        }

        @media #{$sm} {
          width: auto;
        }
      }

      @media #{$xs} {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 10px;
      }

      @media #{$sm} {
        position: absolute;
        top: 8px;
        right: 8px;
        margin-top: 0;
      }
    }
  }
}