<style>
  .columns .column.main {
    padding-bottom: 0;
  }
  .section {
    margin-top: 30px;
    padding: 50px 0;
  }
  .home-banner h1, .home-banner h2, .home-banner h3 {
    letter-spacing: -.02em;
  }
  .h-100>.porto-ultimate-content-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .vc_custom_heading>small {
    font-size: 50%!important;
    font-weight: inherit;
    vertical-align: top;
    line-height: 1.6;
    display: inline-block!important;
  }
  .porto-sicon-box {
    margin-bottom: 0;
  }
  .products.products-grid {
    margin-bottom: 1em;
  }
  @media (min-width: 1260px) {
    .pl-xl-6 {
      padding-left: 70px!important;
    }
  }
</style>
<div class="home-banner porto-inner-container">
  <div class="porto-wrap-container container">
    <div class="row">
      <div class="m-b-md col-md-8">
        <div class="wpb_wrapper vc_column-inner">
          <div class="vc_row wpb_row vc_inner row no-padding" style="margin-right: 0px; margin-left: 0px; background-color: #f4f4f4;">
            <div class="pl-4 pl-xl-6 col-md-5" style="padding-top: 60px; padding-bottom: 12px;">
              <div class="wpb_wrapper vc_column-inner">
                <div class="wpb_single_image wpb_content_element vc_align_left mb-2">
                  <div class="wpb_wrapper">
                    <div class="vc_single_image-wrapper vc_box_border_grey">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/25/shop25_brand.png"}}" style="display: block;"/>
                    </div>
                  </div>
                </div>
                <h3 style="font-size: 22px; color: #777777; line-height: 1.4; font-weight: 500;" class="vc_custom_heading mb-2 align-left text-uppercase">car shock absorbers</h3>
                <h2 style="font-size: 35px; line-height: 35px; font-weight: 700;" class="vc_custom_heading mb-4 align-left text-uppercase">
                  STARTING<br />
                  AT <small>$</small>99<small>99</small>
                </h2>
                <h3 style="font-size: 16px; line-height: 1; font-weight: 400;" class="vc_custom_heading mb-3 align-left heading-dark">Start Shopping Right Now</h3>
                <p style="font-size: 11px; line-height: 1.4;" class="vc_custom_heading mb-3 align-left">* Get Plus Discount Buying Package</p>
                <div class="btn-container mb-0 mb-md-5 d-inline-block"><button class="btn btn-modern btn-lg btn-quaternary">VIEW SALE</button></div>
              </div>
            </div>
            <div class="pr-md-2 pr-xl-3 col-md-7">
              <div class="wpb_wrapper vc_column-inner d-flex align-items-center h-100">
                <div class="wpb_single_image wpb_content_element vc_align_left mb-0">
                  <div class="wpb_wrapper">
                    <div class="vc_single_image-wrapper vc_box_border_grey">
                      <img src="{{media url="wysiwyg/smartwave/porto/homepage/25/shop25_home_banner1.jpg"}}"  style="display: block;" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="m-b-md col-md-4">
        <div class="wpb_wrapper vc_column-inner h-100">
          <div class="porto-ultimate-content-box-container h-100 mb-0">
            <div class="porto-ultimate-content-box"
                 style="background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-image: url('{{media url="wysiwyg/smartwave/porto/homepage/25/shop25_home_banner2.jpg"}}');
                        padding: 40px;
                        background-color: #444444;">
              <h3 style="font-size: 20px; line-height: 1.2; font-weight: 700;" class="vc_custom_heading mb-2 align-right text-uppercase heading-primary">
                FLASH SALE
              </h3>
              <h3 style="font-size: 20px; color: rgb(162, 162, 162); line-height: 1.2; font-weight: 500; animation-delay: 250ms;" class="vc_custom_heading mb-2 align-right text-uppercase">
                ALL HIGH PERFORMANCE<br />
                WHEELS AND TIRES
              </h3>
              <h2 style="font-size: 30px; line-height: 1; font-weight: 700;" class="vc_custom_heading mb-3 align-right text-uppercase heading-light">
                STARTING<br />
                AT <small>$</small>199<small>99</small>
              </h2>
              <div class="btn-container mb-0 text-right">
                <button class="btn btn-modern btn-lg btn-light">
                  VIEW SALE
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="vc_row wpb_row porto-inner-container">
  <div class="porto-wrap-container container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="vc_row wpb_row vc_inner row no-padding" style="padding: 16px 20px; border: 1px solid #ec7200;margin-bottom: 35px;">
            <div class="mb-3 mb-md-0 col-md-5">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-sicon-box px-md-3 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: #ec7200; font-size: 45px; display: inline-block;"><i class="far fa-envelope"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h2 class="porto-sicon-title" style="font-weight: 600; font-size: 18px; line-height: 18px; color: #323232;">Get Special Offers and Savings</h2>
                    <p style="font-weight: 400; font-size: 13px; line-height: 15px;">Get all the latest information on Events, Sales and Offers.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-7">
              <div class="wpb_wrapper vc_column-inner">
                <style>
                  .single-subscribe .newsletter input {
                    height: 48px;
                    border-radius: 24px 0 0 24px;
                    font-style: italic;
                    font-size: 12px;
                    padding-left: 20px;
                    box-shadow: none;
                    border: 1px solid rgba(0,0,0,.09);
                  }
                  .single-subscribe .newsletter .action {
                    font-size: 1em;
                    padding: 10px 35px 10px 30px;
                    border-radius: 0 24px 24px 0;
                    height: 48px;
                    background-color: #323232;
                    border-color: #323232 #323232 #191919;
                  }
                  .widget .tagcloud {
                    margin-top: -.3846em;
                    margin-bottom: -.3846em;
                  }
                  .home-product-tags .tagcloud {
                    background: #f4f4f4;
                    padding: 20px 0 0 20px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                  }
                  .home-product-tags .tagcloud a {
                    font-size: 13px!important;
                    font-weight: 600;
                    color: #222529;
                    text-transform: uppercase;
                    border: 1px solid #e7e7e7;
                    background: #fff;
                    border-radius: 0;
                    margin: 0 20px 20px 0;
                    min-width: 110px;
                    padding: 13px;
                    text-align: center;
                    line-height: 1;
                    display: inline-block;
                  }
                </style>
                {{block class="Magento\Newsletter\Block\Subscribe" name="home.newsletter" template="subscribe_form.phtml"}}
              </div>
            </div>
          </div>
          <div class="porto-products wpb_content_element title-border-bottom mb-0">
            <h2 class="section-title"><span class="inline-title">Popular Items</span><span class="line"></span></h2>
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" product_count="6" column_count="6" aspect_ratio="0" image_width="250" image_height="250" template="grid.phtml"}}
          </div>
          <div class="wpb_content_element home-product-tags">
            <div class="widget widget_product_tag_cloud">
              <div class="tagcloud">
                <a href="#" class="tag-cloud-link tag-link-133 tag-link-position-1" style="font-size: 8pt;" aria-label="Cadillac (2 products)">Cadillac</a>
                <a href="#" class="tag-cloud-link tag-link-127 tag-link-position-2" style="font-size: 8pt;" aria-label="Chevy (2 products)">Chevy</a>
                <a href="#" class="tag-cloud-link tag-link-128 tag-link-position-3" style="font-size: 15.636363636364pt;" aria-label="Dodge (3 products)">Dodge</a>
                <a href="#" class="tag-cloud-link tag-link-125 tag-link-position-4" style="font-size: 15.636363636364pt;" aria-label="Ford (3 products)">Ford</a>
                <a href="#" class="tag-cloud-link tag-link-129 tag-link-position-5" style="font-size: 8pt;" aria-label="Honda (2 products)">Honda</a>
                <a href="#" class="tag-cloud-link tag-link-132 tag-link-position-6" style="font-size: 8pt;" aria-label="Hyundai (2 products)">Hyundai</a>
                <a href="#" class="tag-cloud-link tag-link-126 tag-link-position-7" style="font-size: 22pt;" aria-label="Jeep (4 products)">Jeep</a>
                <a href="#" class="tag-cloud-link tag-link-131 tag-link-position-8" style="font-size: 15.636363636364pt;" aria-label="Nissan (3 products)">Nissan</a>
                <a href="#" class="tag-cloud-link tag-link-130 tag-link-position-9" style="font-size: 8pt;" aria-label="Toyota (2 products)">Toyota</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section section-default mt-0 mb-0" style="margin-top: 10px; padding-top: 40px; padding-bottom: 25px; background-color: #f4f4f4;">
  <div class="container">
    <div class="row">
      <div class="vc_column_container col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <style scope="scope">
            #latest-grid .products {
              margin-left: -1px;
              margin-right: -1px;
            }
            #latest-grid li.product {
              padding-left: 1px;
              padding-right: 1px;
              margin-bottom: 2px;
            }
            .products-list .product-item-details .product-item-name a {
              font-size: .9375rem;
              font-weight: 400;
            }
          </style>
          <div id="latest-grid" class="porto-products wpb_content_element mb-0 products-list">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest" aspect_ratio="0" column_count="3" product_count="6" image_width="250" image_width="290" product_type="12" template="grid.phtml"}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="porto-inner-container" style="padding-top: 40px;">
  <style>
    .top-heading i {
      font-weight: 700;
      font-style: normal;
      display: inline-block;
      padding: 8px .5em;
      margin-right: .25em;
      background: linear-gradient(to right,#ec7200,#ffaa01);
      color: #fff;
      transform: rotate(
        -1deg
      );
    }
    body .row.vc_column-gap-2>.column_container {
      padding: 1px;
    }
    .home-ads>.column_container>.vc_column-inner {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      background: #f4f4f4;
      padding: 20px 10px;
      height: 100%;
    }
  </style>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="vc_row wpb_row vc_inner row mx-0 px-4 py-3 home-banner align-items-center"
               style="background-image: url('{{media url="wysiwyg/smartwave/porto/homepage/25/shop25_home_banner3.jpg"}}');
                      margin-bottom: 35px;
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: cover;">
            <div class="mb-3 mb-lg-0 col-md-12 col-lg-9">
              <div class="wpb_wrapper vc_column-inner">
                <h2 style="font-size: 20.5px; line-height: 1.2; font-weight: 700;" class="vc_custom_heading top-heading mb-0 mr-3 d-inline-block align-left text-uppercase heading-light">
                  <i>BIG SALE</i> ALL HIGH PERFORMANCE ITEMS UP TO 70% OFF
                </h2>
                <h6 style="font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; font-weight: 500;" class="vc_custom_heading d-inline-block mb-0 align-left">Online Purchases Only</h6>
              </div>
            </div>
            <div class="col-md-12 col-lg-3">
              <div class="wpb_wrapper vc_column-inner">
                <div class="btn-container mb-0 text-lg-right text-left"><button class="btn btn-modern btn-lg btn-light">View Sale</button></div>
              </div>
            </div>
          </div>
          <div class="porto-products wpb_content_element title-border-bottom mb-0">
            <h2 class="section-title"><span class="inline-title">TOP SELLER</span><span class="line"></span></h2>
            {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="latest_product" product_count="6" column_count="6" aspect_ratio="0" image_width="250" image_height="250" template="grid.phtml"}}
          </div>
          <div class="row no-padding home-ads vc_column-gap-2" style="margin-right: -1px; margin-bottom: 40px; margin-left: -1px;">
            <div class="column_container col-md-12 col-lg-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: #ec7200; font-size: 32px; display: inline-block;"><i class="porto-icon-shipping"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h4 class="porto-sicon-title" style="font-weight: 600; font-size: 15px; line-height: 15px;">Free Shipping on Orders Over $99</h4>
                    <p style="font-size: 13px; line-height: 13px;">For more than 100,000 parts!</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="column_container col-md-12 col-lg-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: #ec7200; font-size: 32px; display: inline-block;"><i class="porto-icon-money"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h4 class="porto-sicon-title" style="font-weight: 600; font-size: 15px; line-height: 15px;">Up to 40% OFF on Selected Items</h4>
                    <p style="font-size: 13px; line-height: 13px;">Available for all Categories!</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="column_container col-md-12 col-lg-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: #ec7200; font-size: 32px; display: inline-block;"><i class="porto-icon-secure-payment"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h4 class="porto-sicon-title" style="font-weight: 600; font-size: 15px; line-height: 15px;">100% Secure Payment</h4>
                    <p style="font-size: 13px; line-height: 13px;">We ensure secure payment!</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <style>
            .heading1008926591 h3 {
              border-bottom-color: #e1e1e1 !important;
            }
          </style>
          <div class="vc_custom_heading m-b-xl align-left heading heading-border heading-bottom-border heading-border-xs heading1008926591">
            <h3 style="font-size: 16px; line-height: 1; font-weight: 600;" class="heading-tag text-uppercase">brands we trust</h3>
          </div>
          <div class="porto-carousel brand-carousel owl-carousel m-b-xl">
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand1.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand2.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand3.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand4.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand5.png"}}" alt="" /></div>
            <div class="item"><img src="{{media url="wysiwyg/smartwave/porto/brands/new_brand6.png"}}" alt="" /></div>
          </div>
          <script type="text/javascript">
            require(["jquery", "owl.carousel/owl.carousel.min"], function ($) {
              $(".brand-carousel.owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                nav: false,
                dots: false,
                loop: true,
                responsive: {
                  0: {
                    items: 2,
                  },
                  640: {
                    items: 2,
                  },
                  768: {
                    items: 3,
                  },
                  992: {
                    items: 4,
                  },
                  1200: {
                    items: 6,
                  },
                },
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section mt-0 mb-0 porto-inner-container" style="padding-bottom: 20px;background-color: #f4f4f4;">
  <style>
    .porto-recent-posts .post-date .day {
      background: #323232;
      color: #fff;
      padding-bottom: 0;
      line-height: 1;
      font-size: 18px;
    }
    .porto-recent-posts .post-date .month {
      background: #323232;
      line-height: 1.2;
      padding-bottom: 10px;
      text-transform: uppercase;
      opacity: 1;
    }
    .porto-recent-posts .post-item .post-excerpt {
      font-size: 1em;
    }
    .post-item .read-more, .post-item .read-more-block {
      font-weight: 400;
      color: #ec7200;
      display: inline-block;
    }
  </style>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="wpb_wrapper vc_column-inner">
          <div class="porto-recent-posts wpb_content_element mb-0">
            <div class="row">
              <div class="post-carousel porto-carousel owl-carousel dots-style-1 nav-center-images-only nav-pos-outside nav-style-4 show-nav-hover">
                {{widget type="Magefan\Blog\Block\Widget\Recent" number_of_posts="4" custom_template="recent_home.phtml"}}
              </div>
            </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: true,
                  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:3
                    }
                  }
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
