<?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_maintitle = get_theme_mod('services_maintitle', 'OUR SERVICE');
				$services_subtitle = get_theme_mod('services_subtitle', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ');
			?>
			
			<div class="container">
				<div class="row justify-content-center">
				<?php if($services_maintitle || $services_subtitle){ ?>
					<div class="col-md-10 col-md-offset2">
					    <div class="section-heading">
					        <h2><?php echo ($services_maintitle);  ?></h2>
					        <p><?php echo ($services_subtitle);  ?></p>
					    </div>
				  </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-4 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  pd-0">
									<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="serbg"></div>
										</a>
									</div>
									<a href="#">
	                                	<div class="sec-iocn"> 
                                    		<i class="fa fa-cogs"></i>
                                    		<div class="ser-olay"></div>
                                		</div> 
		                            </a>
								</div>
								<div class="clearfix"></div>
								<div class="service-title-box">
									<a href="#"><h4>Check Your Gears. </h4></a>
									<p class="post-text inner-area-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
									<div class="servicesbtn">
	                                	<a href="#">READ MORE</a>
	                            	</div>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>

						<?php 
					}
				} ?>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>

<script type="text/javascript">
$(document).ready(function(){
    var highestBox = 0;
        $('#service .single-service-bx').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('#service .single-service-bx').height(highestBox);
});
</script>


<?php }