<?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')).';';
	}
	if( get_theme_mod('service_areaOpacity',true) ) {
		$service_areaOpacity = 'opacity:'.esc_attr(get_theme_mod('service_areaOpacity')).';';
	}
	?>	

	<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');	
				$services_subtitle = get_theme_mod('services_subtitle', 'Our Specalities');
				$services_maintitle = get_theme_mod('services_maintitle', 'Our Services');
			?>
			
			<div class="container">
			  <div class="row justify-content-center">
			    <?php if($services_maintitle || $services_subtitle){ ?>
			      <div class="section-heading">
			          <p><?php echo ($services_subtitle);  ?></p>
			          <h2><?php echo ($services_maintitle);  ?></h2>
			      </div>
			    <?php }?>
			  </div>
			</div>
			
			<div class="container">
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('service_npp_count', 2);
				$cols++;
				switch($cols){
					case 1:
					$colCls = 'col-md-12 col-sm-12';
					break;
					case 2:	
					$colCls = 'col-md-6 col-sm-6';
					break;
					case 3:
					case 5:
					case 6:
					case 9:
					case 11:
					$colCls = 'col-md-4 col-sm-6';
					break;
					default: 
					$colCls = 'col-md-3 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 ">
								<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" />
										</a>
									</div>
	                                <div class="sec-iocn"> 
	                                    <a href="#">
	                                    	<i class="fa fa-spinner"></i>
	                                    </a>
	                                </div> 
								</div>
								<div class="service-title-box">
									<a href="#"><h4 class="post-title inner-area-title">Lawn Mowing</h4></a>
									<p class="post-text inner-area-text">Exercitation llamco laboris nis aliquip sed conseqrure dolorn repreh velit excepteur duis aute. Exercitation llamco laboris nis</p>
								</div>
								<div class="servicesbtn">
                                	<a href="#">Read More</a>
                            	</div>
							</div>
							<div class="clearfix"></div>
						</div>

						<?php 
					}
				} ?>
				<div class="clearfix"></div>
				<?php
					$ser_link = get_theme_mod('ser_link', '');
					$ser_button = get_theme_mod('ser_button1', 'Load More');
					?>
					<?php if( get_theme_mod('ser_button_display','show' ) == 'show') :
						?>	
					<div class="loadmore">
						<a href="<?php echo $ser_link ?>"> <?php echo $ser_button ?> </a>
					</div>

				<?php endif ?>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
<script type="text/javascript">
		var title = 0;
	jQuery("#service .single-service-bx").each(function(){
	  if ($(this).height() > title) { title = $(this).height(); }
	});
	jQuery("#service .single-service-bx").height(title);


	// on Resize change height

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

<?php }