<?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_areaLpadding',true) ) {
			$service_areaLpadding = 'padding-left:'.esc_attr(get_theme_mod('service_areaLpadding')).';';
		}
		if( get_theme_mod('service_areaRpadding',true) ) {
			$service_areaRpadding = 'padding-right:'.esc_attr(get_theme_mod('service_areaRpadding')).';';
	}?>

	<div class="service-area  " id="service" style="<?php echo esc_attr($service_areaTpadding); ?>" "<?php echo esc_attr($service_areaBpadding); ?>" "<?php echo esc_attr($service_areaLpadding); ?>" "<?php echo esc_attr($service_areaRpadding); ?>">

		<div class="service-single-area" > 
			<?php
			$services_page_id = get_theme_mod('services_page');	
			$services_maintitle = get_theme_mod('services_maintitle', 'OUR SERVICES');

			?>
	
			<!-- <div class="container"> -->
				<div class="row">
			 		 <div class="ht-section-title-tagline">
			 			<?php if($services_maintitle){ ?>
			 				<div class="heading-icon-l">
								<i class="fa fa-cog"></i>
							</div>
				 			<div class="section-title ht-border">
				 				<h2><?php echo ($services_maintitle);  ?></h2>
				 				<div class="title-icon">
			 					 	<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/heading-tap.png" />
			 					</div>
			 				</div>
			 				<div class="clearfix"></div>
			 			<?php }?>
			 		</div> 
			 	</div>		
		 	<!-- </div> -->

			<!-- <div class="container"> -->
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('service_npp_count', 15);
				$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:
			        case 13:
			        case 15:
			        $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 padding0">
							<div class="single-service col-md-12 col-sm-12 col-xs-12">
								<div class="service-icon col-md-3">
									 <a href="#">	
										<i class="fa fa-podcast"></i>
									</a> 
									<!-- <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/services.jpg');?>" alt="services" /> -->									
								</div>
								<div>
									<a href="#"><h4 class="inner-area-title col-md-9">Sewer Line Connection and Cleaning</h4></a>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="clearfix"></div>
						</div>
						<?php 
					}
				} ?>
			<!-- </div> -->
			<div class="clearfix"></div>
		</div>
	
	</div>
	<script type="text/javascript">
        var title = 0;
        jQuery("#service .single-service").each(function(){
          if ($(this).height() > title) { title = $(this).height(); }
        });
        jQuery("#service .single-service").height(title);


        // on Resize change height

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

<?php }
