Blocks - Clients

<section class="wrapper bg-light wrapper-border">
  <div class="container py-14 py-md-16">
    <h2 class="fs-15 text-uppercase text-muted text-center mb-8">Trusted by Over 5000 Clients</h2>
    <div class="carousel owl-carousel clients mb-0" data-margin="30" data-loop="true" data-dots="false" data-autoplay="true" data-autoplay-timeout="3000" data-responsive='{"0":{"items": "2"}, "768":{"items": "4"}, "992":{"items": "5"}, "1200":{"items": "6"}, "1400":{"items": "7"}}'>
      <div class="item px-5"><img src="./assets/img/brands/c1.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c2.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c3.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c4.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c5.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c6.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c7.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c8.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c9.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c10.png" alt="" /></div>
      <div class="item px-5"><img src="./assets/img/brands/c11.png" alt="" /></div>
    </div>
    <!-- /.owl-carousel -->
  </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-10 gy-lg-0">
      <div class="col-lg-4 mt-lg-2">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Our Clients</h2>
        <h3 class="display-4 mb-3 pe-xxl-5">Trusted by over 300+ clients</h3>
        <p class="lead fs-lg mb-0 pe-xxl-5">We bring solutions to make life easier for our customers.</p>
      </div>
      <!-- /column -->
      <div class="col-lg-8">
        <div class="row row-cols-2 row-cols-md-4 gx-0 gx-md-8 gx-xl-12 gy-12">
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z1.png" alt="" /></figure>
          </div>
          <!--/column -->
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z2.png" alt="" /></figure>
          </div>
          <!--/column -->
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z3.png" alt="" /></figure>
          </div>
          <!--/column -->
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z4.png" alt="" /></figure>
          </div>
          <!--/column -->
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z5.png" alt="" /></figure>
          </div>
          <!--/column -->
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z6.png" alt="" /></figure>
          </div>
          <!--/column -->
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z7.png" alt="" /></figure>
          </div>
          <!--/column -->
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2"><img src="./assets/img/brands/z8.png" alt="" /></figure>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <h2 class="fs-15 text-uppercase text-muted mb-3">Our Clients</h2>
    <div class="row gx-lg-8 mb-10 gy-5">
      <div class="col-lg-6">
        <h3 class="display-5 mb-0">We are trusted by over 300+ clients. Join them by using our services and grow your business.</h3>
      </div>
      <!-- /column -->
      <div class="col-lg-6">
        <p class="lead mb-0">Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Maecenas faucibus mollis interdum. Cras justo odio mollis.</p>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="row row-cols-2 row-cols-md-3 row-cols-xl-5 gx-lg-6 gy-6 justify-content-center">
      <div class="col">
        <div class="card shadow-lg h-100 align-items-center">
          <div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
            <figure class="px-md-3 mb-0"><img src="./assets/img/brands/z1.png" alt="" /></figure>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!--/column -->
      <div class="col">
        <div class="card shadow-lg h-100 align-items-center">
          <div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
            <figure class="px-md-3 mb-0"><img src="./assets/img/brands/z2.png" alt="" /></figure>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!--/column -->
      <div class="col">
        <div class="card shadow-lg h-100 align-items-center">
          <div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
            <figure class="px-md-3 mb-0"><img src="./assets/img/brands/z3.png" alt="" /></figure>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!--/column -->
      <div class="col">
        <div class="card shadow-lg h-100 align-items-center">
          <div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
            <figure class="px-md-3 mb-0"><img src="./assets/img/brands/z4.png" alt="" /></figure>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!--/column -->
      <div class="col">
        <div class="card shadow-lg h-100 align-items-center">
          <div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
            <figure class="px-md-3 mb-0"><img src="./assets/img/brands/z5.png" alt="" /></figure>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->