Testimonials / reviews

<!-- Quotation -->
<figure class="position-relative ps-4">
  <span class="position-absolute top-0 start-0 w-3 h-100 bg-primary"></span>
  <blockquote class="blockquote fs-xl fw-medium text-dark ps-1 ps-sm-3">
    <p>Sollicitudin eget massa, elementum, purus nec fermentum vitae, elementum. Tincidunt vulputate lorem cursus id. Dictum tincidunt mi ornare tristique. Id sit elit pulvinar eu. Tempus vel, mauris sed proin aliquet vulputate cras est. Ut ornare eget a viverra.</p>
  </blockquote>
  <figcaption class="d-flex align-items-center pt-3 ps-1 ps-sm-3">
    <img src="assets/img/avatar/04.jpg" width="48" class="rounded-circle" alt="Jane Cooper">
    <div class="ps-3">
      <h6 class="fw-semibold lh-base mb-0">Jane Cooper</h6>
      <span class="fs-sm text-muted">CEO of Ipsum Company</span>
    </div>
  </figcaption>
</figure>

<!-- Testimonial: Style 1 -->
<figure class="card h-100 position-relative border-0 shadow-sm pt-4 mt-4">
  <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
    <i class="bx bxs-quote-left"></i>
  </span>
  <blockquote class="card-body mb-0">
    <p class="mb-0">Pulvinar urna condimentum amet tempor, ornare integer. Lorem odio justo malesuada suspendisse viverra aliquet quisque turpis non. Feugiat in odio non nunc ornare consectetur. Vestibulum nunc lectus auctor quis. Natoque lectus tortor lacus.</p>
  </blockquote>
  <figcaption class="card-footer border-0 d-flex align-items-center pt-0">
    <img src="assets/img/avatar/10.jpg" width="48" class="rounded-circle" alt="Jerome Bell">
    <div class="ps-3">
      <h6 class="fw-semibold lh-base mb-0">Jerome Bell</h6>
      <span class="fs-sm text-muted">Co-founder of Lorem Company</span>
    </div>
  </figcaption>
</figure>

<!-- Testimonial: Style 2. Should be placed inside .container -->
<div class="row">
  <div class="col-md-4">
    <div class="position-relative d-flex h-100">
      <div class="position-absolute top-0 start-0 w-100 h-100 rounded-3 bg-size-cover bg-repeat-0 bg-position-center" style="background-image: url(assets/img/testimonials/03.jpg);"></div>
    </div>
  </div>
  <div class="col-md-8">
    <figure class="card position-relative border-0 shadow-sm py-3 p-0 p-lg-4 mt-4 mb-0 ms-xl-5">
      <span class="btn btn-icon btn-primary btn-lg shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4 ms-lg-5">
        <i class="bx bxs-quote-left"></i>
      </span>
      <blockquote class="card-body mt-2 mb-0">
        <p class="fs-lg">Dolor, a eget elementum, integer nulla volutpat, nunc, sit. Quam iaculis varius mauris magna sem. Egestas sed sed suscipit dolor faucibus dui imperdiet at eget. Tincidunt imperdiet quis hendrerit aliquam feugiat neque cras sed. Dictum quam integer volutpat tellus, faucibus platea. Pulvinar turpis proin faucibus at mauris.</p>
      </blockquote>
      <figcaption class="card-footer border-0 d-sm-flex pt-0 mt-n3 mt-lg-0">
        <div class="d-flex align-items-center border-end-sm pe-sm-4 me-sm-4">
          <img src="assets/img/avatar/05.jpg" width="48" class="d-md-none rounded-circle" alt="Ralph Edwards">
          <div class="ps-3 ps-md-0">
            <h5 class="fw-semibold lh-base mb-0">Ralph Edwards</h5>
            <span class="fs-sm text-muted">Head of Marketing</span>
          </div>
        </div>
        <img src="assets/img/brands/02.svg" width="160" class="d-block mt-2 ms-5 mt-sm-0 ms-sm-0" alt="Company logo">
      </figcaption>
    </figure>
  </div>
