<?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 text-center" id="service" style="<?php echo esc_attr($service_areaTpadding); ?>" "<?php echo esc_attr($service_areaBpadding); ?>">
		<!-- <div class="service_gradiant"></div> -->
		<div class="service-single-area" > 
			<?php
			$services_page_id = get_theme_mod('services_page');	

			$services_page_maintitle = get_theme_mod('services_maintitle', 'Beast For Occasions');
			$servicestext = get_theme_mod('services_sectext', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.');

			?>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-xl-6 col-lg-6 col-sm-11 col-xs-12">	
					<div class="section-title-area">
						<?php if($services_page_maintitle){ ?>
							<?php if($services_page_maintitle){ ?>
							<div class="section-title">
								<h2><?php echo ($services_page_maintitle);  ?></h2>
							
						
								<div class="title-icon1">
			 					 	<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/sectitle.png" />
			 					</div>
		 					</div>
	 					<?php }?>
	 					<div class="clearfix"></div>	
						<?php }?>
						<div class="section-subtitle">
							<p><?php echo ($servicestext);  ?></p>
						</div>
					</div>
					
				</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-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:
					case 17:
					case 19:
					case 21:
					case 23:
					$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">
									<a href="#">
										<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser1.jpg');?>" alt="services" />
										<div class="ovrelay"></div>
									</a>
								</div>
								<div class="ser-text">
									<a href="#">
										<h3 class="post-title wow fadeInDown">Building Information</h3>
									</a>
									<p class="post-text inner-area-text"> 
										It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                            		</p> 

                            		<div class="readmore1">
	                                    <a href="#" class="more-button">
	                                    	Read More<i class="fa fa-angle-double-right"></i>
	                                    	<div class="btnborder"></div>
	                                    </a>
	                                </div>
								</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 }