<?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" 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 <span>Courses</span>');
			$services_subtitle = get_theme_mod('services_subtitle', 'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.');
			?>
			 <div class="container"> 
			 	<div class="col-md-8 col-md-offset-2">
					<div class="row justify-content-center">
						<?php if($services_maintitle ) { ?>
						<div class="Heading-conn">
							<div class="section-title">	
								<h2><?php echo ($services_maintitle);  ?></h2>
									<div class="wavy">
										<?php 
											$serhead_image5 = get_theme_mod('serhead_image5');
											if(!empty($serhead_image5)){
												echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($serhead_image5).'" class="img-responsive" />';
											}else{
												echo '<img alt="serheadimg" src="'.get_template_directory_uri().'/images/titleborder.png" class="img-responsive" />';
											}
										?>
									</div>
								<p><?php echo ($services_subtitle);  ?></p>
							</div>
						</div>
						<?php }?>
					</div>
				</div>
			 </div> 
			<div class="container">
				<?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:
					$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 wwdo-match-height="groupName" 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="ovrly"></div>
									</a>
								</div>
									<a href="#">
										<h4 class="post-title inner-area-title ">HEADING HERE</h4>
									</a>
								<div class="service-title-box">
								  <p>Lorem ipsum dolor sit amet conse ctetur adipiscing elitVivam
								useuph aretra.</p> 
									
									<?php
										$homepageservicesbutton = get_theme_mod('homepageservices_txt', 'READ MORE'); 
									?>
									<?php if( get_theme_mod('services_button_display','show' ) == 'show') :
										?>
										<div class="readmore">	
											<a href="<?php echo esc_url(get_permalink()); ?>" class="more-button"><?php echo ($homepageservicesbutton );  ?></a>
									</div>
									<?php endif ?>
									<div class="clearfix"></div>
								</div>
							</div>
						</div>
						<?php 
					  }
					} ?>
				<div class="clearfix"></div>
			 </div> 
			<div class="clearfix"></div>
	 	</div>
		<div class="clearfix"></div>
	</div>
<script>
	var matchHeight = function () {
	
	function init() {
		eventListeners();
		matchHeight();
	}
	
	function eventListeners(){
		$(window).on('resize', function() {
			matchHeight();
		});
	}
	
	function matchHeight(){
		var groupName = $('[wwdo-match-height]');
		var groupHeights = [];
		
		groupName.css('min-height', 'auto');
		
		groupName.each(function() {
			groupHeights.push($(this).outerHeight());
		});
		
		var maxHeight = Math.max.apply(null, groupHeights);
		groupName.css('min-height', maxHeight);
	};
	
	return {
		init: init
	};
	
} ();

$(document).ready(function() {
	matchHeight.init();
});
</script>

<?php }