</div>

<!-- Testimonial: Style 3 -->
<div class="card border-0 bg-secondary p-1 p-sm-0 p-md-2">
  <img src="assets/img/landing/app-showcase-3/integrations/magento-color-light.svg" class="d-block d-dark-mode-none mx-auto" width="165" alt="Magento">
  <img src="assets/img/landing/app-showcase-3/integrations/magento-color-dark.svg" class="d-none d-dark-mode-block mx-auto" width="165" alt="Magento">
  <div class="card-body text-center pt-1">
    <p class="pb-3 mb-3">Differentiate your app from the competition with this SaaS platform's outstanding performance and exceptional API for implementing AI models into your application.</p>
    <img src="assets/img/avatar/55.jpg" class="d-inline-block rounded-circle" width="80" alt="Avatar">
    <div class="pt-2 mt-1">
      <h3 class="fs-lg mb-1">Christopher Davis</h3>
      <p class="fs-sm text-muted mb-0">Network Administrator</p>
    </div>
  </div>
</div>

<!-- Review: Style 1 -->
<figure class="d-flex flex-column h-100 mt-4">
  <div class="card h-100 position-relative border-0 shadow-sm pt-4">
    <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
      <i class="bx bxs-quote-left"></i>
    </span>
    <blockquote class="card-body pb-3 mb-0">
      <p class="mb-0">Id mollis consectetur congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p>
    </blockquote>
    <div class="card-footer border-0 text-nowrap pt-0">
      <i class="bx bxs-star text-warning"></i>
      <i class="bx bxs-star text-warning"></i>
      <i class="bx bxs-star text-warning"></i>
      <i class="bx bx-star text-muted opacity-75"></i>
      <i class="bx bx-star text-muted opacity-75"></i>
    </div>
  </div>
  <figcaption class="d-flex align-items-center pt-4">
    <img src="assets/img/avatar/03.jpg" width="48" class="rounded-circle" alt="Fannie Summers">
    <div class="ps-3">
      <h6 class="fs-sm fw-semibold mb-0">Fannie Summers</h6>
      <span class="fs-xs text-muted">Designer</span>
    </div>
  </figcaption>
</figure>

<!-- Review: Style 2 -->
<div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center">
  <div class="position-relative bg-light-subtle rounded-circle flex-shrink-0 zindex-1 p-2 ms-4 ms-sm-0 mb-n5 mb-sm-0 me-sm-n5">
    <img src="assets/img/avatar/51.jpg" class="rounded-circle" width="80" alt="Avatar">
  </div>
  <div class="card border-0 bg-secondary pt-5 pb-1 px-1 ps-sm-5 pe-sm-3 py-sm-3">
    <div class="card-body">
      <div class="fs-lg text-nowrap mb-3">
        <i class="bx bxs-star text-warning"></i>
        <i class="bx bxs-star text-warning"></i>
        <i class="bx bxs-star text-warning"></i>
        <i class="bx bxs-star text-warning"></i>
        <i class="bx bx-star text-muted opacity-75"></i>
      </div>
      <p class="text-body fs-lg mb-3">This app has completely transformed the way I approach my finances. It's packed with useful features and it's helped me stay on top of my finances and reach my financial goals.</p>
      <h6 class="fs-lg mb-0">Jenny Wilson</h6>
    </div>
  </div>
</div>

