@@include('_includes/header.html')

@@include('sections/poco/header-4.html')
@@include('sections/poco/banner-4.html')
@@include('sections/poco/about-info04.html')
@@include('sections/poco/skill-area.html')
@@include('sections/poco/testimonial-4.html')
@@include('sections/poco/project-slider.html')
@@include('sections/poco/client-review.html')
@@include('sections/poco/contact-area.html')
@@include('sections/poco/footer-4.html')

@@include('_includes/scripts.html')
<script src="js/waypoint.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/progress.js"></script>
<script src="js/slider.js"></script>
<script>
  /*  Sticky Header*/
  let logo = document.querySelector('.logo-04')
	window.addEventListener('scroll', function () {
		let header = document.querySelectorAll('header')

		header.forEach((headItem) => {
		headItem.classList.toggle('sticky', window.scrollY > 0);
		});
		// window.scrollY > 0
		// ? logo.setAttribute('src', 'img/logo/logo04.png')
		// : logo.setAttribute('src', 'img/logo/logo04.png')
	});

	var swiper = new Swiper(".swiper-container", {
		slidesPerView: 1,
		spaceBetween: 00,
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
			type: "progressbar",
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
		breakpoints: {
			640: {
				slidesPerView: "auto",
				spaceBetween: 30,
			},
		},
	});
</script>

<style>
	.swiper-container {
		width: 650px;
		height: 100%;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		width: 75%;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
</style>
@@include('_includes/footer.html')