Clients

<!-- Clients Section -->
<div class="d-flex justify-content-center">
  <div class="mx-4">
    <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
  </div>
  <div class="mx-4">
    <img class="u-clients" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
  </div>
  <div class="mx-4">
    <img class="u-clients" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
  </div>
</div>
<!-- End Clients Section -->

<!-- Clients Section -->
<div class="container">
  <div class="row align-items-lg-center">
    <div class="col-md-7 col-lg-8 mb-5 mb-md-0">
      <!-- Clients Section -->
      <div class="row justify-content-center border-top space-top-2">
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="u-clients" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="u-clients" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="u-clients" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="u-clients" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="u-clients" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
          </div>
        </div>
      </div>
      <!-- End Clients Section -->
    </div>

    <div class="col-md-5 col-lg-4">
      <div class="pl-md-4">
        <span class="d-block display-3 text-primary font-weight-medium text-lh-sm">99.9%</span>
        <p>Believe basic computer skills are all you need to plan projects with Front Pay.</p>
      </div>
    </div>
  </div>
</div>
<!-- End Clients Section -->

<!-- Clients Section -->
<div class="container space-1">
  <div class="w-lg-75 mx-lg-auto">
    <div class="text-center mb-4">
      <h2 class="u-divider u-divider--text">Trusted by the world's best</h2>
    </div>

    <div class="row justify-content-between text-center">
      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
        <div class="mx-4">
          <img class="u-clients" src="../../assets/svg/clients-logo/amazon.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
        <div class="mx-4">
          <img class="u-clients" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
        <div class="mx-4">
          <img class="u-clients" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2">
        <div class="mx-4">
          <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2">
        <div class="mx-4">
          <img class="u-clients" src="../../assets/svg/clients-logo/samsung.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2">
        <div class="mx-4">
          <img class="u-clients" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Clients Section -->

<!-- Clients Section -->
<div class="d-flex justify-content-center bg-primary p-5">
  <div class="mx-4">
    <img class="u-clients" src="../../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
  </div>
  <div class="mx-4">
    <img class="u-clients" src="../../assets/svg/clients-logo/google-white.svg" alt="Image Description">
  </div>
  <div class="mx-4">
    <img class="u-clients" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
  </div>
</div>
<!-- End Clients Section -->

<!-- Clients Section -->
<div class="row justify-content-center text-center">
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/alphabet-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/paypal-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/slack-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/samsung-original.svg" alt="Image Description">
  </div>

  <div class="w-100"></div>

  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/google-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/shopify-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/stripe-original.svg" alt="Image Description">
  </div>

  <div class="w-100"></div>

  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/mapbox-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/spotify-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8">
    <img class="u-clients" src="../../assets/svg/clients-logo/uber-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8 mb-md-0">
    <img class="u-clients" src="../../assets/svg/clients-logo/airbnb-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8 mb-md-0">
    <img class="u-clients" src="../../assets/svg/clients-logo/netflix-original.svg" alt="Image Description">
  </div>

  <div class="w-100"></div>

  <div class="col-4 col-md-2 mb-8 mb-md-0">
    <img class="u-clients" src="../../assets/svg/clients-logo/embark-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2 mb-8 mb-md-0">
    <img class="u-clients" src="../../assets/svg/clients-logo/lenovo-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2">
    <img class="u-clients" src="../../assets/svg/clients-logo/boring-company-original.svg" alt="Image Description">
  </div>
  <div class="col-4 col-md-2">
    <img class="u-clients" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">
  </div>
</div>
<!-- End Clients Section -->

<!-- Works Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-light" data-options='{direction: "reverse"}'>
  <div class="dzsparallaxer--target">
    <div class="container-fluid px-lg-6">
      <div class="row justify-content-center">
        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
          <!-- Logo -->
          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img12.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img13.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>

      <div class="row justify-content-between">
        <div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
          <!-- Logo -->
          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4">
            <img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
          <!-- Logo -->
          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 ml-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img15.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>

      <div class="row">
        <div class="col-3 offset-1 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 ml-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img8.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 offset-2 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 ml-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>

      <div class="row justify-content-between">
        <div class="col-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
          <!-- Logo -->
          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img16.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
          <!-- Logo -->
          <div class="d-none d-sm-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img10.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
          <!-- Logo -->
          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
            <img class="img-fluid" src="../../assets/img/160x160/img11.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>
    </div>
  </div>

  <div class="container space-3 space-sm-4">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto">
      <h2 class="h1 font-weight-medium mb-5">Our branding works</h2>
      <a class="btn btn-primary btn-pill btn-wide transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Learn More</a>
    </div>
    <!-- End Title -->
  </div>
</div>
<!-- End Works Section -->

<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

<!-- Clients Section -->
<div class="js-slick-carousel u-slick"
     data-autoplay="true"
     data-speed="5000"
     data-infinite="true"
     data-slides-show="6"
     data-responsive='[{
       "breakpoint": 1200,
       "settings": {
         "slidesToShow": 4
       }
     }, {
       "breakpoint": 992,
       "settings": {
         "slidesToShow": 4
       }
     }, {
       "breakpoint": 768,
       "settings": {
         "slidesToShow": 3
       }
     }, {
       "breakpoint": 576,
       "settings": {
         "slidesToShow": 3
       }
     }, {
       "breakpoint": 480,
       "settings": {
         "slidesToShow": 2
       }
     }]'>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/amazon.svg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/samsung.svg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/lenovo.svg" alt="Image Description">
  </div>
  <div class="js-slide">
    <img class="u-clients" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
  </div>
</div>
<!-- End Clients Section -->

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
  });
</script>

<!-- Clients Section -->
<div class="container-fluid px-2">
  <div class="js-slick-carousel u-slick u-slick--gutters-1"
       data-autoplay="true"
       data-speed="5000"
       data-infinite="true"
       data-slides-show="6"
       data-responsive='[{
         "breakpoint": 1200,
         "settings": {
           "slidesToShow": 4
         }
       }, {
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 4
         }
       }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 3
         }
       }, {
         "breakpoint": 576,
         "settings": {
           "slidesToShow": 3
         }
       }, {
         "breakpoint": 480,
         "settings": {
           "slidesToShow": 2
         }
       }]'>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/amazon.svg" alt="Image Description">
      </div>
    </div>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
      </div>
    </div>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
      </div>
    </div>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
      </div>
    </div>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/samsung.svg" alt="Image Description">
      </div>
    </div>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
      </div>
    </div>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/lenovo.svg" alt="Image Description">
      </div>
    </div>
    <div class="js-slide">
      <div class="bg-light rounded py-9 px-3">
        <img class="u-clients" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
      </div>
    </div>
  </div>
</div>
<!-- End Clients Section -->

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
  });
</script>