.cta {
  &.section {
  }
  &__content {
    @extend %p-relative;
    padding: 50px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;

    .stars {
      svg {
        @extend %p-absolute;
        color: $color-primary;
        animation: rotate 8s linear infinite;

        @include breakpoint(max-xl) {
          width: 100px;
          height: 100px;
        }
        @include breakpoint(max-lg) {
          display: none;
        }
        @include breakpoint(max-md) {
        }
        &:nth-child(1) {
          top: 65px;
          left: 135px;

          @include breakpoint(max-xl) {
            top: 50px;
            left: 100px;
          }
        }
        &:nth-child(2) {
          right: 75px;
          bottom: 40px;

          @include breakpoint(max-xl) {
            right: 50px;
            bottom: 30px;
          }
        }
      }
    }

    .title {
      max-width: 540px;
      margin-inline: auto;
      color: $color-white;
      font-weight: 800;
      line-height: 120%;
      font-size: 100px;

      @include breakpoint(max-xxl) {
        font-size: 90px;
      }
      @include breakpoint(max-lg) {
        font-size: 80px;
      }
      @include breakpoint(max-md) {
        font-size: 65px;
      }
      @include breakpoint(max-sm) {
        font-size: 60px;
      }
      @include breakpoint(max-xs) {
        font-size: 50px;
      }

      span {
        font-weight: 300;
      }
    }

    .agx-btn {
      margin-top: 25px;

      @include breakpoint(max-md) {
        margin-top: 20px;
      }
    }
  }
}
