<style>.cms-index-index.layout-1220 .page-main {
    max-width: 100%;
  }
  .columns .column.main {
    padding-bottom: 0;
  }
  .col-auto {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
  }
  .ls-negative-03 {
    letter-spacing: -.03em;
  }
  .section {
    margin-top: 30px;
    padding: 50px 0;
  }
  .bg-grey-gradient {
    background-image: linear-gradient(to bottom,#f4f4f4,#fff);
  }
  ul.products li.product-category .thumb-info h3 {
    font-size: 1.2941em;
    letter-spacing: -.01em;
    text-transform: none;
    line-height: 1.35;
  }
  ul.products li.product-category .thumb-info-type {
    font-size: .8235em;
    font-weight: 500;
    letter-spacing: .01em;
  }
  ul.products li.product-category .thumb-info-wrapper:after {
    background: rgba(27, 27, 23, 0.01);
  }
  ul.products li.product-category .btn {
    letter-spacing: .01em;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 4%;
  }
  ul.products.category-pos-middle li.product-category .thumb-info-title {
    top: 12%;
    transform: none;
    padding: 0;
  }
  ul.products li.product-category>.porto-products {
    max-width: 43%;
    margin: -37% auto 0;
    position: relative;
    z-index: 2;
  }
  ul.products li.product-category .products-grid.columns1 .product-item {
    margin-bottom: 1.4286em;
  }
  li.product-category .product-item-info.type1 .product-item-inner,
  li.product-category .product-item-info.type1 .weltpixel-quickview.weltpixel_quickview_button_v2,
  li.product-category .product-item-info.type1 .product-labels .product-label {
    display: none;
  }
  .subheading-text-right .porto-u-sub-heading {
    text-align: right;
  }
  ul.products.category-pos-middle .owl-nav {
    top: 32%;
  }
</style>
<div class="row bg-grey-gradient no-padding" style="padding-top: 20px;">
  <div class="col-md-12">
    <div class="wpb_wrapper vc_column-inner">
      <div class="category-slider porto-products wpb_content_element mb-4 home-cats-with-featured">
        <div class="slider-wrapper">
          <ul class="products products-container products-slider owl-carousel category-pos-middle category-text-center nav-pos-inside nav-style-2">
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/literature-fiction.jpg&quot;}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Literature &amp; Fiction</h3>
                      <span class="thumb-info-type"> <mark class="count">4</mark> Products </span> <span class="btn">View All Products<i class="fas fa-long-arrow-alt-right ml-2"></i></span>
                    </span>
                  </span>
                </span>
              </a>
              <div class="porto-products">
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_1" product_count="1" column_count="1" aspect_ratio="0" image_width="250" image_height="375" product_type="1" lazyload="none" template="grid.phtml"}}
              </div>
            </li>
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/mystery-suspense.jpg&quot;}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Mystery Suspense</h3>
                      <span class="thumb-info-type"> <mark class="count">4</mark> Products </span> <span class="btn">View All Products<i class="fas fa-long-arrow-alt-right ml-2"></i></span>
                    </span>
                  </span>
                </span>
              </a>
              <div class="porto-products">
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_1" product_count="1" column_count="1" aspect_ratio="0" image_width="250" image_height="375" product_type="1" lazyload="none" template="grid.phtml"}}
              </div>
            </li>
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/scifi-fantasy.jpg&quot;}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Scifi Fantasty</h3>
                      <span class="thumb-info-type"> <mark class="count">3</mark> Products </span> <span class="btn">View All Products<i class="fas fa-long-arrow-alt-right ml-2"></i></span>
                    </span>
                  </span>
                </span>
              </a>
              <div class="porto-products">
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_1" product_count="1" column_count="1" aspect_ratio="0" image_width="250" image_height="375" product_type="1" lazyload="none" template="grid.phtml"}}
              </div>
            </li>
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/arts-photography.jpg&quot;}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Arts &amp; Photography</h3>
                      <span class="thumb-info-type"> <mark class="count">2</mark> Products </span> <span class="btn">View All Products<i class="fas fa-long-arrow-alt-right ml-2"></i></span>
                    </span>
                  </span>
                </span>
              </a>
              <div class="porto-products">
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_1" product_count="1" column_count="1" aspect_ratio="0" image_width="250" image_height="375" product_type="1" lazyload="none" template="grid.phtml"}}
              </div>
            </li>
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/business-investing.jpg&quot;}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Business &amp; Investing</h3>
                      <span class="thumb-info-type"> <mark class="count">3</mark> Products </span> <span class="btn">View All Products<i class="fas fa-long-arrow-alt-right ml-2"></i></span>
                    </span>
                  </span>
                </span>
              </a>
              <div class="porto-products">
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_1" product_count="1" column_count="1" aspect_ratio="0" image_width="250" image_height="375" product_type="1" lazyload="none" template="grid.phtml"}}
              </div>
            </li>
          </ul>
          <script type="text/javascript">
            require([
              'jquery',
              'owl.carousel/owl.carousel.min'
            ], function ($) {
              $(".category-slider .owl-carousel").owlCarousel({
                autoplay: false,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                loop: true,
                navRewind: true,
                lazyLoad:true,
                margin: 0,
                nav: true,
                dots: false,
                stagePadding: 70,
                responsive: {
                  0: {
                    items:1
                  },
                  640: {
                    items:1
                  },
                  768: {
                    items:2
                  },
                  992: {
                    items:3
                  },
                  1200: {
                    items:3
                  }
                }
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="no-padding section mt-0 mb-0 porto-inner-container" style="background-color: #f4f4f4;">
  <div class="porto-wrap-container container">
    <div class="row no-padding">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="wpb_text_column wpb_content_element pull-right">
            <div class="wpb_wrapper">
              <p class="mb-0">
                <a class="font-weight-semibold text-color-primary text-uppercase" style="font-size: 12px;font-weight:600;" title="Shop" href="#"> View All Products<i class="fas fa-long-arrow-alt-right ml-1"></i> </a>
              </p>
            </div>
          </div>
          <h2 style="font-size: 16px; font-weight: 500; margin-bottom: 20px; border-bottom-width: 1px; padding-bottom: 10px; border-bottom-color: #e7e7e7; border-bottom-style: solid;" class="vc_custom_heading align-left">
            Best Sellers Books
          </h2>
        </div>
      </div>
      <div class="d-flex align-items-center col-md-4 section mt-0 mb-0 section-no-borders" style="position:relative;z-index:2;border-right: 2px solid #f3f3f3;background-color: #ffffff;">
        <div class="wpb_wrapper vc_column-inner">
          <h5 style="font-size: 18px; color: rgba(34, 37, 41, 0.6); line-height: 1; text-align: center; font-weight: 400;" class="vc_custom_heading mb-1"><i>BOOK CLUB</i></h5>
          <h2 style="font-size: 28px; line-height: 32px; text-align: center; font-weight: 600;" class="vc_custom_heading px-5 text-color-dark">A selection with only the best books</h2>
          <div class="wpb_single_image wpb_content_element vc_align_center px-4 px-xl-5" style="margin-bottom: 43px;">
            <div class="wpb_wrapper">
              <div class="vc_single_image-wrapper vc_box_border_grey text-center">
                <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/shop24_book_img.png&quot;}}" />
              </div>
            </div>
          </div>
          <div class="btn-container mb-0 text-center">
            <a class="btn btn-xl btn-primary" href="#" title="Shop"> EXPLORE BOOKS <i style="padding-left: 7px;" class="fas fa-long-arrow-alt-right"></i> </a>
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="wpb_wrapper vc_column-inner">
          <style scope="scope">
            .no-border .product-item-info.type1 {
              border: none;
              box-shadow: none;
              padding: 20px 40px 5px;
              background: #fff;
              height: 100%;
            }
            .no-border .product-item-info.type1 .product-item-inner,
            .no-border .product-item-info.type1 .weltpixel-quickview.weltpixel_quickview_button_v2,
            .no-border .product-item-info.type1 .product-labels .product-label,.no-border .product-item-info .product-reviews-summary {
              display: none;
            }
            #bestseller-products >.products {
              margin-left: -1px;
              margin-right: -1px;
            }
            #bestseller-products li.product {
              padding-left: 1px;
              padding-right: 1px;
              margin-bottom: 2px;
            }
          </style>
          <div id="bestseller-products" class="porto-products wpb_content_element no-border mb-0">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_6" product_count="8" column_count="4" aspect_ratio="0" image_width="250" image_height="375" product_type="1" template="grid.phtml"}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section mt-0 mb-0 porto-inner-container" style="background: #fff;">
  <div class="container">
    <div class="row">
      <div class="mb-3 col-md-4">
        <div class="wpb_wrapper vc_column-inner">
          <div class="row no-padding mx-0 justify-content-end"
               style="background-image: url('{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/shop24_home_banner1.jpg&quot;}}');
                      padding-top: 45px;
                      padding-bottom: 30px;
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: cover;
                      ">
            <div class="pr-4 col-auto col-md-3-5">
              <div class="wpb_wrapper vc_column-inner">
                <h2 style="font-size: 19px; line-height: 1; font-weight: 600;" class="vc_custom_heading mb-2 ls-negative-03 align-left text-uppercase heading-light">Award Winners</h2>
                <p style="color: rgba(255, 255, 255, 0.5);" class="vc_custom_heading mb-3 align-left">12 Books</p>
                <div class="btn-container mb-0 d-inline-block">
                  <button class="btn btn-md btn-primary">VIEW COLLETIONS <i style="padding-left: 7px;" class="fas fa-long-arrow-alt-right"></i></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-3 col-md-4">
        <div class="wpb_wrapper vc_column-inner">
          <div class="row no-padding mx-0 justify-content-end"
               style="background-image: url('{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/shop24_home_banner2.jpg&quot;}}');
                      padding-top: 45px;
                      padding-bottom: 30px;
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: cover;
                      ">
            <div class="pr-4 col-auto col-md-3-5">
              <div class="wpb_wrapper vc_column-inner">
                <h2 style="font-size: 19px; line-height: 1; font-weight: 600;" class="vc_custom_heading mb-2 ls-negative-03 align-left text-uppercase heading-light">Deals in Books</h2>
                <p style="color: rgba(255, 255, 255, 0.5);" class="vc_custom_heading mb-3 align-left">21 Books</p>
                <div class="btn-container mb-0 d-inline-block">
                  <button class="btn btn-md btn-secondary">VIEW COLLETIONS <i style="padding-left: 7px;" class="fas fa-long-arrow-alt-right"></i></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-5 col-md-4">
        <div class="wpb_wrapper vc_column-inner">
          <div class="row no-padding mx-0 justify-content-end"
               style="background-image: url('{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/shop24_home_banner3.jpg&quot;}}');
                      padding-top: 45px;
                      padding-bottom: 30px;
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: cover;
                      ">
            <div class="pr-4 col-auto col-md-3-5">
              <div class="wpb_wrapper vc_column-inner">
                <h2 style="font-size: 19px; line-height: 1; font-weight: 600;" class="vc_custom_heading mb-2 ls-negative-03 align-left text-uppercase heading-light">MOST GIFTED</h2>
                <p style="color: rgba(255, 255, 255, 0.5);" class="vc_custom_heading mb-3 align-left">38 Books</p>
                <div class="btn-container mb-0 d-inline-block">
                  <button class="btn btn-md btn-tertiary">VIEW COLLETIONS <i style="padding-left: 7px;" class="fas fa-long-arrow-alt-right"></i></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <style>
            .heading1685681490 h2 {
              border-bottom-color: #e7e7e7 !important;
            }
          </style>
          <div class="vc_custom_heading align-left heading heading-border heading-bottom-border heading-border-xs heading1685681490" style="margin-bottom: 20px;">
            <h2 style="font-size: 16px; line-height: 20px; font-weight: 500;" class="heading-tag">Featured Books</h2>
          </div>
          <div class="porto-products wpb_content_element mb-0">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_7" product_count="6" column_count="6" aspect_ratio="0" image_width="250" image_height="375" product_type="3" template="grid.phtml"}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section section-primary mt-0 mb-0"
     style="background-image: url('{{media url=&quot;wysiwyg/smartwave/porto/homepage/24/shop24_home_book.png&quot;}}');
            padding-top: 60px;
            padding-bottom: 60px;
            background-repeat: no-repeat;
            background-size: 41% auto;
            background-position: center right;
            background-color:#3256f4;
            ">
  <div class="container">
    <div class="row align-items-center">
      <div class="mb-4 mb-lg-0 col-md-7 col-lg-5 col-7">
        <div class="wpb_wrapper vc_column-inner">
          <h5 style="font-size: 18px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; font-weight: 400;" class="vc_custom_heading mb-0 align-left text-uppercase"><i>AVAILABLE ONCE A YEAR</i></h5>
          <div class="porto-u-heading mb-0 d-inline-block subheading-text-right" data-hspacer="no_spacer" data-halign="left" style="text-align: left;">
            <div class="porto-u-main-heading"><h2 style="font-weight: 600; color: #ffffff; font-size: 29px; line-height: 40px;margin:0;">Get 30% off on orders over $299</h2></div>
            <div class="porto-u-sub-heading" style="font-weight: 500; color: #ffffff; font-size: 12px; line-height: 16px;">* SELECTED BOOKS</div>
          </div>
        </div>
      </div>
      <div class="col-md-7 col-lg-3 col-7">
        <div class="wpb_wrapper vc_column-inner">
          <div class="btn-container mb-0 d-inline-block">
            <button class="btn btn-xl btn-quaternary">EXPLORE BOOKS <i style="padding-left: 7px;" class="fas fa-long-arrow-alt-right"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section section-default mt-0 mb-0">
  <style>
    .porto-products.product-bg-white .product-item .product-item-info.type3 {
      background: #fff;
    }
    .products-grid .product-item .product-item-info.type3 {
      border: 1px solid #e7e7e7;
      padding: 16px 16px 5px;
      box-shadow: 0 2px 3px 0 rgb(0 0 0 / 5%);
    }
  </style>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="vc_custom_heading align-left heading heading-border heading-bottom-border heading-border-xs" style="margin-bottom: 20px; border-bottom-color: #e7e7e7;">
            <h2 style="font-size: 16px; line-height: 20px; font-weight: 500;" class="heading-tag">Recent Books</h2>
          </div>
          <div class="porto-products wpb_content_element mb-0 product-bg-white">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product_8" product_count="6" column_count="6" aspect_ratio="0" image_width="250" image_height="375" product_type="3" template="grid.phtml"}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section section-parallax mt-0 mb-0" style="background:#fff;padding-bottom: 55px;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner text-center">
          <p class="mb-2"><i class="far fa-envelope" style="font-size: 30px; line-height: 1; color: #333;"></i></p>
          <h2 class="mb-0">Subscribe to Our Newsletter</h2>
          <p class="mb-4">Get all the latest information on Events, Sales and Offers.</p>
          {{block class="Magento\Newsletter\Block\Subscribe" name="home.newsletter" template="subscribe_form.phtml"}}
          <style>
            .single-subscribe.subscribe {
              max-width: 570px;
              margin: 0 auto;
            }
            .single-subscribe .newsletter input {
              background: #f4f4f4;
              border: none;
              height: 48px;
              font-size: 12px;
              font-style: italic;
            }
            .single-subscribe .newsletter .action {
              height: 48px;
              padding-left: 25px;
              padding-right: 30px;
              font-size: 12px;
              font-weight: 600;
              background: #333;
              border-color: #333;
            }
          </style>
        </div>
      </div>
    </div>
  </div>
</div>
