Bootstrap 5 Testimonials Components

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 end-0" src="saturn-assets/images/testimonials/orange-light.png" alt="">
  <div class="container position-relative">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center mb-16">
        <div class="col-lg-7 mb-8 mb-lg-0">
          <h3 class="mw-xl font-heading mb-0">
            <span>Our</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">happy</span>
            <span>clients says about us</span>
          </h3>
        </div>
        <div class="col-lg-5">
          <p class="mw-md ms-lg-auto text-secondary mb-0">Risus viverra justo sagittis vestibulum metus. Massa lacinia eros posuere cursus sed vestibulum massa gravida. Turpis volutpat faucibus hac sed suspendisse convallis vestibulum massa.</p>
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-lg-5 col-xl-6 mb-8 mb-lg-0">
          <img class="img-fluid d-block w-100" src="saturn-assets/images/testimonials/men-photo.png" alt="">
        </div>
        <div class="col-lg-7 col-xl-6">
          <div class="mw-lg ms-lg-auto">
            <img class="img-fluid d-block mb-8" src="saturn-assets/images/testimonials/quote.svg" alt="">
            <p class="fs-5 fw-semibold mb-6">“They are able to help a startup like mine scale and are very responsive to all our unique needs”</p>

<section class="py-12 py-sm-24 pb-md-32 position-relative overflow-hidden"><img class="position-absolute top-0 mt-n20 start-0" src="flaro-assets/images/testimonials/gradient.svg" alt=""/><img class="position-absolute bottom-0 mb-n20 end-0" src="flaro-assets/images/testimonials/gradient.svg" alt=""/>
  <div class="container position-relative">
    <h1 class="text-center h3 mb-16" >Don&apos;t just take our word for it</h1>
    <div class="mw-7xl mx-auto">
      <div class="row mb-n6">
        <div class="col-12 col-md-6 col-lg-4 mb-6">
          <div class="d-flex flex-column h-100 p-6 bg-white bg-opacity-25 border rounded-4">
            <div class="d-flex align-items-center mb-6">
              <div><img src="flaro-assets/images/testimonials/avatar.png" alt=""/></div>
              <div class="ps-4">
                <h6 class="mb-0" >Jacob Jones</h6><span class="fs-9 text-secondary" >@brooklysim</span>
              </div>
            </div>
            <p class="mw-md fs-7 pb-6 mb-auto" >If you haven&rsquo;t tried out Flaro App yet, I would definitely recommend it for both designers and developers &#x1F919;&#x1F3FB;</p><span class="fs-9 text-secondary" >3 days ago</span>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-6">
          <div class="d-flex flex-column h-100 p-6 bg-white bg-opacity-25 border rounded-4">
            <div class="d-flex align-items-center mb-6">
              <div><img src="flaro-assets/images/testimonials/avatar2.png" alt=""/></div>
              <div class="ps-4">
                <h6 class="mb-0" >Wade Warren</h6><span class="fs-9 text-secondary" >@brooklysim</span>
              </div>
            </div>

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-md mx-auto text-center mb-16">
      <h2 class="fs-10 text-secondary mb-5" >12k+ Happy Clients</h2>
      <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="mw-7xl mx-auto">
      <div class="container">
        <div class="row g-10">
          <div class="col-12 col-md-4">
            <div class="h-100 rounded-3" style="padding: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
              <div class="d-flex flex-column justify-content-between align-items-between h-100 p-8 bg-white rounded-1">
                <div class="mb-8"><img class="mb-8" src="gradia-assets/images/testimonials/avatar.png" alt=""/>
                  <p class="text-secondary" >&ldquo;You made it so simple. My new site is so much faster and easier to work with than my old site. I just choose the page, make the change.&rdquo;</p>
                </div>
                <div>
                  <h3 class="fs-17 text-secondary mb-1.5" >Darrell Steward</h3>
                  <p class="fs-19 text-muted mb-0" >Product Designer</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="h-100 rounded-3 shadow" style="padding: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">