<!-- Testimonials slider: Style 1 -->
<div class="position-relative px-sm-5">

  <!-- Prev button -->
  <button type="button" id="prev" class="btn btn-prev btn-icon btn-sm position-absolute top-50 translate-middle-y start-0 d-none d-sm-inline-flex mt-n4" aria-label="Previous">
    <i class="bx bx-chevron-left"></i>
  </button>

  <!-- Next button -->
  <button type="button" id="next" class="btn btn-next btn-icon btn-sm position-absolute top-50 translate-middle-y end-0 d-none d-sm-inline-flex mt-n4" aria-label="Next">
    <i class="bx bx-chevron-right"></i>
  </button>

  <!-- Slider -->
  <div class="swiper swiper-nav-onhover pt-1 mx-md-2" data-swiper-options='{
    "spaceBetween": 12,
    "loop": true,
    "pagination": {
      "el": ".swiper-pagination",
      "clickable": true
    },
    "navigation": {
      "prevEl": "#prev",
      "nextEl": "#next"
    }
  }'>
    <div class="swiper-wrapper pt-4 pb-3">

      <!-- Item -->
      <div class="swiper-slide h-auto px-2">
        <figure class="card h-100 position-relative border-0 shadow-sm py-3 p-0 p-xxl-4 my-0">
          <span class="btn btn-icon btn-primary btn-lg shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4 ms-xxl-5">
            <i class="bx bxs-quote-left"></i>
          </span>
          <blockquote class="card-body mt-2 mb-2">
            <p class="fs-lg mb-0">Dolor, a eget elementum, integer nulla volutpat, nunc, sit. Quam iaculis varius mauris magna sem. Egestas sed sed suscipit dolor faucibus dui imperdiet at eget. Tincidunt imperdiet quis hendrerit aliquam feugiat neque cras sed. Dictum quam integer volutpat tellus, faucibus platea. Pulvinar turpis proin faucibus at mauris. Sagittis gravida vitae porta enim, nulla arcu fermentum massa lobortis facilisis.</p>
          </blockquote>
          <figcaption class="card-footer d-flex align-items-center border-0 pt-0 mt-n2 mt-lg-0">
            <img src="assets/img/avatar/14.jpg" width="60" class="rounded-circle" alt="Annette Black">
            <div class="ps-3">
              <h6 class="fw-semibold lh-base mb-0">Annette Black</h6>
              <span class="fs-sm text-muted">QA Engineer in Company Name</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto px-2">
        <figure class="card h-100 position-relative border-0 shadow-sm py-3 p-0 p-xxl-4 my-0">
          <span class="btn btn-icon btn-primary btn-lg shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4 ms-xxl-5">
            <i class="bx bxs-quote-left"></i>
          </span>
          <blockquote class="card-body mt-2 mb-2">
            <p class="fs-lg mb-0">Id nibh sed purus eu. Viverra eu sed quam pellentesque magna ac sit odio. Mi at interdum hendrerit neque vulputate semper vulputate. Et augue lacinia magna tempor blandit dui porttitor in senectus. Porttitor nulla in ac in quis. Et ultrices lacus, nunc at nulla eu sodales. At aliquam euismod est in praesent ornare etiam id.</p>
          </blockquote>
          <figcaption class="card-footer d-flex align-items-center border-0 pt-0 mt-n2 mt-lg-0">
            <img src="assets/img/avatar/11.jpg" width="60" class="rounded-circle" alt="Jerome Bell">
            <div class="ps-3">
              <h6 class="fw-semibold lh-base mb-0">Jerome Bell</h6>
              <span class="fs-sm text-muted">Co-founder of Lorem Company</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto px-2">
        <figure class="card h-100 position-relative border-0 shadow-sm py-3 p-0 p-xxl-4 my-0">
          <span class="btn btn-icon btn-primary btn-lg shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4 ms-xxl-5">
            <i class="bx bxs-quote-left"></i>
          </span>
          <blockquote class="card-body mt-2 mb-2">
            <p class="fs-lg mb-0">Nec iaculis fermentum interdum habitasse feugiat massa id pellentesque. Ut porta gravida lobortis facilisis dui augue. Fringilla nunc porttitor eget dictum tempus. Lorem erat eu congue curabitur est. Pulvinar morbi pulvinar venenatis rhoncus egestas euismod massa mauris. Vestibulum nunc lectus auctor quis. Natoque lectus tortor lacus.</p>
          </blockquote>
          <figcaption class="card-footer d-flex align-items-center border-0 pt-0 mt-n2 mt-lg-0">
            <img src="assets/img/avatar/13.jpg" width="60" class="rounded-circle" alt="Robert Fox">
            <div class="ps-3">
              <h6 class="fw-semibold lh-base mb-0">Robert Fox</h6>
              <span class="fs-sm text-muted">CEO of Ipsum Company</span>
            </div>
          </figcaption>
        </figure>
      </div>
    </div>

    <!-- Pagination -->
    <div class="swiper-pagination position-relative pt-2 pt-sm-3 mt-4"></div>
  </div>
