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

 	<div class="container"> 
 		<div class=" justify-content-center">
		<?php if($ser_title ){ ?>
			<div class="section-title">
              	<h2><?php echo ($ser_title);  ?></h2> 
          	</div> 
          <?php }?>
      </div>
	 	<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-4 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;?> serbx ">
 				<!-- <div class="item">  -->
					<div class="single-service-bx">
						<div class="single-service ">
							<div class="service-icon">
								<div class="ser-img">
									<a href="#">
										<!-- <span class="fa fa-eye"></span> --> 
										<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser1.jpg');?>" alt="services" /> 
									</a>
									<div class="clearfix"></div>
								</div>
							</div>
							<div class="service-title-box">
								<a href="#"><h4 class="inner-area-title">FACE MAKEUP</h4></a>
								<p class="inner-area-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do irure eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>					
								<div class="readmore">
									<a>Read More <i class="fa fa-long-arrow-right"></i></a>
								</div>
							</div>
							
						</div>
						 <div class="clearfix"></div> 
					</div>
				</div>
					<?php 
				}
			} ?>
			<!-- </div> -->
	 	</div> 
 	<!-- </div> -->	
 </div>
 </div>
<script type="text/javascript">
	var title = 0;
	jQuery(".service-area .single-service-bx").each(function(){
	  if ($(this).height() > title) { title = $(this).height(); }
	});
	jQuery(".service-area .single-service-bx").height(title);


	// on Resize change height

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