@use "../utilities" as *;

/* START: Home 8 Testimonial CSS */
.h8-testimonial {
  background-color: var(--tj-color-theme-bg);
  overflow: hidden;
  position: relative;
  z-index: 2;

  @media #{$sm, $xs} {
    padding-bottom: 80px;
  }

  &-section-heading {
    margin-bottom: 0;
    @media #{$lg} {
      margin-bottom: 0;
    }
    @media #{$md} {
      margin-bottom: 0;
    }

    @media #{$sm,$xs} {
      margin-bottom: 0;
    }
    &-wrapper {
      padding: 120px 0 0;
      @media #{$lg} {
        padding: 100px 0 50px;
      }
      @media #{$md} {
        padding: 80px 0 45px;
      }

      @media #{$sm,$xs} {
        max-width: 540px;
        padding: 80px 12px 40px;
        margin-inline-start: auto;
        margin-inline-end: auto;
      }
    }
  }
  &-fanfact {
    .counter-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      max-width: 361px;
      margin-bottom: 35px;
      margin-top: 30px;
      @media #{$lg,$md} {
        margin-bottom: 15px;
        margin-top: 10px;
      }
      @media #{$sm,$xs} {
        text-align: start;
        margin-bottom: 10px;
        margin-top: 10px;
      }
    }
    .number {
      flex-shrink: 0;
      padding-inline-end: 10px;
      position: relative;
      background: linear-gradient(to right, #f75763, #c354af, #9353f5);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
      font-size: 72px;
      font-family: var(--tj-ff-heading);
      margin-bottom: 0;
      .odometer-value {
        background: linear-gradient(to right, #f75763, #c354af, #9353f5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
      }
      @media #{$sm,$xs} {
        font-size: 60px;
      }
      &::after {
        content: "";
        width: 1px;
        height: 69%;
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        transform: translateY(-50%) translateX(50%);
        background-color: var(--tj-color-border-2);
      }
    }
    .sub-title {
      line-height: 1.5;
    }
  }
  .container {
    @media #{$sm,$xs} {
      max-width: 100%;
      --bs-gutter-x: 0;
      .row {
        --bs-gutter-x: 0;
      }
    }
  }
  &-slider {
    height: 783px;
    // @media #{$lg,$md} {
    // 	height: auto;
    // 	margin-bottom: 30px;
    // }
    @media #{$sm,$xs} {
      height: auto;
      margin-bottom: 24px;
    }
    .swiper-wrapper {
      transition-timing-function: linear;
    }

    .swiper-slide {
      height: auto;

      @media #{$sm,$xs} {
        width: 400px;
      }
    }
  }
  &-item {
    padding: 35px 30px 35px 30px;
    background-color: var(--tj-color-common-white);
    @media #{$xs} {
      padding: 30px 20px;
    }
    .tj-testimonial-author {
      flex-wrap: nowrap;
      .author-images {
        mask-image: url(/images/shapes/h6-test-shape.svg);
        background: var(--tj-color-theme-bg);
        width: 90px;
        height: 110px;
        margin-bottom: -40px;
        img {
          top: 12px;
          inset-inline-end: 8px;
          transform: unset;
          width: 75px;
          height: 75px;
        }
      }

      .author-text .author-name {
        @media #{$xl} {
          font-size: 20px;
        }
      }
      .sub-title {
        color: var(--tj-color-common-black-2);
      }
    }

    .author-rating {
      background: var(--tj-color-theme-bg);
      display: inline-block;
      padding: 2px 10px 4px;
      border-radius: 32px;
      .star-ratings {
        color: var(--tj-color-theme-primary);
        -webkit-text-stroke: 1px #c354af;
        .fill-ratings {
          background: linear-gradient(to right, #f75763, #c354af, #9353f5);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          display: inline-block;
        }
        .empty-ratings {
          color: transparent;
        }
      }
    }
    .testimonial-content {
      padding-inline-start: 0;
      flex-direction: column;
      .desc {
        max-width: 100%;
        font-size: 18px;
        border-bottom-style: dashed;
        padding-bottom: 25px;
        @media #{$xs} {
          font-size: 16px;
        }
      }
    }
  }
}
.tj-gap-30 {
  --bs-gutter-x: 30px;
  @media #{$xs} {
    --bs-gutter-x: 24px;
  }
  .row {
    --bs-gutter-x: 30px;
    @media #{$xs} {
      --bs-gutter-x: 24px;
    }
  }
}
/* START: Home 8 Testimonial CSS */