 <!-- 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')).';';
	}
	if( get_theme_mod('ser_Opacity',true) ) {
		$ser_Opacity = 'opacity:'.esc_attr(get_theme_mod('ser_Opacity')).';';
	}
?>	
<div class="service-area  " id="service" style="<?php echo esc_attr($service_areaTpadding); ?>" "<?php echo esc_attr($service_areaBpadding); ?>">
	<div class="overlay"></div>
		<?php
			$services_page_id = get_theme_mod('services_page');	
			$services_subtitle = get_theme_mod('services_subtitle', 'What WE Do?');
			$services_maintitle = get_theme_mod('services_maintitle', 'Services We Do');
		?>	
	<div class="container">
		<div class="row">
	        <div class="section-title">
	          <div class="subheading"><?php echo ($services_subtitle);  ?></div>
	          <?php if($services_maintitle) { ?>
	            <h2><?php echo ($services_maintitle);  ?></h2> 
	            <div class="border"></div> 
	          <?php }?>
	        </div>
	    </div>
	</div>
 <div class="container">
 	<div class="row"> 
	  	<div class="owl-carousel owl-theme"> 
	 				<?php 
	 				$showStatic = true;
	 				$cols = get_theme_mod('service_npp_count', 3);
	 				$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;?> single-service-bx"> -->
	 				<div class="item">
						<div class="single-service-bx">
							<div class="front single-service ">
								<div class="service-icon  padding0">
									<div class="ser-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>
								<div class="service-title-box">
									<a href="#"><h4 class="inner-area-title">COMMERCIAL  DESIGN</h4></a>
									<p class="inner-area-text">Best Projects and products  in the commercial.</p>	
								</div>
							</div>
							<!-- <div class="clearfix"></div> -->
						</div>
					</div>
	 						<?php 
	 					}
	 				} ?>
		 		</div>
		 		<!-- <div class="clearfix"></div> -->
		 	</div>
		<!-- <div class="clearfix"></div> -->
 	</div>	
 </div>


 <?php }
