<style>
  .columns .column.main {
    padding-bottom: 0;
  }
</style>
<div class="row mb-3" style="background-color: #ffffff;">
  <div class="col-md-12 offset-lg-3 col-lg-9">
    <div class="wpb_wrapper vc_column-inner">
      <div id="home-banner-demo9" class="porto-carousel owl-carousel mb-0 porto-standable-carousel">
        <div class="porto-ibanner" style="background: #f4f4f4; min-height: 410px;">
          <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/shop9_home_slide1.jpg"}}" />
          <div class="porto-ibanner-desc no-padding d-flex">
            <div class="porto-ibanner-layer pr-xl-3 text-right" style="width: 48%; left: 2%; top: 50%; transform: translateY(-50%);">
              <h4 style="font-size: 1.0625em; color: rgba(34, 37, 41, 0.7); line-height: 1; font-weight: 500; letter-spacing: 0.065em;" class="vc_custom_heading mb-2 pr-1 align-right">
                Find the Boundaries. Push Through!
              </h4>
              <h2 style="font-size: 3.625em; line-height: 1; animation-delay: 300ms;" class="vc_custom_heading mb-0 align-right text-uppercase">
                Shoes Sale
              </h2>
              <div class="row d-block d-sm-inline-flex flex-sm-nowrap">
                <div class="col-auto col-md-6 appear-animation">
                  <div class="wpb_wrapper vc_column-inner">
                    <h3 style="font-size: 3.5em; line-height: 1; text-align: center; letter-spacing: -0.08em;padding: .65em .5em 2em .5em; background-image: url({{media url="wysiwyg/smartwave/porto/homepage/09/shop9_home_badge.png"}}); background-position: center;background-repeat: no-repeat;background-size: contain;" class="vc_custom_heading sale-label mb-0 d-inline-block heading-light">
                      40<small><sup>%</sup><sub>OFF</sub></small>
                    </h3>
                  </div>
                </div>
                <div class="col-auto pt-4 col-md-6">
                  <div class="wpb_wrapper vc_column-inner">
                    <h4 style="font-size: 0.8125em; line-height: 1; letter-spacing: -0.02em;" class="vc_custom_heading d-inline-block mr-2 align-left text-uppercase">Starting At</h4>
                    <h5 style="font-size: 0.8125em; line-height: 0.9;margin-left: -4px;" class="vc_custom_heading coupon-sale-text align-left heading-light">$<b>119</b>99</h5>
                    <div class="btn-container mb-0 text-right"><button class="btn btn-modern btn-md btn-dark">SHOP NOW!</button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="porto-ibanner" style="min-height: 410px;">
          <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/shop9_home_slide2.jpg"}}" />
          <div class="porto-ibanner-desc no-padding d-flex">
            <div class="porto-ibanner-layer text-right" style="right: 12%; top: 50%; transform: translateY(-50%);">
              <h2 style="font-size: 1.875em; line-height: 1; letter-spacing: -0.02em;" class="vc_custom_heading mb-2 align-right text-uppercase heading-primary">FLASH SALE</h2>
              <h4 style="font-size: 1.375em; color: #a2a2a2; line-height: 1.2; font-weight: 500; letter-spacing: 0.2em;" class="vc_custom_heading mb-2 m-r-n-xs align-right">
                TOP BRANDS<br />
                SUMMER SUNGLASSES
              </h4>
              <h4 style="font-size: 2em; line-height: 1.1; letter-spacing: -0.02em;" class="vc_custom_heading mb-4 align-right text-uppercase heading-light">
                STARTING<br />
                AT <sup>$</sup>199<sup>99</sup>
              </h4>
              <div class="btn-container mb-0 pt-1 text-right"><button class="btn btn-modern btn-lg btn-light">View Sale</button></div>
            </div>
          </div>
        </div>
      </div>
      <style>
        .porto-ibanner-layer {
          position: absolute;
          z-index: 10;
        }
        .vc_column-inner::before, .vc_column-inner::after {
          content: " ";
          display: table;
        }
        .sale-label small {
          letter-spacing: -.025em;
          font-size: 70%;
          display: inline-block;
          font-weight: inherit;
        }
        .sale-label sup {
          position: static;
          font-size: 75%;
        }
        .sale-label sub {
          display: block;
          font-size: 36%;
          line-height: 1;
          position: static;
          font-weight: 400;
          letter-spacing: 0;
          padding-left: .1em;
        }

        .coupon-sale-text {
          transform: none;
          letter-spacing: .35px;
          position: relative;
          display: inline-block;
          padding: 6px 10px 4px;
          z-index: 1;
        }
        .coupon-sale-text:before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          z-index: -1;
          background: #ff7272;
          transform: rotate(
            -2deg
          );
        }
        .coupon-sale-text b {
          font-size: 200%;
          vertical-align: text-top;
          padding: 0;
        }
        .porto-ibanner-layer .btn-modern.btn-md {
          font-size: .85em;
          padding: 1em 3.25em;
        }
      </style>
      <script type="text/javascript">
        require([
          'jquery',
          'owl.carousel/owl.carousel.min'
        ], function ($) {
          var banner_owl = $("#home-banner-demo9.owl-carousel");
          banner_owl.owlCarousel({
            items: 1,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: false,
            nav: false,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            lazyLoad: true
          });
        });
      </script>
    </div>
  </div>