<section class="py-12 py-md-16 py-lg-24 overflow-hidden">
  <div class="container mb-24">
    <div class="mw-2xl mx-auto text-center">
      <h3 class="font-heading mb-0">For those seeking an enjoyable way to learn</h3>
    </div>
  </div>
  <div class="d-flex mb-14 justify-content-center">
    <div class="flex-shrink-0 h-full w-100 mw-sm mx-4 p-8 border border-light rounded-3 shadow">
      <div class="d-flex mb-20 align-items-center">
        <img class="img-fluid pt-1 bg-primary-light rounded" src="solstice-assets/images/testimonials/man-avatar1.png" alt="">
        <div class="ms-4 p-2 bg-light-light bg-opacity-50 rounded-1">
          <span class="fw-bold">Steven Klein,</span>
          <span class="text-light-dark">Student</span>
        </div>
      </div>
      <div>
        <p class="fs-5 text-dark-light mb-0">“I've been more productive with Solstice and my academic performance is getting better every semester.”</p>
      </div>
    </div>
    <div class="flex-shrink-0 h-full w-100 mw-sm mx-4 p-8 border border-light rounded-3 shadow">
      <div class="d-flex mb-20 align-items-center">
        <img class="img-fluid pt-1 bg-primary-light rounded" src="solstice-assets/images/testimonials/woman-avatar2.png" alt="">
        <div class="ms-4 p-2 bg-light-light bg-opacity-50 rounded-1">
          <span class="fw-bold">Hanna Stanton,</span>

<section class="py-12 py-lg-24 bg-light overflow-hidden">
  <div class="container">
    <div class="mw-xl mx-auto mb-16 text-center">
      <h2 class="mb-4">What our clients say</h2>
      <p class="lead mb-0">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
  </div>
  <div class="position-relative">
    <div class="d-none d-sm-block position-absolute top-0 end-0 w-25 h-100" style="z-index: 10; background: linear-gradient(270deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0.00) 100%);"></div>
    <div class="d-none d-sm-block position-absolute top-0 start-0 w-25 h-100" style="z-index: 10; background: linear-gradient(90deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0.00) 100%);"></div>
    <div class="d-flex mb-6 justify-content-center">
      <div class="flex-shrink-0 position-relative w-100 mw-sm mx-3 p-6 bg-white">
        <span class="position-absolute top-0 end-0 m-6">
          <svg width="24" height="20" viewbox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_4578_1545)">
              <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.36151V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99516 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
            </g>
          </svg>
        </span>
        <div class="d-flex align-items-center mb-6">
          <img style="width: 55px; height: 55px;" src="basko-assets/images/testimonials/avatar10.png" alt="">
          <div class="ms-3">
            <span class="d-block fw-semibold mb-n2">Luke Mccormick</span>
            <span class="fs-6 text-secondary-dark">@andysm</span>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h3 text-white mb-6" style="letter-spacing: -0.2rem;">What people are saying</h1>
    </div>
    <div class="mw-lg mx-auto mw-lg-none p-2 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0 w-50" src="nightsable-assets/images/testimonials/blur.png" alt="">
      <div class="row position-relative">
        <div class="col-12 col-lg-5 col-xl-4"><img class="img-fluid d-block h-100 w-100" src="nightsable-assets/images/testimonials/man.png" alt=""></div>
        <div class="col-12 col-lg-7 col-xl-8">
          <div class="mw-3xl mx-auto pt-24 pb-10 px-8 ps-lg-20 pe-lg-10">
            <p class="fs-4 text-white mb-12" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system' ;">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</p>
            <div><span class="d-block lh-1 fw-medium">Wade Warren</span><span class="fs-9">CEO, Since Industry</span></div>
            <div class="d-flex mt-8 mt-sm-n8 align-items-center justify-content-end">
              <button class="btn p-0 me-5 d-flex align-items-center justify-content-center btn-outline-secondary-dark" style="width: 74px; height: 74px;">
                <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.7041 7.12817L4.15635 13.6759L10.7041 20.2237" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M22.4941 13.6759H4.33949" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <button class="btn p-0 d-flex align-items-center justify-content-center btn-outline-secondary-dark" style="width: 74px; height: 74px;">
                <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2959 7.12817L22.8437 13.6759L16.2959 20.2237" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.50586 13.6759H22.6605" stroke="white" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

