<div class="row home-slider no-padding" style="background-color: #e2e2e0;">
  <style>
.columns .column.main {
    padding-bottom: 0;
}
    .home-slider .porto-ibanner-content {
      display: flex;
      align-items: center;
      text-align: justify;
      height: 100%;
      font-size: 1em;
      padding: 0 1rem;
    }
    .home-slider .porto-ibanner-content > div {
      width: 100%;
    }
    .home-slider .porto-ibanner-content h2 {
      font-size: 4.8571em;
      letter-spacing: 0.01em;
      margin-bottom: 1rem;
    }
    .porto-ibanner .porto-ibanner-title,
    .porto-ibanner p {
      letter-spacing: normal;
      padding: 0;
      margin: 0;
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      text-decoration: inherit;
      font-style: inherit;
      color: inherit;
    }
    .home-banners .porto-ibanner-content a,
    .home-slider .porto-ibanner-content a {
      color: #666;
      font-size: 1.5714em;
      letter-spacing: 0.01em;
      text-decoration: none;
      white-space: nowrap;
    }
    .home-banners .porto-ibanner-content a i:first-child,
    .home-slider .porto-ibanner-content a i:first-child {
      display: inline-block;
      border-bottom: 1px solid;
      line-height: 1.4;
    }
    .home-banners .porto-ibanner-content a .porto-icon-right-open-big,
    .home-slider .porto-ibanner-content a .porto-icon-right-open-big {
      font-size: 0.7em;
      vertical-align: middle;
    }
    .home-slider .owl-carousel .owl-nav {
      width: 96%;
      left: 2%;
    }
    @media (max-width: 767px) {
      .home-banners .porto-ibanner-content,
      .home-slider .porto-ibanner-content {
        font-size: 9px;
      }
    }
    @media (min-width: 1200px) {
      .home-slider .porto-ibanner img {
        width: 1200px;
        min-width: 0;
        margin: 0 auto;
      }
    }
  </style>
  <div class="vc_column_container col-md-12">
    <div class="wpb_wrapper vc_column-inner">
      <div id="banner-slider-demo-2" class="porto-carousel owl-carousel porto-standable-carousel mb-0 nav-pos-inside nav-style-4">
        <div class="porto-ibanner mb-0" style="">
          <img src='{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_slide1.jpg"}}' />
          <div class="porto-ibanner-desc">
            <div class="porto-ibanner-content" style="">
              <div class="container appear-animation" data-appear-animation="fadeInRight" data-appear-animation-delay="400" style="animation-delay: 400ms;">
                <h2 class="custom-font1 text-color-primary">Discover our Arrivals!</h2>
                <p>
                  <a href="#"><i>View our Dresses</i><i class="porto-icon-right-open-big ml-2"></i></a>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="porto-ibanner mb-0" style="">
          <img src='{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_slide2.jpg"}}' />
          <div class="porto-ibanner-desc">
            <div class="porto-ibanner-content" style="">
              <div class="container appear-animation" data-appear-animation="fadeInLeft" data-appear-animation-delay="400" style="animation-delay: 400ms;">
                <div class="row no-padding">
                  <div class="col-6 offset-6 pl-3 pl-lg-5">
                    <h2 class="custom-font1 text-color-primary">Trendy Collections!</h2>
                    <p>
                      <a href="#"><i>View our Specials</i><i class="porto-icon-right-open-big ml-2"></i></a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        require(["jquery", "owl.carousel/owl.carousel.min"], function ($) {
          $("#banner-slider-demo-2").owlCarousel({
            items: 1,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: false,
            navRewind: true,
            animateIn: "fadeIn",
            animateOut: "fadeOut",
            loop: true,
            nav: true,
          });
        });
      </script>
    </div>
  </div>
