.checker {
  margin-top: 79px;

  &::before {
    background-image: url("./../images/background/bg-checker.png");
    height: 1054px;
    transform: translateY(-205px);
  }

  &::after {
    top: 678px;
    background-image: linear-gradient(0deg, #13161E 0%, rgba(19, 22, 30, 0) 100%);
    height: 179px;
  }

  &-wrapper {
    max-width: 1035px;
    margin: 0 auto;

    .title {
      font-size: 44px;
      font-weight: bold;
      line-height: 54px;
      color: #fff;
      text-shadow: 0 3px 20px rgba(#000, 0.55);

      span {
        color: #f6509c;
      }
    }

    .sub-title {
      max-width: 708px;
      margin: 34px auto 54px;
      line-height: 28px;
      font-weight: 500;
      color: #acb3c9;

      a {
        color: #fff;

        &:hover {
          color: #8f2ffd;
        }
      }
    }

    .box {
      background-color: rgba(#1d222e, 0.5);
      padding: 13px 11px 10px 9px;

      &,
      form,
      form::before,
      form::after {
        @extend %radius-12;
      }

      form {
        border: 1px solid rgba(#fff, 0.1);
        padding: 57px 29px 48px 26px;
        background-color: #1d222e;
        box-shadow: 0 3px 50px rgba(#000, 0.23);

        &::before {
          background-image: linear-gradient(
            167.84deg,
            rgba(246, 80, 156, 0.2) -0.74%,
            rgba(31, 40, 58, 0) 38%
          );
        }

        &::after {
          background-image: linear-gradient(
            346.74deg,
            rgba(251, 173, 37, 0.149) 3.46%,
            rgba(31, 40, 58, 0) 28.83%
          );
        }

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

          i {
            margin-left: 4px;
            color: #8c90a1;
          }
        }

        .form-control {
          background-color: #1b1f2a;
          border-color: rgba(#fff, 0.06);
          height: 63px;
          border-radius: 5px;
          padding: 0 18px;
        }


        .device {
          margin: 25px 0 27px;
        }

        .devices {
          gap: 14px;

          label {
            max-width: calc(33.333333% - 10px);
            width: 100%;
            flex: 0 0 auto;
            font-weight: 500;
            color: #757d91;
            line-height: 18px;
            border-radius: 5px;
            background-color: #212734;
            padding: 23px 20px 22px 27px;
            cursor: pointer;

            i {
              font-size: 13px;
              margin-right: 6px;
              color: #979bb0;
            }

            &::before {
              content: "\e90f";
              font-family: "icomoon";
              font-size: 6px;
              color: #fff;
              @include flex(center, center);
              border-radius: 4px;
              width: 17px;
              height: 17px;
              top: 50%;
              right: 20px;
              transform: translateY(-50%);
              background-color: #fa4b68;
              box-shadow: 0 0 0 2.5px rgba(#fff, 0.06);
              text-indent: -1px;
              transition: all 0.3s ease-in-out;
              opacity: 0;
            }
          }

          input:checked + label {
            background-color: #252b3a;

            &,
            i {
              color: #acb3c9;
            }

            &::before {
              opacity: 1;
            }
          }
        }

        

        .btn {
          max-width: 100%;
          border-radius: 9px;
          height: 63px;
          box-shadow: 0 3px 30px rgba(#1b7ef0, 0.22);
          font-weight: 600;
        }
      }
    }
  }

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

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

    &-wrapper {
      background: url("./../images/shape/pattern-02.png") 0 0 no-repeat,
        linear-gradient(144.49deg, #f6509c 20.54%, #8f2ffd 75.58%);
      background-size: 100% 100%;
      padding: 29px 294px 25px 97px;

      h2 {
        font-size: 24px;
        font-weight: bold;
        line-height: 29px;
        color: #fff;
        text-shadow: 0 3px 6px rgba(#000, 0.39);
      }

      p {
        font-size: 12px;
        line-height: 20px;
        margin: 17px 0 13px;
        color: #f6faff;
      }

      .btn {
        max-width: 220px;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        font-weight: 500;

        i {
          font-size: 8px;
          margin-left: 12px;
        }
      }

      .image {
        right: 94px;
        bottom: 0;

        &::before {
          width: 87px;
          height: 132px;
          background-color: #6d16d2;
          border: 1px solid #707070;
          filter: blur(15px);
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
        }
      }
    }
  }

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

  @include md {
    &-self {
      &-wrapper {
        padding: 29px 189px 25px 32px;

        .image {
          right: 18px;
        }
      }
    }
  }

  @include sm {
    &::before {
      background-size: cover;
      background-position: center;
      transform: translateY(-370px);
    }

    &::after {
      top: 564px;
    }

    &-wrapper {
      .box {
        form {
          padding: 57px 15px 44px;

          .row .col-md-6:first-child {
            margin-bottom: 18px;
          }

          .devices {
            label {
              padding: 23px 12px 22px;

              &::before {
                right: 12px;
              }
            }
          }
        }
      }
    }

    &-self {
      &-wrapper {
        padding: 214px 20px 29px;

        .btn {
          max-width: 100%;
          @include flex(center, space-between);
          padding: 0 15px;
          height: 55px;
          line-height: 55px;
        }

        .image {
          top: 36px;
          right: auto;
          bottom: auto;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  @include xs {
    &-wrapper {
      .box {
        margin: 0 -12px;

        form {
          .devices {
            gap: 7px;

            label {
              &,
              i {
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    &-self {
      &-wrapper {
        h2 {
          font-size: 18px;
          line-height: 26px;
        }
      }
    }

    [data-message] {
      &::after {
        transform: translate(-55%, 0);
      }

      &:hover::after {
        transform: translate(-55%, -12px);
      }
    }
  }

  @include media("max", 449px) {
    &-wrapper {
      .box {
        form {
          .devices {
            label {
              max-width: 100%;
              flex: 1 0 calc(50% - 4px);
            }
          }
        }
      }
    }
  }

  @include media("max", 419px) {
    &-wrapper {
      .title {
        font-size: 32px;
        line-height: 45px;
      }
    }
  }
}