<section class="position-relative py-20">
  <div class="container">
    <div class="row">
      <div class="position-relative col-12 col-lg-5"><img class="mx-auto mt-5 mt-lg-0" style="height: 448px; object-fit: cover;" src="zeus-assets/images/z-picture.png" alt=""/><img class="d-none d-lg-block position-absolute top-0 start-0 mt-20 ms-n10" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt=""/></div>
      <div class="col-12 col-lg-7">
        <div><span class="d-inline-block mb-10">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26 29.45C26 19.3858 33.4577 8.86747 45.2297 6.16443C45.6793 6.0612 46.1364 6.29467 46.3301 6.71327L47.5161 9.27572C47.7602 9.80299 47.5031 10.4238 46.9877 10.692C43.3044 12.608 40.1644 17.1966 39.3647 20.8059C39.2493 21.3268 39.6241 21.8042 40.1413 21.9351C44.6581 23.0784 48 27.1681 48 32.042C48 38.406 42.832 42 37.602 42C31.572 42 26 37.39 26 29.45ZM0 29.45C0 19.3858 7.45772 8.86747 19.2297 6.16443C19.6793 6.0612 20.1364 6.29467 20.3301 6.71327L21.5161 9.27572C21.7602 9.80299 21.5031 10.4238 20.9877 10.692C17.3044 12.608 14.1644 17.1966 13.3647 20.8059C13.2493 21.3268 13.6241 21.8042 14.1413 21.9351C18.6581 23.0784 22 27.1681 22 32.042C22 38.406 16.832 42 11.602 42C5.572 42 0 37.39 0 29.45Z" fill="#FF4564"></path>
            </svg></span>
          <h2 class="mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-10 lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <p class="mb-3 h4">Esther Howard</p>
          <p class="text-muted">CEO &amp; Founder</p>
        </div>
      </div>
    </div>
  </div><img class="d-none d-lg-block position-absolute bottom-0 end-0 mb-10" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt=""/>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden"><img class="position-absolute top-0 end-0 me-n80 mt-n80 img-fluid" src="zospace-assets/lines/circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 img-fluid" src="zospace-assets/lines/half-double-circle.svg" alt=""/>
  <div class="container position-relative">
    <div class="text-center mb-24"><span class="h6 text-primary" >Testimonials</span>
      <h2 class="h3 text-white mt-10" >What people say</h2>
    </div>
    <div class="row mb-24 position-relative">
      <div class="col-12 col-xl-6 mb-20 mb-xl-0">
        <div class="row justify-content-center mw-lg mw-xl-none mx-auto">
          <div class="col-12 col-sm-4 col-xl-auto mb-16 mb-sm-0"><img class="d-block mx-auto img-fluid rounded-pill" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 170px;"/></div>
          <div class="col-12 col-sm-8 col-xl-7 d-flex justify-content-center">
            <div class="mw-xs d-inline-block position-relative py-12 px-10 px-sm-16 rounded bg-secondary">
              <div class="d-none d-sm-block position-absolute top-0 start-0 mt-12 translate-middle-x bg-secondary" style="width: 40px; height: 40px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
              <div class="d-sm-none position-absolute top-0 start-50 translate-middle bg-secondary" style="width: 40px; height: 40px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div><img class="position-absolute top-0 start-100 ms-n3 ms-sm-n0 mt-12 translate-middle-x img-fluid" src="zospace-assets/images/quote-circle.svg" alt=""/>
              <p class="text-secondary-light mb-8" >The brown me malesuada nisi quis arcu ultrices, a fermentum libero maximus. Donec est urna, semper. At sem quis, congue dictum ipsum quam, sagittis.</p>
              <div class="d-flex mb-5"><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-empty.svg" alt=""/></div>
              <h5 class="text-white" >L&eacute;a Herrera</h5><span class="text-white" >Google</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-6">
        <div class="row justify-content-center mw-lg mw-xl-none mx-auto">
          <div class="col-12 col-sm-4 col-xl-auto mb-16 mb-sm-0"><img class="d-block mx-auto img-fluid rounded-pill" src="https://images.pexels.com/photos/5325893/pexels-photo-5325893.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 170px;"/></div>
          <div class="col-12 col-sm-8 col-xl-7 d-flex justify-content-center">

