@use "../../abstract" as *;
/*=========== Home 7 : Cta ==========*/

.cta-home-7 {
  background-color: $l7-secondary-hex;
  border-radius: 30px 30px 0 0;
  padding-top: 60px;
  padding-bottom: 60px;

  @media (min-width:576px) {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .cta-home-7-wrapper {
    border-radius: 5px;
    padding-top: 50px;
    padding-bottom: 0;
    position: relative;

    @media (min-width: 576px) {
      padding-top: 100px;
      padding-bottom: 100px;
    }
  }

  .cta-content-block {
    max-width: 450px;

    @media (min-width:992px) {
      max-width: 540px;
    }

    @media (min-width:1200px) {
      max-width: 580px;
    }

    margin-right: auto;
    margin-left: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 30px;
    color: $white;
    position: relative;
    z-index: 2;

    @media (min-width:992px) {
      row-gap: 50px;
    }
  }


  .cta-form {
    &-wrapper {
      max-width: 450px;
      width: 100%;
      margin: auto;
    }

    &__input-block {

      position: relative;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 3px;
      padding-left: 30px;
      border-radius: 500px;
      width: 100%;
      row-gap: 10px;

      @media (min-width:576px) {
        border: 1px solid #191919;
      }

      @media (min-width:576px) {
        flex-direction: row;
        background-color: #fff;
      }

      input {
        padding: 12px;
        border-radius: 500px;
        border: none;
        outline: none;
        width: 100%;
        padding-left: 24px;

        @media (min-width:576px) {
          padding-left: initial;
          background: none;
          border-radius: 500px 0 0 500px;
        }
      }

      .btn-masco {
        --btn-spacing-y: 13px;
        white-space: nowrap;

        &:hover {
          --btn-bg: #A259FF;
        }
      }
    }
  }

  .cta-button-group {
    display: flex;
    gap: 10px;

    @media (min-width: 576px) {
      gap: 20px;
    }

    a {
      display: flex;
      align-items: stretch;

      img {
        width: 100%;
      }
    }
  }
}