Banner

                                            
                                                <!--Banner v1-->
                                                <div class="container">
                                                    <div class="d-block">
                                                        <div class="banners d-md-flex">
                                                            <div class="slider-banner flex-grow-1 mr-md-3 mr-xl-5 bg-gray-200 p-6 mb-4d875 position-relative overflow-hidden" style="height:250px;">
                                                                <div class="z-index-2 position-relative">
                                                                    <h2 class="slider-banner__title font-size-4 text-lh-md">
                                                                        <span class="slider-banner__title--1 d-block font-weight-bold">Best Seller</span>
                                                                        <span class="slider-banner__title--2">Books</span>
                                                                    </h2>
                                                                    <a href="#" class="slider-banner__btn text-primary-green text-uppercase font-weight-medium">Purchase</a>
                                                                </div>
                                                                <img src="https://placehold.it/285x240" class="img-fluid position-absolute bottom-n60 right-n60">
                                                            </div>
                                                            <div class="slider-banner flex-grow-1 ml-md-3 ml-xl-0 bg-gray-200 p-6 position-relative overflow-hidden" style="height:250px;">
                                                                <div class="z-index-2 position-relative">
                                                                    <h2 class="slider-banner__title font-size-4 text-lh-md">
                                                                        <span class="slider-banner__title--1 d-block font-weight-bold">Featured Book</span>
                                                                        <span class="slider-banner__title--2">of the Month</span>
                                                                    </h2>
                                                                    <a href="#" class="slider-banner__btn text-primary-green text-uppercase font-weight-medium">Purchase</a>
                                                                </div>
                                                                <img src="https://placehold.it/250x225" class="img-fluid position-absolute bottom-0 right-n60">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v1-->
                                            
                                        

                                            
                                                <!--Banner v2-->
                                                <div class="container">
                                                    <div class="bg-secondary-gray-800 px-6 py-5 rounded">
                                                        <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">Available Once a Year</p>
                                                                <h2 class="banner__title font-size-10 font-weight-bold text-white mb-4">Get 50% off on orders over $139</h2>
                                                                <a href="#" class="banner_btn btn btn-wide btn-primary-green text-white">Explore Books</a>
                                                            </div>
                                                            <img src="https://placehold.it/450x235" class="img-fluid">
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v2-->
                                            
                                        

                                            
                                                <!--Banner v3-->
                                               <div class="container">
                                                   <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3">
                                                       <div class="col">
                                                           <div class="mb-5 mb-xl-0 position-relative">
                                                               <div class="bg-red-1 height-md-250">
                                                                   <div class="p-5 pl-lg-6 pr-lg-5 pt-lg-5 pb-lg-5">
                                                                       <div>
                                                                           <h2 class="font-size-26 mt-lg-1 text-white text-lh-md">
                                                                               <span class="hero__title-line-1 font-weight-bold d-block">Coloring Books</span>
                                                                               <span class="hero__title-line-2 font-weight-normal d-block">for adults</span>
                                                                           </h2>
                                                                           <a class="h6 font-weight-medium text-white" href="#">Shop Now</a>
                                                                       </div>
                                                                       <div class="d-flex d-md-block justify-content-end position-md-absolute bottom-md-30 right-md-30">
                                                                           <img src="https://placehold.it/150x160" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image">
                                                                       </div>
                                                                   </div>
                                                               </div>
                                                           </div>
                                                       </div>
                                                       <div class="col">
                                                           <div class="mb-5 mb-lg-0 position-relative">
                                                               <div class="bg-blue height-md-250">
                                                                   <div class="p-5 pl-lg-6 pr-lg-5 pt-lg-5 pb-lg-5">
                                                                       <div class="mb-3 mb-lg-0">
                                                                           <h2 class="font-size-26 mt-lg-1 text-white text-lh-md">
                                                                               <span class="hero__title-line-1 font-weight-bold d-block">New Books</span>
                                                                               <span class="hero__title-line-2 font-weight-normal d-block">Available</span>
                                                                           </h2>
                                                                           <a class="h6 font-weight-medium text-white" href="#">Shop Now<s/a>
                                                                       </div>
                                                                       <div class="d-flex d-md-block justify-content-end position-md-absolute right-md-30 bottom-md-30">
                                                                           <img src="https://placehold.it/150x160" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image">
                                                                       </div>
                                                                   </div>
                                                               </div>
                                                           </div>
                                                       </div>
                                                       <div class="col">
                                                           <div class="position-relative">
                                                               <div class="bg-yellow-1 height-md-250">
                                                                   <div class="p-5 pl-lg-6 pr-lg-5 pt-lg-5 pb-lg-5">
                                                                       <div class="mb-4 mb-lg-0">
                                                                           <h2 class="font-size-26 mt-lg-1 text-white text-lh-md">
                                                                               <span class="hero__title-line-1 font-weight-bold d-block">Monthly Selected</span>
                                                                               <span class="hero__title-line-2 font-weight-normal d-block">Books<s/span>
                                                                           </h2>
                                                                           <a class="h6 font-weight-medium text-white" href="#">Shop Now<s/a>
                                                                       </div>
                                                                       <div class="d-flex d-md-block justify-content-end position-md-absolute bottom-md-30 right-md-30">
                                                                           <img src="https://placehold.it/150x160" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v3-->
                                            
                                        

                                            
                                                <!--Banner v4-->
                                                <div class="container">
                                                    <div class="row row-cols-lg-2">
                                                        <div class="col">
                                                            <div class="bg-gray-200 p-5 mb-5 min-height-450">
                                                                <div class="mb-2">
                                                                    <span class="font-weight-medium h6 text-gray-400">BEST SELLER</span>
                                                                </div>
                                                                <h6 class="font-weight-bold font-size-7">Books</h6>
                                                                <a href="#" class="stretched-link link-black-100 text-dark font-weight-medium">
                                                                    <span class="product__add-to-cart d-inline-block">Shop Now</span>
                                                                </a>
                                                                <div class="d-flex justify-content-end mt-4">
                                                                    <img src="https://placehold.it/230x250" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="bg-gray-200 p-5 min-height-450">
                                                                <div class="mb-2">
                                                                    <span class="font-weight-medium h6 text-gray-400">DEAL OF THE WEEK</span>
                                                                </div>
                                                                <h6 class="font-weight-bold font-size-7">Made For You</h6>
                                                                <a href="#" class="stretched-link link-black-100 text-dark font-weight-medium">
                                                                    <span class="product__add-to-cart d-inline-block">Shop Book</span>
                                                                </a>
                                                                <div class="d-flex justify-content-end my-3">
                                                                    <img src="https://placehold.it/230x200" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                </div>
                                                                <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>
                                                    </div>
                                                </div>
                                                <!--End Banner v4-->
                                            
                                        

                                            
                                                <!--Banner v5-->
                                                <div class="container">
                                                    <div class="row row-cols-1 row-cols-md-2 mb-5 mb-lg-0">
                                                        <div class="col">
                                                            <div class="bg-primary p-3d25 mb-5 mb-md-0 min-height-300 d-flex position-relative">
                                                                <div class="border__1 d-flex align-items-center justify-content-center w-100">
                                                                    <div class="text-center px-2 py-8 px-md-0 py-md-0">
                                                                        <h6 class="font-weight-bold text-white mb-3">GET FREE NEXTDAY DELIVERY</h6>
                                                                        <div class="text-lh-sm mb-3">
                                                                            <div class="font-size-7 text-white font-weight-bold">On orders of $35 </div>
                                                                            <span class="font-size-7 text-white font-weight-bold">or more.</span>
                                                                        </div>
                                                                        <div class="mb-4 mb-md-0">
                                                                            <a href="#" class="stretched-link text-white h-border-bottom-white h6 font-weight-medium" tabindex="0">Start Shopping</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="position-absolute bottom-0 left-0 ml-6 mb-1">
                                                                        <i class="flaticon-delivery font-size-17 text-red-1"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         <div class="col">
                                                            <div class="bg-gray-780 p-3d25 mb-5 mb-md-0 min-height-300 d-flex position-relative">
                                                                <div class="border__1 d-flex align-items-center justify-content-center w-100">
                                                                    <div class="text-center">
                                                                        <h6 class="font-weight-bold text-white mb-0">SUMMER SALE </h6>
                                                                        <span class="font-weight-bold font-size-12 text-gray-260">50%</span>
                                                                        <div class="">
                                                                            <a href="#" class="stretched-link text-white h-border-bottom-white h6 font-weight-medium" tabindex="0">Shop now</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v5-->
                                            
                                        

                                            
                                                <!--Banner v6-->
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="bg-img-hero img-fluid height-300 mb-5 mb-lg-0" style="background-image: url(https://placehold.it/639x300);">
                                                                <div class="p-5 px-lg-9 space-top-1 space-top-lg-3">
                                                                    <h2 class="font-size-7 mb-2 pb-1 text-lh-1dot4">
                                                                        <span class="hero__title-line-1 font-weight-bold d-block">Feature Book</span>
                                                                        <span class="hero__title-line-2 font-weight-normal d-block">of the month</span>
                                                                    </h2>
                                                                    <a href="#" class="text-uppercase link-black-100 text-dark font-weight-medium">
                                                                        <span class="product__add-to-cart d-inline-block">Purchase</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <div class="bg-img-hero img-fluid height-300 mb-5 mb-lg-0" style="background-image: url(https://placehold.it/350x300);">
                                                                <div class="p-5 pl-lg-6 pt-3 pt-lg-5">
                                                                    <h2 class="font-size-7 mb-2 pb-1 text-lh-1dot4">
                                                                        <span class="hero__title-line-1 font-weight-bold d-block">Best Seller</span>
                                                                        <span class="hero__title-line-2 font-weight-normal d-block">Books</span>
                                                                    </h2>
                                                                    <a href="#" class="text-uppercase link-black-100 text-dark font-weight-medium">
                                                                        <span class="product__add-to-cart d-inline-block">Purchase</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <div class="bg-gray-780 p-3 height-300">
                                                                <div class="m-1">
                                                                    <div class="border__1">
                                                                        <div class="p-5 pb-8 pb-md-12 pl-lg-5 pt-lg-5 pb-lg-8 pl-xl-7 pt-xl-8 pb-xl-5">
                                                                            <div class="">
                                                                                <h6 class="font-weight-bold text-white font-size-7 mb-0">Summer Sale</h6>
                                                                                <span class="font-weight-bold font-size-15 text-gray-260 text-lh-sm">50%</span>
                                                                                <div class="">
                                                                                    <a href="#" class="text-white h-border-bottom-white h6 font-weight-medium pb-1" tabindex="0">PURCHASE</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v6-->
                                            
                                        

                                            
                                                <!--Banner v7-->
                                                <div class="bg-gray-200 space-2">
                                                    <div class="container">
                                                        <div class="pt-5 pt-lg-0  h-100">
                                                            <div class="bg-white p-6 h-100">
                                                                <h6 class="font-size-7">Girl, <span class="text-primary font-weight-normal">Wash Your Face</span></h6>
                                                                <div class="mb-2">
                                                                    <span class="font-size-3 text-secondary-gray-700">Rachel Hollis</span>
                                                                </div>
                                                                <div class="price d-flex align-items-center font-weight-medium font-size-3 mb-2">
                                                                    <ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount font-size-3 font-weight-medium 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="mb-3 pb-1">
                                                                    <span class="d-inline-block product__add-to-cart">ADD TO CART</span>
                                                                </div>
                                                                <div>
                                                                    <img src="https://placehold.it/185x210" class="img-fluid mx-auto d-block mx-auto" alt="image-description">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div>
                                                <!--End Banner v7-->
                                            
                                        

                                            
                                                <!--Banner v8-->
                                                <div class="container">
                                                    <div class="row row-cols-md-2 row-cols-xl-3 row-cols-wd-4">
                                                        <div class="col">
                                                            <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                <div class="pr-4 pl-5 py-8 position-relative">
                                                                    <div class="position-relative z-index-2">
                                                                        <div class="font-size-4 font-weight-medium position-relative z-index-2">Coloring Books</div>
                                                                        <div class="font-size-4 mb-2 position-relative z-index-2">for adults</div>
                                                                        <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                    </div>
                                                                    <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                <div class="pr-4 pl-5 py-8 position-relative">
                                                                    <div class="position-relative z-index-2">
                                                                        <div class="font-size-4 font-weight-medium position-relative z-index-2">Best</div>
                                                                        <div class="font-size-4 mb-2 position-relative z-index-2">Cookbooks</div>
                                                                        <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                    </div>
                                                                    <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                <div class="pr-4 pl-5 py-8 position-relative">
                                                                    <div class="position-relative z-index-2">
                                                                        <div class="font-size-4 font-weight-medium position-relative z-index-2">New Books</div>
                                                                        <div class="font-size-4 mb-2 position-relative z-index-2">Available</div>
                                                                        <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                    </div>
                                                                    <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col d-xl-none d-wd-block">
                                                            <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                <div class="pr-4 pl-5 py-8 position-relative">
                                                                    <div class="font-size-4 font-weight-medium position-relative z-index-2">Monthly Selected</div>
                                                                    <div class="font-size-4 mb-2 position-relative z-index-2">Books</div>
                                                                    <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                    <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v8-->
                                            
                                        

                                            
                                                <!--Banner v9-->
                                                <div class="bg-gray-200 space-2">
                                                    <div class="container-fluid px-3 px-md-5 px-xl-8d75">
                                                        <div class="row row-cols-md-2 row-cols-xl-3">
                                                            <div class="col">
                                                                <div class="position-relative">
                                                                    <div class="bg-white height-md-300 mb-5 mb-xl-0">
                                                                        <div class="p-4 py-lg-6 px-lg-7">
                                                                            <div class="my-xl-1">
                                                                                <div class="position-relative z-index-2">
                                                                                    <div class="mb-2">
                                                                                        <span class="font-weight-medium h6 text-gray-400">BEST SELLER</span>
                                                                                    </div>
                                                                                    <h6 class="font-weight-bold font-size-7">Books</h6>
                                                                                    <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                                        <span class="product__add-to-cart d-inline-block">Shop Now</span>
                                                                                    </a>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end d-md-block position-md-absolute bottom-md-30 right-md-30">
                                                                                    <img src="https://placehold.it/180x223" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col">
                                                                <div class="position-relative">
                                                                    <div class="bg-white height-md-300 mb-5 mb-lg-0">
                                                                        <div class="p-4 py-lg-6 px-lg-7">
                                                                            <div class="my-xl-1">
                                                                                <div class="position-relative z-index-2">
                                                                                    <h2 class="font-size-26 mt-lg-1 text-lh-md">
                                                                                        <span class="hero__title-line-1 font-weight-bold d-block">New Books</span>
                                                                                        <span class="hero__title-line-2 font-weight-normal d-block">Available</span>
                                                                                    </h2>
                                                                                    <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                                        <span class="product__add-to-cart d-inline-block">Shop Now</span>
                                                                                    </a>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end d-md-block position-md-absolute bottom-md-30 right-md-30">
                                                                                    <img src="https://placehold.it/180x223" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col">
                                                                <div class="position-relative">
                                                                    <div class="bg-white height-md-300">
                                                                        <div class="py-4 px-5 pl-lg-7">
                                                                            <div class="ml-lg-1">
                                                                                <div class="position-relative z-index-2">
                                                                                    <div class="mb-2">
                                                                                        <span class="font-weight-medium h6 text-gray-400">DEAL OF THE WEEK</span>
                                                                                    </div>
                                                                                    <h6 class="font-weight-bold font-size-7">Made For You</h6>
                                                                                    <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                                        <span class="product__add-to-cart d-inline-block">Shop Book</span>
                                                                                    </a>
                                                                                </div>
                                                                                <div class="position-md-absolute bottom-md-30 right-md-30">
                                                                                    <div class="d-flex justify-content-end d-md-block">
                                                                                        <img src="https://placehold.it/180x223" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="position-md-absolute bottom-md-30">
                                                                                    <div class="d-flex align-items-stretch">
                                                                                        <div class="py-2d75 text-primary-home-v3 mr-4">
                                                                                            <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 mr-4">
                                                                                            <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 mr-4">
                                                                                            <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>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v9-->
                                            
                                        

                                            
                                                <!--Banner v10-->
                                                <div class="bg-punch-light px-3 px-md-5">
                                                    <div class="space-1 space-md-3 bg-white">
                                                        <div class="container">
                                                            <div class="row row-cols-md-2 row-cols-xl-3 row-cols-wd-4">
                                                                <div class="col">
                                                                    <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                        <div class="pr-4 pl-5 py-8 position-relative">
                                                                            <div class="font-size-4 font-weight-medium position-relative z-index-2">Coloring Books</div>
                                                                            <div class="font-size-4 mb-2 position-relative z-index-2">for adults</div>
                                                                            <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                            <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                        <div class="pr-4 pl-5 py-8 position-relative">
                                                                            <div class="font-size-4 font-weight-medium position-relative z-index-2">Best</div>
                                                                            <div class="font-size-4 mb-2 position-relative z-index-2">Cookbooks</div>
                                                                            <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                            <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                        <div class="pr-4 pl-5 py-8 position-relative">
                                                                            <div class="font-size-4 font-weight-medium position-relative z-index-2">New Books</div>
                                                                            <div class="font-size-4 mb-2 position-relative z-index-2">Available</div>
                                                                            <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                            <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col d-xl-none d-wd-block">
                                                                    <div class="bg-punch-light rounded-md mb-4 mb-xl-0">
                                                                        <div class="pr-4 pl-5 py-8 position-relative">
                                                                            <div class="font-size-4 font-weight-medium position-relative z-index-2">Monthly Selected</div>
                                                                            <div class="font-size-4 mb-2 position-relative z-index-2">Books</div>
                                                                            <a href="#" class="stretched-link h-primary">Shop Now</a>
                                                                            <img src="https://placehold.it/130x150" class="position-absolute bottom-0 mb-4 mr-4 right-0 d-block attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v10-->
                                            
                                        

                                            
                                                <!--Banner v11-->
                                                <div class="container">
                                                    <div class="bg-img-hero img-fluid height-500" style="background-image: url(https://placehold.it/685x500);">
                                                        <div class="px-6 space-top-3 space-bottom-4 mb-4 mb-lg-0">
                                                            <div class="pt-lg-4 pb-lg-3">
                                                                <p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold">THE BOOKWORM EDITORS’</p>
                                                                <h2 class="hero__title font-size-10 mb-4 pb-1">
                                                                    <span class="hero__title-line-1 font-weight-regular d-block mb-1">Featured Books of</span>
                                                                    <span class="hero__title-line-2 d-block font-weight-regular">The <span class="font-weight-bold">February</span></span>
                                                                </h2>
                                                                <a href="#" class="banner_btn rounded-0 btn btn-wide btn-primary text-white">Shop Now</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v11-->
                                            
                                        

                                            
                                                <!--Banner v12-->
                                                <div class="container">
                                                    <div class="row row-cols-2">
                                                        <div class="col">
                                                            <div class="bg-img-hero img-fluid pt-4 space-bottom-3 px-5" style="background-image: url(https://placehold.it/330x235);">
                                                                <div class="mb-4">
                                                                    <div class="mb-1">
                                                                        <span class="font-weight-medium h6 text-gray-400">BEST SELLER</span>
                                                                    </div>
                                                                    <h6 class="font-weight-bold font-size-4 pb-1">Books</h6>
                                                                    <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                        <span class="product__add-to-cart d-inline-block">Shop Now</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col">
                                                            <div class="bg-img-hero img-fluid pt-4 space-bottom-1 px-5" style="background-image: url(https://placehold.it/330x235);">
                                                                <div class="mb-3 mb-lg-6 mb-xl-3">
                                                                    <div class="mb-1">
                                                                        <span class="font-weight-medium h6 text-gray-400">DEAL OF THE WEEK</span>
                                                                    </div>
                                                                    <h6 class="font-weight-bold font-size-4">Made For You</h6>
                                                                    <div class="pb-1">
                                                                        <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                            <span class="product__add-to-cart d-inline-block">Shop Now</span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="d-flex align-items-stretch justify-content-between">
                                                                        <div class="py-2d75">
                                                                            <span class="font-weight-medium font-size-3">114</span>
                                                                            <span class="font-size-2 ml-md-2 ml-xl-0 ml-wd-2 d-xl-block d-wd-inline">Days</span>
                                                                        </div>
                                                                        <div class="py-2d75">
                                                                            <span class="font-weight-medium font-size-3">03</span>
                                                                            <span class="font-size-2 ml-md-2 ml-xl-0 ml-wd-2 d-xl-block d-wd-inline">Hours</span>
                                                                        </div>
                                                                        <div class="py-2d75">
                                                                            <span class="font-weight-medium font-size-3">60</span>
                                                                            <span class="font-size-2 ml-md-2 ml-xl-0 ml-wd-2 d-xl-block d-wd-inline">Mins</span>
                                                                        </div>
                                                                        <div class="py-2d75">
                                                                            <span class="font-weight-medium font-size-3">25</span>
                                                                            <span class="font-size-2 ml-md-2 ml-xl-0 ml-wd-2 d-xl-block d-wd-inline">Secs</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v12-->
                                            
                                        

                                            
                                                <!--Banner v13-->
                                                <div class="container">
                                                    <div class="row row-cols-2">
                                                        <div class="col">
                                                            <div class="mb-5">
                                                                <div class="bg-img-hero img-fluid bg-gradient-gray-780" style="background-image: url(https://placehold.it/330x235);">
                                                                    <div class="p-3 mb-5 mb-md-0">
                                                                        <div class="m-1">
                                                                            <div class="border__1">
                                                                                <div class="p-3 px-lg-5 py-md-5">
                                                                                    <div class="text-center my-lg-1">
                                                                                        <h6 class="font-weight-bold text-white mb-0">SUMMER SALE </h6>
                                                                                        <span class="font-weight-bold font-size-12 text-gray-260">50%</span>
                                                                                        <div class="">
                                                                                            <a href="#" class="text-white h-border-bottom-white h6 font-weight-medium pb-1" tabindex="0">Shop now</a>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col">
                                                            <div class="bg-primary p-3 mb-5 mb-md-0">
                                                                <div class="m-1">
                                                                    <div class="position-relative">
                                                                        <div class="border__1">
                                                                            <div class="py-md-5">
                                                                                <div class="text-center mb-lg-1">
                                                                                    <h6 class="font-weight-bold text-white mb-3">GET FREE NEXTDAY DELIVERY</h6>
                                                                                    <div class="text-lh-sm mb-3">
                                                                                        <div class="font-size-4 text-white font-weight-bold">On orders of $35 </div>
                                                                                        <span class="font-size-4 text-white font-weight-bold">or more.</span>
                                                                                    </div>
                                                                                    <div class="">
                                                                                        <a href="#" class="text-white h-border-bottom-white h6 font-weight-medium" tabindex="0">Start Shopping</a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="d-none d-md-block position-absolute bottom-n14 left-20">
                                                                            <i class="flaticon-delivery font-size-15 text-red-1"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v13s-->
                                            
                                        

                                            
                                                <!--Banner v14-->
                                                <div class="container">
                                                    <div class="row row-cols-1 row-cols-lg-2">
                                                        <div class="col">
                                                            <div class="bg-gray-200 min-height-300 mb-5 mb-lg-0">
                                                                <div class="p-5 pl-lg-8 pr-lg-5 pt-lg-10 pb-lg-5">
                                                                    <div class="mt-lg-2">
                                                                        <h2 class="font-size-26 mt-lg-1 text-lh-md">
                                                                            <span class="hero__title-line-1 font-weight-bold d-block">Feature Book</span>
                                                                            <span class="hero__title-line-2 font-weight-normal d-block">of the month</span>
                                                                        </h2>
                                                                       <div>
                                                                            <a href="#" class="text-dark font-weight-medium">
                                                                                <span class="product__add-to-cart d-inline-block">PURCHASE</span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="d-flex d-md-block justify-content-end position-md-absolute bottom-md-40 right-md-55">
                                                                        <img src="https://placehold.it/180x203" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="bg-gray-200 min-height-300">
                                                                <div class="p-5 pl-lg-8 pr-lg-5 pt-lg-10 pb-lg-5">
                                                                    <div class="mt-lg-2">
                                                                        <h2 class="font-size-26 mt-lg-1 text-lh-md">
                                                                            <span class="hero__title-line-1 font-weight-bold d-block">Best Seller</span>
                                                                            <span class="hero__title-line-2 font-weight-normal d-block">Books</span>
                                                                        </h2>
                                                                       <div>
                                                                            <a href="#" class="text-dark font-weight-medium">
                                                                                <span class="product__add-to-cart d-inline-block">PURCHASE</span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="d-flex d-md-block justify-content-end position-md-absolute bottom-md-40 right-md-55">
                                                                        <img src="https://placehold.it/180x203" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v14-->
                                            
                                        

                                            
                                                <!--Banner v15-->
                                                <div class="container">
                                                    <div class="bg-gray-200 rounded-md py-4 py-lg-7 px-5 pl-lg-7 pr-lg-6 pb-lg-6 space-bottom-xl-2 mb-5">
                                                        <div class="pb-xl-3 mb-xl-1">
                                                            <div class="ml-xl-1">
                                                                <div class="mb-2">
                                                                    <span class="font-weight-medium h6 text-gray-400">BEST SELLER</span>
                                                                </div>
                                                                <h6 class="font-weight-bold font-size-7">Books</h6>
                                                                <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                    <span class="product__add-to-cart d-inline-block">Shop Now</span>
                                                                </a>
                                                                <div class="d-flex justify-content-end">
                                                                    <img src="https://placehold.it/230x250" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v15-->
                                            
                                        

                                            
                                                <!--Banner v16-->
                                                <div class="container">
                                                    <div class="bg-primary p-3 mb-5 mb-lg-0 rounded-md">
                                                        <div class="m-1">
                                                            <div class="position-relative">
                                                                <div class="border__1 rounded-md">
                                                                    <div class="py-5 space-lg-2">
                                                                        <div class="text-center mb-lg-1 py-lg-4 py-xl-2">
                                                                            <h6 class="font-weight-bold text-white mb-3">GET FREE NEXTDAY DELIVERY</h6>
                                                                            <div class="text-lh-sm mb-3">
                                                                                <div class="font-size-7 text-white font-weight-bold">On orders of $35 </div>
                                                                                <span class="font-size-7 text-white font-weight-bold">or more.</span>
                                                                            </div>
                                                                            <div class="">
                                                                                <a href="#" class="text-white h-border-bottom-white h6 font-weight-medium" tabindex="0">Start Shopping</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="d-none d-md-block position-absolute bottom-n14 left-30">
                                                                    <i class="flaticon-delivery font-size-17 text-red-1"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v16-->
                                            
                                        

                                            
                                                <!--Banner v17-->
                                                <div class="container">
                                                    <div class="position-relative mb-5">
                                                        <div class="bg-gray-200 height-md-350 pt-5 pt-lg-6 pl-5 pl-lg-7  rounded-md">
                                                            <h2 class="font-size-7 mt-lg-1 text-lh-md">
                                                                <span class="hero__title-line-1 font-weight-bold d-block">New Books</span>
                                                                <span class="hero__title-line-2 font-weight-normal d-block">Available</span>
                                                            </h2>
                                                            <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                <span class="product__add-to-cart d-inline-block">Shop Now</span>
                                                            </a>
                                                            <div class="d-flex justify-content-end d-md-block position-md-absolute bottom-md-30 right-md-30">
                                                                <img src="https://placehold.it/230x250" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v17-->
                                            
                                        

                                            
                                                <!--Banner v18-->
                                                <div class="container">
                                                    <div class="position-relative">
                                                        <div class="bg-gray-200 height-md-470 pt-4 pl-5 pl-lg-7 pt-lg-7 rounded-md">
                                                            <div class="ml-lg-1">
                                                                <div class="space-bottom-1 space-bottom-md-6">
                                                                    <div class="mb-2">
                                                                        <span class="font-weight-medium h6 text-gray-400">DEAL OF THE WEEK</span>
                                                                    </div>
                                                                    <h6 class="font-weight-bold font-size-7">Made For You</h6>
                                                                    <a href="#" class="link-black-100 text-dark font-weight-medium">
                                                                        <span class="product__add-to-cart d-inline-block">Shop Book</span>
                                                                    </a>
                                                                </div>
                                                                <div class="d-flex justify-content-end d-md-block position-md-absolute bottom-md-65 right-0">
                                                                    <img src="https://placehold.it/250x250" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
                                                                </div>
                                                                <div class="d-flex align-items-stretch pb-1">
                                                                    <div class="py-2d75 text-primary-home-v3 mr-5">
                                                                        <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 mr-5">
                                                                        <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 mr-5">
                                                                        <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>
                                                    </div>
                                                </div>
                                                <!--End Banner v18-->