<section class="position-relative pb-24 pb-md-52 bg-dark overflow-hidden">
  <div class="position-relative py-14 mb-40 mb-md-56 bg-white">
    <div class="position-absolute top-0 start-50">
      <div class="py-9 bg-dark" style="width: 1.5px;"></div>
      <div class="py-14 bg-white" style="width: 1.5px;"></div>
    </div>
  </div>
  <div class="container">
    <div class="d-flex align-items-center mb-24"><span class="display-6 h5 mb-0 text-white" >08</span>
      <div class="mx-4 bg-white rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0 text-white" >Customer review</span>
    </div>
    <div class="mw-4xl mx-auto">
      <div class="mb-32">
        <div class="d-md-flex mb-14 align-items-center">
          <div class="d-inline-block position-relative me-md-6 mb-6 mb-md-0"><img class="rounded-circle" style="width: 60px; height: 60px;" src="wrexa-assets/images/avatar.png" alt=""/><img class="position-absolute bottom-0 end-0 me-n1 mb-n1 img-fluid" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt=""/></div>
          <div class="d-flex mb-6 mb-md-0 align-items-center">
            <h5 class="fw-bold text-white mb-0" >Helen Keller</h5>
            <div class="ms-4 me-md-16 ps-4 border-start border-secondary d-inline-block"><span class="text-secondary" >Miro, Head of Design</span></div>
          </div>
          <svg width="130" height="22" viewbox="0 0 130 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22 8.70801H13.6583L11 0.458008L8.34166 8.70801H0L6.80168 13.548L4.19835 21.5414L11 16.5913L17.8017 21.5414L15.1983 13.548L22 8.70801Z" fill="white"></path>
            <path d="M49 8.70801H40.6583L38 0.458008L35.3417 8.70801H27L33.8017 13.548L31.1984 21.5414L38 16.5913L44.8017 21.5414L42.1983 13.548L49 8.70801Z" fill="white"></path>
            <path d="M76 8.70801H67.6583L65 0.458008L62.3417 8.70801H54L60.8017 13.548L58.1984 21.5414L65 16.5913L71.8017 21.5414L69.1983 13.548L76 8.70801Z" fill="white"></path>
            <path d="M103 8.70801H94.6583L92 0.458008L89.3417 8.70801H81L87.8017 13.548L85.1984 21.5414L92 16.5913L98.8017 21.5414L96.1983 13.548L103 8.70801Z" fill="white"></path>

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="text-center">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Quotes</span>
        <div class="position-relative mb-16 mw-md-5xl mx-auto">
          <h2 class="position-relative mb-0 font-heading fs-5 fw-semibold" style="z-index: 1; letter-spacing: -1px;">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
          <img class="position-absolute top-0 start-0 mt-n6 ms-n7" src="flex-assets/elements/quote-top-green.svg" alt="">
          <img class="position-absolute bottom-0 end-0 mb-n6 me-n7" src="flex-assets/elements/quote-down-green.svg" alt="">
        </div>
        <img class="mb-6" src="flex-assets/images/testimonials/avatar.png" alt="">
        <h3 class="mb-2 fs-8 fw-semibold text-light-dark">Darren Dunlap</h3>
        <p class="mb-8 fs-10 text-secondary fw-medium">CEO &amp; Founder at Flex.co</p>
        <div class="d-inline-flex"><a class="bg-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="mx-3 bg-success rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="bg-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a></div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">

