 <!-- team Area Start -->
 <?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 wow zoomIn " id="service" style="<?php echo esc_attr($service_areaTpadding); ?>" "<?php echo esc_attr($service_areaBpadding); ?>">
		<?php
			$services_page_id = get_theme_mod('services_page');	
 			$ser_title = get_theme_mod('ser_title', 'Our Services');
		?>	

	<div class="container">
		<div class="justify-content-center">
		<?php if($ser_title ){ ?>
		  	<div class="section-title">
		   		<h2><?php echo ($ser_title);  ?></h2> 
	        
	      	</div>
	    <?php }?>
		</div>
	</div>
 	<div class="container"> 
	 	<div class="row"> 
		  	<!-- <div class="owl-carousel owl-theme">  --> 
		 		<?php 
	 				$showStatic = true;
	 				$cols = get_theme_mod('service_npp_count', 5);
	 				$cols++;
	 				switch($cols){
	 					case 1:
						$colCls = 'col-md-12 col-sm-12 col-xs-12';
						break;
						case 2:	
						$colCls = 'col-md-6 col-sm-6 col-xs-12';
						break;
						case 3:
						case 5:
						case 6:
						case 9:
						case 11:
						case 13:
						case 15:
						$colCls = 'col-md-4 col-sm-6 col-xs-12';
						break;
						default: 
						$colCls = '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;?> ">
			<!-- <div class="item">  -->
			<div class="single-service-bx">
				<div class="single-service ">
					<div class="service-icon  padding0">
						<div class="ser-img">
							<a href="#">
								<!-- <span class="fa fa-camera"></span> -->
								<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser1.jpg');?>" alt="services" />
								 
								<div class="ser-wave">
									<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 500" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
										<path d="M 0,500 C 0,500 0,250 0,250 C 96.66410256410259,285.0769230769231 193.32820512820518,320.15384615384613 274,309 C 354.6717948717948,297.84615384615387 419.35128205128194,240.46153846153848 493,234 C 566.6487179487181,227.53846153846152 649.2666666666669,271.99999999999994 733,285 C 816.7333333333331,298.00000000000006 901.5820512820512,279.53846153846155 985,252 C 1068.4179487179488,224.46153846153842 1150.4051282051282,187.84615384615387 1226,186 C 1301.5948717948718,184.15384615384613 1370.797435897436,217.07692307692307 1440,250 C 1440,250 1440,500 1440,500 Z" stroke="none" stroke-width="0" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
									</svg>
								</div>
							</a>
						</div>
					</div>
					<!-- <div class="clearfix"></div> -->
					<div class="service-title-box">

						<a href="#"><h4 class="inner-area-title">Farmhouse Rental Service</h4></a>
						<p class="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>
						<?php if( get_theme_mod('ser_button1_display','show' ) == 'show') : ?>

                    	<?php
                       		 $ser_button1 = get_theme_mod('ser_button1', 'Read More ');
                    	?>
                    
		                            <div class="btn5">  
		                                <a href="<?php echo esc_url(get_permalink()); ?>">
		                                    <?php echo $ser_button1 ?>
		                                </a>
		                            </div>
                		<?php endif ?>	
					</div>
					
					<div class="clearfix"></div> 
				</div>
				
				 <div class="clearfix"></div> 
			</div>
			
		</div>
		 						<?php 
		 					}
		 				} ?>
			<!-- </div> -->
	 	</div> 
 	</div>	
 </div>

 <script>
        jQuery.noConflict();
        $(function(){
            function singleserviceHeight(){
                var ht = 0;
                $('.service-area .single-service ').each(function(i){
                    var tHt = $(this).height();
                    if(ht<tHt){
                        ht=tHt;
                    }
                });
                $('.service-area .single-service ').height(ht+'px');
            }
            singleserviceHeight();
        });
        $( window ).resize(function(){
            singleserviceHeight();
        });
    </script>  
 <?php }