</div>

<!-- Testimonials slider: Style 2. Should be placed inside .container -->
<div class="row">
  <div class="col-md-4 d-none d-md-block">

    <!-- Swiper tabs (Author images) -->
    <div class="swiper-tabs">

      <!-- Author 1 image -->
      <div id="author-1" class="card bg-transparent border-0 swiper-tab active">
        <div class="card-body p-0 rounded-3 bg-size-cover bg-repeat-0 bg-position-top-center" style="background-image: url(assets/img/testimonials/03.jpg);"></div>
        <div class="card-footer d-flex w-100 border-0 pb-0">
          <img src="assets/img/brands/01.svg" width="160" class="d-none d-xl-block" alt="Company logo">
          <div class="border-start-xl ps-xl-4 ms-xl-2">
            <h5 class="fw-semibold lh-base mb-0">Ralph Edwards</h5>
            <span class="fs-sm text-muted">Head of Marketing <span class="d-xl-none d-inline">at Lorem Ltd.</span></span>
          </div>
        </div>
      </div>

      <!-- Author 2 image -->
      <div id="author-2" class="card bg-transparent border-0 swiper-tab">
        <div class="card-body p-0 rounded-3 bg-size-cover bg-repeat-0 bg-position-top-center" style="background-image: url(assets/img/testimonials/02.jpg);"></div>
        <div class="card-footer d-flex w-100 border-0 pb-0">
          <img src="assets/img/brands/02.svg" width="160" class="d-none d-xl-block" alt="Company logo">
          <div class="border-start-xl ps-xl-4 ms-xl-2">
            <h5 class="fw-semibold lh-base mb-0">Annette Black</h5>
            <span class="fs-sm text-muted">Strategic Advisor <span class="d-xl-none d-inline">at Company LLC</span></span>
          </div>
        </div>
      </div>

      <!-- Author 3 image -->
      <div id="author-3" class="card bg-transparent border-0 swiper-tab">
        <div class="card-body p-0 rounded-3 bg-size-cover bg-repeat-0 bg-position-top-center" style="background-image: url(assets/img/testimonials/01.jpg);"></div>
        <div class="card-footer d-flex w-100 border-0 pb-0">
          <img src="assets/img/brands/04.svg" width="160" class="d-none d-xl-block" alt="Company logo">
          <div class="border-start-xl ps-xl-4 ms-xl-2">
            <h5 class="fw-semibold lh-base mb-0">Darrell Steward</h5>
            <span class="fs-sm text-muted">Project Manager <span class="d-xl-none d-inline">at Ipsum Ltd.</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="card border-0 shadow-sm p-4 p-xxl-5 ms-xxl-5">

      <!-- Slider prev/next buttons + Quotation mark -->
      <div class="d-flex justify-content-between pb-4 mb-2">
        <span class="btn btn-icon btn-primary btn-lg shadow-primary pe-none">
          <i class="bx bxs-quote-left"></i>
        </span>
        <div class="d-flex">
          <button type="button" id="prev2" class="btn btn-prev btn-icon btn-sm me-2" aria-label="Previous">
            <i class="bx bx-chevron-left"></i>
          </button>
          <button type="button" id="next2" class="btn btn-next btn-icon btn-sm ms-2" aria-label="Next">
            <i class="bx bx-chevron-right"></i>
          </button>
        </div>
      </div>   
      
      <!-- Slider -->
      <div class="swiper mx-0 mb-md-n2 mb-xxl-n3" data-swiper-options='{
        "spaceBetween": 24,
        "loop": true,
        "tabs": true,
        "pagination": {
          "el": ".swiper-pagination",
          "clickable": true
        },
        "navigation": {
          "prevEl": "#prev2",
          "nextEl": "#next2"
        }
      }'>
        <div class="swiper-wrapper">

          <!-- Item -->
          <div class="swiper-slide h-auto" data-swiper-tab="#author-1">
            <figure class="card h-100 position-relative border-0 bg-transparent">
              <blockquote class="card-body p-0 mb-0">
                <p class="fs-lg mb-0">Dolor, a eget elementum, integer nulla volutpat, nunc, sit. Quam iaculis varius mauris magna sem. Egestas sed sed suscipit dolor faucibus dui imperdiet at eget. Tincidunt imperdiet quis hendrerit aliquam feugiat neque cras sed. Dictum quam integer volutpat tellus, faucibus platea. Pulvinar turpis proin faucibus at mauris. Sagittis gravida vitae porta enim, nulla arcu fermentum massa. Tortor ullamcorper lacus. Pellentesque lectus adipiscing aenean volutpat tortor habitant.</p>
              </blockquote>
              <figcaption class="card-footer border-0 d-sm-flex d-md-none w-100 pb-2">
                <div class="d-flex align-items-center border-end-sm pe-sm-4 me-sm-2">
                  <img src="assets/img/avatar/05.jpg" width="48" class="rounded-circle" alt="Ralph Edwards">
                  <div class="ps-3">
                    <h5 class="fw-semibold lh-base mb-0">Ralph Edwards</h5>
                    <span class="fs-sm text-muted">Head of Marketing</span>
                  </div>
                </div>
                <img src="assets/img/brands/01.svg" width="160" class="d-block mt-2 ms-5 mt-sm-0 ms-sm-0" alt="Company logo">
              </figcaption>
            </figure>
          </div>

          <!-- Item -->
          <div class="swiper-slide h-auto" data-swiper-tab="#author-2">
            <figure class="card h-100 position-relative border-0 bg-transparent">
              <blockquote class="card-body p-0 mb-0">
                <p class="fs-lg mb-0">Mi semper risus ultricies orci pulvinar in at enim orci. Quis facilisis nunc pellentesque in ullamcorper sit. Lorem blandit arcu sapien, senectus libero, amet dapibus cursus quam. Eget pellentesque eu purus volutpat adipiscing malesuada. Purus nisi, tortor vel lacus. Donec diam molestie ultrices vitae eget pulvinar fames. Velit lacus mi purus velit justo, amet. Nascetur lobortis diam, duis orci.</p>
              </blockquote>
              <figcaption class="card-footer border-0 d-sm-flex d-md-none w-100 pb-2">
                <div class="d-flex align-items-center border-end-sm pe-sm-4 me-sm-2">
                  <img src="assets/img/avatar/06.jpg" width="48" class="rounded-circle" alt="Annette Black">
                  <div class="ps-3">
                    <h5 class="fw-semibold lh-base mb-0">Annette Black</h5>
                    <span class="fs-sm text-muted">Strategic Advisor</span>
                  </div>
                </div>
                <img src="assets/img/brands/02.svg" width="160" class="d-block mt-2 ms-5 mt-sm-0 ms-sm-0" alt="Company logo">
              </figcaption>
            </figure>
          </div>

          <!-- Item -->
          <div class="swiper-slide h-auto" data-swiper-tab="#author-3">
            <figure class="card h-100 position-relative border-0 bg-transparent">
              <blockquote class="card-body p-0 mb-0">
                <p class="fs-lg mb-0">Ac at sed sit senectus massa. Massa ante amet ultrices magna porta tempor. Aliquet diam in et magna ultricies mi at. Lectus enim, vel enim egestas nam pellentesque et leo. Elit mi faucibus laoreet aliquam pellentesque sed aliquet integer massa. Orci leo tortor ornare id mattis auctor aliquam volutpat aliquet. Odio lectus viverra eu blandit nunc malesuada vitae eleifend pulvinar. In ac fermentum sit in orci.</p>
              </blockquote>
              <figcaption class="card-footer border-0 d-sm-flex d-md-none w-100 pb-2">
                <div class="d-flex align-items-center border-end-sm pe-sm-4 me-sm-2">
                  <img src="assets/img/avatar/01.jpg" width="48" class="rounded-circle" alt="Darrell Steward">
                  <div class="ps-3">
                    <h5 class="fw-semibold lh-base mb-0">Darrell Steward</h5>
                    <span class="fs-sm text-muted">Project Manager</span>
                  </div>
                </div>
                <img src="assets/img/brands/04.svg" width="160" class="d-block mt-2 ms-5 mt-sm-0 ms-sm-0" alt="Company logo">
              </figcaption>
            </figure>
          </div>
        </div>

        <!-- Pagination (bullets) -->
        <div class="swiper-pagination position-relative pt-3 mt-4 d-none d-md-flex"></div>
      </div>        
    </div>
  </div>
