<style>
  .columns .column.main {
    padding-bottom: 0;
  }
.product-image-photo.default_image {
    filter: brightness(1.06);
}
  sup {
    font-size: 54%;
  }
  .porto-ibanner-layer {
    position: absolute;
  }
  .off-text small {
    display: inline-block!important;
    font-size: 39%!important;
    font-weight: inherit;
    transform: rotate(
      -90deg
    ) translateY(-35%);
  }
  .coupon-sale-text {
    padding: 6px 8px;
    position: relative;
    transform: rotate(
      -1.5deg
    );
    letter-spacing: 0;
  }
  .coupon-sale-text i {
    font-style: normal;
    position: absolute;
    left: -2.25em;
    top: 50%;
    transform: translateY(-50%) rotate(
      -90deg
    );
    font-size: .4em;
    opacity: .6;
    letter-spacing: 0;
  }
  .coupon-sale-text.heading-light i, .coupon-sale-text.heading-light sub {
    color: #222529;
  }
  .coupon-sale-text sub {
    position: absolute;
    left: 100%;
    padding: 0;
    margin-left: .25rem;
    bottom: .3em;
    font-size: 70%;
    line-height: 1;
  }
  .porto-ultimate-content-box {
    font-size: inherit;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-grid-container">
          <style scope="scope">
            .home-main-banners {opacity: 0;}
            .home-main-banners .porto-grid-item {
              padding: 10px;
            }
            .home-main-banners {
              margin: -10px -10px 10px;
            }
            .porto_products_filter_form select {
              height: 2.8125rem;
              margin-bottom: .625rem;
            }
            .porto_products_filter_form select:last-of-type {
              margin-bottom: 0;
            }
            .porto_products_filter_form .btn-submit {
              display: none;
            }
            .widget select {
              max-width: 100%;
              font-size: .9em;
            }
            @media (max-width: 767px) {
              .home-main-banners {
                height: auto !important;
              }
              .home-main-banners .porto-grid-item:first-child {
                margin-top: 0;
              }
              .home-main-banners .porto-grid-item {
                width: 100% !important;
                position: static !important;
                float: none;
              }
            }
          </style>
          <div class="home-main-banners wpb_content_element clearfix" style="position: relative; height: 519px;">
            <div class="porto-grid-item" style="width: 66.6%;">
              <div class="porto-ibanner mb-0" style="background: #eeeeee; min-height: 464px;">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_home_banner1.jpg"}}" />
                <div class="porto-ibanner-desc no-padding d-flex">
                  <div class="porto-ibanner-layer" style="left: 10%; top: 50%; transform: translateY(-50%);">
                    <div>
                      <h3 style="font-size: 2.625em; color: #777777; line-height: 1; font-weight: 500; letter-spacing: -0.035em;" class="vc_custom_heading mb-1 align-left">Save Big Sale</h3>
                      <h4 style="font-size: 6.375em; line-height: 1; letter-spacing: 0.03em;margin-left: -0.06em;" class="vc_custom_heading off-text d-flex align-items-center align-left heading-dark">50%<small>OFF</small></h4>
                      <h5 style="font-size: 1.125em; line-height: 1; letter-spacing: -0.02em;padding-top: .275em;" class="vc_custom_heading pull-left mr-2 align-left heading-dark">STARTING AT</h5>
                      <h5 style="font-size: 2.375em; line-height: 1; letter-spacing: -0.02em;" class="vc_custom_heading mb-3 align-left heading-primary"><sup>$</sup>199<sup>99</sup></h5>
                      <style>
                        .heading2082039242 h6 {
                          border-bottom-color: #777777 !important;
                        }
                      </style>
                      <div class="vc_custom_heading mb-0 d-inline-block align-left heading heading-border heading-bottom-border heading2082039242">
                        <h6 style="font-size: 0.875em; color: #777777; line-height: 0.8; font-weight: 700; letter-spacing: 0.01em;" class="heading-tag"><a href="#">SHOP NOW</a></h6>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="porto-grid-item" style="width: 33.3%;">
              <div class="porto-ultimate-content-box-container">
                <div class="porto-ultimate-content-box has-content-pos justify-content-center" style="background-color: #282828; min-height: 222px;padding-right: 1.8125em;padding-left: 1.8125em;">
                  <h3 style="font-size: 1.125rem; line-height: 1; text-align: center; letter-spacing: -0.01em;" class="vc_custom_heading mb-3 text-uppercase heading-light">Find A Product</h3>
                  <form action="" method="get" class="porto_products_filter_form widget my-0">
                    <select name="product_cat" id="product_cat" class="dropdown_product_cat">
                      <option value="" selected="selected">Select a category</option>
                    </select>
                    <select class="porto_dropdown_product_attributes" name="filter_brand">
                      <option value="">By brand</option>
                    </select>
                    <button type="button" class="btn-submit">Submit</button>
                  </form>
                </div>
              </div>
            </div>
            <div class="porto-grid-item" style="width: 33.3%;">
              <div class="porto-ibanner" style="background: #f4f4f4; min-height: 222px;">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_home_banner2.jpg"}}" />
                <div class="porto-ibanner-desc no-padding d-flex">
                  <div class="porto-ibanner-layer text-right" style="right: 10%; top: 50%; transform: translateY(-50%);">
                    <h4 style="font-size: 1.5275em; line-height: 1.1; letter-spacing: 0.01em;" class="vc_custom_heading mb-3 align-right">
                      ELECTRONIC<br />
                      DEALS
                    </h4>
                    <div class="porto-ultimate-content-box-container d-inline-block text-left">
                      <div class="porto-ultimate-content-box" style="" id="porto_ucb_2958">
                        <div style="font-size: 0.75em; line-height: 1.4; font-weight: 700; letter-spacing: 0.01em;" class="vc_custom_heading m-b-xs background-color-dark coupon-sale-text align-left heading-light">Exclusive COUPON</div>
                        <div style="font-size: 1.1em; line-height: 0.8; font-weight: 700;" class="vc_custom_heading mb-0 background-color-dark coupon-sale-text d-inline-block align-left heading-light"><i>UP TO</i>$100<sub>OFF</sub></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-col-sizer" style="width: 33.3333%; flex: 0 0 33.3333%;"></div>
          </div>
          <script type="text/javascript">
            require([
              'jquery',
              'packery'
            ], function ($, Packery) {
              $.bridget( 'packery', Packery );
              var $container = $('.home-main-banners');
              $container.css('opacity', 0);
              if ($container.length > 0) {
                $container.imagesLoaded(function(){
                  $container.packery({
                    itemSelector: ".porto-grid-item",
                    columnWidth: ".grid-col-sizer",
                    percentPosition: true
                  });
                });
                setTimeout(function(){
                  $container.animate({
                    opacity: 1
                  }, 200);
                }, 500);
              }
            });
          </script>
        </div>
        <h2 style="font-size: 1.125rem; line-height: 1.4; text-align: center; letter-spacing: -0.01em;" class="vc_custom_heading mb-3 text-uppercase">Featured Categories</h2>
        <style scope="scope">
          .home-banner-2 {opacity: 0;}
          ul.products li.product-category .thumb-info-title {
            width: auto;
            background: #282828;
            padding: .9em 1.4em;
          }
          .home-banner-2 li.product-category .thumb-info-wrapper:after {
            background-color: rgba(27, 27, 23, 0) !important;
          }
          .home-banner-2 li.product-category:hover .thumb-info-wrapper:after {
            background-color: rgba(27, 27, 23, 0.15) !important;
          }
          .grid-creative .thumb-info img, .grid-creative li.product-col .product-image img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            padding: 0;
          }
          ul.products.grid-creative li.product-col {
            padding-bottom: 20px;
          }
          .grid-creative .portfolio-item, .grid-creative .portfolio-item .thumb-info-wrapper, .grid-creative .portfolio-item .post-image, .grid-creative .thumb-info, .grid-creative .thumb-info .thumb-info-wrapper, .grid-creative .thumb-info .post-image {
            height: 100%;
          }
          .home-banner-2 .grid-col-1-4 {
            flex: 0 0 25%;
            width: 25%;
          }
          .home-banner-2 .grid-col-1-2 {
            flex: 0 0 50%;
            width: 50%;
          }
          .home-banner-2 .grid-col-1-4 {
            flex: 0 0 25%;
            width: 25%;
          }
          .home-banner-2 .grid-col-1-3 {
            flex: 0 0 33.3333%;
            width: 33.3333%;
          }
          .home-banner-2 .grid-col-5-12 {
            flex: 0 0 41.6666%;
            width: 41.6666%;
          }
          .home-banner-2 .grid-col-sizer {
            flex: 0 0 8.3333%;
            width: 8.3333%;
          }
          .home-banner-2 .grid-height-1-2 {
            height: 260px;
          }
          @media (max-width: 767px) {
            .home-banner-2 .grid-col-md-1-3 {
              flex: 0 0 33.3333%;
              width: 33.3333%;
            }
            .home-banner-2 .grid-col-md-2-3 {
              flex: 0 0 66.6666%;
              width: 66.6666%;
            }
            .home-banner-2 .grid-col-md-5-12 {
              flex: 0 0 41.6666%;
              width: 41.6666%;
            }
            .home-banner-2 .grid-col-md-7-12 {
              flex: 0 0 58.3333%;
              width: 58.3333%;
            }
            .home-banner-2 .grid-col-md-2-3 {
              flex: 0 0 66.6666%;
              width: 66.6666%;
            }
            .home-banner-2 .grid-col-sizer {
              flex: 0 0 8.3333%;
              width: 8.3333%;
            }
            .home-banner-2 .grid-height-1-2 {
              height: 173px;
            }
          }
          @media (max-width: 480px) {
            .home-banner-2 .product-col {
              flex: 0 0 100%;
              width: 100%;
            }
          }
        </style>
        <style>
          .home-banner-2 li.product-category .thumb-info-wrapper:after {
            background-color: rgba(27, 27, 23, 0);
          }
          .home-banner-2 li.product-category:hover .thumb-info-wrapper:after {
            background-color: rgba(27, 27, 23, 0.15);
          }
        </style>
        <div class="home-banner-2 porto-products wpb_content_element mb-5 hide-count">
          <div class="columns-4">
            <ul class="products products-container grid-creative category-pos-bottom category-text-left show-nav-middle is-shortcode" style="position: relative; height: 520px;">
              <li class="product-category product-col grid-col-1-4 grid-col-md-1-3 grid-height-1-2">
                <a href="#">
                  <span class="thumb-info align-center">
                    <span class="thumb-info-wrapper tf-none">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_cat1.jpg"}}" />
                    </span>
                    <span class="thumb-info-wrap">
                      <span class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Fashion</h3>
                        <span class="thumb-info-type"> <mark class="count">3</mark> Products </span>
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="product-category product-col grid-col-1-2 grid-col-md-2-3 grid-height-1-2">
                <a href="">
                  <span class="thumb-info align-center">
                    <span class="thumb-info-wrapper tf-none">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_cat2.jpg"}}" />
                    </span>
                    <span class="thumb-info-wrap">
                      <span class="thumb-info-title"><h3 class="sub-title thumb-info-inner">Furniture</h3> </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="product-category product-col grid-col-1-4 grid-col-md-5-12 grid-height-1-2">
                <a href="#">
                  <span class="thumb-info align-center">
                    <span class="thumb-info-wrapper tf-none">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_cat3.jpg"}}" />
                    </span>
                    <span class="thumb-info-wrap">
                      <span class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Decore</h3>
                        <span class="thumb-info-type"> <mark class="count">1</mark> Products </span>
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="product-category product-col grid-col-1-3 grid-col-md-7-12 grid-height-1-2">
                <a href="">
                  <span class="thumb-info align-center">
                    <span class="thumb-info-wrapper tf-none">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_cat4.jpg"}}" />
                    </span>
                    <span class="thumb-info-wrap">
                      <span class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Accessories</h3>
                        <span class="thumb-info-type"> <mark class="count">3</mark> Products </span>
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="product-category product-col grid-col-1-4 grid-col-md-1-3 grid-height-1-2">
                <a href="#">
                  <span class="thumb-info align-center">
                    <span class="thumb-info-wrapper tf-none">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_cat5.jpg"}}" />
                    </span>
                    <span class="thumb-info-wrap">
                      <span class="thumb-info-title"><h3 class="sub-title thumb-info-inner">Mobile</h3> </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="product-category product-col grid-col-5-12 grid-col-md-2-3 grid-height-1-2">
                <a href="#">
                  <span class="thumb-info align-center">
                    <span class="thumb-info-wrapper tf-none">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_cat6.jpg"}}" />
                    </span>
                    <span class="thumb-info-wrap">
                      <span class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Footwear</h3>
                        <span class="thumb-info-type"> <mark class="count">6</mark> Products </span>
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="grid-col-sizer"></li>
            </ul>
          </div>
        </div>
        <script type="text/javascript">
          require([
            'jquery',
            'packery'
          ], function ($, Packery) {
            $.bridget( 'packery', Packery );
            var $container = $('.home-banner-2');
            $container.css('opacity', 0);
            if ($container.length > 0) {
              $container.imagesLoaded(function(){
                $container.packery({
                  itemSelector: ".product-col",
                  columnWidth: ".grid-col-sizer",
                  percentPosition: true
                });
              });
              setTimeout(function(){
                $container.animate({
                  opacity: 1
                }, 200);
              }, 500);
            }
          });
        </script>
      </div>
    </div>
  </div>
