Blocks - Testimonials

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-7">
        <div class="row gx-md-5 gy-5">
          <div class="col-md-6 col-xl-5 align-self-end">
            <div class="card bg-pale-yellow">
              <div class="card-body">
                <blockquote class="icon mb-0">
                  <p>“Cum sociis natoque penatibus et magnis dis parturient montes.”</p>
                  <div class="blockquote-details">
                    <div class="info p-0">
                      <h5 class="mb-1">Coriss Ambady</h5>
                      <p class="mb-0">Financial Analyst</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.card -->
          </div>
          <!--/column -->
          <div class="col-md-6 align-self-end">
            <div class="card bg-pale-red">
              <div class="card-body">
                <blockquote class="icon mb-0">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.”</p>
                  <div class="blockquote-details">
                    <div class="info p-0">
                      <h5 class="mb-1">Cory Zamora</h5>
                      <p class="mb-0">Marketing Specialist</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.card -->
          </div>
          <!--/column -->
          <div class="col-md-6 col-xl-5 offset-xl-1">
            <div class="card bg-pale-leaf">
              <div class="card-body">
                <blockquote class="icon mb-0">
                  <p>“Donec id elit non porta gravida at eget metus. Duis mollis est commodo luctus, nisi erat porttitor.”</p>
                  <div class="blockquote-details">
                    <div class="info p-0">
                      <h5 class="mb-1">Barclay Widerski</h5>
                      <p class="mb-0">Sales Specialist</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.card -->
          </div>
          <!--/column -->
          <div class="col-md-6 align-self-start">
            <div class="card bg-pale-blue">
              <div class="card-body">
                <blockquote class="icon mb-0">
                  <p>“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque ornare.”</p>
                  <div class="blockquote-details">
                    <div class="info p-0">
                      <h5 class="mb-1">Jackie Sanders</h5>
                      <p class="mb-0">Investment Planner</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.card -->
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h2 class="display-4 mb-3">Our Community</h2>
        <p class="lead fs-lg">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.</p>
        <a href="#" class="btn btn-navy rounded-pill mt-3">All Testimonials</a>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row position-relative">
      <figure class="rounded position-absolute d-none d-lg-block" style="top: 50%; right:0; width: 45%; height: auto; transform: translateY(-50%); z-index:2"><img src="./assets/img/photos/tei1.jpg" srcset="./assets/img/photos/tei1@2x.jpg 2x" alt=""></figure>
      <div class="col-lg-9 text-center">
        <div class="card bg-gray">
          <div class="card-body p-md-10 py-xxl-16">
            <div class="row gx-0">
              <div class="col-lg-8 ps-xl-10">
                <span class="ratings five fs-20 mb-3"></span>
                <blockquote class="border-0 fs-lg mb-0">
                  <p>“Donec id elit non mi porta gravida at eget metus. Vivamus mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis porta est non commodo luctus.”</p>
                  <div class="blockquote-details justify-content-center text-center">
                    <div class="info p-0">
                      <h4 class="mb-1">Coriss Ambady</h4>
                      <p class="mb-0">Financial Analyst</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!-- /column -->
            </div>
            <!-- /.row -->
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-xl-12 gy-10">
      <div class="col-xl-4">
        <h2 class="display-4 mt-10 mb-3">Our Community</h2>
        <p class="lead fs-lg mb-6">Customer satisfaction is our major goal. See what our clients are saying about our services.</p>
        <a href="#" class="btn btn-primary rounded-pill">All Testimonials</a>
      </div>
      <!-- /column -->
      <div class="col-xl-8">
        <div class="position-relative">
          <div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1" style="top: -0.7rem; right: -1.7rem;"></div>
          <div class="shape rounded-circle bg-line red rellax w-16 h-16" data-rellax-speed="1" style="bottom: -0.5rem; left: -1.4rem;"></div>
          <div class="swiper-container dots-closer mb-6" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
            <div class="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="item-inner">
                    <div class="card">
                      <div class="card-body">
                        <blockquote class="icon mb-0">
                          <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis sed posuere.”</p>
                          <div class="blockquote-details">
                            <img class="rounded-circle w-12" src="./assets/img/avatars/te1.jpg" srcset="./assets/img/avatars/te1@2x.jpg 2x" alt="" />
                            <div class="info">
                              <h5 class="mb-1">Coriss Ambady</h5>
                              <p class="mb-0">Financial Analyst</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!-- /.card -->
                  </div>
                  <!-- /.item-inner -->
                </div>
                <!--/.swiper-slide -->
                <div class="swiper-slide">
                  <div class="item-inner">
                    <div class="card">
                      <div class="card-body">
                        <blockquote class="icon mb-0">
                          <p>“Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus.”</p>
                          <div class="blockquote-details">
                            <img class="rounded-circle w-12" src="./assets/img/avatars/te2.jpg" srcset="./assets/img/avatars/te2@2x.jpg 2x" alt="" />
                            <div class="info">
                              <h5 class="mb-1">Cory Zamora</h5>
                              <p class="mb-0">Marketing Specialist</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!-- /.card -->
                  </div>
                  <!-- /.item-inner -->
                </div>
                <!--/.swiper-slide -->
                <div class="swiper-slide">
                  <div class="item-inner">
                    <div class="card">
                      <div class="card-body">
                        <blockquote class="icon mb-0">
                          <p>“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida.”</p>
                          <div class="blockquote-details">
                            <img class="rounded-circle w-12" src="./assets/img/avatars/te3.jpg" srcset="./assets/img/avatars/te3@2x.jpg 2x" alt="" />
                            <div class="info">
                              <h5 class="mb-1">Nikolas Brooten</h5>
                              <p class="mb-0">Sales Manager</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!-- /.card -->
                  </div>
                  <!-- /.item-inner -->
                </div>
                <!--/.swiper-slide -->
                <div class="swiper-slide">
                  <div class="item-inner">
                    <div class="card">
                      <div class="card-body">
                        <blockquote class="icon mb-0">
                          <p>“Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus posuere consectetur.”</p>
                          <div class="blockquote-details">
                            <img class="rounded-circle w-12" src="./assets/img/avatars/te4.jpg" srcset="./assets/img/avatars/te4@2x.jpg 2x" alt="" />
                            <div class="info">
                              <h5 class="mb-1">Coriss Ambady</h5>
                              <p class="mb-0">Financial Analyst</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!-- /.card -->
                  </div>
                  <!-- /.item-inner -->
                </div>
                <!--/.swiper-slide -->
                <div class="swiper-slide">
                  <div class="item-inner">
                    <div class="card">
                      <div class="card-body">
                        <blockquote class="icon mb-0">
                          <p>“Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque.”</p>
                          <div class="blockquote-details">
                            <img class="rounded-circle w-12" src="./assets/img/avatars/te5.jpg" srcset="./assets/img/avatars/te5@2x.jpg 2x" alt="" />
                            <div class="info">
                              <h5 class="mb-1">Jackie Sanders</h5>
                              <p class="mb-0">Investment Planner</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!-- /.card -->
                  </div>
                  <!-- /.item-inner -->
                </div>
                <!--/.swiper-slide -->
                <div class="swiper-slide">
                  <div class="item-inner">
                    <div class="card">
                      <div class="card-body">
                        <blockquote class="icon mb-0">
                          <p>“Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.”</p>
                          <div class="blockquote-details">
                            <img class="rounded-circle w-12" src="./assets/img/avatars/te6.jpg" srcset="./assets/img/avatars/te6@2x.jpg 2x" alt="" />
                            <div class="info">
                              <h5 class="mb-1">Laura Widerski</h5>
                              <p class="mb-0">Sales Specialist</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!-- /.card -->
                  </div>
                  <!-- /.item-inner -->
                </div>
                <!--/.swiper-slide -->
              </div>
              <!--/.swiper-wrapper -->
            </div>
            <!-- /.swiper -->
          </div>
          <!-- /.swiper-container -->
        </div>
        <!-- /.position-relative -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-6 align-items-center">
      <div class="col-lg-7 order-lg-2">
        <figure><img class="w-auto" src="./assets/img/illustrations/i4.png" srcset="./assets/img/illustrations/i4@2x.png 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5 mt-12">
        <div class="swiper-container dots-closer mb-6" data-margin="30" data-dots="true">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <blockquote class="icon icon-top fs-lg text-center">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
                  <div class="blockquote-details justify-content-center text-center">
                    <div class="info ps-0">
                      <h5 class="mb-1">Coriss Ambady</h5>
                      <p class="mb-0">Financial Analyst</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="icon icon-top fs-lg text-center">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
                  <div class="blockquote-details justify-content-center text-center">
                    <div class="info ps-0">
                      <h5 class="mb-1">Cory Zamora</h5>
                      <p class="mb-0">Marketing Specialist</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="icon icon-top fs-lg text-center">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
                  <div class="blockquote-details justify-content-center text-center">
                    <div class="info ps-0">
                      <h5 class="mb-1">Nikolas Brooten</h5>
                      <p class="mb-0">Sales Manager</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
            </div>
            <!--/.swiper-wrapper -->
          </div>
          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <h2 class="display-4 mb-3 text-center">Happy Customers</h2>
    <p class="lead text-center mb-6 px-md-16 px-lg-0">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
    <div class="position-relative">
      <div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1" style="bottom: 0.5rem; right: -1.7rem;"></div>
      <div class="shape bg-dot primary rellax w-16 h-16" data-rellax-speed="1" style="top: -1rem; left: -1.7rem;"></div>
      <div class="swiper-container dots-closer mb-6" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <blockquote class="icon mb-0">
                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                      <div class="blockquote-details">
                        <img class="rounded-circle w-12" src="./assets/img/avatars/te1.jpg" srcset="./assets/img/avatars/te1@2x.jpg 2x" alt="" />
                        <div class="info">
                          <h5 class="mb-1">Coriss Ambady</h5>
                          <p class="mb-0">Financial Analyst</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <blockquote class="icon mb-0">
                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                      <div class="blockquote-details">
                        <img class="rounded-circle w-12" src="./assets/img/avatars/te2.jpg" srcset="./assets/img/avatars/te2@2x.jpg 2x" alt="" />
                        <div class="info">
                          <h5 class="mb-1">Cory Zamora</h5>
                          <p class="mb-0">Marketing Specialist</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <blockquote class="icon mb-0">
                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                      <div class="blockquote-details">
                        <img class="rounded-circle w-12" src="./assets/img/avatars/te3.jpg" srcset="./assets/img/avatars/te3@2x.jpg 2x" alt="" />
                        <div class="info">
                          <h5 class="mb-1">Nikolas Brooten</h5>
                          <p class="mb-0">Sales Manager</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <blockquote class="icon mb-0">
                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                      <div class="blockquote-details">
                        <img class="rounded-circle w-12" src="./assets/img/avatars/te4.jpg" srcset="./assets/img/avatars/te4@2x.jpg 2x" alt="" />
                        <div class="info">
                          <h5 class="mb-1">Coriss Ambady</h5>
                          <p class="mb-0">Financial Analyst</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <blockquote class="icon mb-0">
                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                      <div class="blockquote-details">
                        <img class="rounded-circle w-12" src="./assets/img/avatars/te5.jpg" srcset="./assets/img/avatars/te5@2x.jpg 2x" alt="" />
                        <div class="info">
                          <h5 class="mb-1">Jackie Sanders</h5>
                          <p class="mb-0">Investment Planner</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <blockquote class="icon mb-0">
                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                      <div class="blockquote-details">
                        <img class="rounded-circle w-12" src="./assets/img/avatars/te6.jpg" srcset="./assets/img/avatars/te6@2x.jpg 2x" alt="" />
                        <div class="info">
                          <h5 class="mb-1">Laura Widerski</h5>
                          <p class="mb-0">Sales Specialist</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
          </div>
          <!--/.swiper-wrapper -->
        </div>
        <!-- /.swiper -->
      </div>
      <!-- /.swiper-container -->
    </div>
    <!-- /.position-relative -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-6 align-items-center">
      <div class="col-lg-7 position-relative">
        <div class="shape bg-dot primary rellax w-18 h-18" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"></div>
        <div class="row gx-md-5 gy-5">
          <div class="col-md-6">
            <figure class="rounded mt-md-10 position-relative"><img src="./assets/img/photos/g5.jpg" srcset="./assets/img/photos/g5@2x.jpg 2x" alt=""></figure>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="row gx-md-5 gy-5">
              <div class="col-md-12 order-md-2">
                <figure class="rounded"><img src="./assets/img/photos/g6.jpg" srcset="./assets/img/photos/g6@2x.jpg 2x" alt=""></figure>
              </div>
              <!--/column -->
              <div class="col-md-10">
                <div class="card bg-pale-primary text-center">
                  <div class="card-body py-11 counter-wrapper">
                    <h3 class="counter text-nowrap">5000+</h3>
                    <p class="mb-0">Satisfied Customers</p>
                  </div>
                  <!--/.card-body -->
                </div>
                <!--/.card -->
              </div>
              <!--/column -->
            </div>
            <!--/.row -->
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
      <div class="col-lg-5 mt-5">
        <div class="swiper-container dots-closer mb-6" data-margin="30" data-dots="true">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <blockquote class="icon icon-top fs-lg text-center">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
                  <div class="blockquote-details justify-content-center text-center">
                    <div class="info ps-0">
                      <h5 class="mb-1">Coriss Ambady</h5>
                      <p class="mb-0">Financial Analyst</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="icon icon-top fs-lg text-center">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
                  <div class="blockquote-details justify-content-center text-center">
                    <div class="info ps-0">
                      <h5 class="mb-1">Cory Zamora</h5>
                      <p class="mb-0">Marketing Specialist</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="icon icon-top fs-lg text-center">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
                  <div class="blockquote-details justify-content-center text-center">
                    <div class="info ps-0">
                      <h5 class="mb-1">Nikolas Brooten</h5>
                      <p class="mb-0">Sales Manager</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
            </div>
            <!--/.swiper-wrapper -->
          </div>
          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Happy Customers</h2>
        <h3 class="display-4 mb-10 px-xl-10 px-xxl-15">Don't take our word for it. See what customers are saying about us.</h3>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="grid">
      <div class="row isotope gy-6">
        <div class="item col-md-6 col-xl-4">
          <div class="card">
            <div class="card-body">
              <span class="ratings five mb-3"></span>
              <blockquote class="icon mb-0">
                <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                <div class="blockquote-details">
                  <img class="rounded-circle w-12" src="./assets/img/avatars/te1.jpg" srcset="./assets/img/avatars/te1@2x.jpg 2x" alt="" />
                  <div class="info">
                    <h5 class="mb-1">Coriss Ambady</h5>
                    <p class="mb-0">Financial Analyst</p>
                  </div>
                </div>
              </blockquote>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!--/column -->
        <div class="item col-md-6 col-xl-4">
          <div class="card">
            <div class="card-body">
              <span class="ratings five mb-3"></span>
              <blockquote class="icon mb-0">
                <p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.”</p>
                <div class="blockquote-details">
                  <img class="rounded-circle w-12" src="./assets/img/avatars/te2.jpg" srcset="./assets/img/avatars/te2@2x.jpg 2x" alt="" />
                  <div class="info">
                    <h5 class="mb-1">Cory Zamora</h5>
                    <p class="mb-0">Marketing Specialist</p>
                  </div>
                </div>
              </blockquote>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!--/column -->
        <div class="item col-md-6 col-xl-4">
          <div class="card">
            <div class="card-body">
              <span class="ratings five mb-3"></span>
              <blockquote class="icon mb-0">
                <p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”</p>
                <div class="blockquote-details">
                  <img class="rounded-circle w-12" src="./assets/img/avatars/te3.jpg" srcset="./assets/img/avatars/te3@2x.jpg 2x" alt="" />
                  <div class="info">
                    <h5 class="mb-1">Nikolas Brooten</h5>
                    <p class="mb-0">Sales Manager</p>
                  </div>
                </div>
              </blockquote>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!--/column -->
        <div class="item col-md-6 col-xl-4">
          <div class="card">
            <div class="card-body">
              <span class="ratings five mb-3"></span>
              <blockquote class="icon mb-0">
                <p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.”</p>
                <div class="blockquote-details">
                  <img class="rounded-circle w-12" src="./assets/img/avatars/te4.jpg" srcset="./assets/img/avatars/te4@2x.jpg 2x" alt="" />
                  <div class="info">
                    <h5 class="mb-1">Coriss Ambady</h5>
                    <p class="mb-0">Financial Analyst</p>
                  </div>
                </div>
              </blockquote>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!--/column -->
        <div class="item col-md-6 col-xl-4">
          <div class="card">
            <div class="card-body">
              <span class="ratings five mb-3"></span>
              <blockquote class="icon mb-0">
                <p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.”</p>
                <div class="blockquote-details">
                  <img class="rounded-circle w-12" src="./assets/img/avatars/te5.jpg" srcset="./assets/img/avatars/te5@2x.jpg 2x" alt="" />
                  <div class="info">
                    <h5 class="mb-1">Jackie Sanders</h5>
                    <p class="mb-0">Investment Planner</p>
                  </div>
                </div>
              </blockquote>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!--/column -->
        <div class="item col-md-6 col-xl-4">
          <div class="card">
            <div class="card-body">
              <span class="ratings five mb-3"></span>
              <blockquote class="icon mb-0">
                <p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.”</p>
                <div class="blockquote-details">
                  <img class="rounded-circle w-12" src="./assets/img/avatars/te6.jpg" srcset="./assets/img/avatars/te6@2x.jpg 2x" alt="" />
                  <div class="info">
                    <h5 class="mb-1">Laura Widerski</h5>
                    <p class="mb-0">Sales Specialist</p>
                  </div>
                </div>
              </blockquote>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!--/column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.grid-view -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-lg-16 pb-lg-0">
    <div class="row gx-lg-8 gx-xl-0 align-items-center">
      <div class="col-lg-5 col-xl-4 offset-xl-1 d-none d-lg-flex position-relative">
        <div class="shape rounded-circle bg-soft-primary rellax w-21 h-21" data-rellax-speed="1" style="top: 7rem; left: 1rem"></div>
        <figure><img src="./assets/img/photos/co1.png" srcset="./assets/img/photos/co1@2x.png 2x" alt=""></figure>
      </div>
      <!--/column -->
      <div class="col-lg-6 col-xl-6 col-xxl-5 offset-xl-1">
        <div class="swiper-container dots-start dots-closer mt-6 mb-6" data-margin="30" data-dots="true">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <blockquote class="icon fs-lg">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.”</p>
                  <div class="blockquote-details">
                    <div class="info ps-0">
                      <h5 class="mb-1">Coriss Ambady</h5>
                      <p class="mb-0">Financial Analyst</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="icon fs-lg">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.”</p>
                  <div class="blockquote-details">
                    <div class="info ps-0">
                      <h5 class="mb-1">Cory Zamora</h5>
                      <p class="mb-0">Marketing Specialist</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="icon fs-lg">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.”</p>
                  <div class="blockquote-details">
                    <div class="info ps-0">
                      <h5 class="mb-1">Nikolas Brooten</h5>
                      <p class="mb-0">Sales Manager</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
            </div>
            <!--/.swiper-wrapper -->
          </div>
          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16 pt-md-20">
    <div class="card bg-soft-primary">
      <div class="card-body p-md-10 py-xxl-16 position-relative">
        <div class="position-absolute d-none d-lg-block" style="bottom:0; left:10%; width: 28%; z-index:2">
          <figure><img src="./assets/img/photos/co2.png" srcset="./assets/img/photos/co2@2x.png 2x" alt=""></figure>
        </div>
        <div class="row gx-md-0 gx-xl-12 text-center">
          <div class="col-lg-7 offset-lg-5 col-xl-6">
            <span class="ratings five mb-3"></span>
            <blockquote class="border-0 fs-lg mb-0">
              <p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed”</p>
              <div class="blockquote-details justify-content-center text-center">
                <div class="info p-0">
                  <h5 class="mb-1">Coriss Ambady</h5>
                  <div class="meta mb-0">Financial Analyst</div>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!--/.card-body -->
    </div>
    <!--/.card -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="position-relative">
      <div class="shape rounded-circle bg-line primary rellax w-18 h-18" data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"></div>
      <div class="shape rounded-circle bg-soft-primary rellax w-18 h-18" data-rellax-speed="1" style="bottom: -1rem; left: -3rem; z-index:0;"></div>
      <div class="card shadow-lg">
        <div class="row gx-0">
          <div class="col-lg-6 image-wrapper bg-image bg-cover rounded-top rounded-lg-start" data-image-src="./assets/img/photos/tm1.jpg">
          </div>
          <!--/column -->
          <div class="col-lg-6">
            <div class="p-10 p-md-11 p-lg-13">
              <div class="swiper-container dots-closer mb-6" data-margin="30" data-dots="true">
                <div class="swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <blockquote class="icon icon-top fs-lg text-center">
                        <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
                        <div class="blockquote-details justify-content-center text-center">
                          <div class="info ps-0">
                            <h5 class="mb-1">Coriss Ambady</h5>
                            <p class="mb-0">Financial Analyst</p>
                          </div>
                        </div>
                      </blockquote>
                    </div>
                    <!--/.swiper-slide -->
                    <div class="swiper-slide">
                      <blockquote class="icon icon-top fs-lg text-center">
                        <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
                        <div class="blockquote-details justify-content-center text-center">
                          <div class="info ps-0">
                            <h5 class="mb-1">Cory Zamora</h5>
                            <p class="mb-0">Marketing Specialist</p>
                          </div>
                        </div>
                      </blockquote>
                    </div>
                    <!--/.swiper-slide -->
                    <div class="swiper-slide">
                      <blockquote class="icon icon-top fs-lg text-center">
                        <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
                        <div class="blockquote-details justify-content-center text-center">
                          <div class="info ps-0">
                            <h5 class="mb-1">Nikolas Brooten</h5>
                            <p class="mb-0">Sales Manager</p>
                          </div>
                        </div>
                      </blockquote>
                    </div>
                    <!--/.swiper-slide -->
                  </div>
                  <!--/.swiper-wrapper -->
                </div>
                <!-- /.swiper -->
              </div>
              <!-- /.swiper-container -->
            </div>
            <!--/div -->
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /div -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row text-white text-center">
      <div class="col-xl-10 mx-auto mb-14 mb-lg-n6">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400" data-image-src="./assets/img/photos/bg2.jpg">
          <div class="card-body p-9 p-xl-12">
            <div class="row gx-0">
              <div class="col-xxl-9 mx-auto">
                <div class="swiper-container dots-light dots-closer mb-6" data-margin="30" data-dots="true">
                  <div class="swiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <span class="ratings five mb-3"></span>
                        <blockquote class="border-0 fs-lg mb-2">
                          <p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
                          <div class="blockquote-details justify-content-center text-center">
                            <div class="info ps-0">
                              <h5 class="mb-1 text-white">Coriss Ambady</h5>
                              <p class="mb-0">Financial Analyst</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.swiper-slide -->
                      <div class="swiper-slide">
                        <span class="ratings five mb-3"></span>
                        <blockquote class="border-0 fs-lg mb-2">
                          <p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
                          <div class="blockquote-details justify-content-center text-center">
                            <div class="info ps-0">
                              <h5 class="mb-1 text-white">Cory Zamora</h5>
                              <p class="mb-0">Marketing Specialist</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.swiper-slide -->
                      <div class="swiper-slide">
                        <span class="ratings five mb-3"></span>
                        <blockquote class="border-0 fs-lg mb-2">
                          <p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
                          <div class="blockquote-details justify-content-center text-center">
                            <div class="info ps-0">
                              <h5 class="mb-1 text-white">Nikolas Brooten</h5>
                              <p class="mb-0">Sales Manager</p>
                            </div>
                          </div>
                        </blockquote>
                      </div>
                      <!--/.swiper-slide -->
                    </div>
                    <!--/.swiper-wrapper -->
                  </div>
                  <!-- /.swiper -->
                </div>
                <!-- /.swiper-container -->
              </div>
              <!-- /column -->
            </div>
            <!-- /.row -->
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-md-10 col-lg-8 mx-auto">
        <div class="swiper-container dots-closer text-center mb-6" data-margin="30" data-dots="true">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <blockquote class="border-0 fs-lg">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
                  <div class="blockquote-details justify-content-center">
                    <img class="rounded-circle w-12" src="./assets/img/avatars/te1.jpg" srcset="./assets/img/avatars/te1@2x.jpg 2x" alt="" />
                    <div class="info">
                      <h5 class="mb-1">Coriss Ambady</h5>
                      <p class="mb-0">Financial Analyst</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="border-0 fs-lg">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
                  <div class="blockquote-details justify-content-center">
                    <img class="rounded-circle w-12" src="./assets/img/avatars/te2.jpg" srcset="./assets/img/avatars/te2@2x.jpg 2x" alt="" />
                    <div class="info">
                      <h5 class="mb-1">Cory Zamora</h5>
                      <p class="mb-0">Marketing Specialist</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <blockquote class="border-0 fs-lg">
                  <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
                  <div class="blockquote-details justify-content-center">
                    <img class="rounded-circle w-12" src="./assets/img/avatars/te3.jpg" srcset="./assets/img/avatars/te3@2x.jpg 2x" alt="" />
                    <div class="info">
                      <h5 class="mb-1">Nikolas Brooten</h5>
                      <p class="mb-0">Sales Manager</p>
                    </div>
                  </div>
                </blockquote>
              </div>
              <!--/.swiper-slide -->
            </div>
            <!--/.swiper-wrapper -->
          </div>
          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->