<?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); ?>" >
		<div class="service-single-area" > 
			<?php
				$services_page_id = get_theme_mod('services_page');
				//$sersubtitle = get_theme_mod('sersubtitle', 'What we do');	
				$services_maintitle = get_theme_mod('services_maintitle', 'We are certified ');
				$services_maintitle2 = get_theme_mod('services_maintitle2', 'plumber in Los Angle');
				$ser_hd_text = get_theme_mod('serhdtext', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some');
			?>
			<div class="container">
					<div class="row">
							<?php if($services_maintitle){ ?>	
							<div class="col-md-6 ser-r">
								
									<div class="ser-heading">
											<h2><?php echo ($services_maintitle);  ?> <span><?php echo ($services_maintitle2);  ?></span></h2>
									</div>
								
							</div>
							<?php }?>
							<div class="col-md-6 ser-l">
									<div class="ser-h-text">	
											<?php echo ($ser_hd_text);  ?>
									</div>
							</div>
					</div>
			</div>
			<div class="serbx">
				<div class="container">
					<div class="row">
					<?php 
					$showStatic = true;
					$cols = get_theme_mod('service_npp_count', 3);
					$cols++;
					switch($cols){
						case 1:
						$colCls = 'col-lg-12 col-md-12 col-sm-12';
						break;
						case 2:	
						$colCls = 'col-lg-6 col-md-6 col-sm-6';
						break;
						case 3:
						case 5:
						case 6:
						case 9:
						case 11:
						case 13:
						case 15:
						$colCls = 'col-lg-4 col-md-6 col-sm-6';
						break;
						default: 
						$colCls = 'col-lg-3 col-md-6 col-sm-6';
						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;?> single-service-bx ">
							<div class="single-service " ser-match-height>
									<div class="service-icon">
											<a href="#">
												<!-- <img class="img-responsive" src="</?php echo esc_url(get_template_directory_uri().'/images/ser2.jpg');?>" alt="services" /> -->
												<!-- <div class="s-oly"></div> -->
											</a>
											<div class="sec-icn"> 
			                    <a href="#">
			                    	<i class="fa fa-user-o"></i>
			                    </a>
			                </div> 
									</div>
									<div class="sertxbx">
											<a href="#">
													<h4 class="post-title inner-area-title wow fadeInDown">Expert Plumbing Repairs and Installations</h4>
											</a>
											<p class="section-area-text">
													There are many variations of passages of Lorem Ipsum available, but the majority.
											</p>
											<div class="serbtn">
													<a href="#"><span>Read More</span></a>
											</div>	
									</div>	
									<div class="clearfix"></div>						
							</div>
							<div class="clearfix"></div>	
					</div>
						<?php 
						}
					} ?>
				</div>
				</div>
			</div>
			<!-- <div class="clearfix"></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 }