<!-- Hero Section -->
                <div class="js-slick-carousel slick slick-equal-height"
                     data-hs-slick-carousel-options='{
                       "infinite": true,
                       "autoplay": true,
                       "autoplaySpeed": 10000,
                       "dots": true,
                       "dotsClass": "slick-pagination slick-pagination-white position-absolute bottom-0 right-0 left-0 mb-3"
                     }'>
                  <div class="js-slide gradient-x-overlay-lg-dark bg-img-hero space-3 min-vh-lg-100" style="background-image: url(../../assets/img/1920x1080/img8.jpg);">
                    <!-- Hero News -->
                    <div class="container d-lg-flex align-items-lg-center">
                      <article class="w-lg-60 text-center mx-lg-auto">
                        <span class="d-block mb-2"
                              data-hs-slick-carousel-animation="fadeInUp">
                          <a class="d-block small text-white-70 font-weight-bold text-cap mb-2" href="#">Adventure</a>
                        </span>

                        <h1 class="text-white mb-4 mb-md-7"
                            data-hs-slick-carousel-animation="fadeInUp"
                            data-hs-slick-carousel-animation-delay="150">The top 30 self-improvement goals we never get around to achieving</h1>
                        <a class="btn btn-light btn-wide transition-3d-hover" href="#"
                           data-hs-slick-carousel-animation="fadeInUp"
                           data-hs-slick-carousel-animation-delay="200">Read More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                      </article>
                    </div>
                    <!-- End Hero News -->
                  </div>

                  <div class="js-slide gradient-x-overlay-lg-dark bg-img-hero space-3 min-vh-lg-100" style="background-image: url(../../assets/img/1920x1080/img22.jpg);">
                    <!-- Hero News -->
                    <div class="container d-lg-flex align-items-lg-center">
                      <article class="w-lg-60 text-center mx-lg-auto">
                        <span class="d-block mb-2"
                              data-hs-slick-carousel-animation="fadeInUp">
                          <a class="d-block small text-white-70 font-weight-bold text-cap mb-2" href="#">Science</a>
                        </span>

                        <h2 class="h1 text-white mb-4 mb-md-7"
                            data-hs-slick-carousel-animation="fadeInUp"
                            data-hs-slick-carousel-animation-delay="150">Bonded by science: researchers describe their nerdy proposals</h2>
                        <a class="btn btn-light btn-wide transition-3d-hover" href="#"
                           data-hs-slick-carousel-animation="fadeInUp"
                           data-hs-slick-carousel-animation-delay="200">Read More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                      </article>
                    </div>
                    <!-- End Hero News -->
                  </div>

                  <div class="js-slide gradient-x-overlay-lg-dark bg-img-hero space-3 min-vh-lg-100" style="background-image: url(../../assets/img/1920x1080/img2.jpg);">
                    <!-- Hero News -->
                    <div class="container d-lg-flex align-items-lg-center">
                      <article class="w-lg-60 text-center mx-lg-auto">
                        <span class="d-block mb-2"
                              data-hs-slick-carousel-animation="fadeInUp">
                          <a class="d-block small text-white-70 font-weight-bold text-cap mb-2" href="#">Environment</a>
                        </span>

                        <h2 class="h1 text-white mb-4 mb-md-7"
                            data-hs-slick-carousel-animation="fadeInUp"
                            data-hs-slick-carousel-animation-delay="150">Tree rings reveal increased fire risk for southwestern US</h2>
                        <a class="btn btn-light btn-wide transition-3d-hover" href="#"
                           data-hs-slick-carousel-animation="fadeInUp"
                           data-hs-slick-carousel-animation-delay="200">Read More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                      </article>
                    </div>
                    <!-- End Hero News -->
                  </div>

                  <div class="js-slide gradient-x-overlay-lg-dark bg-img-hero space-3 min-vh-lg-100" style="background-image: url(../../assets/img/1920x1080/img7.jpg);">
                    <!-- Hero News -->
                    <div class="container d-lg-flex align-items-lg-center">
                      <article class="w-lg-60 text-center mx-lg-auto">
                        <span class="d-block mb-2"
                              data-hs-slick-carousel-animation="fadeInUp">
                          <a class="d-block small text-white-70 font-weight-bold text-cap mb-2" href="#">Lifestyle</a>
                        </span>

                        <h2 class="h1 text-white mb-4 mb-md-7"
                            data-hs-slick-carousel-animation="fadeInUp"
                            data-hs-slick-carousel-animation-delay="150">2020's Most Relaxing and Affordable Vacations</h2>
                        <a class="btn btn-light btn-wide transition-3d-hover" href="#"
                           data-hs-slick-carousel-animation="fadeInUp"
                           data-hs-slick-carousel-animation-delay="200">Read More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                      </article>
                    </div>
                    <!-- End Hero News -->
                  </div>
                </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>