<?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_subheading = get_theme_mod('services_subheading', 'Services');
			$services_maintitle = get_theme_mod('services_maintitle', 'SERVICES WE PROVIDE');
		?>
		<div class="background-color">
			<div class="container">
				<?php if($services_maintitle || $services_subheading){ ?>
				    <div class="row justify-content-center">
				        <div class="section-title-area">
				        	<?php if($services_subheading){ ?> 
					          <div class="section-subheding">
					            <?php echo ($services_subheading);  ?>
					          </div>
				          <?php }?>
					          <div class="section-title">
					            <h2><?php echo ($services_maintitle);  ?></h2>
					          </div>
				        </div>
				    </div>
				<?php }?>
			</div>
		</div>
			<div class="container extra-padding">
				<div class="service-outer-area">
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('service_npp_count', 3);
				$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-3 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 wow zoomIn">
							<div class="single-service">
								<div class="service-img">
									<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>
								<div class="serinnbx"> 
									<a href="#">
										<h4 class="post-title inner-area-title wow fadeInDown">Diagnostic Skills</h4>
									</a>
									<div class="section-hower-extra">
									<div class="service-icon">
												<i class="fa fa-shield"></i>
									</div>
									<p class="section-area-text">It is a long established fact that a reader will  distracted  readable content of a page .</p>

									<?php
										$homepageservicesbutton = get_theme_mod('homepageservicesbutton', 'Reed More'); 
									?>
									<?php if($homepageservicesbutton){ ?> 
									<div class="serbtn">
										<a href="<?php echo esc_url(get_permalink()); ?>"><?php echo ($homepageservicesbutton );  ?></a>
									</div>
									<?php }?>
									</div>
									
								</div>
							</div>
						</div>
						<?php 
					}
				} ?>
			</div>
		<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
		<!-- <script>
		jQuery.noConflict();
		$(function(){
			function singleserviceHeight(){
				var ht = 0;
				$('#service .single-service').each(function(i){
					var tHt = $(this).height();
					if(ht<tHt){
						ht=tHt;
					}
				});
				$('#service .single-service').height(ht+'px');
			}
			singleserviceHeight();
		});
		$( window ).resize(function(){
			singleserviceHeight();
		});
	</script> -->

<?php }