<?php include 'header.php';?>
<?php include 'top-menu.php';?>

<section class="inner-banner">
	<!-- <img src="images/inner_banner.png" alt="inner banner" class="w-100" /> -->
	<video autoplay muted loop id="myVideo" class="w-100">
		<source src="images/inner-video.mp4" type="video/mp4">
	</video>
	<div class="breadcrum">
		<div class="container">
			<div class="row">
				<div class="col-12 text-center">
					<div class="list_cnt">
						<a href="index.php">Home</a> <i  class="fas fa-angle-double-right"></i> <span>Product
					<h1>Products List</h1>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="burger">
	<div class="container">
		<div class="row">
			<div class="col-sm-8 offset-sm-2 mb-4">
				<div class="custom_heading text-center">
					<div class="text-body">
						<div class="sub-head"><span>OUR</span></div>
						<h2>PRODUCTS</h2>
					</div>
					<p class="mb-0">Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="product">
					<div class="img"><div><img  src="images/product_1.png" class="img-fluid"></div></div>
					<h5>Forklift camera system</h5>
					<a href="product-details.php" class="btn btn-secondary btn-sm">READ MORE</a>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="burger bg_light">
	<div class="container">
		<div class="row">
			<div class="col-sm-8 offset-sm-2 mb-4">
				<div class="custom_heading text-center">
					<div class="text-body">
						<div class="sub-head"><span>PRODUCT</span></div>
						<h2>FEATURE</h2>
					</div>
					<p class="mb-0">Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="product_swiper-feature overflow-hidden">
				    <div class="swiper-wrapper">
					    <div class="swiper-slide">
				      		<a href="#" class="pro_feature">
				      			<h3 class="m_bold">Lorem ipsum dolor sit amet, </h3>
				      			<hr />
				      			<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				      		</a>
					    </div>
					    <div class="swiper-slide">
				      		<a href="#" class="pro_feature">
				      			<h3 class="m_bold">Lorem ipsum dolor sit amet, </h3>
				      			<hr />
				      			<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				      		</a>
					    </div>
					    <div class="swiper-slide">
				      		<a href="#" class="pro_feature">
				      			<h3 class="m_bold">Lorem ipsum dolor sit amet, </h3>
				      			<hr />
				      			<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				      		</a>
					    </div>
					    <div class="swiper-slide">
				      		<a href="#" class="pro_feature">
				      			<h3 class="m_bold">Lorem ipsum dolor sit amet, </h3>
				      			<hr />
				      			<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				      		</a>
					    </div>
				    </div>
				</div>
			</div>
		</div>
	</div>
</section>

<?php include 'footer.php';?>

<script type="text/javascript">
    var swiper = new Swiper('.product_swiper-feature', {
		slidesPerView: 4,
		spaceBetween: 30,
		slidesPerGroup: 1,
		loop: true,
		loopFillGroupWithBlank: true,
		autoplay: {
			delay: 4000,
			disableOnInteraction: false,
		},
	});

    /*Menu active*/
	$(document).ready(function(){
    	$('.top_area header .nav-item a').removeClass('active');
        $("#menu_product").addClass('active');
	});
</script>