<?php   
if(get_theme_mod('service_area_disable') != 'on' ){ ?>
	
	<div class="service-area text-center" id="service">
		<!-- <div class="service_gradiant"></div> -->
			<div class="service-single-area" > 
			<?php
				$services_page_id = get_theme_mod('services_page');	
				$services_subtitle = get_theme_mod('services_subtitle', 'Services Section');
				$services_title = get_theme_mod('services_title', 'Lorem Ipsum Are Believable.');
			
			?>
					<div class="container">
							<div class="section-title-area">
								<?php if( get_theme_mod('serhimg_display','show' ) == 'show'): ?>
									<div class="serhedimg">
										<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/serhed.png');?>" alt="wedding" />
									</div>
								<?php endif ?>
									<div class="section-title">
											<h4><?php echo ($services_subtitle); ?></h4>
											<h2><?php echo ($services_title); ?></h2>							
				 					</div>
			 						<div class="clearfix"></div>	
							</div>			
							<div class="clearfix"></div>
					</div>
					<div class="container">
							<div class="service-outer-area">
				  				<div class="row">  
									<?php 
										$showStatic = true;
										$cols = get_theme_mod('service_npp_count', 5);
										$cols++;
										switch($cols){
											case 1:
											$colCls = 'col-lg-12 col-md-12 col-sm-12 col-xs-12';
											break;
											case 2:	
											$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-12';
											break;
											case 3:
											case 5:
											case 6:
											case 9:
											case 11:
											case 13:
											case 15:
											case 17:
											case 19:
											case 21:
											case 23:
											$colCls = 'col-lg-4 col-md-4 col-sm-6 col-xs-12';
											break;
											default: 
											$colCls = 'col-lg-3 col-md-3 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;?> single-service-bx ">
													<div class="single-service">
															<div class="service-icon">
																	<a href="#">
																		<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser1.jpg');?>" alt="services" />
																		<div class="ser-text">
																				<a href="#">
																					<h3 class="post-title ">Corporate Events</h3>
																				</a>
																				<p> Lorem Ipsum is simply dummy text of the industry. </p> 

												            		<div class="readmore1">
											                      <a href="#"> Learn More </a>
											                  </div>
																		</div>
																	</a>
															</div>
															
													</div>	
												</div>
												<?php 
											}
										} ?>
									</div>
							</div>
							<div class="clearfix"></div>
					</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 }