<?php require_once("header.php");?>

			<!-- page template area start -->
			<div class="banner">
			    <div class="slider-container" id="caption-slide">
					<div class="slider">
					<?php
					$sql_banner = "SELECT * FROM `sc_banners` WHERE `banner_status` = 'Active' ORDER BY `banner_id` ASC";
					$exe_banner = mysqli_query($connection,$sql_banner);
					while($arr_banner = mysqli_fetch_array($exe_banner))
					{
						?>								
						<div class="slide"> 
						    <a href="#"><img src="../uploads/banner/<?php echo $arr_banner['banner_image'];?>" alt=""></a> <span class="caption">&nbsp;</span>
						</div>
						<?php
					}
					?>
					</div>
				</div>
			</div>
			
			<section id="about" style="background:#fff;">
				<div class="container mt-0 pb-0 pt-10">
					<div class="col-lg-12">
    					<div class="row multi-row-clearfix">
    					    <div class="">
    							<div class="col-md-4 col-sm-6 col-xs-4 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#2C89C9; border-radius:5px;">
    									<div class="p-0 pt-10 pb-10" style="text-align:center;">
    										    <p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">COMMERCIAL SERVICES</p>
    									</div>	
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-4 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#2C89C9; border-radius:5px;">
    									<div class="p-0 pt-10 pb-10" style="text-align:center;">
    										    <p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">RESIDENTIAL SERVICES</p>
    									</div>	
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-4 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#2C89C9; border-radius:5px;">
    									<div class="p-0 pt-10 pb-10" style="text-align:center;">
    										    <p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">INDUSTRIAL SERVICES</p>
    									</div>	
    								</div>
    							</div>
    						</div>
    					</div>
					</div>
				</div>
			</section>
			
			<section id="about" style="background:#fff;">
				<div class="container mt-0 pb-10 pt-10">
					<div class="col-lg-12">
				        <div class="row">
				            <h1 class="title mt-0 mb-0" style="text-align:center;">Home services at your doorstep</h1>
				            <p style="color:#888888; text-align:center; margin-bottom:5px;">What are you looking for?</p>
    				    </div>
    					<div class="row" style="margin-top:10px;">
					    <?php
						$sql_category = "SELECT * FROM `sc_category` WHERE `category_status` = 'Active' ORDER BY `category_id` ASC";
						$exe_category = mysqli_query($connection,$sql_category);
						while($arr_category = mysqli_fetch_array($exe_category))
						{
						?>	
    					    <a href="subcategory-list.php?category_id=<?php echo $arr_category['category_id'];?>">
							<div class="col-xs-10 mb-10" style="background:#e8eaf6; border-top-left-radius:10px; border-bottom-left-radius:10px;">
								<p style="margin:10px 0; color:#333;"><i class="fa fa-arrows" style="font-size:20px; color:#1565c0; margin-right:5px;"></i> <?php echo stripslashes($arr_category['category_name']);?></p>
							</div>
							<div class="col-xs-2 mb-10" style="background:#e8eaf6; border-top-right-radius:10px; border-bottom-right-radius:10px;">
								<p style="margin:10px 0; text-align:center;"><i class="fa fa-angle-right" style="font-size:20px; color:#1565c0;"></i></p>
							</div>
							</a>
    							<?php
    						}
    						?>
    					</div>
					</div>
				</div>
			</section>
			
			<section id="about">
				<div class="container mt-0 pb-0 pt-5">
					<div class="col-xs-12">
    					<div class="row multi-row-clearfix">
    					    <h1 class="title mt-5 mb-10" style="text-align:center;">Why Choose Skycom?</h1>
    					    <div class="">
    							<div class="col-xs-12 mb-15 p-10" style="border:1px solid #c07015; border-radius:5px; background:#c07015;">
							        <div class="col-xs-2" style="">
							            <i class="fa fa-check-circle" aria-hidden="true" style="color:#fff; font-size:40px;"></i>				
							        </div>
							        <div class="col-xs-10" style="">
    							        <h4 class="mt-0 mb-0 text-left text-white">Competitive Pricing</h4>
    							        <p class="text-white">keep our prices low so that everyone can afford quality products.</p>
									</div>
								</div>
    							<div class="col-xs-12 mb-15 p-10" style="border:1px solid #c07015; border-radius:5px; background:#c07015;">
							        <div class="col-xs-2" style="">
							            <i class="fa fa-check-circle" aria-hidden="true" style="color:#fff; font-size:40px;"></i>				
							        </div>
							        <div class="col-xs-10" style="">
    							        <h4 class="mt-0 mb-0 text-left text-white">Professional Service</h4>
    							        <p class="text-white">We're always here to help, whether you need advice on which product is best for you or you just need a hand with your order.</p>
									</div>
								</div>
    							<div class="col-xs-12 mb-15 p-10" style="border:1px solid #c07015; border-radius:5px; background:#c07015;">
							        <div class="col-xs-2" style="">
							            <i class="fa fa-check-circle" aria-hidden="true" style="color:#fff; font-size:40px;"></i>				
							        </div>
							        <div class="col-xs-10" style="">
    							        <h4 class="mt-0 mb-0 text-left text-white">Post Sales Service</h4>
    							        <p class="text-white">We're here to help you every step of the way, from finding the perfect home.</p>
									</div>
								</div>
    							
    						</div>
    					</div>
					</div>
				</div>
			</section>
			
			<section id="about">
				<div class="container mt-0 pb-0 pt-0">
					<div class="col-lg-12">
    					<div class="row ">
    					    <h1 class="title mt-0 mb-10" style="text-align:center;">Our Incomparable Services</h1>
    					    <div class="mb-15 p-10" style="border:1px solid #ccc; border-radius:5px; background:#f1f1f1;">
        						    <h4 class="mt-0 mb-0 text-left">Installation, Testing & Configuration</h4>
        						    <p>We provide a full range of services related to computer equipment and software.</p>
    						</div>
    						<div class="mb-15 p-10" style="border:1px solid #ccc; border-radius:5px; background:#f1f1f1;">
        						    <h4 class="mt-0 mb-0 text-left">After Sales Services</h4>
        						    <p>We are committed to our customer by provide them after sale support.</p>
    						</div>
    						<div class="mb-15 p-10" style="border:1px solid #ccc; border-radius:5px; background:#f1f1f1;">
        						    <h4 class="mt-0 mb-0 text-left">Repairing & Technical Support</h4>
        						    <p>The most common issues that users face with their security systems be resolved by our highly trained technicians.</p>
    						</div>
    						<div class="mb-15 p-10" style="border:1px solid #ccc; border-radius:5px; background:#f1f1f1;">
        						    <h4 class="mt-0 mb-0 text-left">Networking Services</h4>
        						    <p>Find out more about our networking services and how we can help you grow your business.</p>
    						</div>
    						<div class="mb-15 p-10" style="border:1px solid #ccc; border-radius:5px; background:#f1f1f1;">
        						    <h4 class="mt-0 mb-0 text-left">Annual Maintainance Service</h4>
        						    <p>Get your annual maintenance service from us. We will help you keep your equipment in top working condition.</p>
    						</div>
    					</div>
					</div>
				</div>
			</section>
			
			<section id="about">
				<div class="container mt-0 pb-0 pt-5">
					<div class="col-lg-12">
    					<div class="row multi-row-clearfix">
    					    <div class="">
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">1000+</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Projects Delivered</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-gear" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">50+</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Service & Features</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-users" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">3000+</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Customers</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-trophy" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">100%</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Satisfaction</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
					</div>
				</div>
			</section>
			<!-- page template area end -->
  
<?php require_once("footer.php");?>