.faq-page {
  &::before {
    transform: translateY(-200px);
    background-image: url('./../images/background/bg-faq.png');
    height: 838px;
  }
  
  &-wrapper {
    max-width: 801px;
    margin: 74px auto 0;

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

      &::first-letter {
        color: #fff;
      }
    }

    p {
      font-size: 12px;
      font-weight: 500;
      color: #acb3c9;
      line-height: 28px;
      margin: 35px 0;
    }

    form {
      margin-bottom: 42px;

      img {
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
      }

      .form-control {
        padding: 0 95px 0 60px;
        height: 73px;
        border-radius: 15px;
        background-color: rgba(#1b1e28, 0.77);

        &:not(:focus) {
          border-color: rgba(#fff, 0.13);
        }
      }

      button {
        top: 50%;
        transform: translateY(-50%);
        right: 17px;
        width: 71px;
        height: 53px;
        line-height: 53px;
        background-color: #21232e;
        border-radius: 15px;
        font-weight: 500;
        color: #acb3c9;

        &:hover {
          background-color: #8f2ffd;
          color: #fff;
        }
      }
    }

    .faq-item {
      &.opened {
        background-color: rgba(#2b303c, 0.6);
        border-color: rgba(#1c0f2c, 0.6);
      }
    }
  }

  @include sm {
    &::before {
      background-size: cover;
    }
  }

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