<section class="py-28 bg-white overflow-hidden position-relative"><img class="img-fluid position-absolute top-0 start-0" src="pstls-assets/images/testimonials/testimonial-1-shadow.png" alt=""/>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 col-xl-5 mb-20 mb-md-0" style="z-index: 1;">
        <div class="mw-md-md"><img src="pstls-assets/icons/testimonials-quote.svg" alt=""/>
          <h2 class="mb-12 mt-6 lh-sm font-heading" >Recently, the US Federal government banned online casinos from operating in America by making it illegal to transfer money to them through any US bank or payment system</h2>
          <h5 class="fw-bold lh-lg font-heading" >Sophie Kowalsky</h5><span class="text-muted small" >CTO at Shuffle</span>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-7">
        <div class="mx-auto me-md-0 mw-lg pt-12 position-relative">
          <div class="position-absolute px-80 h-100 top-0 start-50 ms-xl-n16" style="background-image: url('pstls-assets/images/testimonials/colors.png'); background-size: cover;" ></div><img class="img-fluid position-relative" src="pstls-assets/images/testimonials/woman.jpeg" alt="" style="z-index: 1" />
          <div class="d-flex justify-content-around justify-content-xl-start">
            <div class="ms-xl-4">
              <ul class="list-unstyled mb-0 d-flex mt-5">
                <li class="d-flex me-2"><a class="p-1 bg-light transform-rotate-45deg" href="#"></a></li>
                <li class="d-flex me-2"><a class="p-1 bg-primary-dark transform-rotate-45deg" href="#"></a></li>
                <li class="d-flex me-2"><a class="p-1 bg-light transform-rotate-45deg" href="#"></a></li>
                <li class="d-flex"><a class="p-1 bg-light transform-rotate-45deg" href="#"></a></li>
              </ul>
            </div>
            <div class="d-flex ms-xl-44"><a class="btn btn-primary p-6 position-relative" href="#"><img class="img-fluid position-absolute start-50 top-50 translate-middle" src="pstls-assets/icons/testimonials-arrow-left.svg" alt=""/></a><a class="btn btn-primary-dark p-6 position-relative" href="#"><img class="img-fluid position-absolute start-50 top-50 translate-middle" src="pstls-assets/icons/testimonials-arrow-right.svg" alt=""/></a></div>
          </div>
        </div>

<section class="py-5" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
  <div class="container">
    <div class="row mb-4">
      <div class="col-12 col-md-10 col-lg-9 mx-auto">
        <div class="row mb-5 text-center">
          <div class="col-12 col-lg-6 mx-auto">
            <img class="img-fluid" src="metis-assets/icons/quote.svg" alt="">
            <p class="fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</p>
            <p class="lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white shadow-sm rounded">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: cover;" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
                <div class="ms-3">
                  <h5 class="mb-1">John Bailey</h5>
                  <p class="text-primary">CEO</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>

<section class="position-relative py-20 overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <div class="mw-lg-md">
          <div class="position-relative mb-6" style="height: 445px;"><img class="position-absolute bottom-0 start-0 translate-middle-x" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="position-absolute top-0 end-0" src="cronos-assets/elements/dark-green-dark-warning.svg" alt=""/><img class="img-fluid h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/></div>
          <div class="text-center">
            <button class="btn btn-light p-0 me-2" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
            <button class="btn btn-light p-0 me-2" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
            <button class="btn btn-primary p-0 me-2" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
            <button class="btn btn-light p-0" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 h-100"><img class="mb-8" style="width: 64px;" src="cronos-assets/elements/quote.svg" alt=""/>
        <h2 class="mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead lh-lg text-muted mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
        <h6 class="text-primary">Robert Smith</h6>
        <p class="text-bold">CEO &amp; Founder</p>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 position-relative" style="background-image: url('consulty-assets/testimonials/background1.png'); background-size: cover;">
  <div class="container"><img class="img-fluid d-block mb-8 mx-auto" src="consulty-assets/testimonials/quote-icon.svg" alt="">
    <div class="d-flex flex-wrap flex-sm-nowrap align-items-center justify-content-center justify-content-sm-between gap-10 gap-sm-4 mb-14"><a class="order-last order-sm-0 flex-shrink-0 btn p-0 btn-outline-light-dark d-flex align-items-center justify-content-center" href="#" style="width: 60px; height: 60px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
      <div class="overflow-hidden">
        <div class="mw-4xl mx-auto px-4 text-center">
          <p class="text-white fs-4 text-center mb-0">There are many variations of passages of Ipsum available, but the majority have suffered alteration in some It is a long established fact that a reader will be distracted by the readable content of a page its layout.</p>
        </div>
      </div><a class="order-last order-sm-0 flex-shrink-0 btn p-0 btn-outline-light-dark d-flex align-items-center justify-content-center" href="#" style="width: 60px; height: 60px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </div>
    <div class="overflow-hidden">
      <div class="border-top border-white border-opacity-25 pt-6 d-flex align-items-center justify-content-center gap-3 flex-wrap mw-3xl mx-auto"><img class="img-fluid" src="consulty-assets/testimonials/avatar1.png" alt="">
        <p class="fs-7 fw-medium mb-0"><span class="text-white">Cameron Williamson</span><span class="text-white text-opacity-50">- Project Manager</span></p>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-20"><span class="badge mb-4 text-danger-light" style="letter-spacing: 1.44px;">WHAT THEY SAY ABOUT US</span>
      <h3 class="font-heading mb-0">Testimonials</h3>
    </div>
    <div class="mw-4xl mx-auto px-12">
      <div class="position-relative mb-20">
        <div class="position-absolute top-0 start-0 w-100 h-100 mt-6 ms-4 bg-white bg-opacity-10 rounded-4"></div>
        <div class="position-relative ps-10 py-10 pe-20 bg-danger rounded-4">
          <div class="position-absolute top-100 end-0 mt-n3 me-10 text-danger">
            <svg width="44" height="33" viewBox="0 0 44 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26.7544 29.8238C24.3526 32.9439 19.6474 32.9439 17.2456 29.8238L1.72343 9.65996C-1.31375 5.71454 1.49884 -4.5898e-06 6.47787 -4.15452e-06L37.5221 -1.44054e-06C42.5012 -1.00526e-06 45.3138 5.71455 42.2766 9.65996L26.7544 29.8238Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h4 class="text-white fw-medium">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</h4>
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center justify-content-center">
        <button class="btn p-0 me-2 text-light">
          <svg width="32" height="6" viewBox="0 0 32 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="6" rx="3" fill="currentColor"></rect>
          </svg>