</div>

<!-- Testimonials slider: Style 3. Ideally it should be placed outside of any container to make it full width. -->
<div class="px-2 px-sm-0">
  <div class="swiper" data-swiper-options='{
    "slidesPerView": 1,
    "centeredSlides": true,
    "spaceBetween": 8,
    "loop": true,
    "pagination": {
      "el": ".swiper-pagination",
      "clickable": true
    },
    "breakpoints": {
      "500": {
        "slidesPerView": 2,
        "spaceBetween": 24
      },
      "1000": {
        "slidesPerView": 4,
        "spaceBetween": 24
      },
      "1500": {
        "slidesPerView": 6,
        "spaceBetween": 24
      }
    }
  }'>
    <div class="swiper-wrapper">

      <!-- Item -->
      <div class="swiper-slide h-auto pt-4">
        <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0">
          <div class="card h-100 position-relative border-0 shadow-sm pt-4">
            <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
              <i class="bx bxs-quote-left"></i>
            </span>
            <blockquote class="card-body pb-3 mb-0">
              <p class="mb-0">Id mollis consectetur congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p>
            </blockquote>
            <div class="card-footer border-0 text-nowrap pt-0">
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bx-star text-muted opacity-75"></i>
              <i class="bx bx-star text-muted opacity-75"></i>
            </div>
          </div>
          <figcaption class="d-flex align-items-center ps-4 pt-4">
            <img src="assets/img/avatar/03.jpg" width="48" class="rounded-circle" alt="Fannie Summers">
            <div class="ps-3">
              <h6 class="fs-sm fw-semibold mb-0">Fannie Summers</h6>
              <span class="fs-xs text-muted">Designer</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto pt-4">
        <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0">
          <div class="card h-100 position-relative border-0 shadow-sm pt-4">
            <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
              <i class="bx bxs-quote-left"></i>
            </span>
            <blockquote class="card-body pb-3 mb-0">
              <p class="mb-0">Phasellus luctus nisi id orci condimentum, at cursus nisl vestibulum. Orci varius natoque penatibus et magnis dis parturient montes.</p>
            </blockquote>
            <div class="card-footer border-0 text-nowrap pt-0">
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
            </div>
          </div>
          <figcaption class="d-flex align-items-center ps-4 pt-4">
            <img src="assets/img/avatar/02.jpg" width="48" class="rounded-circle" alt="Robert Fox">
            <div class="ps-3">
              <h6 class="fs-sm fw-semibold mb-0">Robert Fox</h6>
              <span class="fs-xs text-muted">QA Engineer</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto pt-4">
        <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0">
          <div class="card h-100 position-relative border-0 shadow-sm pt-4">
            <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
              <i class="bx bxs-quote-left"></i>
            </span>
            <blockquote class="card-body pb-3 mb-0">
              <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ipsum odio, bibendum ornare mi at, efficitur urna.</p>
            </blockquote>
            <div class="card-footer border-0 text-nowrap pt-0">
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bx-star text-muted opacity-75"></i>
            </div>
          </div>
          <figcaption class="d-flex align-items-center ps-4 pt-4">
            <img src="assets/img/avatar/04.jpg" width="48" class="rounded-circle" alt="Annette Black">
            <div class="ps-3">
              <h6 class="fs-sm fw-semibold mb-0">Annette Black</h6>
              <span class="fs-xs text-muted">Project Manager</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto pt-4">
        <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0">
          <div class="card h-100 position-relative border-0 shadow-sm pt-4">
            <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
              <i class="bx bxs-quote-left"></i>
            </span>
            <blockquote class="card-body pb-3 mb-0">
              <p class="mb-0">Etiam augue ante, imperdiet et nunc sed, bibendum faucibus est. Suspendisse egestas facilisis erat eu eleifend.</p>
            </blockquote>
            <div class="card-footer border-0 text-nowrap pt-0">
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bx-star text-muted opacity-75"></i>
              <i class="bx bx-star text-muted opacity-75"></i>
            </div>
          </div>
          <figcaption class="d-flex align-items-center ps-4 pt-4">
            <img src="assets/img/avatar/05.jpg" width="48" class="rounded-circle" alt="Jerome Bell">
            <div class="ps-3">
              <h6 class="fs-sm fw-semibold mb-0">Jerome Bell</h6>
              <span class="fs-xs text-muted">Developer</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto pt-4">
        <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0">
          <div class="card h-100 position-relative border-0 shadow-sm pt-4">
            <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
              <i class="bx bxs-quote-left"></i>
            </span>
            <blockquote class="card-body pb-3 mb-0">
              <p class="mb-0">Pellentesque finibus congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p>
            </blockquote>
            <div class="card-footer border-0 text-nowrap pt-0">
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bx-star text-muted opacity-75"></i>
            </div>
          </div>
          <figcaption class="d-flex align-items-center ps-4 pt-4">
            <img src="assets/img/avatar/01.jpg" width="48" class="rounded-circle" alt="Albert Flores">
            <div class="ps-3">
              <h6 class="fs-sm fw-semibold mb-0">Albert Flores</h6>
              <span class="fs-xs text-muted">PR Director</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto pt-4">
        <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0">
          <div class="card h-100 position-relative border-0 shadow-sm pt-4">
            <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
              <i class="bx bxs-quote-left"></i>
            </span>
            <blockquote class="card-body pb-3 mb-0">
              <p class="mb-0">Nulla volutpat consectetur congue egestas egestas uni suspendisse blandit parturient.</p>
            </blockquote>
            <div class="card-footer border-0 text-nowrap pt-0">
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
            </div>
          </div>
          <figcaption class="d-flex align-items-center ps-4 pt-4">
            <img src="assets/img/avatar/06.jpg" width="48" class="rounded-circle" alt="Jenny Wilson">
            <div class="ps-3">
              <h6 class="fs-sm fw-semibold mb-0">Jenny Wilson</h6>
              <span class="fs-xs text-muted">Marketing</span>
            </div>
          </figcaption>
        </figure>
      </div>

      <!-- Item -->
      <div class="swiper-slide h-auto pt-4">
        <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0">
          <div class="card h-100 position-relative border-0 shadow-sm pt-4">
            <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
              <i class="bx bxs-quote-left"></i>
            </span>
            <blockquote class="card-body pb-3 mb-0">
              <p class="mb-0">Vivamus iaculis facilisis pretium. Pellentesque vitae mi odio. Donec imperdiet pellentesque ipsum quis pharetra. Nullam dolor sem.</p>
            </blockquote>
            <div class="card-footer border-0 text-nowrap pt-0">
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bxs-star text-warning"></i>
              <i class="bx bx-star text-muted opacity-75"></i>
            </div>
          </div>
          <figcaption class="d-flex align-items-center ps-4 pt-4">
            <img src="assets/img/avatar/07.jpg" width="48" class="rounded-circle" alt="Cameron Williamson">
            <div class="ps-3">
              <h6 class="fs-sm fw-semibold mb-0">Cameron Williamson</h6>
              <span class="fs-xs text-muted">Illustrator</span>
            </div>
          </figcaption>
        </figure>
      </div>
    </div>

    <!-- Pagination (bullets) -->
    <div class="swiper-pagination position-relative pt-1 pt-sm-3 mt-5"></div>
  </div>
</div>