.pricing {
  margin: 77px 0 83px;

  &::before {
    background-image: url("./../images/background/bg-pricing.png");
    top: 35px;
    height: 491px;
  }

  .title {
    font-size: 42px;
    line-height: 63px;
    color: #fff;
  }

  .sub-title {
    margin: 7px 0 28px;
    font-size: 22px;
    line-height: 34px;
    color: #cfe1f6;
  }

  .title,
  .sub-title {
    text-shadow: 0 3px 6px rgba(#000, 0.16);
  }

  p {
    font-weight: 500;
    line-height: 24px;
    color: #acb3c9;
  }

  &-pay {
    &-title {
      line-height: 18px;
      font-weight: 500;
      color: #dbe1f3;
      margin-bottom: 17px;
    }

    &-wrapper {
      gap: 10px 7px;

      li {
        max-width: calc(12.5% - 7px);
        width: 100%;
        flex: 0 0 auto;

        &,
        a {
          min-height: 41px;
          height: 100%;
        }

        a {
          border-radius: 7px;
          background-color: #262b39;
          padding: 1px;

          img {
            max-height: 39px;
            height: auto;
          }
        }
      }
    }
  }

  &-robot {
    padding: 8px 7px 7px 12px;
    background-color: rgba(#252b3a, 0.49);
    margin-left: 55px;

    &::before {
      @extend %radius-12;
      background-color: rgba(#8f2ffd, 0.25);
      filter: blur(50px);
      top: 8px;
      right: 7px;
      bottom: 7px;
      left: 12px;
    }

    &,
    &-content {
      @extend %radius-12;
    }

    &-content {
      background-color: #1d222e;
      padding: 46px 25px 42px 28px;

      &::before {
        top: -142px;
        right: -64px;
        bottom: 142px;
        left: -53px;
        background-color: #252b3a;
        border-radius: 184px;
      }

      &::after {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 66px;
        height: 27px;
        background-image: url("./../images/shape/shape-02.png");
      }
    }

    &-title {
      font-style: 18px;
      font-weight: 600;
      font-style: italic;
      line-height: 22px;
      margin-bottom: 32px;
      color: #fff;
    }

    .tabs {
      margin-bottom: 32px;
    }

    &-titr {
      font-size: 33px;
      font-weight: 600;
      font-style: italic;
      line-height: 40px;
      color: #fff;
      margin-bottom: 39px;
    }

    .select {
      margin-bottom: 23px;

      label {
        font-size: 12px;
        font-weight: 500;
        line-height: 21px;
        color: #757d91;
        margin-bottom: 4px;
        display: inline-block;
      }

      .form-control {
        font-size: 12px;
      }
    }

    .button {
      margin-top: 38px;

      &::before {
        @extend %radius-8;
        opacity: 0.54;
        background-image: linear-gradient(
          144.99deg,
          #8f2ffd 42.05%,
          #f6509c 111.39%
        );
        filter: blur(6px);
      }

      .btn {
        max-width: 100%;
        border-radius: 25px;
      }
    }
  }

  &-note {
    margin-top: 118px;

    background-image: linear-gradient(
      144.49deg,
      rgba(#f6509c, 0.44) 20.54%,
      rgba(#8f2ffd, 0.44) 75.58%
    );
    padding: 10px 11px 8px 9px;

    &,
    &-content {
      border-radius: 17px;
    }

    &-content {
      background: url("./../images/shape/patter-01.png") 0 0 no-repeat,
        linear-gradient(144.49deg, #f6509c 20.54%, #8f2ffd 75.58%);
      background-size: 100% 100%;
      padding: 29px 81px 26px 99px;
    }

    &-title,
    p {
      text-shadow: 0 3px 6px rgba(#000, 0.39);
    }

    &-title {
      font-size: 24px;
      font-weight: bold;
      line-height: 29px;
      margin-bottom: 17px;
      color: #fff;
    }

    p {
      color: #f6faff;
      line-height: 30px;
    }
  }

  &-faq {
    &-wrapper {
      max-width: 801px;
      width: 100%;
      margin: 0 auto;
    }
  }

  @include lg {
    &-robot {
      margin: 45px 0 0;
    }
  }

  @include md {
    margin: 47px 0 48px;

    &::before {
      top: 0;
      transform: translateY(-60px);
    }
  }

  @include sm {
    &-note {
      margin-top: 40px;

      &-content {
        padding: 26px 18px 16px;
        background-position: center;
        background-size: cover;
      }
    }
  }

  @include xs {
    &-pay {
      ul {
        gap: 9px 5px;

        li {
          max-width: calc(12.5% - 5px);

          &,
          a {
            min-height: 33px;
          }

          a {
            padding: 4px;

            img {
              max-height: 24px;
            }
          }
        }
      }
    }

    &-robot {
      margin: 45px -12px 0;

      &-content {
        padding: 45px 16px 42px;
      }
    }

    &-note {
      margin: 40px -12px 0;
    }
  }

  @include media("max", 369px) {
    &-robot {
      &-content {
        padding: 45px 12px 42px;
      }

      &-titr {
        font-size: 28px;
      }
    }
  }
}