<!-- ========== HERO ========== -->
                                <div class="container">
                                    <div class="js-slick-carousel u-slick"
                                        data-pagi-classes="d-xl-none text-center u-slick__pagination u-slick__pagination mt-7"
                                        data-arrows-classes="d-none d-xl-block u-slick__arrow u-slick__arrow--v1 u-slick__arrow-centered--y rounded-circle"
                                        data-arrow-left-classes="flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2"
                                        data-arrow-right-classes="flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2">
                                        <div class="bg-primary-yellow rounded-md px-5 px-xl-11 space-2" style="height: 500px;">
                                            <div class="hero-slider">
                                                <div class="media row">
                                                    <div class="col-md-6 col-xl-4 hero__body media-body align-self-center mb-5 mb-lg-0">
                                                        <p class="hero__pretitle text-uppercase text-primary-home-v3 opacity-md font-weight-bold mb-2 pb-1">HURRY UP BEFORE OFFER WILL END </p>
                                                        <h2 class="hero__title text-primary-home-v3 font-size-15 mb-4">
                                                            <span class="hero__title--1 font-weight-regular d-block">Limited Week</span>
                                                            <span class="hero__title--2 font-weight-bold d-block">Deal</span>
                                                        </h2>
                                                        <a href="#" class="hero__btn btn btn-primary-home-v3 text-primary-yellow btn-wide rounded-md">Shop Now</a>
                                                    </div>
                                                    <div class="col-md-6 col-xl position-relative mb-5 mb-lg-0">
                                                        <img src="https://placehold.it/350x404" class="img-fluid">
                                                        <div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-right text-primary-yellow rounded-circle d-xl-flex flex-column align-items-center justify-content-center">
                                                            <h6 class="font-weight-medium mb-n2">save</h6>
                                                            <span class="font-size-5 font-weight-medium">$49</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 align-self-center ">
                                                        <div class="price d-flex align-items-center font-weight-medium font-size-3 mb-4">
                                                            <ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount font-size-7 text-dark"><span class="woocommerce-Price-currencySymbol">$</span>15</span></ins>
                                                            <del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1 text-primary-home-v3 opacity-md"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
                                                        </div>
                                                        <div class="countdown-timer mb-4">
                                                            <h5 class="countdown-timer__title font-size-3 mb-2 pb-1 text-primary-home-v3">Hurry Up! <span class="font-weight-regular">Offer ends in:</span></h5>
                                                            <div class="d-flex align-items-stretch justify-content-between">
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">114</span>
                                                                    <span class="font-size-2">Days</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">03</span>
                                                                    <span class="font-size-2">Hours</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">60</span>
                                                                    <span class="font-size-2">Mins</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">25</span>
                                                                    <span class="font-size-2">Secs</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="deal-progress">
                                                            <div class="d-flex justify-content-between font-size-2 mb-2d75 text-primary-home-v3">
                                                                <span>Already Sold: 14</span>
                                                                <span>Available: 3</span>
                                                            </div>
                                                            <div class="progress bg-white">
                                                                <div class="progress-bar bg-primary-home-v3" role="progressbar" style="width:55%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="17"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bg-primary-yellow rounded-md px-5 px-xl-11 space-2" style="height: 500px;">
                                            <div class="hero-slider">
                                                <div class="media row">
                                                    <div class="col-md-6 col-xl-4 hero__body media-body align-self-center mb-5 mb-lg-0">
                                                        <p class="hero__pretitle text-uppercase text-primary-home-v3 opacity-md font-weight-bold mb-2 pb-1">HURRY UP BEFORE OFFER WILL END </p>
                                                        <h2 class="hero__title text-primary-home-v3 font-size-15 mb-4">
                                                            <span class="hero__title--1 font-weight-regular d-block">Limited Week</span>
                                                            <span class="hero__title--2 font-weight-bold d-block">Deal</span>
                                                        </h2>
                                                        <a href="#" class="hero__btn btn btn-primary-home-v3 text-primary-yellow btn-wide rounded-md">Shop Now</a>
                                                    </div>
                                                    <div class="col-md-6 col-xl position-relative mb-5 mb-lg-0">
                                                        <img src="https://placehold.it/350x404" class="img-fluid">
                                                        <div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-right text-primary-yellow rounded-circle d-xl-flex flex-column align-items-center justify-content-center">
                                                            <h6 class="font-weight-medium mb-n2">save</h6>
                                                            <span class="font-size-5 font-weight-medium">$49</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 align-self-center ">
                                                        <div class="price d-flex align-items-center font-weight-medium font-size-3 mb-4">
                                                            <ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount font-size-7 text-dark"><span class="woocommerce-Price-currencySymbol">$</span>15</span></ins>
                                                            <del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1 text-primary-home-v3 opacity-md"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
                                                        </div>
                                                        <div class="countdown-timer mb-4">
                                                            <h5 class="countdown-timer__title font-size-3 mb-2 pb-1 text-primary-home-v3">Hurry Up! <span class="font-weight-regular">Offer ends in:</span></h5>
                                                            <div class="d-flex align-items-stretch justify-content-between">
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">114</span>
                                                                    <span class="font-size-2">Days</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">03</span>
                                                                    <span class="font-size-2">Hours</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">60</span>
                                                                    <span class="font-size-2">Mins</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">25</span>
                                                                    <span class="font-size-2">Secs</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="deal-progress">
                                                            <div class="d-flex justify-content-between font-size-2 mb-2d75 text-primary-home-v3">
                                                                <span>Already Sold: 14</span>
                                                                <span>Available: 3</span>
                                                            </div>
                                                            <div class="progress bg-white">
                                                                <div class="progress-bar bg-primary-home-v3" role="progressbar" style="width:55%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="17"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bg-primary-yellow rounded-md px-5 px-xl-11 space-2" style="height: 500px;">
                                            <div class="hero-slider">
                                                <div class="media row">
                                                    <div class="col-md-6 col-xl-4 hero__body media-body align-self-center mb-5 mb-lg-0">
                                                        <p class="hero__pretitle text-uppercase text-primary-home-v3 opacity-md font-weight-bold mb-2 pb-1">HURRY UP BEFORE OFFER WILL END </p>
                                                        <h2 class="hero__title text-primary-home-v3 font-size-15 mb-4">
                                                            <span class="hero__title--1 font-weight-regular d-block">Limited Week</span>
                                                            <span class="hero__title--2 font-weight-bold d-block">Deal</span>
                                                        </h2>
                                                        <a href="#" class="hero__btn btn btn-primary-home-v3 text-primary-yellow btn-wide rounded-md">Shop Now</a>
                                                    </div>
                                                    <div class="col-md-6 col-xl position-relative mb-5 mb-lg-0">
                                                        <img src="https://placehold.it/350x404" class="img-fluid">
                                                        <div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-right text-primary-yellow rounded-circle d-xl-flex flex-column align-items-center justify-content-center">
                                                            <h6 class="font-weight-medium mb-n2">save</h6>
                                                            <span class="font-size-5 font-weight-medium">$49</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 align-self-center ">
                                                        <div class="price d-flex align-items-center font-weight-medium font-size-3 mb-4">
                                                            <ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount font-size-7 text-dark"><span class="woocommerce-Price-currencySymbol">$</span>15</span></ins>
                                                            <del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1 text-primary-home-v3 opacity-md"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
                                                        </div>
                                                        <div class="countdown-timer mb-4">
                                                            <h5 class="countdown-timer__title font-size-3 mb-2 pb-1 text-primary-home-v3">Hurry Up! <span class="font-weight-regular">Offer ends in:</span></h5>
                                                            <div class="d-flex align-items-stretch justify-content-between">
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">114</span>
                                                                    <span class="font-size-2">Days</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">03</span>
                                                                    <span class="font-size-2">Hours</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">60</span>
                                                                    <span class="font-size-2">Mins</span>
                                                                </div>
                                                                <div class="py-2d75 text-primary-home-v3">
                                                                    <span class="font-weight-medium font-size-3">25</span>
                                                                    <span class="font-size-2">Secs</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="deal-progress">
                                                            <div class="d-flex justify-content-between font-size-2 mb-2d75 text-primary-home-v3">
                                                                <span>Already Sold: 14</span>
                                                                <span>Available: 3</span>
                                                            </div>
                                                            <div class="progress bg-white">
                                                                <div class="progress-bar bg-primary-home-v3" role="progressbar" style="width:55%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="17"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </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>