 <!-- 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 wow zoomIn " 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_title = get_theme_mod('ser_title', 'OUR SERVICES');
		?>

		<div class="container">
			<div class="row justify-content-center">
				  <div class="section-title">
				    <?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', 5);
	 				$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="#">
												<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">DESKTOP REPAIRING</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 class="clearfix"></div>
										<div class="button-services">
										<a href="#" class="more-button btn btn-lg red">READ MORE</a>
										</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 }
