<!-- ========== HERO ========== -->
                                <div class="bg-img-hero img-fluid mb-5" style="background-image: url(../../assets/img/1076x761/img1.jpg);">
                                    <div class="js-slick-carousel u-slick"
                                        data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow--v2 u-slick__arrow-centered--y"
                                        data-arrow-left-classes="flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-0"
                                        data-arrow-right-classes="flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-0">
                                        <div class="">
                                            <div class="row mx-2 mx-md-4 mx-lg-7 align-items-center min-height-600">
                                                <div class="col-md-7 col-wd-6">
                                                    <div class="media d-block d-lg-flex">
                                                        <div class="media-body align-self-center mb-4 mb-lg-0">
                                                            <p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
                                                            data-scs-animation-in="fadeInUp"
                                                            data-scs-animation-delay="200">AVAILABLE ONCE A YEAR</p>
                                                            <h2 class="font-size-10 mb-3 pb-1"
                                                            data-scs-animation-in="fadeInUp"
                                                            data-scs-animation-delay="300">
                                                                <span class="hero__title-line-1 font-weight-bold d-block">Get 40% off on </span>
                                                                <span class="hero__title-line-2 font-weight-normal d-block">orders over $149</span>
                                                            </h2>
                                                            <a href="#" class="banner_btn btn btn-wide bg-dark rounded-0 text-white"
                                                            data-scs-animation-in="fadeInLeft"
                                                            data-scs-animation-delay="400">Explore Now</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-5 col-wd-6"
                                                data-scs-animation-in="fadeInRight"
                                                data-scs-animation-delay="400">
                                                    <img src="https://placehold.it/500x423" class="img-fluid" alt="image-description">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="row mx-2 mx-md-4 mx-lg-7 align-items-center min-height-600">
                                                <div class="col-md-7 col-wd-6">
                                                    <div class="media d-block d-lg-flex">
                                                        <div class="media-body align-self-center mb-4 mb-lg-0">
                                                            <p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
                                                            data-scs-animation-in="fadeInUp"
                                                            data-scs-animation-delay="200">AVAILABLE ONCE A YEAR</p>
                                                            <h2 class="font-size-10 mb-3 pb-1"
                                                            data-scs-animation-in="fadeInUp"
                                                            data-scs-animation-delay="300">
                                                                <span class="hero__title-line-1 font-weight-bold d-block">Get 40% off on </span>
                                                                <span class="hero__title-line-2 font-weight-normal d-block">orders over $149</span>
                                                            </h2>
                                                            <a href="#" class="banner_btn btn btn-wide bg-dark rounded-0 text-white"
                                                            data-scs-animation-in="fadeInLeft"
                                                            data-scs-animation-delay="400">Explore Now</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-5 col-wd-6"
                                                data-scs-animation-in="fadeInRight"
                                                data-scs-animation-delay="400">
                                                    <img src="https://placehold.it/500x423" class="img-fluid" alt="image-description">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="row mx-2 mx-md-4 mx-lg-7 align-items-center min-height-600">
                                                <div class="col-md-7 col-wd-6">
                                                    <div class="media d-block d-lg-flex">
                                                        <div class="media-body align-self-center mb-4 mb-lg-0">
                                                            <p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
                                                            data-scs-animation-in="fadeInUp"
                                                            data-scs-animation-delay="200">AVAILABLE ONCE A YEAR</p>
                                                            <h2 class="font-size-10 mb-3 pb-1"
                                                            data-scs-animation-in="fadeInUp"
                                                            data-scs-animation-delay="300">
                                                                <span class="hero__title-line-1 font-weight-bold d-block">Get 40% off on </span>
                                                                <span class="hero__title-line-2 font-weight-normal d-block">orders over $149</span>
                                                            </h2>
                                                            <a href="#" class="banner_btn btn btn-wide bg-dark rounded-0 text-white"
                                                            data-scs-animation-in="fadeInLeft"
                                                            data-scs-animation-delay="400">Explore Now</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-5 col-wd-6"
                                                data-scs-animation-in="fadeInRight"
                                                data-scs-animation-delay="400">
                                                    <img src="https://placehold.it/500x423" class="img-fluid" alt="image-description">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- ==========END HERO ========== -->
                            
                        
                            
                                 <!-- 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 Bookworm -->
                                <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>