<!-- Hero Section -->
                <div class="position-relative">
                  <!-- Main Slider -->
                  <div id="heroSlider" class="js-slick-carousel slick slick-equal-height bg-light"
                       data-hs-slick-carousel-options='{
                         "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-left slick-arrow-centered-y d-none d-sm-inline-flex shadow-soft rounded-circle ml-sm-2 ml-xl-4\"></span>",
                         "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-right slick-arrow-centered-y d-none d-sm-inline-flex shadow-soft rounded-circle mr-sm-2 mr-xl-4\"></span>",
                         "fade": true,
                         "infinite": true,
                         "autoplaySpeed": 7000,
                         "asNavFor": "#heroSliderNav"
                       }'>
                    <!-- Slide -->
                    <div class="js-slide">
                      <div class="container space-top-2 space-bottom-3">
                        <div class="row align-items-lg-center">
                          <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
                            <div class="mb-6">
                              <h1 class="display-4 mb-4">Front original design cap</h1>
                              <p>As well as being game-changers when it comes to technical innovation, Front has some of the bestselling cap in its locker.</p>
                            </div>
                            <a class="btn btn-primary btn-pill transition-3d-hover px-5 mr-2" href="#">$59 - Add to Cart</a>
                            <a class="btn btn-icon btn-outline-primary rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Save for later">
                              <i class="fas fa-heart"></i>
                            </a>
                          </div>
                          <div class="col-lg-6 order-lg-1">
                            <div class="w-85 mx-auto">
                              <img class="img-fluid" src="../../assets/img/mockups/img5.png" alt="Image Description">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Slide -->

                    <!-- Slide -->
                    <div class="js-slide">
                      <div class="container space-top-2 space-bottom-3">
                        <div class="row align-items-lg-center">
                          <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
                            <div class="mb-6">
                              <h2 class="display-4 mb-4">Apple iPad Pro</h2>
                              <p>It's all new, all screen, and all powerful. Completely redesigned and packed with our most advanced technology, it will make you rethink what iPad is capable of.</p>
                            </div>
                            <a class="btn btn-primary btn-pill transition-3d-hover px-5 mr-2" href="#">$799 - Add to Cart</a>
                            <a class="btn btn-icon btn-outline-primary rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Save for later">
                              <i class="fas fa-heart"></i>
                            </a>
                          </div>
                          <div class="col-lg-6 order-lg-1">
                            <div class="w-85 mx-auto">
                              <img class="img-fluid" src="../../assets/img/mockups/img6.png" alt="Image Description">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Slide -->

                    <!-- Slide -->
                    <div class="js-slide">
                      <div class="container space-top-2 space-bottom-3">
                        <div class="row align-items-lg-center">
                          <div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
                            <div class="mb-6">
                              <h3 class="display-4 mb-4">Celio hoodie</h3>
                              <p>Founded in 1985, French label Celio channels 30 years of expertise into its contemporary menswear range. Expect fly style for a city or beach with its denim shorts, chinos and printed jersey.</p>
                            </div>
                            <a class="btn btn-primary btn-pill transition-3d-hover px-5 mr-2" href="#">$15 - Add to Cart</a>
                            <a class="btn btn-icon btn-outline-primary rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Save for later">
                              <i class="fas fa-heart"></i>
                            </a>
                          </div>
                          <div class="col-lg-6 order-lg-1">
                            <div class="w-85 mx-auto">
                              <img class="img-fluid" src="../../assets/img/mockups/img1.png" alt="Image Description">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Slide -->
                  </div>
                  <!-- End Main Slider -->

                  <!-- Slider Nav -->
                  <div class="position-absolute bottom-0 w-100">
                    <div class="container space-bottom-1">
                      <div id="heroSliderNav" class="js-slick-carousel slick slick-transform-off max-w-27rem mx-auto"
                           data-hs-slick-carousel-options='{
                             "infinite": true,
                             "autoplaySpeed": 7000,
                             "slidesToShow": 3,
                             "isThumbs": true,
                             "isThumbsProgressCircle": true,
                             "thumbsProgressOptions": {
                               "color": "#377dff",
                               "width": 8
                             },
                             "thumbsProgressContainer": ".js-slick-thumb-progress",
                             "asNavFor": "#heroSlider"
                           }'>
                        <div class="js-slide p-1">
                          <a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
                            <img class="avatar-img" src="../../assets/img/100x100/img13.jpg" alt="Image Description">
                          </a>
                        </div>
                        <div class="js-slide p-1">
                          <a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
                            <img class="avatar-img" src="../../assets/img/100x100/img14.jpg" alt="Image Description">
                          </a>
                        </div>
                        <div class="js-slide p-1">
                          <a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
                            <img class="avatar-img" src="../../assets/img/100x100/img15.jpg" alt="Image Description">
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Slider Nav -->
                </div>
                <!-- End Hero Section -->
              
            
              
                <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 -->

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF SLICK CAROUSEL
                    // =======================================================
                    $('.js-slick-carousel').each(function() {
                      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                    });
                  });
                </script>