.landing {
  margin: 76px 0 110px;

  &::before {
    background-image: url("./../images/background/bg-landing.png");
    height: 207%;
    transform: translateY(-202px);
  }

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

  .sup-title {
    color: #fff;
    line-height: 53px;
  }

  .title {
    color: #cfe1f6;
    line-height: 40px;
    margin-bottom: 48px;
  }

  p {
    font-weight: 500;
    color: #acb3c9;
    line-height: 25px;
    margin-bottom: 28px;
    max-width: 517px;
    width: 100%;
  }

  .btns {
    gap: 14px;

    .btn {
      height: 49px;
      line-height: 49px;
      border-radius: 6px;
      font-weight: 400;
      max-width: 144px;

      + .btn {
        max-width: 119px;
      }
    }
  }

  @include md {
    &::before {
      background-size: cover;
      transform: translateY(-500px);
    }

    p {
      max-width: 100%;
    }

    img {
      margin-bottom: 12px;
    }

    .btns {
      .btn {
        &,
        + .btn {
          max-width: 100%;
        }
      }
    }
  }

  @include sm {
    margin: 55px 0 33px;
  }

  @include xs {
    &::before {
      transform: translateY(-400px);
    }

    .title {
      font-size: 36px;
    }
  }

  @include media("max", 414px) {
    .title {
      font-size: 27px;
      margin-bottom: 35px;
    }
  }
}

