Bootstrap Testimonials Components

<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">
            <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 mt-12 translate-middle-x img-fluid" src="zospace-assets/images/quote-circle.svg" alt="">
              <p class="text-secondary-light mb-8">Yes, yessss! We got it. Donec ornare, felis sit amet finibus ullamcorper, tortor urna suscipit lectus, sit amet feugiat nisl turpis vel libero - Nunc!</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">Harry Douglas</h5>
              <span class="text-white">Asos</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex justify-content-center">
      <a class="d-flex me-2 justify-content-center align-items-center bg-primary rounded-circle" href="#" style="width: 62px; height: 62px;">
        <svg width="7" height="14" viewbox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white"></path>
        </svg>
      </a>
      <a class="d-flex justify-content-center align-items-center bg-primary rounded-circle" href="#" style="width: 62px; height: 62px;">
        <svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.15292 0.901511C-0.0509709 0.696057 -0.0509709 0.365972 0.15292 0.16203C0.356811 -0.0419136 0.686232 -0.0426689 0.890123 0.16203L6.84708 6.13528C7.05097 6.33923 7.05097 6.66931 6.84708 6.87476L0.890121 12.848C0.686231 13.052 0.35681 13.052 0.152919 12.848C-0.050972 12.6433 -0.0509719 12.3125 0.152919 12.1085L5.5857 6.50465L0.15292 0.901511Z" fill="white"></path>
        </svg>
      </a>
    </div>
  </div>
</section>