<section class="py-12 py-lg-24 bg-dark-light position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-start">
      <div class="col-12 col-lg-5 mb-14 mb-lg-0 position-relative"><img class="img-fluid d-block mb-14 animate-spinStar" src="casper-assets/testimonials/blink-star.png" alt=""/>
        <div class="mw-lg mx-auto mx-lg-0">
          <h2 class="font-heading fw-medium text-white mb-8">Trusted by more than 100k people</h2>
          <p class="display-5 lh-lg text-light-light mb-8">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p><a class="btn btn-outline-light" href="#"><span class="me-2">SEE ALL TESTIMONIALS</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg></a>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="mw-2xl mx-auto position-relative">
          <div class="position-relative mw-xl mx-auto py-5 px-7 mb-8"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/blur/box-testimonials-bg-blur.png" alt=""/>
            <div class="position-relative d-flex align-items-start"><img class="img-fluid" src="casper-assets/testimonials/avatar-2.png" alt=""/>
              <div class="ms-5">
                <div class="d-flex pt-1 mb-3 lign-items-center w-100">
                  <div><span class="d-block display-5 fw-medium text-white">Sulis Azalea</span><span class="small text-secondary">CEO of Sans Design</span></div>
                  <div class="d-inline-flex ms-auto">
                    <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.227 0.796478L13.2574 5.09148C13.4564 5.51312 13.8405 5.8055 14.2859 5.87316L18.8282 6.56543C19.9504 6.73699 20.397 8.17711 19.5848 9.00228L16.3002 12.344C15.9774 12.6727 15.8305 13.1451 15.9068 13.609L16.682 18.3268C16.8729 19.4939 15.6997 20.3843 14.6967 19.8322L10.6369 17.6032C10.2389 17.3845 9.76225 17.3845 9.3631 17.6032L5.30334 19.8322C4.30026 20.3843 3.1271 19.4939 3.31916 18.3268L4.09316 13.609C4.16952 13.1451 4.02259 12.6727 3.6998 12.344L0.4152 9.00228C-0.396983 8.17711 0.0496019 6.73699 1.17185 6.56543L5.71406 5.87316C6.15949 5.8055 6.54475 5.51312 6.74375 5.09148L8.77305 0.796478C9.27517 -0.265493 10.7248 -0.265493 11.227 0.796478Z" fill="#FFD33C"></path>
                    </svg><span class="ms-2 display-5 text-white fw-medium">5</span>
                  </div>

