<?php include("includes/pilot.php");
	  error_reporting(0);
?>

	<!-- animation css -->
	<style>
	  .wow:first-child {
    visibility: hidden;
  }
	</style>
<link rel="stylesheet" href="css/animate/animate.css">
<link rel="stylesheet" href="css/animate/site.css">

<style>
.navbarWrapper .navbar .nav-item .nav1{
				border-bottom: 3px solid #C1A14F;
}
*{
					font-family: sans-serif;
					text-align:justify;
}
.caption{
	animation:slider_text 2s;
}
@keyframes slider_text{
	
	0%{
		top:1000px;
		opacity:0;
	}
	100%{
		top:0px;
		opacity:1;
	}
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 9999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:  #c1a14f;
  color: white;
  cursor: pointer;
  /* padding: 15px; */
  height:50px;
  width:50px;
  border-radius: 50%;
	text-align: center;
}
@media (max-width:786px){
	#myBtn{
		right: 60px;
	}
}

</style>

	<div id="homeSlider" class="carousel slide homeSlider" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#homeSlider" data-slide-to="0" class="active"></li>
			<li data-target="#homeSlider" data-slide-to="1"></li>
			<li data-target="#homeSlider" data-slide-to="2"></li>
			<li data-target="#homeSlider" data-slide-to="3"></li>
		</ol>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<span class="image first"></span>
		     <div class="slider_bg">
				<div class="caption">Your Ideal Partner for Quality Supplies</div>
			 </div>
			</div>
			<div class="carousel-item">
				<span class="image second"></span>
				<div class="slider_bg">
				<div class="caption">Your Ideal Partner for Quality Supplies</div>
			</div>
			</div>
			<div class="carousel-item">
				<span class="image third"></span>
				<div class="slider_bg">
				<div class="caption">Your Ideal Partner for Quality Supplies</div>
			</div>
			</div>
			<div class="carousel-item">
				<span class="image fourth"></span>
				<div class="slider_bg">
				<div class="caption">Your Ideal Partner for Quality Supplies</div>
			</div>
			</div>
		</div>
		<a class="carousel-control-prev" href="#homeSlider" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		</a>
		<a class="carousel-control-next" href="#homeSlider" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
		</a>
	</div>

	<!-- <style type="text/css">
		@media screen and (max-width: 768px) {

		.homeIntro{
			display: block;

		}

	</style> -->
	<div class="homeIntro">
	<div class="row">
		<div class="col-md-6 wow bounceInLeft" data-wow-offset="200" data-wow-duration="1.5s">
		<img src="images/intro/restaurant-supplies.jpg" alt=""> </div>
		<div class="col-md-6 wow bounceInUp" data-wow-offset="200" data-wow-duration="1.5s">
			<div class="text">
				<div class="innerText">
					<h2>Quality<span style="color:white">_</span>Restaurant Supplies</h2>
					<p>The quality assurance team of our organization ensures that all the daily supplies for your restaurants pass through stringent test so that you get the best of supplies. The quality supply from us will ensure you to have a perfect kitchen for your restaurants. </p>
				</div>
			</div>
		</div>
	</div>
	
	<div class="row for_desktop">
		
		<div class="col-md-6  wow bounceInRight" data-wow-offset="200" data-wow-duration="1.5s">
			<div class="text">
				<div class="innerText">
					<h2>Cost-Effective<span style="color:white">_</span>Hotel Supplies</h2>
						<p>We maintain quality along with cost-effectiveness in a unique manner making Idyll Sourcing to be your one stop location for having hotel supplies. We can be one on whom you can rely on to have quality daily supplies for your hotels at cost-effective price. </p>
				</div>
			</div>
		</div>
		<div class="col-md-6 wow bounceInUp" data-wow-offset="200" data-wow-duration="1.5s">
			<img src="images/intro/hotel-supplies.jpg" alt=""> </div>
		
		</div>

		<div class="row for_mobile">
		<div class="col-md-6 wow bounceInUp" data-wow-offset="200" data-wow-duration="1.5s">
		<img src="images/intro/hotel-supplies.jpg" alt=""> </div>
		<div class="col-md-6 wow bounceInRight" data-wow-offset="200" data-wow-duration="1.5s">
			<div class="text text2">
				<div class="innerText">
				<h2>Cost-Effective<span style="color:white">_</span>Hotel Supplies</h2>
			    <p>We maintain quality along with cost-effectiveness in a unique manner making Idyll Sourcing to be your one stop location for having hotel supplies. We can be one on whom you can rely on to have quality daily supplies for your hotels at cost-effective price. </p>
				</div>
			</div>
		</div>
		
		
		</div>
		
		<div class="row">
	<div class="col-md-6 wow bounceInRight" data-wow-offset="200" data-wow-duration="1.5s">
		<img src="images/intro/apparel.jpg" alt=""> </div>
		<!-- <div class="clearfix w-100"></div> -->
		<div class="col-md-6 wow bounceInLeft" data-wow-offset="200" data-wow-duration="1.5s">
			<div class="text">
				<div class="innerText">
				<h2>Quality<span style="color:white">_</span>&<span style="color:white">_</span>Endurance Of<span style="color:white">_</span>Apparel</h2>
				<p>The quality and endurance of men’s apparel that you can have from Idyll Sourcing makes us the one who you should select for having such. Your personality will be further enhanced by wearing our casual and comfortable clothes. </p>
				</div>
				</div>
			</div>
		</div>
	</div>
	<div class="productsHome">
		<div class="row no-gutters">
			<div class="column wow bounceIn" data-wow-offset="200" data-wow-duration="1.5s">
				<a href="<?=$siteurl?>/hotel.php">
					<span class="image hotel"></span>
					<div class="caption">Hotel</div>
				</a>
			</div>
			<div class="column wow bounceIn" data-wow-offset="200" data-wow-duration="1.5s">
				<a href="<?=$siteurl?>/restaurant.php">
					<span class="image restaurant"></span>
					<div class="caption">Restaurant</div>
				</a>
			</div>
			<div class="column wow bounceIn" data-wow-offset="200" data-wow-duration="1.5s">
				<a href="<?=$siteurl?>/apparel.php">
					<span class="image apparel"></span>
					<div class="caption">Men's Apparel</div>
				</a>
			</div>
			<div class="column wow bounceIn" data-wow-offset="200" data-wow-duration="1.5s">
				<a href="<?=$siteurl?>/ladies-apparel.php">
					<span class="image ladies-apparel"></span>
					<div class="caption">Ladies Apparel</div>
				</a>
			</div>
			<div class="column wow bounceIn" data-wow-offset="200" data-wow-duration="1.5s">
				<a href="<?=$siteurl?>/bathroom.php">
					<span class="image bathroom"></span>
					<div class="caption">Bathroom Amenities</div>
				</a>
			</div>
		</div>
	</div>
	<div class="homeBestsellers">
		<div class="container">
			<div class="row">
				<div class="col-md-6 wow bounceInRight" data-wow-offset="200" data-wow-duration="1.5s">
					<h2 class="pageTitle"><span class="eyebrow">Bestsellers</span>Products<span style="color:white">_</span>we supply</h2>
					<p class="bottom">You can depend on Idyll Sourcing to have daily supplies of electric kettle, iron board, mini bar, waste bins, ice buckets, alarm clocks, torch lights, welcome tray or tissue boxes along with various other products like stylish and fashionable men’s apparel, ladies apparel, fresh restaurant supplies and eco-friendly bathroom products. </p>
				</div>
				<div class="col-md-6 wow bounceInLeft" data-wow-offset="200" data-wow-duration="1.5s">
					<span class="image"></span>
				</div>
			</div>
		</div>
	</div>
	<script src="js/animate/wow.js"></script>
<script>
  wow = new WOW({
    animateClass: 'animated',
    offset: 100,
    callback: function (box) {
      console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
    }
  });
  wow.init();
  document.getElementById('moar').onclick = function () {
    var section = document.createElement('section');
    section.className = 'section--purple wow fadeInDown';
    this.parentNode.insertBefore(section, this);
  };
</script>

<!-- ///scroll to top -->

<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

	<?php include("includes/ground.php"); ?>