<?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" >
		<div class="container">
				<div class="service-single-area" > 
						<div class="serbx">
								<div class="owl-carousel owl-theme">
								<!-- <div class="row mr-0"> -->
									<?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:
										case 11:
										case 13:
										case 15:
										$colCls = 'col-lg-4 col-md-4 col-sm-6';
										break;
										default: 
										$colCls = 'col-lg-3 col-md-4 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="item single-service-bx">
											<div class="single-service ">
													<div class="service-icon">
															<a href="#">
																<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser2.jpg');?>" alt="services" /> 
																
															</a>
													</div>
													<div class="sertxbx">											
															<h4 class="post-title inner-area-title ">Player Development and Scouting</h4>
															<p class="section-area-text">
																	Learn Your Next (Or First!) Level Of Reiki In A Traditional Japanese House In A Beautiful
															</p>		
													</div>	
													<div class="clearfix"></div>						
											</div>
											<div class="clearfix"></div>	
									</div>
									<?php 
									}
								} ?>
								</div>
						</div>
				</div>
		</div>
	</div>
  <script>
      $(document).ready(function() {
        $('#service .owl-carousel').owlCarousel({
          refreshClass: 'owl-refresh',
          autoplayTimeout:3000,
          loop: true,
          margin: 30,
          autoHeight: true,
          autoWidth: false,
          autoplay: true,
          // rtl:true,
          responsiveClass: true,
          responsive: {
            0: {
              items: 1,
              nav: true,
              margin: 10
            },
            400: {
              items: 1,
              nav: true,
              margin: 10
            },
            500: {
              items: 2,
              nav: true,
              margin: 10
            },
            991: {
              items:2,
              nav: true,
              margin: 10
            },
            1000: {
              items:4,
              nav: true,
              loop: true,
              margin: 30
            }
          }
        })
      })
  </script>

<?php }