<section class="position-relative py-16 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-8xl">
    <div class="mw-2xl ms-auto px-6 px-sm-12 py-12 bg-white rounded-5">
      <h3 class="font-heading fs-2 fw-medium mb-10">Testimonials</h3>
      <div class="px-6 px-sm-20 pt-16 pb-20 mb-10 rounded-5 border">
        <div class="text-center">
          <p class="fs-5 fw-bold">“Working with Migra has been a game-changer for our business. Their digital marketing strategies increased our online visibility and drove significant growth in traffic and conversions. Highly recommended!"</p>
        </div>
      </div>
      <div class="d-sm-flex align-items-center justify-content-between">
        <div class="d-flex mb-6 mb-sm-0 align-items-center">
          <img class="img-fluid d-block me-4" src="mirga-assets/images/testimonials/avatar.png" alt="">
          <div>
            <span class="d-block fs-5 fw-bold text-dark">Savia Ellianson</span>
            <span class="fw-medium">Pink Ox</span>
          </div>
        </div>
        <div>
          <a class="btn me-1 py-5 px-4 btn-light-dark" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18L10.2915 16.7463L3.4452 9.9L18 9.9L18 8.1L3.4452 8.1L10.2726 1.2726L9 3.02789e-06L7.86805e-07 9L9 18Z" fill="white"></path>
            </svg>
          </a>
          <a class="btn py-5 px-4 btn-primary" href="#">

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 me-auto mb-5">
        <img class="mx-auto img-fluid rounded" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
      </div>
      <div class="col-12 col-lg-6">
        <div>
          <img class="img-fluid d-block mb-3" src="bootstrap5-plain-assets/images/quote.svg" alt="">
          <h2 class="display-4 fw-bold mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="lead text-muted mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <h4 class="fw-bold">Danny Bailey</h4>
          <p class="text-muted">CEO & Founder</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-md-24 bg-light overflow-hidden">
  <div class="container">
    <div class="mw-6xl mx-auto text-center"><span class="badge mb-10 border border-2 border-dark" >Apartament</span>
      <p class="fw-medium fs-4 mb-10"><span >&ldquo;KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span><span class="text-secondary-light" >London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span><span >
          KW70 Fix looks for markets and locations that have strong fundamental drivers such as job and income growth, better quality of life and a
          business-friendly environment. In those carefully selected&rdquo;</span></p>
      <div class="d-flex mb-16 align-items-center text-start justify-content-center"><img class="img-fluid me-4" src="asitrastudio-assets/testimonials/avatar-men.png" alt=""/>
        <div><span class="d-block fw-medium" >Wade Warren</span><span class="d-block fs-9 text-secondary-light" >CEO, Since Industry</span></div>
      </div>
      <div><a class="btn me-9 d-inline-flex align-items-center justify-content-center p-0 btn-outline-dark rounded-pill" href="#" style="width: 74px; height: 74px;">
          <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.7051 7.12817L4.15732 13.6759L10.7051 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M22.4941 13.6759H4.33949" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a><a class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-dark rounded-pill" href="#" style="width: 74px; height: 74px;">
          <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.2949 7.12817L22.8427 13.6759L16.2949 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M4.50586 13.6759H22.6605" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light">
  <div class="container">
    <h2 class="font-heading text-center mb-20">What others say about us</h2>
  </div>
  <div class="mw-4xl mw-xl-8xl mx-auto px-5">
    <div class="d-flex align-items-center"><a class="d-none d-md-flex btn flex-shrink-0 me-8 me-xl-14 align-items-center justify-content-center bg-white p-0" href="#" style="width: 56px; height: 56px;">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="#696D81"></path>
        </svg></a>
      <div class="px-5">
        <div class="row">
          <div class="col-xl-6 mb-8 mb-xl-0">
            <div class="h-100 rounded-3 overflow-hidden">
              <div class="py-6 px-10 position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-testimonials.jpg" alt="">
                <div class="d-flex flex-column flex-sm-row gap-4 align-items-start align-items-sm-center position-relative"><img class="img-fluid rounded-2" src="fily-assets/testimonials/pic.jpg" alt=""><span class="me-auto fs-5 fw-bold text-white">Natasha Adams</span>
                  <div class="d-flex flex-shrink-0 px-2 py-1 align-items-center bg-white rounded"><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid" src="fily-assets/testimonials/star.svg" alt=""><span class="ms-2 fw-medium">4.9</span></div>
                </div>
              </div>
              <div class="px-8 px-sm-10 pt-14 pb-14 bg-white">
                <p class="fs-6 fw-medium mb-12">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci.</p>
                <div class="mb-3 px-6 px-sm-8 py-8 bg-success-light rounded-3"><span class="d-block fs-6 fw-bold mb-6">Advantages</span>
                  <ul class="list-unstyled mb-0">
                    <li class="mb-3">
                      <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">