.faq2 {
  &__content {
    p {
      @include breakpoint(xl) {
        max-width: 480px;
      }
    }
  }
  &__accordion {
    .accordion-item {
      @include transition($transition-2-ease-in-out !important);
      border-radius: 10px;
      border: 1px solid rgba($color-white, 0.14);

      &:not(:last-child) {
        margin-bottom: 24px;
        @include breakpoint(max-md) {
          margin-bottom: 15px;
        }
      }
      &.active {
        border-color: $color-primary;
      }
      .accordion-header {
      }
      .accordion-button {
        color: $color-white;
        padding: 20px 30px;
        @include transition($transition);
        gap: 15px;

        @include breakpoint(max-md) {
          padding: 15px 25px;
        }

        &:not(.collapsed) {
          padding: 30px 30px 20px;

          @include breakpoint(max-md) {
            padding: 25px 25px 15px;
          }

          &::after {
            content: "\f107";
            font: var(--fa-font-regular);
            font-size: $fs-14;
          }
        }

        &::after {
          @extend %d-grid, %place-center;
          width: 40px;
          height: 40px;
          flex-shrink: 0;
          border: 1px solid $color-white;
          border-radius: 50%;
          content: "\f107";
          font: var(--fa-font-regular);
          font-size: $fs-14;
          @include breakpoint(max-md) {
            width: 30px;
            height: 30px;
          }
        }
        &.extend {
          &::after {
            @include transform(rotate(-90deg));
          }
          &:not(.collapsed) {
            &::after {
              @include transform(rotate(-180deg));
            }
          }
        }
      }
    }
    .accordion-body {
      padding-inline: 30px;
      padding-block: 0 30px;
      color: rgba($color: $color-white, $alpha: 0.74);
      font-size: 18px;

      @include breakpoint(max-md) {
        padding-inline: 25px;
        padding-block: 0 25px;
      }
    }
  }
}

.faq3 {
  &.section {
  }
  &__accordion {
  }

  &__box {
    // padding-block: 30px;
    border-bottom: 1px solid $color-white;

    .accordion-button {
      gap: 20px;
      color: $color-white;
      padding: 0px;
      padding-block: 30px;
      @include transition($transition-3-ease-in-out);

      @include breakpoint(max-md) {
        padding-block: 20px;
      }
      &:not(.collapsed) {
        padding-block: 20px;

        @include breakpoint(max-md) {
          padding-block: 15px;
        }
      }

      &::after {
        min-width: 40px;
        min-height: 40px;
        display: grid;
        place-content: center;
        border: 1px solid $color-white;
        border-radius: 100%;
        background-image: unset;
        font: var(--fa-font-regular);
        content: "\f054";
        font-size: 15px;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;

        @include breakpoint(max-sm) {
          min-width: 35px;
          min-height: 35px;
          font-size: $fs-12;
        }
      }
      &:not(.collapsed)::after {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        @include transform(rotate(90deg));
      }
    }
    .accordion-body {
      color: rgba($color-white,0.6);
      padding: 0;
      padding-block-end: 20px;

      @include breakpoint(max-md) {
        padding-block-end: 15px;
      }
      @include breakpoint(max-sm) {
        font-size: $fs-16;
      }
    }

    &:first-of-type {
      .accordion-button {
        padding-top: 0;
      }
    }
    &:last-of-type {
      // .accordion-button {
      // }
    }
  }
}