</div>
<div class="pb-3 section porto-inner-container">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <h2 class="vc_custom_heading mb-1 text-uppercase" style="font-size: 30px; line-height: 1; text-align: center; font-weight: 700;">
            Welcome to Little Porto’s World
          </h2>
          <p style="font-size: 28px; color: rgb(102, 102, 102); line-height: 1.2; text-align: center;" class="vc_custom_heading m-b-lg custom-font1">
            Enjoy the exceptional quality in all our products
          </p>
          <style>
            .section {
              margin-top: 30px;
              padding: 50px 0;
            }
            .home-banners .porto-ibanner-content {
              font-size: 14px;
            }
            .home-banners .porto-ibanner-title,
            .home-banners .porto-ibanner-content h3,
            .home-banners .porto-ibanner-content h4 {
              text-transform: uppercase;
              line-height: 1;
              font-size: 1.4285em;
              letter-spacing: -0.025em;
            }
            .home-banners .porto-ibanner-title {
              font-weight: 600;
              margin-bottom: 0.25em;
            }
            .home-banners .porto-ibanner-content a {
              font-size: 1em;
            }
            .home-banners .porto-ibanner-desc {
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: space-between;
              padding: 13% 15px;
            }
            .home-banner1 .porto-ibanner-desc {
              align-items: flex-end;
              justify-content: center;
              text-align: justify;
              padding-right: 9%;
            }
            .home-banner1 .porto-ibanner-desc h3 {
              font-size: 2.9286em;
              margin-bottom: 0;
              line-height: 0.8;
            }
            .home-banner1 .porto-ibanner-desc h4 {
              font-size: 2.1428em;
              margin-bottom: 1.5rem;
            }
            .home-banner1 .porto-ibanner-content a {
              font-size: 1.2143em;
            }
            .home-banner2 .porto-ibanner-desc {
              justify-content: flex-end;
            }
            .home-banner3 .porto-ibanner-title {
              font-weight: 700;
            }
            .home-banner4 .porto-ibanner-desc {
              justify-content: flex-start;
            }
            .home-banner6 .porto-ibanner-title {
              font-size: 2.1426em;
              font-weight: 700;
            }
            .home-banner6 .porto-ibanner-content a {
              font-size: 1.5714em;
            }
          </style>
          <div class="row home-banners m-b-md">
            <div class="col-md-12 col-lg-6">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-ibanner m-b-md home-banner1">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_banner1.jpg"}}" />
                  <div class="porto-ibanner-desc">
                    <div class="porto-ibanner-content">
                      <h3 class="custom-font1">Discounts</h3>
                      <h4 class="text-color-dark">up to 70%</h4>
                      <p>
                        <a href="#"><i>View our Deals</i><i class="porto-icon-right-open-big ml-2"></i></a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-3">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-ibanner m-b-md home-banner2">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_banner2.jpg"}}" />
                  <div class="porto-ibanner-desc">
                    <h2 class="porto-ibanner-title" style="color: #222529;">summer classics</h2>
                    <div class="porto-ibanner-content">
                      <a href="#"><i>View our Classics</i><i class="porto-icon-right-open-big ml-2"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-3">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-ibanner m-b-md home-banner3">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_banner3.jpg"}}" />
                  <div class="porto-ibanner-desc">
                    <h2 class="porto-ibanner-title" style="color: #222529;">mother &amp; daughter</h2>
                    <div class="porto-ibanner-content">
                      <a href="#"><i>View our Outfits</i><i class="porto-icon-right-open-big ml-2"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-3">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-ibanner m-b-md home-banner4">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_banner4.jpg"}}" />
                  <div class="porto-ibanner-desc">
                    <h2 class="porto-ibanner-title" style="color: #222529;">babies outfits</h2>
                    <div class="porto-ibanner-content">
                      <a href="#"><i>View our Outfits</i><i class="porto-icon-right-open-big ml-2"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="vc_column_container col-md-6 col-lg-3">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-ibanner m-b-md home-banner5">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_banner5.jpg"}}" />
                  <div class="porto-ibanner-desc">
                    <h2 class="porto-ibanner-title" style="color: #222529;">babies dresses</h2>
                    <div class="porto-ibanner-content">
                      <a href="#"><i>View our Dresses</i><i class="porto-icon-right-open-big ml-2"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12 col-lg-6">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-ibanner m-b-md home-banner6">
                  <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_home_banner6.jpg"}}" />
                  <div class="porto-ibanner-desc">
                    <h2 class="porto-ibanner-title" style="color: #222529;">shoes for babies</h2>
                    <div class="porto-ibanner-content">
                      <a href="#"><i>View our Deals</i><i class="porto-icon-right-open-big ml-2"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <style>
            .home-features .porto-sicon-box {
              padding: 10px 0;
              margin-bottom: 0;
              justify-content: center;
            }
            .home-features .porto-sicon-title {
              margin: 0;
            }
            .home-features > div:not(:last-child) {
              border-right: 1px solid #e7e7e7;
            }
            @media (max-width: 767px) {
              .home-features > div:not(:last-child) {
                border-bottom: 1px solid #e7e7e7;
                border-right: none;
              }
              .home-features .porto-sicon-box {
                justify-content: flex-start;
                padding-left: 6%;
              }
            }
          </style>
          <div class="row no-padding home-features mb-5">
            <div class="col-md-4">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-sicon-box style_1 default-icon">
                  <div class="porto-sicon-default">
                    <div class="porto-just-icon-wrapper" style="text-align: center;">
                      <div class="porto-icon none" style="color: #222529; font-size: 38px; display: inline-block;"><i class="porto-icon-shipping"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h3 class="porto-sicon-title" style="font-weight: 600; font-size: 14px; line-height: 22px; color: #222529;">FREE SHIPPING &amp; RETURN</h3>
                    <p style="font-weight: 300; font-size: 13px; line-height: 18px; color: #839199;">Free shipping on all orders over $99.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-sicon-box style_1 default-icon">
                  <div class="porto-sicon-default">
                    <div id="porto-icon-54338073160647244cb364" class="porto-just-icon-wrapper" style="text-align: center;">
                      <div class="porto-icon none" style="color: #222529; font-size: 40px; display: inline-block;"><i class="porto-icon-money"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h3 class="porto-sicon-title" style="font-weight: 600; font-size: 14px; line-height: 22px; color: #222529;">MONEY BACK GUARANTEE</h3>
                    <p style="font-weight: 300; font-size: 13px; line-height: 18px; color: #839199;">100% money back guarantee</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-sicon-box style_1 default-icon">
                  <div class="porto-sicon-default">
                    <div class="porto-just-icon-wrapper" style="text-align: center;">
                      <div class="porto-icon none" style="color: #222529; font-size: 40px; display: inline-block;"><i class="porto-icon-support"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h3 class="porto-sicon-title" style="font-weight: 600; font-size: 14px; line-height: 22px; color: #222529;">ONLINE SUPPORT 24/7</h3>
                    <p style="font-weight: 300; font-size: 13px; line-height: 18px; color: #839199;">Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="porto-products">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_type="3" product_count="4" column_count="4" aspect_ratio="0" image_width="350" image_height="350"
            template="grid.phtml"}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row no-padding">
  <div class="col-md-12 col-lg-3 d-flex align-items-center justify-content-center" style="padding-top: 40px; padding-bottom: 40px; background-color: #e2e2e0;">
    <div class="wpb_wrapper vc_column-inner">
      <h4 style="font-size: 54px; line-height: 1; text-align: center; font-weight: 400;" class="vc_custom_heading custom-font1 text-color-primary mb-0">Best Collections</h4>
      <p style="font-size: 16px; color: #666666; line-height: 1; text-align: center;" class="vc_custom_heading mb-0">Selected Products From Famous Brands</p>
    </div>
  </div>
  <div class="col-md-12 col-lg-9">
    <div class="wpb_wrapper vc_column-inner">
      <style>
        .category-slider ul.products .product-col {
          padding-left: 0;
          padding-right: 0;
        }
        ul.products li.product-category .thumb-info-wrapper:after {
          background-color: rgba(27, 27, 23, 0.06);
        }
        ul.products li.product-category:hover .thumb-info-wrapper:after {
          background-color: rgba(27, 27, 23, 0.21);
        }
        ul.products li.product-category .thumb-info .thumb-info-title {
          width: 50%;
          left: 25%;
          background: #fff;
          padding: 1.7em 0;
        }
        ul.products li.product-category .thumb-info h3 {
          color: #222529;
          letter-spacing: 0.35em;
          text-transform: uppercase;
        }
      </style>
      <div class="category-slider porto-products wpb_content_element mb-0 no-padding hide-count">
        <div class="slider-wrapper">
          <ul class="products products-container products-slider owl-carousel category-pos-bottom category-text-center">
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_cat1.jpg"}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Boys</h3>
                      <span class="thumb-info-type"> <mark class="count">8</mark> Products </span>
                    </span>
                  </span>
                </span>
              </a>
            </li>
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_cat2.jpg"}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Babies</h3>
                      <span class="thumb-info-type"> <mark class="count">4</mark> Products </span>
                    </span>
                  </span>
                </span>
              </a>
            </li>
            <li class="product-category product-col">
              <a href="#">
                <span class="thumb-info align-center">
                  <span class="thumb-info-wrapper tf-none">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/22/shop22_cat3.jpg"}}" />
                  </span>
                  <span class="thumb-info-wrap">
                    <span class="thumb-info-title">
                      <h3 class="sub-title thumb-info-inner">Girls</h3>
                      <span class="thumb-info-type"> <mark class="count">5</mark> Products </span>
                    </span>
                  </span>
                </span>
              </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: 1,
                  },
                  768: {
                    items: 2,
                  },
                  992: {
                    items: 3,
                  },
                  1200: {
                    items: 3,
                  },
                },
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="pb-4 section mb-0">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="porto-products wpb_content_element mb-0">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_type="3" product_count="4" column_count="4" aspect_ratio="0" image_width="350" image_height="350"
            template="grid.phtml"}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="padding-top: 30px !important; padding-bottom: 30px; border-top: 1px solid #e7e7e7;">
  <div class="porto-wrap-container container">
    <div class="row">
      <div class="vc_column_container col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="porto-carousel brand-carousel owl-carousel mb-0">
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/21/shop21_brand1.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/21/shop21_brand2.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/21/shop21_brand3.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/21/shop21_brand4.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/21/shop21_brand5.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/21/shop21_brand1.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: false,
                responsive: {
                  0: {
                    items: 2,
                  },
                  640: {
                    items: 2,
                  },
                  768: {
                    items: 3,
                  },
                  992: {
                    items: 4,
                  },
                  1200: {
                    items: 5,
                  },
                },
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
