<?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 wow zoomIn " id="service" >
	<div class="ovly"></div>
		<?php
			$services_page_id = get_theme_mod('services_page');	
			$ser_subtitle = get_theme_mod('ser_subtitle', 'WHAT WE DO');
 			$ser_title = get_theme_mod('ser_title', 'Refrigerator Repair Services');
		?>	

		<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 class="row"> 
		 		<?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="s-icon">
										<span class="fa fa-truck"></span>
									</div>
									<div class="service-icon  padding0">
										<div class="ser-img">
											<a href="#">
												<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/Services.jpg');?>" alt="services" />
												<div class="ovrly"></div>
											</a>
										</div>
									</div>
									<div class="service-title-box">
										<a href="#"><h4 class="inner-area-title">Cooling Cell</h4></a>
										<p class="inner-area-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat erat quis est semper, vitae sodales massa </p>
										<div class="btn5">
											<a href="#">See More</a>
										</div>	
										<div class="clearfix"></div>
										</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div> 
							</div>
						</div>
						
		 						<?php 
		 					}
		 				} ?>
			<!-- </div> -->
	 	</div> 
 	</div>	
 </div>

<!--  <script>
        jQuery.noConflict();
        $(function(){
            function singleserviceHeight(){
                var ht = 0;
                $('.service-area .single-service ').each(function(i){
                    var tHt = $(this).height();
                    if(ht<tHt){
                        ht=tHt;
                    }
                });
                $('.service-area .single-service ').height(ht+'px');
            }
            singleserviceHeight();
        });
        $( window ).resize(function(){
            singleserviceHeight();
        });
    </script>  --> 
 <?php }