</div>
<div class="porto-inner-container" style="padding-top: 3.75rem; padding-bottom: 2.75rem; background-color: #eeeeee;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <h2 style="font-size: 1.125rem; line-height: 1.4; text-align: center; letter-spacing: -0.01em;" class="vc_custom_heading mb-3 text-uppercase">Featured Products</h2>
          <div id="featured-products" class="porto-products wpb_content_element mb-0 section-product-light">
            <div class="slider-wrapper">
              {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_type="3" extra_class="nav-center-images-only nav-pos-outside nav-style-4 show-nav-hover dots-style-1" product_count="10" 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 ($) {
                  $("#featured-products .owl-carousel").owlCarousel({
                    autoplay: false,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    loop: true,
                    navRewind: true,
                    lazyLoad:true,
                    margin: 0,
                    nav: true,
                    dots: false,
                    responsive: {
                      0: {
                        items:2
                      },
                      640: {
                        items:2
                      },
                      768: {
                        items:2
                      },
                      992: {
                        items:3
                      },
                      1200: {
                        items:4
                      }
                    }
                  });
                });
              </script>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="vc_row wpb_row porto-inner-container" style="padding-top: 3.25rem;">
  <div class="porto-wrap-container container">
    <div class="row">
      <div class="vc_column_container col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <h2 style="font-size: 1.125rem; line-height: 1.4; text-align: center; letter-spacing: -0.01em;" class="vc_custom_heading mb-4 text-uppercase">Offers and Deals</h2>
          <div class="vc_row wpb_row vc_inner row home-banner">
            <div class="vc_column_container col-md-6">
              <div class="wpb_wrapper vc_column-inner">
                <div id="interactive-banner-wrap-3045" class="porto-ibanner m-b-md" style="border: 1.5625rem solid #eee;">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_home_banner4.jpg"}}" />
                  <div class="porto-ibanner-desc no-padding d-flex">
                    <div class="porto-ibanner-layer" style="left: 5%; top: 50%; transform: translateY(-50%);">
                      <h3 style="font-size: 1.875em; line-height: 1;" class="vc_custom_heading custom-font4 mb-1 align-left heading-dark">Exclusive Shoes</h3>
                      <h4 style="font-size: 2.5em; line-height: 1;" class="vc_custom_heading mb-5 vc_custom_1580092760619 align-left heading-dark">50% OFF</h4>
                      <style>
                        .heading502638983 h6 {
                          border-bottom-color: #777777 !important;
                        }
                      </style>
                      <div class="vc_custom_heading mb-0 d-inline-block align-left heading heading-border heading-bottom-border heading502638983">
                        <h6 style="font-size: 0.875em; color: #777777; line-height: 0.8; font-weight: 700; letter-spacing: 0.01em;" class="heading-tag"><a href="#">SHOP NOW</a></h6>
                      </div>
                    </div>
                    <div class="porto-ibanner-layer" style="right: 3%; top: 4%;">
                      <div class="wpb_single_image wpb_content_element vc_align_left mb-0 brand-logo">
                        <div class="wpb_wrapper">
                          <div class="vc_single_image-wrapper vc_box_border_grey">
                            <img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand3.png"}}" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="vc_column_container col-md-6">
              <div class="wpb_wrapper vc_column-inner">
                <div id="interactive-banner-wrap-7799" class="porto-ibanner m-b-md" style="background: #eeeeee;">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_home_banner5.jpg"}}" />
                  <div class="porto-ibanner-desc no-padding d-flex">
                    <div class="porto-ibanner-layer text-center" style="right: 6%; top: 50%; transform: translateY(-50%);">
                      <style>
                        .heading1688041708 .heading-tag:before,
                        .heading1688041708 .heading-tag:after {
                          border-top-color: #dcdedf !important;
                        }
                      </style>
                      <div class="vc_custom_heading mb-2 heading heading-border heading-middle-border heading-middle-border-center heading1688041708">
                        <h6 style="font-size: 0.9em; line-height: 1; text-align: center; letter-spacing: 0.2em;" class="heading-tag heading-dark text-uppercase">Amazing</h6>
                      </div>
                      <style>
                        .heading185629404 h3 {
                          border-bottom-color: #dcdedf !important;
                        }
                      </style>
                      <div class="vc_custom_heading mb-3 heading heading-border heading-bottom-border heading-border-xs heading185629404">
                        <h3 style="font-size: 2.0375em; line-height: 1; text-align: center; letter-spacing: -0.01em;" class="heading-tag text-uppercase">Collection</h3>
                      </div>
                      <h5 style="font-size: 0.9em; color: rgba(34, 37, 41, 0.7); line-height: 1; font-weight: 500; letter-spacing: 0.2em;" class="vc_custom_heading px-2 vc_custom_1580093496782 align-left text-uppercase">
                        Check our discountS
                      </h5>
                      <style>
                        .heading1944545504 h6 {
                          border-bottom-color: #777777 !important;
                        }
                      </style>
                      <div class="vc_custom_heading mb-0 d-inline-block align-left heading heading-border heading-bottom-border heading1944545504">
                        <h6 style="font-size: 0.875em; color: #777777; line-height: 0.8; font-weight: 700; letter-spacing: 0.01em;" class="heading-tag"><a href="#">SHOP NOW</a></h6>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="interactive-banner-wrap-6815" class="porto-ibanner mb-0" style="background: #eeeeee; min-height: 250px;">
            <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/shop20_home_banner6.png"}}" />
            <div class="porto-ibanner-desc no-padding d-flex">
              <div class="porto-ibanner-layer" style="width: 90%; left: 5%; top: 50%; transform: translateY(-50%);">
                <div>
                  <h3 style="font-size: 1.375rem; line-height: 1; text-align: center; letter-spacing: -0.02em;" class="vc_custom_heading mb-1">Subscribe To Our Newsletter</h3>
                  <h6 style="font-size: 1rem; color: #777777; line-height: 1.4; text-align: center; font-weight: 400;" class="vc_custom_heading mb-4">Get all the latest information on events, sales and offers.</h6>
                  {{block class="Magento\Newsletter\Block\Subscribe" name="home.newsletter" template="subscribe_form.phtml"}}
                  <style>
                    .single-subscribe .newsletter .control {
                      justify-content: center;
                    }
                    .single-subscribe .newsletter .input-text {
                      width: 100%;
                      max-width: 327px;
                    }
                    .single-subscribe .newsletter input {
                      height: 3.25rem;
                      padding-left: 20px;
                      padding-right: 20px;
                      border-radius: 0;
                      font-size: .85rem;
                      color: #777;
                      border: none;
                      margin: 0;

                    }
                    .single-subscribe .newsletter .action {
                      display: table-cell;
                      vertical-align: top;
                      height: 3.2rem;
                      text-transform: uppercase;
                      font-weight: 700;
                      border-radius: 0;
                      padding: 10px 2rem;
                      font-size: .75rem;
                    }
                  </style>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="porto-inner-container">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="porto-carousel brand-carousel owl-carousel mb-0 py-5 nav-pos-outside nav-style-4 show-nav-hover">
            <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: true,
                dots: false,
                loop: false,
                responsive: {
                  0: {
                    items: 2,
                  },
                  640: {
                    items: 2,
                  },
                  768: {
                    items: 3,
                  },
                  992: {
                    items: 4,
                  },
                  1200: {
                    items: 6,
                  },
                },
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