</div>
<div class="row" style="background: #fff;">
  <div class="col-md-12">
    <div class="wpb_wrapper vc_column-inner">
      <div class="porto-products wpb_content_element title-border-middle">
        <h2 class="section-title text-center">
          <span class="line-l"></span>
          <span class="inline-title">FEATURED PRODUCTS</span>
          <span class="line-r"></span>
        </h2>
        {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_type="4" product_count="4" column_count="4" aspect_ratio="0" image_width="350" image_height="350" template="grid.phtml"}}
      </div>
    </div>
  </div>
</div>
<div class="row m-b product-new-style">
  <style>
    .bg-gray {
      background-color: #f4f4f4;
    }
    .product-new-style .product-item-inner,.product-item-photo>a:not(.weltpixel-quickview):before,.product-new-style .product-item-info .weltpixel-quickview.weltpixel_quickview_button_v2 {
      display: none !important;
    }
    .product-new-style .product-item-info:hover .product-item-photo {box-shadow: none;}
  </style>
  <div class="col-md-6 col-12">
    <div class="wpb_wrapper vc_column-inner">
      <div id="bestseller-products" class="porto-products wpb_content_element bg-gray px-4 py-5">
        <h2 class="section-title text-center slider-title"><span class="inline-title">Best Sellers Products</span><span class="line"></span></h2>
        <div class="slider-wrapper">
          {{block class="Smartwave\Filterproducts\Block\Home\BestsellersList" name="best_product" extra_class="nav-center-images-only nav-style-4 dots-style-1" product_type="1" product_count="3" aspect_ratio="1" image_width="463" image_height="348" template="owl_list.phtml"}}
          <script type="text/javascript">
            require([
              'jquery',
              'owl.carousel/owl.carousel.min'
            ], function ($) {
              $("#bestseller-products .owl-carousel").owlCarousel({
                items: 1,
                autoplay: false,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                loop: true,
                navRewind: true,
                lazyLoad:true,
                margin: 0,
                nav: true,
                dots: false
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-12">
    <div class="wpb_wrapper vc_column-inner">
      <div id="latest-products" class="porto-products wpb_content_element bg-gray py-5 px-4">
        <h2 class="section-title text-center slider-title"><span class="inline-title">NEW ARRIVAL PRODUCTS</span><span class="line"></span></h2>
        <div class="slider-wrapper">
          {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" extra_class="nav-center-images-only nav-style-4 dots-style-1" product_type="1" product_count="3" aspect_ratio="1" image_width="463" image_height="348" template="owl_list.phtml"}}
          <script type="text/javascript">
            require([
              'jquery',
              'owl.carousel/owl.carousel.min'
            ], function ($) {
              $("#latest-products .owl-carousel").owlCarousel({
                items: 1,
                autoplay: false,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                loop: true,
                navRewind: true,
                lazyLoad:true,
                margin: 0,
                nav: true,
                dots: false
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row" style="background: #fff;">
  <div class="col-md-12">
    <div class="wpb_wrapper vc_column-inner">
      <div id="selection-products" class="porto-products wpb_content_element title-border-middle">
        <h2 class="section-title text-center">
          <span class="line-l"></span>
          <span class="inline-title">FASHION SELECTION</span>
          <span class="line-r"></span>
        </h2>
        <div class="slider-wrapper">
          {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" extra_class="nav-center-images-only nav-pos-outside nav-style-4 show-nav-hover dots-style-1" product_type="4" product_count="6" aspect_ratio="0" image_width="350" image_height="350" template="owl_list.phtml"}}
          <script type="text/javascript">
            require([
              'jquery',
              'owl.carousel/owl.carousel.min'
            ], function ($) {
              $("#selection-products .owl-carousel").owlCarousel({
                autoplay: false,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                loop: true,
                navRewind: true,
                lazyLoad:true,
                margin: 0,
                nav: false,
                dots: false,
                responsive: {
                  0: {
                    items:2
                  },
                  640: {
                    items:3
                  },
                  768: {
                    items:3
                  },
                  992: {
                    items:4
                  },
                  1200: {
                    items:4
                  }
                }
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row home-newsletter no-padding" style="background-image: url('{{media url="wysiwyg/smartwave/porto/homepage/09/shop9_home_banner.jpg"}}');padding-top: 6rem;padding-bottom: 6rem;background-color: #e7e7e7;background-position: center;background-repeat: no-repeat;background-size: cover;">
  <div class="pl-4 pl-xl-5 col-md-9 col-xl-6 col-lg-8 col-10">
    <div class="wpb_wrapper vc_column-inner">
      <h2 style="font-size: 1.5rem; line-height: 1.2; text-align: center; letter-spacing: -0.02em;" class="vc_custom_heading mb-2 text-uppercase">subscribe to our newsletter</h2>
      <h5 style="font-size: 1rem; color: #777777; line-height: 1.5; text-align: center; font-weight: 400;" class="vc_custom_heading mb-3">
        Get all the latest information on events, sales and<br />
        offers. Sign up for newsletter:
      </h5>
      {{block class="Magento\Newsletter\Block\Subscribe" name="home.newsletter" template="subscribe_form.phtml"}}
      <style>
        .single-subscribe .newsletter .control {
         justify-content: center;
        }
        @media(min-width: 992px){
        .single-subscribe .newsletter .input-text {
          width: 60%;
        }
        }
        .single-subscribe .newsletter input {
          height: 3.25rem;
          padding-left: 1.5em;
          padding-right: 15px;
          border-radius: 2rem 0 0 2rem;
          font-size: .85rem;
          color: #777;
          border: none;
          margin: 0;
        }
        .single-subscribe .newsletter .action {
          display: table-cell;
          vertical-align: top;
          height: 3.2rem;
          padding-left: 2.5rem;
          padding-right: 2.5rem;
          text-transform: uppercase;
          font-weight: 700;
          font-size: .8rem;
          border-radius: 0 2rem 2rem 0;
        }
      </style>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="wpb_wrapper vc_column-inner">
      <div class="porto-brand">
        <div class="porto-carousel brand-carousel owl-carousel mb-0 py-5">
          <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand1.png"}}" alt="" /></div>
          <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand2.png"}}" alt="" /></div>
          <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand3.png"}}" alt="" /></div>
          <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand4.png"}}" alt="" /></div>
          <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand5.png"}}" alt="" /></div>
          <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand6.png"}}" alt="" /></div>
        </div>
        <script type="text/javascript">
          require(["jquery", "owl.carousel/owl.carousel.min"], function ($) {
            $(".brand-carousel.owl-carousel").owlCarousel({
              autoplay: true,
              autoplayTimeout: 5000,
              autoplayHoverPause: true,
              nav: false,
              dots: false,
              loop: true,
              responsive: {
                0: {
                  items: 2,
                },
                640: {
                  items: 3,
                },
                768: {
                  items: 4,
                },
                992: {
                  items: 5,
                },
                1200: {
                  items: 6,
                },
              },
            });
          });
        </script>
      </div>
    </div>
  </div>
</div>