.options-home {
  .row {
    gap: 32px 0;
  }

  &-item {
    border-radius: 34px;
    padding: 42px 22px 37px;
    height: 100%;

    &::before,
    &::after {
      border-radius: inherit;
    }

    &::before {
      background: #1d222e url("./../images/pattern.png") 0 0 no-repeat;
      background-size: 100% 100%;
      box-shadow: 0 5px 30px rgba(#000, 0.28);
      opacity: 0.55;
    }

    &::after {
      background-image: linear-gradient(
        1.53deg,
        #f6509c -30.51%,
        #8f2ffd 57.21%
      );
      top: -9px;
      right: -9px;
      bottom: -11px;
      left: -9px;
      opacity: 0;
    }

    &::before,
    &::after,
    .image::before,
    h2,
    h2::before,
    p {
      transition: all 0.3s ease-in-out;
    }

    .image {
      margin: 0 auto;
      max-width: fit-content;

      &::before {
        width: 127px;
        height: 127px;
        background-color: #1d222e;
        @extend %radius-circle;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    h2 {
      margin: 35px 0 18px;
      font-size: 18px;
      font-weight: bold;
      color: #acb3c9;
      line-height: 31px;

      &::before {
        background: url("./../images/pattern-2.png") 0 0 no-repeat,
          linear-gradient(1.53deg, #f6509c -30.51%, #8f2ffd 57.21%);
        background-size: 100% 100%;
        border-radius: 34px;
        opacity: 0;
      }
    }

    p {
      color: rgba(#8c90a1, 0.87);
      line-height: 24px;
    }

    &:hover {
      &::after {
        opacity: 0.31;
      }

      .image::before {
        background-color: #973dff;
      }

      h2 {
        color: #fff;

        &::before {
          opacity: 1;
        }
      }

      p {
        color: #dbe1f3;
      }
    }
  }
}

.absout-us-home {
  margin: 110px 0 119px;

  &::before {
    height: 181%;
    transform: translateY(-230px);
    background-image: url("./../images/background/bg-about-us-home.png");
    filter: blur(50px);
  }

  .image {
    padding: 12px 12px 11px;
    background-color: #1e232f;

    &,
    img {
      border-radius: 10px;
    }
  }

  .content {
    margin-left: 21px;

    h2 {
      color: #fff;
      font-size: 42px;
      font-weight: 500;
      line-height: 52px;
      margin-bottom: 31px;

      span {
        color: #acb3c9;
      }
    }

    p {
      line-height: 32px;
      color: #acb3c9;
    }
  }

  @include md {
    &::before {
      background-image: cover;
    }

    .content {
      margin: 44px 0 0;
    }
  }

  @include sm {
    margin: 56px 0 37px;
  }

  @include xs {
    &::before {
      transform: translateY(-310px) rotate(41deg);
    }

    .content {
      h2 {
        font-size: 37px;
        line-height: 45px;
        margin-bottom: 23px;
      }
    }
  }
}

.steps {
  &::before {
    top: 45px;
    height: 179px;
    background-image: linear-gradient(0deg, #13161e 0%, rgba(#13161e, 0) 100%);
  }

  .row {
    gap: 29px 0;
  }

  &-item {
    padding: 36px 15px 21px;

    &::before,
    &::after {
      border-radius: 15px;
    }

    &::before {
      background-color: #1d222e;
      box-shadow: 0 5px 30px rgba(#000, 0.28);
      opacity: 0.55;
    }

    &::after {
      background-image: linear-gradient(
        160.07deg,
        #8f2ffd 38.04%,
        #f6509c 97.58%
      );
      opacity: 0;
      transition: all 0.3s ease-in-out;
    }

    .heading {
      margin: 0 0 26px 13px;

      .number {
        width: 63px;
        height: 63px;
        border-radius: 25px;
        margin-right: 26px;
        font-weight: 800;
        font-size: 42px;
        line-height: 63px;
        flex: 0 0 auto;

        &,
        &::before {
          background-image: linear-gradient(
            159.76deg,
            #1af8f9 13.47%,
            #1f4f5d 94.97%
          );
        }

        &::before {
          opacity: 0.4;
          filter: blur(22px);
        }

        &::after {
          width: 89px;
          height: 86px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-image: url("./../images/shape/shape-01.png");
        }

        span::before {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 25px;
          height: 25px;
          background-color: #33feff;
          filter: blur(15px);
        }
      }

      h2 {
        font-size: 18px;
        font-weight: bold;
        line-height: 31px;
        color: #fff;
      }
    }

    p {
      color: #fff;
      line-height: 24px;

      span {
        color: rgba(#f6509c, 0.87);
      }
    }

    &:hover {
      &::after {
        opacity: 1;
      }
    }
  }

  .col-lg-4:nth-child(2) {
    .heading .number {
      &,
      &::before {
        background-image: linear-gradient(
          159.76deg,
          #1dc35b 13.47%,
          #035430 94.97%
        );
      }

      span::before {
        background-color: #024326;
      }
    }
  }

  .col-lg-4:last-child {
    .heading .number {
      &,
      &::before {
        background-image: linear-gradient(
          159.76deg,
          #a019f9 13.47%,
          #2a1d6b 94.97%
        );
      }

      span::before {
        background-color: #46108a;
      }
    }
  }
}

.comments-home {
  margin: 112px 0 121px;

  &::before {
    background-image: url("./../images/background/bg-comments.png");
    top: 212px;
    height: 100%;
  }

  .section-heading {
    margin-bottom: 35px;
  }

  &-item {
    background-color: #181c26;
    border-radius: 10px;
    padding: 30px 24px;
    transition: all 0.3s ease-in-out;

    &::after {
      content: "\e903";
      font-family: "icomoon";
      vertical-align: middle;
      top: 18px;
      right: 24px;
      font-size: 116px;
      line-height: 116px;
      color: rgba(#dbe1f3, 0.03);
    }

    .name {
      font-size: 24px;
      font-weight: 500;
      line-height: 29px;
      color: #acb3c9;
    }

    .stars {
      margin: 16px 0 22px;

      i {
        color: #5e6275;
        font-size: 16px;

        &:not(:last-child) {
          margin-right: 8px;
        }

        &.fill {
          color: #fba928;
        }
      }
    }

    p {
      line-height: 28px;
      color: #99a1b9;
    }

    &:hover {
      background-color: #262c3a;
    }
  }

  @include sm {
    margin: 65px 0 43px;
  }
}

.banners .row {
  gap: 23px 0;
}

.faq {
  margin-top: 120px;

  &-content {
    background-color: rgba(#1c212d, 0.7);
    border-radius: 11px;
    padding: 25px 32px 45px;

    h2 {
      font-size: 42px;
      font-weight: 600;
      line-height: 52px;
      color: #fff;
      text-shadow: 0 3px 6px rgba(#000, 0.16);
    }

    p {
      color: #99a1b9;
      line-height: 24px;
      margin: 15px 0 35px;
    }

    .image {
      &::before,
      &::after {
        width: 284px;
        height: 284px;
        @extend %radius-circle;
        background-image: linear-gradient(180deg, #8f2ffd 0%, #fba32b 100%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &::before {
        filter: blur(25px) opacity(0.63);
      }
    }
  }

  @include lg {
    @include media("min", 992px) {
      &-content {
        .image {
          &::before,
          &::after {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  @include md {
    &-content {
      margin-bottom: 28px;
    }
  }

  @include sm {
    margin-top: 46px;
  }
}