<div class="banner-container my-banner">
  <div id="banner-wrapper" class="">
    <div class="porto-block">
      <style>
        .cms-index-index .page-main {
          max-width: 100% !important;
          padding: 0;
          background: #f4f4f4;
        }
        .bg-white {
          background-color: #fff!important;
        }
        .porto-u-heading .porto-u-main-heading h1,
        .porto-u-heading .porto-u-main-heading h2,
        .porto-u-heading .porto-u-main-heading h3,
        .porto-u-heading .porto-u-main-heading h4,
        .porto-u-heading .porto-u-main-heading h5,
        .porto-u-heading .porto-u-main-heading h6 {
          margin: 0;
          padding: 0;
          line-height: normal;
        }
        .ml-n-2 {
          margin-left: -.2rem;
        }
        .banner-container {
          position: relative;
          z-index: 0;
          margin: 0;
        }
        .banner-container .sale-wrapper strong {
          position: relative;
          margin-left: 0.5rem;
          padding-right: 0.25rem;
          font-weight: 700;
          color: #fff;
        }
        .porto-ibanner {
          margin: 0;
        }
        .porto-ibanner-layer {
          position: absolute;
          z-index: 10;
        }
        .banner-container sup {
          font-size: 33%;
          font-weight: 700;
          color: #222529;
          top: -1.3em;
          margin-right: 16px;
          letter-spacing: -.03em;
        }
        .banner-container .sale-wrapper strong {
          position: relative;
          margin-left: .5rem;
          padding-right: .25rem;
          font-weight: 700;
          color: #fff;
        }
        .sale-text::before, .banner-container .sale-wrapper strong::before {
          content: '';
          position: absolute;
          top: 9px;
          left: -7px;
          right: 0;
          bottom: 11px;
          width: 2.34722em;
          background-color: #222529;
          z-index: -1;
          transform: rotate(-2deg);
        }
        .custom-font, .custom-font h2 {
          font-family: Segoe Script;
        }
        .custom-text-1 {
          font-size: 2.5em;
          right: .4rem;
          bottom: 0;
        }
        .custom-text-2 {
          color: #ee8379;
          font-size: 1.625em;
          right: 1.2rem;
          bottom: .7rem;
          transform: rotate(-30deg);
        }
        .custom-text-3 {
          font-size: 1.601875em;
          right: 1.68552em;
          bottom: -.6rem;
        }
        .custom-text-1, .custom-text-3 {
          color: #4dae65;
          transform: rotate(-30deg);
        }
        .intro-carousel .owl-nav {
          left: 50%;
          transform: translateX(-50%);
        }
        .owl-carousel.show-nav-middle .owl-nav .owl-next, .owl-carousel.show-nav-middle .owl-nav .owl-prev {
          width: 40px;
          height: 80px;
          font-size: 26px;
          color: #4dae65;
          background-color: #fff;
          border: 1px solid #e9e9e9;
          box-shadow: 0 0 100px 75px rgb(255 255 255 / 60%);
          transition: background-color .3s,color .3s;
        }
        .owl-carousel.show-nav-middle .owl-nav button:hover {
          background-color: #4dae65;
          border-color: #4dae65;
          color: #fff;
        }
        .owl-carousel.show-nav-middle .owl-nav .owl-prev {
          left: -45px;
        }
        .owl-carousel.show-nav-middle .owl-nav .owl-next {
          right: -45px;
        }
      </style>
      <div class="vc_row wpb_row row vc_row-has-fill" style="background-color: #f4f4f4;">
        <div class="vc_column_container col-md-12">
          <div class="wpb_wrapper vc_column-inner">
            <div id="banner-slider-demo-33" class="porto-carousel home-banner-slider owl-carousel show-nav-middle intro-carousel">
              <div class="porto-ibanner" style="background: #d9e2e1; min-height: 400px;">
                <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/intro-1.jpg&quot;}}" />
                <div class="porto-ibanner-desc no-padding d-flex">
                  <div class="porto-ibanner-layer" style="left: 20.7%; top: 50%; transform: translateY(-50%);">
                    <div class="porto-u-heading" style="text-align: left;">
                      <div class="porto-u-main-heading"><h2 style="color: #777777; margin-bottom: 8px; font-size: 1.16875em; letter-spacing: 1.87px;">Exclusive Product New Arrival</h2></div>
                    </div>
                    <div class="porto-u-heading pr-5 mr-2 ml-n-2" style="text-align: left;">
                      <div class="porto-u-main-heading"><h2 style="font-weight: 700; margin-bottom: 13px; font-size: 3.25em; line-height: 1; letter-spacing: 2.6px;">Organic Coffee</h2></div>
                    </div>
                    <div class="porto-u-heading position-relative" style="text-align: left;">
                      <div class="porto-u-main-heading"><h2 style="font-weight: 500; color: #222529; margin-bottom: 40px; font-size: 2.489375em; line-height: 1; letter-spacing: 4.8px;">SPECIAL BLEND</h2></div>
                      <div class="porto-u-sub-heading" style=""><h5 class="ls-0 position-absolute custom-font custom-text-1">Fresh!</h5></div>
                    </div>
                    <div class="porto-u-heading" style="text-align: right;">
                      <div class="porto-u-main-heading"><h2 style="font-weight: 300; color: #777777; margin-bottom: 5px; font-size: 1.3125em; letter-spacing: 4.1px;">BREAKFAST PRODUCTS ON SALE</h2></div>
                    </div>
                    <div class="porto-u-heading sale-wrapper pr-2 mb-2 pb-1" style="text-align: right;">
                      <div class="porto-u-main-heading">
                        <h2 style="font-weight: 700; font-size: 4.5em; line-height: 108px; letter-spacing: 1px;"><sup>UP TO</sup><strong>50%</strong></h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="porto-ibanner" style="min-height: 400px;">
                <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/intro-2.jpg&quot;}}" />
                <div class="porto-ibanner-desc no-padding d-flex">
                  <div class="porto-ibanner-layer" style="right: 22.3%; top: 50%; transform: translateY(-50%);">
                    <div class="porto-u-heading" style="text-align: left;">
                      <div class="porto-u-main-heading"><h2 style="color: #777777; margin-bottom: 8px; font-size: 1.16875em; letter-spacing: 1.87px;">Exclusive Product New Arrival</h2></div>
                    </div>
                    <div class="porto-u-heading pr-5 mr-5 ml-n-1" style="text-align: left;">
                      <div class="porto-u-main-heading"><h2 style="font-weight: 700; margin-bottom: 13px; font-size: 3.25em; line-height: 1; letter-spacing: 2.6px;">Fit Low Carb</h2></div>
                    </div>
                    <div class="porto-u-heading position-relative" style="text-align: left;">
                      <div class="porto-u-main-heading"><h2 style="font-weight: 500; color: #222529; margin-bottom: 42px; font-size: 2.489375em; line-height: 1; letter-spacing: 4.8px;">CANDY BAR</h2></div>
                      <div class="porto-u-sub-heading" style=""><h5 class="ls-0 position-absolute custom-font custom-text-2">Sugar-Free</h5></div>
                    </div>
                    <div class="porto-u-heading mr-n-4" style="text-align: right;">
                      <div class="porto-u-main-heading"><h2 style="font-weight: 300; color: #777777; margin-bottom: 2px; font-size: 1.3125em; letter-spacing: 4.1px;">BREAKFAST PRODUCTS ON SALE</h2></div>
                    </div>
                    <div class="porto-u-heading sale-wrapper pr-2" style="text-align: right;">
                      <div class="porto-u-main-heading">
                        <h2 style="font-weight: 700; font-size: 4.5em; line-height: 108px; letter-spacing: 1px;"><sup>UP TO</sup><strong>70%</strong></h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <script type="text/javascript">
              require(["jquery", "owl.carousel/owl.carousel.min"], function ($) {
                var banner_owl = $("#banner-slider-demo-33");
                banner_owl.owlCarousel({
                  items: 1,
                  autoplay: false,
                  autoplayTimeout: 5000,
                  autoplayHoverPause: true,
                  dots: false,
                  nav: true,
                  navRewind: true,
                  animateIn: "fadeIn",
                  animateOut: "fadeOut",
                  loop: true,
                  lazyLoad: true
                });
                $(window).on('load',function(){
                  $(".intro-carousel .owl-nav").width($(".container").width() - 50);
                })
                banner_owl.on('resized.owl.carousel', function(event) {
                  $(".intro-carousel .owl-nav").width($(".container").width() - 50);
                })
              });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container" style="padding-top: 20px;">
  <div class="vc_row wpb_row row feature-container" style="margin-bottom: 45px; background-color: #ffffff; border-radius: 7px;">
    <div class="vc_column_container col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-carousel owl-carousel">
          <div class="porto-sicon-box mb-0 style_2 default-icon" style="padding-top: 25px; padding-left: 27px;">
            <div class="porto-sicon-default">
              <div class="porto-just-icon-wrapper porto-icon none" style="color: #4dae65; font-size: 35px;"><i class="porto-icon-shipping"></i></div>
            </div>
            <div class="porto-sicon-header">
              <h4 class="porto-sicon-title" style="font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: -0.025em;">FREE SHIPPING &amp; RETURN</h4>
              <p style="font-weight: 300; font-size: 13px; line-height: 22px; letter-spacing: 0.01em;">Free shipping on all orders over $99.</p>
            </div>
          </div>
          <div class="porto-sicon-box mb-0 style_2 default-icon" style="padding-top: 25px; padding-left: 64px;">
            <div class="porto-sicon-default">
              <div class="porto-just-icon-wrapper porto-icon none" style="color: #4dae65; font-size: 37px;"><i class="porto-icon-money"></i></div>
            </div>
            <div class="porto-sicon-header">
              <h4 class="porto-sicon-title" style="font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: -0.025em;">MONEY BACK GUARANTEE</h4>
              <p style="font-weight: 300; font-size: 13px; line-height: 22px; letter-spacing: 0.01em;">100% money back guarantee</p>
            </div>
          </div>
          <div class="porto-sicon-box mb-0 style_2 default-icon" style="padding-top: 25px; padding-left: 64px;">
            <div class="porto-sicon-default">
              <div class="porto-just-icon-wrapper porto-icon none" style="color: #4dae65; font-size: 37px;"><i class="porto-icon-support"></i></div>
            </div>
            <div class="porto-sicon-header">
              <h4 class="porto-sicon-title" style="font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: -0.025em;">ONLINE SUPPORT 24/7</h4>
              <p style="font-weight: 300; font-size: 13px; line-height: 22px; letter-spacing: 0.01em;">Lorem ipsum dolor sit amet.</p>
            </div>
          </div>
          <div class="porto-sicon-box mb-0 style_2 default-icon" style="padding-top: 25px; padding-left: 64px;">
            <div class="porto-sicon-default">
              <div class="porto-just-icon-wrapper porto-icon none" style="color: #4dae65; font-size: 37px;"><i class="porto-icon-secure-payment"></i></div>
            </div>
            <div class="porto-sicon-header">
              <h4 class="porto-sicon-title" style="font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: -0.025em;">SECURE PAYMENT</h4>
              <p style="font-weight: 300; font-size: 13px; line-height: 22px; letter-spacing: 0.01em;">Lorem ipsum dolor sit amet.</p>
            </div>
          </div>
        </div>
        <script type="text/javascript">
          require([
            'jquery',
            'owl.carousel/owl.carousel.min'
          ], function ($) {
            $(".feature-container .owl-carousel").owlCarousel({
              autoplay: false,
              autoplayTimeout: 5000,
              autoplayHoverPause: true,
              loop: false,
              navRewind: true,
              lazyLoad:true,
              margin: 0,
              nav: false,
              dots: false,
              responsive: {
                0: {
                  items:1
                },
                640: {
                  items:2
                },
                768: {
                  items:2
                },
                992: {
                  items:4
                },
                1200: {
                  items:4
                }
              }
            });
          });
        </script>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row" style="margin-bottom: 20px;">
    <div class="vc_column_container col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-u-heading"style="text-align: left;">
          <div class="porto-u-main-heading"><h2 style="font-weight: 700; margin-bottom: 2px; font-size: 22px; line-height: 22px;">Popular Departments</h2></div>
          <div class="porto-u-sub-heading" style="line-height: 22px; letter-spacing: -0.03em;">Products From These Categories Often Buy</div>
        </div>
        <style>
          ul.products .product-col {
            margin-bottom: 1.4286em;
          }
          ul.products li.product-category .thumb-info-wrapper:after {
            background-color: rgba(27, 27, 23, 0);
          }
          ul.products li.product-category:hover .thumb-info-wrapper:after {
            background-color: rgba(27, 27, 23, 0.15);
          }
          .thumb-info .thumb-info-wrapper {
            border-radius: 4px;
          }
          .category-container .products .sub-title {
            text-transform: none;
            font-size: 18px;
            letter-spacing: -.025em!important;
            line-height: 26px;
            font-weight: 600!important;
          }
          .category-container .products .thumb-info-type {
            font-size: 13px;
            letter-spacing: -.02em;
            line-height: 22px;
            text-transform: none;
          }
          .porto-u-heading {
            margin-bottom: 17px;
          }
          .products-slider.owl-carousel .owl-stage-outer {
            padding-top: 10px;
            margin-top: -10px;
          }
        </style>
        <div class="category-slider porto-products wpb_content_element category-container mb-0">
          <div class="slider-wrapper">
            <ul class="products products-container products-slider owl-carousel category-pos-middle category-text-left category-color-dark show-nav-middle">
              <li class="product-category product-col">
                <a href="#">
                  <div class="thumb-info align-center">
                    <div class="thumb-info-wrapper tf-none">
                      <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/cat-3.png&quot;}}" />
                    </div>
                    <div class="thumb-info-wrap">
                      <div class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Cooking</h3>
                        <span class="thumb-info-type"><mark class="count">4</mark> Products </span>
                      </div>
                    </div>
                  </div>
                </a>
              </li>
              <li class="product-category product-col">
                <a href="#">
                  <div class="thumb-info align-center">
                    <div class="thumb-info-wrapper tf-none">
                      <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/cat-2.png&quot;}}" />
                    </div>
                    <div class="thumb-info-wrap">
                      <div class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Fruits</h3>
                        <span class="thumb-info-type"><mark class="count">10</mark> Products </span>
                      </div>
                    </div>
                  </div>
                </a>
              </li>
              <li class="product-category product-col">
                <a href="#">
                  <div class="thumb-info align-center">
                    <div class="thumb-info-wrapper tf-none">
                      <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/cat-1.png&quot;}}" />
                    </div>
                    <div class="thumb-info-wrap">
                      <div class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Vegetables</h3>
                        <span class="thumb-info-type"><mark class="count">1</mark> Products </span>
                      </div>
                    </div>
                  </div>
                </a>
              </li>
              <li class="product-category product-col">
                <a href="#">
                  <div class="thumb-info align-center">
                    <div class="thumb-info-wrapper tf-none">
                      <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/cat-4.png&quot;}}" />
                    </div>
                    <div class="thumb-info-wrap">
                      <div class="thumb-info-title">
                        <h3 class="sub-title thumb-info-inner">Breakfast</h3>
                        <span class="thumb-info-type"><mark class="count">8</mark> Products </span>
                      </div>
                    </div>
                  </div>
                </a>
              </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: false,
                  navRewind: true,
                  lazyLoad:true,
                  margin: 0,
                  nav: false,
                  dots: false,
                  responsive: {
                    0: {
                      items:1
                    },
                    640: {
                      items:2
                    },
                    768: {
                      items:2
                    },
                    992: {
                      items:3
                    },
                    1200: {
                      items:4
                    }
                  }
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row">
    <div class="vc_column_container col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-u-heading" style="text-align: left;">
          <div class="porto-u-main-heading"><h2 style="font-weight: 700; margin-bottom: 2px; font-size: 22px; line-height: 22px;">Most Popular</h2></div>
          <div class="porto-u-sub-heading" style="line-height: 22px; letter-spacing: -0.03em;">All our new arrivals in a exclusive brand selection</div>
        </div>
        <style>
          .tabs.tabs-simple {
            padding: 30px 32px 27px 32px;
          }
          .product.data.items > .item.title {
            color: #333;
            border-bottom-width: 1px;
            font-size: .8125rem;
            font-weight: 400;
            letter-spacing: -.025em;
            text-transform: capitalize;
            line-height: 1.5;
          }
          .product.data.items > .item.title:hover {
            border-color: #4dae65;
            color: #4dae65;
            border-width: 2px;
          }
          .product.data.items > .item.title > .switch {
            font-size: inherit;
          }
          .product.data.items > .item.title.active {
            color: #4dae65;
            border-color: #4dae65;
            border-width: 2px;
          }
          .tabs.tabs-simple .section-title {
            text-align: left;
          }
          .owl-carousel .owl-nav [class*='owl-'] {
            border-radius: 3px;
          }
          .owl-carousel.show-nav-middle .owl-nav .owl-next, .owl-carousel.show-nav-middle .owl-nav .owl-prev {
            width: 40px;
            height: 80px;
            font-size: 26px;
            color: #4dae65;
            background-color: #fff !important;
            border: 1px solid #e9e9e9;
            box-shadow: 0 0 100px 75px rgb(255 255 255 / 60%);
            transition: background-color .3s,color .3s;
          }
          .owl-carousel.show-nav-middle .owl-nav button:hover {
            background-color: #4dae65 !important;
            border-color: #4dae65 !important;
            color: #fff !important;
          }
          .owl-carousel.show-nav-middle .owl-nav .owl-prev {
            left: -45px;
          }
          .owl-carousel.show-nav-middle .owl-nav .owl-next {
            right: -45px;
          }
          @media(min-width: 1024px){
            .tabs.tabs-simple .section-title {
              margin: 0;
              margin-bottom: -28px;
              padding-top: 3px;
            }
          }
          @media(min-width: 768px){
            .product.data.items {
              text-align: center;
            }
            .product.data.items > .item.title {
              float: left;
              display: inline-block;
              text-decoration: none;
              padding: 7px 24px;
              margin: 0 5px;
              border-radius: 7px;
              color: #222529;
              font-size: 13px;
              font-weight: 600;
              letter-spacing: -.02em;
              line-height: 22px;
              border: 1px solid #e9e9e9;
              transition: border-width .3s,border-color .3s;
            }
            .rtl .product.data.items > .item.title {
              float:right;
            }
            .product.data.items > .item.content {
              border-top: none;
              margin-top: 2.85rem;
            }
          }
          @media(max-width: 767px) {
            .tabs.tabs-simple {
              margin-bottom: 30px;
            }
          }
        </style>
        <div class="tabs tabs-simple bg-white wpb_content_element" style="border-radius: 7px;">
          <div class="product data items" data-mage-init='{"tabs":{"openedState":"active","collapsible":"true"}}'>
            <div class="data item title" aria-labeledby="tab-label-tab1-title" data-role="collapsible" id="tab-label-tab1">
              <a class="data switch" tabindex="-1" data-toggle="switch" href="#tab1" id="tab-label-tab1-title">
                <span>View All</span>
              </a>
            </div>
            <div class="data item content" id="tab1" data-role="content">
              <div id="tab1-products" class="porto-products wpb_content_element">
                <div class="slider-wrapper">
                  {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="tab1_product" extra_class="show-nav-middle nav-pos-outside nav-style-4 dots-style-1" product_count="8" product_type="3" 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 ($) {
                      $("#tab1-products .owl-carousel").owlCarousel({
                        autoplay: true,
                        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:4
                          },
                          1200: {
                            items:6
                          }
                        }
                      });
                    });
                  </script>
                </div>
              </div>
            </div>
            <div class="data item title" aria-labeledby="tab-label-tab2-title" data-role="collapsible" id="tab-label-tab2">
              <a class="data switch" tabindex="-1" data-toggle="switch" href="#tab2" id="tab-label-tab2-title">
                <span>Breakfast</span>
              </a>
            </div>
            <div class="data item content" id="tab2" data-role="content">
              <div id="tab2-products" class="porto-products wpb_content_element">
                <div class="slider-wrapper">
                  {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="tab1_product" extra_class="show-nav-middle nav-pos-outside nav-style-4 dots-style-1" product_count="8" product_type="3" 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 ($) {
                      $("#tab2-products .owl-carousel").owlCarousel({
                        autoplay: true,
                        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:4
                          },
                          1200: {
                            items:6
                          }
                        }
                      });
                    });
                  </script>
                </div>
              </div>
            </div>
            <div class="data item title" aria-labeledby="tab-label-tab3-title" data-role="collapsible" id="tab-label-tab3">
              <a class="data switch" tabindex="-1" data-toggle="switch" href="#tab3" id="tab-label-tab3-title">
                <span>Cooking</span>
              </a>
            </div>
            <div class="data item content" id="tab3" data-role="content">
              <div id="tab3-products" class="porto-products wpb_content_element">
                <div class="slider-wrapper">
                  {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="tab1_product" extra_class="show-nav-middle nav-pos-outside nav-style-4 dots-style-1" product_count="8" product_type="3" 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 ($) {
                      $("#tab3-products .owl-carousel").owlCarousel({
                        autoplay: true,
                        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:4
                          },
                          1200: {
                            items:6
                          }
                        }
                      });
                    });
                  </script>
                </div>
              </div>
            </div>
            <div class="data item title" aria-labeledby="tab-label-tab4-title" data-role="collapsible" id="tab-label-tab4">
              <a class="data switch" tabindex="-1" data-toggle="switch" href="#tab4" id="tab-label-tab4-title">
                <span>Frozen</span>
              </a>
            </div>
            <div class="data item content" id="tab4" data-role="content">
              <div id="tab4-products" class="porto-products wpb_content_element">
                <div class="slider-wrapper">
                  {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="tab1_product" extra_class="show-nav-middle nav-pos-outside nav-style-4 dots-style-1" product_count="8" product_type="3" 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 ($) {
                      $("#tab4-products .owl-carousel").owlCarousel({
                        autoplay: true,
                        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:4
                          },
                          1200: {
                            items:6
                          }
                        }
                      });
                    });
                  </script>
                </div>
              </div>
            </div>
            <div class="data item title" aria-labeledby="tab-label-tab5-title" data-role="collapsible" id="tab-label-tab5">
              <a class="data switch" tabindex="-1" data-toggle="switch" href="#tab5" id="tab-label-tab5-title">
                <span>Vegetables</span>
              </a>
            </div>
            <div class="data item content" id="tab5" data-role="content">
              <div id="tab5-products" class="porto-products wpb_content_element">
                <div class="slider-wrapper">
                  {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="tab1_product" extra_class="show-nav-middle nav-pos-outside nav-style-4 dots-style-1" product_count="8" product_type="3" 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 ($) {
                      $("#tab5-products .owl-carousel").owlCarousel({
                        autoplay: true,
                        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:4
                          },
                          1200: {
                            items:6
                          }
                        }
                      });
                    });
                  </script>
                </div>
              </div>
            </div>
            <div class="data item title" aria-labeledby="tab-label-tab6-title" data-role="collapsible" id="tab-label-tab6">
              <a class="data switch" tabindex="-1" data-toggle="switch" href="#tab6" id="tab-label-tab6-title">
                <span>Vegetables</span>
              </a>
            </div>
            <div class="data item content" id="tab6" data-role="content">
              <div id="tab6-products" class="porto-products wpb_content_element">
                <div class="slider-wrapper">
                  {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="tab1_product" extra_class="show-nav-middle nav-pos-outside nav-style-4 dots-style-1" product_count="8" product_type="3" 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 ($) {
                      $("#tab6-products .owl-carousel").owlCarousel({
                        autoplay: true,
                        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:4
                          },
                          1200: {
                            items:6
                          }
                        }
                      });
                    });
                  </script>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row" style="animation-delay: 200ms; margin-bottom: 5px;">
    <div class="vc_column_container col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-u-heading" style="text-align: left;">
          <div class="porto-u-main-heading"><h2 style="font-weight: 700; margin-bottom: 2px; font-size: 22px; line-height: 22px;">This Week's Specials</h2></div>
          <div class="porto-u-sub-heading" style="line-height: 22px; letter-spacing: -0.03em;">All our new arrivals in a exclusive brand selection</div>
        </div>
        <style>
          .special-products {
            padding: 40px 33px 23px;
            border: 2px solid #ee8379;
          }
        </style>
        <div id="sale-products" class="porto-products wpb_content_element special-products bg-white" style="border-radius: 7px;">
          <div class="slider-wrapper">
            {{block class="Smartwave\Filterproducts\Block\Home\SaleList" name="featured_product" extra_class="show-nav-middle nav-pos-outside nav-style-4 dots-style-1" product_count="8" 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 ($) {
                $("#sale-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:3
                    },
                    992: {
                      items:4
                    },
                    1200: {
                      items:6
                    }
                  }
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row" style="margin-bottom: 30px;">
    <div class="vc_column_container col-md-8 col-xl-8 col-lg-8">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-ibanner mb-4 mb-md-0 rounded-top rounded-bottom" style="background: #d9e2e1; min-height: 200px;border-radius: 7px;">
          <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/banner-1.png&quot;}}" />
          <div class="porto-ibanner-desc no-padding d-flex">
            <div class="porto-ibanner-layer" style="right: 11%; top: 50%; transform: translateY(-50%);">
              <div class="porto-u-heading mb-0">
                <div class="porto-u-main-heading"><h2 style="color: #777777; margin-bottom: 5px; font-size: 0.875em; letter-spacing: 1.87px;">Exclusive Product New Arrival</h2></div>
              </div>
              <div class="porto-u-heading pr-5 mr-2 ml-n-2 mb-0">
                <div class="porto-u-main-heading"><h2 style="font-weight: 700; margin-bottom: 13px; font-size: 2.509375em; line-height: 1; letter-spacing: 0.05em;">Organic Coffee</h2></div>
              </div>
              <div class="porto-u-heading position-relative mb-0">
                <div class="porto-u-main-heading"><h2 style="font-weight: 500; color: #222529; margin-bottom: 5px; font-size: 1.875em; line-height: 1; letter-spacing: 4px;">SPECIAL BLEND</h2></div>
                <div class="porto-u-sub-heading" style="">
                  <h5 class="ls-0 position-absolute custom-font custom-text-3">Fresh!</h5>
                  <p></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vc_column_container col-md-4 col-xl-4 col-lg-4">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-ibanner rounded-top rounded-bottom" style="background: #f3cdba; min-height: 200px;border-radius: 7px;">
          <img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/33/banner-2.png&quot;}}" />
          <div class="porto-ibanner-desc no-padding d-flex">
            <div class="porto-ibanner-layer" style="right: 8.4%; top: 50%; transform: translateY(-50%);">
              <div class="porto-u-heading mb-0">
                <div class="porto-u-main-heading"><h2 style="color: rgba(255, 255, 255, 0.7); margin-bottom: 5px; font-size: 14px; letter-spacing: 1.27px;">Stay Healthy</h2></div>
              </div>
              <div class="porto-u-heading ml-n-1 mb-0">
                <div class="porto-u-main-heading"><h2 style="font-weight: 700; color: #ffffff; margin-bottom: 7px; font-size: 38.05px; line-height: 1; letter-spacing: 0.05em;">Low Carb</h2></div>
              </div>
              <div class="porto-u-heading mb-0">
                <div class="porto-u-main-heading"><h2 style="font-weight: 500; color: #ffffff; margin-bottom: 20px; font-size: 24px; line-height: 1; letter-spacing: 3px;">STRAWBERRY</h2></div>
              </div>
              <div class="porto-u-heading mb-0 custom-font">
                <div class="porto-u-main-heading"><h2 style="font-weight: 400; color: #ffffff; font-size: 24.29px; line-height: 1;">Sugar-Free</h2></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row" style="margin-bottom: 32px;">
    <div class="vc_column_container col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-u-heading">
          <div class="porto-u-main-heading">
            <h2 style="font-weight: 700; margin-bottom: 2px; font-size: 22px; line-height: 22px;">Special Offers</h2>
          </div>
          <div class="porto-u-sub-heading" style="line-height: 22px; letter-spacing: -0.03em;">All our new arrivals in a exclusive brand selection</div>
        </div>
        <div class="vc_row wpb_row vc_inner row">
          <div class="vc_column_container col-md-4" >
            <div class="wpb_wrapper vc_column-inner">
              <style>
                .offer-product {
                  padding: 45px 40px;
                  border: 2px solid #4dae65;
                }
                .offer-product .product-item-info:hover .product-item-photo {
                  box-shadow: none;
                }
                .offer-product .product-item .weltpixel-quickview.weltpixel_quickview_button_v2 {
                  display: none;
                }
                .offer-product .product-item-info .product-item-details .product-item-actions .tocart {
                  padding-left: 45px;
                  height: 56px;
                  line-height: 56px;
                  padding-right: 45px;
                  font-size: 14px;
                  border-radius: 7px;
                }
                .offer-product .product-item-actions .actions-secondary.action {
                  height: 56px;
                  line-height: 56px;
                }
                .offer-product .product-item-info.type1 .product-item-inner {
                  margin-top: 46px;
                }
                .offer-product .add_to_cart_button {
                  padding-left: 45px;
                  height: 56px;
                  line-height: 56px;
                  padding-right: 45px;
                  font-size: 14px;
                  border-radius: 7px;
                }
                .offer-product .product-item .tocart::before {
                  font-size: 24px!important;
                  font-weight: 300!important;
                }
              </style>
              <div class="porto-products wpb_content_element offer-product mb-0 bg-white custom-deal mb-5 mb-md-0" style="border-radius: 7px;">
                {{block class="Smartwave\Filterproducts\Block\Home\SaleList" name="featured_product" product_type="1" extra_class="nav-center-images-only nav-style-4" product_count="1" column_count="1" aspect_ratio="0" image_width="450" image_height="450" template="grid.phtml"}}
              </div>
            </div>
          </div>
          <div class="vc_column_container col-md-8">
            <div class="wpb_wrapper vc_column-inner">
              <div class="porto-products wpb_content_element bg-white mb-0 px-4 pt-4 rounded" style="border-radius: 7px;">
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_type="3" extra_class="nav-center-images-only nav-style-4" product_count="8" column_count="4" aspect_ratio="0" image_width="250" image_height="250" template="grid.phtml"}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row" style="margin-bottom: 25px;">
    <div class="vc_column_container col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-u-heading">
          <div class="porto-u-main-heading"><h2 style="font-weight: 700; margin-bottom: 2px; font-size: 22px; line-height: 22px;">Featured Brands</h2></div>
          <div class="porto-u-sub-heading" style="line-height: 22px; letter-spacing: -0.03em;">All our new arrivals in a exclusive brand selection</div>
        </div>
        <div class="porto-ultimate-content-box-container px-4 bg-white rounded" style="border-radius: 7px;">
          <div class="porto-ultimate-content-box">
            <style>
              .brand-carousel {
                padding: 4rem 0;
              }
            </style>
            <div class="porto-carousel brand-carousel owl-carousel show-nav-middle">
              <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_brand1.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 class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand5.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: true,
                  stagePadding: 80,
                  responsive: {
                    0: {
                      items: 2,
                    },
                    640: {
                      items: 2,
                    },
                    768: {
                      items: 3,
                    },
                    992: {
                      items: 4,
                    },
                    1200: {
                      items: 7
                    },
                  },
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row" style="margin-bottom: 20px;">
    <div class="vc_column_container col-md-12">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-u-heading">
          <div class="porto-u-main-heading">
            <h2 style="font-weight: 700; margin-bottom: 2px; font-size: 22px; line-height: 22px;">Recipes For This Week</h2>
          </div>
          <div class="porto-u-sub-heading" style="line-height: 22px; letter-spacing: -0.03em;">All our new arrivals in a exclusive brand selection</div>
        </div>
        <style>
          .blog-container {
            padding: 40px 40px 17px;
          }
          .porto-recent-posts h4 {
            font-size: 20px;
            font-family: Poppins;
            font-weight: 600;
            margin-top: 2px;
            margin-bottom: 2px!important;
          }
          .porto-recent-posts .post-item .post-excerpt {
            font-size: 1em;
            letter-spacing: -.025em;
            color: #777;
          }
          .porto-recent-posts .post-item .read-more,.porto-recent-posts .post-item .post-date {display: none;}
        </style>
        <div class="porto-recent-posts wpb_content_element bg-white blog-container rounded" style="border-radius: 7px;">
          <div class="row">
            <div class="post-carousel porto-carousel owl-carousel">
              {{widget type="Magefan\Blog\Block\Widget\Recent" number_of_posts="4" custom_template="recent_home.phtml"}}
            </div>
            <script type="text/javascript">
              require([
                'jquery',
                'owl.carousel/owl.carousel.min'
              ], function ($) {
                $(".porto-recent-posts .owl-carousel").owlCarousel({
                  autoplay: false,
                  autoplayTimeout: 5000,
                  autoplayHoverPause: true,
                  loop: false,
                  navRewind: true,
                  lazyLoad:true,
                  margin: 0,
                  nav: false,
                  dots: false,
                  responsive: {
                    0: {
                      items:1
                    },
                    640: {
                      items:1
                    },
                    768: {
                      items:1
                    },
                    992: {
                      items:2
                    },
                    1200: {
                      items:2
                    }
                  }
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="vc_row wpb_row row no-padding" style="margin-bottom: 10px;">
    <div class="vc_column_container col-md-12 col-xl-4 col-lg-6">
      <div class="wpb_wrapper vc_column-inner">
        <div class="porto-sicon-box mb-3 mb-lg-0 mx-2 mx-xl-0 flex-column flex-sm-row newsletter-msg style_2 default-icon">
          <div class="porto-sicon-default">
            <div class="porto-just-icon-wrapper porto-icon none" style="color: #222529; font-size: 50px;"><i class="porto-icon-envolope"></i></div>
          </div>
          <div class="porto-sicon-header">
            <h4 class="porto-sicon-title" style="font-weight: 700; font-size: 18px; line-height: 1;">Subscribe To Our Newsletter</h4>
            <p style="font-size: 13px; line-height: 20px; letter-spacing: 0.005em; color: #90969a;">Get all the latest information on Events, Sales and Offers.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="vc_column_container col-md-12 col-xl-8 col-lg-6">
      <div class="wpb_wrapper vc_column-inner">
        <style>
          .single-subscribe .newsletter .input-text {
            display: block;
            flex: 1;
            width: calc(100% - 215px - 17px);
            max-width: 729px;
            margin-right: 17px;
          }
          .single-subscribe .newsletter input {
            border-radius: 7px;
            border: 2px solid #bebebe;
            padding: 15px;
            height: 53px;
          }
          .single-subscribe .newsletter .action {
            min-width: 215px;
            height: 53px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -.05em;
            padding: 14px;
            border-radius: 7px;
          }
          @media (max-width: 575px) {
            .single-subscribe .newsletter .action {
              width: 50%;
              min-width: 1px;
            }
          }
        </style>
        {{block class="Magento\Newsletter\Block\Subscribe" name="home.newsletter" template="subscribe_form.phtml"}}
      </div>
    </div>
  </div>
</div>