<!-- Section-title start -->
    <div class="row">
    <div class="col-lg-12">
    <div class="section-title text-center">
    <h2 class="title-border">Featured Products 1</h2>
    </div>
    </div>
    </div>
    <!-- Section-title end -->
    <div class="row">
    <div class="product-slider arrow-left-right">
    <!-- Single-product start -->
    <div class="single-product col-lg-12">
    <div class="product-img">
    <span class="pro-label new-label">new</span>
    <a href="single-product.html"><img src="img/product/1.jpg" alt="" /></a>
    <div class="product-action clearfix">
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
    <a href="#" data-bs-toggle="modal"  data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
    </div>
    </div>
    <div class="product-info clearfix">
    <div class="fix">
    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
    </div>
    <div class="fix">
    <span class="pro-price floatleft">$ 56.20</span>
    <span class="pro-rating floatright">
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    </span>
    </div>
    </div>
    </div>
    <!-- Single-product end -->
    <!-- Single-product start -->
    <div class="single-product col-lg-12">
    <div class="product-img">
    <span class="pro-label sale-label">Sale</span>
    <a href="single-product.html"><img src="img/product/2.jpg" alt="" /></a>
    <div class="product-action clearfix">
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
    <a href="#" data-bs-toggle="modal"  data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
    </div>
    </div>
    <div class="product-info clearfix">
    <div class="fix">
    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
    </div>
    <div class="fix">
    <span class="pro-price floatleft">$ 56.20</span>
    <span class="pro-rating floatright">
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    </span>
    </div>
    </div>
    </div>
    <!-- Single-product end -->
    <!-- Single-product start -->
    <div class="single-product col-lg-12">
    <div class="product-img">
    <a href="single-product.html"><img src="img/product/3.jpg" alt="" /></a>
    <div class="product-action clearfix">
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
    <a href="#" data-bs-toggle="modal"  data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
    </div>
    </div>
    <div class="product-info clearfix">
    <div class="fix">
    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
    </div>
    <div class="fix">
    <span class="pro-price floatleft">$ 56.20</span>
    <span class="pro-rating floatright">
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    </span>
    </div>
    </div>
    </div>
    <!-- Single-product end -->
    <!-- Single-product start -->
    <div class="single-product col-lg-12">
    <div class="product-img">
    <a href="single-product.html"><img src="img/product/4.jpg" alt="" /></a>
    <div class="product-action clearfix">
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
    <a href="#" data-bs-toggle="modal"  data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
    </div>
    </div>
    <div class="product-info clearfix">
    <div class="fix">
    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
    </div>
    <div class="fix">
    <span class="pro-price floatleft">$ 56.20</span>
    <span class="pro-rating floatright">
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    </span>
    </div>
    </div>
    </div>
    <!-- Single-product end -->
    <!-- Single-product start -->
    <div class="single-product col-lg-12">
    <div class="product-img">
    <span class="pro-label new-label">new</span>
    <a href="single-product.html"><img src="img/product/3.jpg" alt="" /></a>
    <div class="product-action clearfix">
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
    <a href="#" data-bs-toggle="modal"  data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
    <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
    </div>
    </div>
    <div class="product-info clearfix">
    <div class="fix">
    <h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
    <p class="floatright hidden-sm d-none d-md-block">Furniture</p>
    </div>
    <div class="fix">
    <span class="pro-price floatleft">$ 56.20</span>
    <span class="pro-rating floatright">
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    <a href="#"><i class="zmdi zmdi-star-half"></i></a>
    </span>
    </div>
    </div>
    </div>
    <!-- Single-product end -->
    </div>
    </div>  

    .product-slider .slick-list { padding: 10px 15px 20px;}
    .single-product {
      padding-top: 15px;
      transition: all 0.5s ease 0s;
    }
    .product-img {
      overflow: hidden;
      position: relative;
    }
    .product-img img { width: 100%;}
    .product-action {
      background: #fff none repeat scroll 0 0;
      bottom: -40px;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      text-align: center;
      visibility:hidden;
      opacity: 0;
      transition: all 0.5s ease 0s;
      width: calc(100% - 40px);
    }
    .product-action a {
      color: #666666;
      float: left;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      position: relative;
      width: 25%;
    }
    .product-action a::before {
      background: #999 none repeat scroll 0 0;
      content: "";
      height: 16px;
      margin-top: -8px;
      position: absolute;
      right: 0;
      top: 50%;
      width: 2px;
    }
    .product-action a:last-child::before {
      display:none;
    }
    .product-action a:hover {
      color: #C8A165;
    }
    .product-info {
      padding: 20px 0;
    }
    .post-title {
      font-size: 16px;
      line-height: 18px;
      text-transform: uppercase;
      font-family: bree serif;
      margin-bottom: 5px;
    }
    .product-info p {
      font-weight: 700;
      margin-bottom: 5px;
    }
    .pro-price {
      color: #c87065;
      font-size: 18px;
      font-weight: bold;
      line-height: 28px;
    }
    .pro-rating a {
      color: #c87065;
      font-size: 15px;
      line-height: 28px;
    }
    .single-product:hover .product-action {
      bottom: 15px;
      visibility:visible;
      opacity: 1;
    }
    .single-product:hover {
      box-shadow: 1px 25px 54px rgba(0, 0, 0, 0.12);
    }
    .product-slider .single-product:hover {
      box-shadow: 1px 8px 15px rgba(0, 0, 0, 0.12);
    }

    $('.product-slider').slick({
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    prevArrow: '<button type="button" class="slick-prev">p<br />r<br />e<br />v</button>',
    nextArrow: '<button type="button" class="slick-next">n<br />e<br />x<br />t</button>',
    responsive: [
    {  breakpoint: 1169,  settings: { slidesToShow: 3,  }  },
    {  breakpoint: 969,   settings: { slidesToShow: 3,  }  },
    {  breakpoint: 767,   settings: { slidesToShow: 1, }   },
    {  breakpoint: 480,   settings: { slidesToShow: 1, }   },
    ]
    });