<?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');
					$sersubtitle = get_theme_mod('sersubtitle', 'Our Service');	
					$services_maintitle = get_theme_mod('services_maintitle', 'WHAT WE PROVIDE TO YOU');

				?>
					<div class="container">
						<!-- <div class="row justify-content-center"> -->
							<?php if($services_maintitle || $sersubtitle){ ?>	
							<div class="section-title">
							<div class="headbrd"></div>
								<?php if($sersubtitle ){ ?>	
										<h1><?php echo ($sersubtitle);  ?></h1>
								<?php }?>
									<h2><?php echo ($services_maintitle);  ?></h2>
							</div>
							<?php }?>
						<!-- </div> -->
					</div>
							
					<div class="serbx">
							<div class="container">
									<div class="row">
									<?php 
									$showStatic = true;
									$cols = get_theme_mod('service_npp_count', 3);
									$cols++;
									switch($cols){
										    case 1:
												$colCls = 'col-lg-12 col-md-12 col-sm-12';
												break;
												case 2:
												$colCls = 'col-lg-6 col-md-6 col-sm-6';
												break;
												case 3:
												case 5:
												case 6:
												case 9:
												$colCls = 'col-lg-6 col-md-6 col-sm-6';
												break;
												case 4:
												case 7:
												case 8:
												case 10:
												case 11:
												case 12:
												$colCls = 'col-lg-3 col-md-6 col-sm-6';
												break;
												default: 
												$colCls = 'col-lg-4 col-md-6 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 " ser-match-height>
														<div class="service-icon ser-front">
																<a href="#">
																	<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser2.jpg');?>" alt="services" />
																</a>
																<div class="sertxbx">
																		<a href="#">
																			<h4 class="post-title inner-area-title wow fadeInDown">Photos With Animals</h4>
																		</a>
																		<div class="row mr-0">
																				<div class="col-md-10 col-10 pd-0">
																						<p class="section-area-text">Lorem ipsum dolor sit amet.</p>
																				</div>
																				<div class="col-md-2 col-2">
																						<div class="serbtn">
																								<a href="#"><i class="fa fa-arrow-right"></i></a>
																						</div>	
																				</div>
																		</div>
																</div>	
														</div>	
														<div class="ser-back">
																<figure>
																	<a href="#">
																		<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser2.jpg');?>" alt="services" />
																		<div class="oly"></div>
																	</a>
																</figure>
																<div class="serbtn2">

																		<a href="#">

																			Read More
																		</a>
																		<!-- <div class="clearfix"></div> -->
																</div>
														</div>				
												</div>
										</div>
										<?php 
										}
									} ?>
									</div>
							</div>
					</div>
				<!-- <div class="clearfix"></div> -->
			</div>
	</div>
	
	<script type="text/javascript">
    var title = 0;
    jQuery(".service-area .single-service").each(function(){
      if ($(this).height() > title) { title = $(this).height(); }
    });
    jQuery(".service-area .single-service").height(title);


    // on Resize change height

    jQuery(window).resize(function(){
      jQuery(".service-area .single-service").height("");
      var title = 0;
      jQuery(".service-area .single-service").each(function(){
        if ($(this).height() > title) { title = $(this).height(); }
      });
      jQuery(".service-area .single-service").height(title);
    });
</script>

<?php }