 <!-- team Area Start -->
 <?php   
 if(get_theme_mod('service_area_disable') != 'on' ){?>
<?php 
	if( get_theme_mod('service_areaTpadding',true) ) {
		$service_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('service_areaTpadding')).';';
	}
	if( get_theme_mod('service_areaBpadding',true) ) {
		$service_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('service_areaBpadding')).';';
	}
	
?>	
<div class="service-area " id="service" style="<?php echo esc_attr($service_areaTpadding); ?>" "<?php echo esc_attr($service_areaBpadding); ?>">
		<?php
			$services_page_id = get_theme_mod('services_page');	
			$ser_subtitle = get_theme_mod('ser_subtitle', 'Our Services');
 			$ser_title = get_theme_mod('ser_title', 'Service We Offer You');
		?>	

		<div class="container">
			<div class="row justify-content-center">
				  <div class="section-title">
				    <div class="sub-title">
				    	<?php echo ($ser_subtitle);  ?>
				    </div>
				    <?php if($ser_title ){ ?>
					    <h2><?php echo ($ser_title);  ?></h2> 
			    
		         <?php }?>
		      </div>
			</div>
		</div>
 	<div class="container"> 
	 	<div class="row"> 
		  	<!-- <div class="owl-carousel owl-theme">  --> 
		 		<?php 
	 				$showStatic = true;
	 				$cols = get_theme_mod('service_npp_count', 2);
	 				$cols++;
	 				switch($cols){
	 					case 1:
						$colCls = 'col-md-12 col-sm-12 col-xs-12';
						break;
						case 2:	
						$colCls = 'col-md-6 col-sm-6 col-xs-12';
						break;
						case 3:
						case 5:
						case 6:
						case 9:
						case 11:
						case 13:
						case 15:
						$colCls = 'col-md-4 col-sm-6 col-xs-12';
						break;
						default: 
						$colCls = 'col-md-3 col-sm-6 col-xs-12';
						break;
	 				}
		 				
		 				for( $i = 1; $i <= $cols; $i++ ){
						$services_page_id = get_theme_mod('services_page'.$i); 
						$services_page_icon = get_theme_mod('services_page_icon'.$i);
						$services_page_icon1 = get_theme_mod('services_page_icon1'.$i);
						if($services_page_id){
							$showStatic = false;
							echo serviceShortCode($services_page_id, $isCustomizer=true, $i);
						}
					}
		 				if($showStatic === true){
		 					for( $i = 1; $i <= $cols; $i++ ){ ?>
		 				<div class="<?php echo $colCls;?>">
		 				<!-- <div class="item">  -->
							<div class="single-service-bx">
								<div class="single-service ">
									<div class="service-icon  padding0">
										<div class="ser-img">
											<a href="#">
												<!-- <span class="fa fa-camera"></span> -->
												<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser1.jpg');?>" alt="services" />
												<div class="ovrly"></div>
											</a>
										</div>
									</div>
									<div class="service-title-box">
										<a href="#"><h4 class="inner-area-title">Power And Energy Sector</h4></a>
										<p class="inner-area-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
										
									</div>
									<div class="clearfix"></div>
									<div class="btn5">
										<a href="#">Read More <i class="fa fa-angle-double-right"></i></a>
									</div>	
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div> 
							</div>
						</div>
						
		 						<?php 
		 					}
		 				} ?>
			<!-- </div> -->
	 	</div> 
 	</div>	
 </div>
<script type="text/javascript">
	var title = 0;
	jQuery(".service-area .single-service").each(function(){
	if ($(this).height() > title) { title = $(this).height(); }
	});
	jQuery(".service-area .single-service").height(title);


	// on Resize change height

	jQuery(window).resize(function(){
	jQuery(".service-area .single-service").height("");
	var title = 0;
	jQuery(".service-area .single-service").each(function(){
	if ($(this).height() > title) { title = $(this).height(); }
	});
	jQuery(".service-area .single-service").height(title);
	});
</script>
 
 <?php }
