<?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-ovly"></div>
		<div class="container">
				<div class="row">
						<div class="col-xl-8 col-lg-8">
								<?php
									$services_page_id = get_theme_mod('services_page');
								?>
								<?php
									$servicetitle = get_theme_mod('service_title', 'Our Services');
								?>
								<div class="serbx">
										<div  class="owl-carousel">
											<?php 
											$showStatic = true;
											$cols = get_theme_mod('service_npp_count', 5);
											$cols++;
											switch($cols){
												case 1:
												$colCls = '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-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_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="item">
												<div class="single-service-bx" data-wow-duration="1s">
														<div class="single-service " ser-match-height>
															<div class="service-icon">
																	<a href="#">
																		<span><i class="fa fa-money" aria-hidden="true"></i></span>
																	</a>
															</div>
															<a href="#">
																<h4 class="post-title inner-area-title wow fadeInDown">Buying And Selling</h4>
															</a>
														</div>
														<div class="service-border"></div>
														<div class="sertxbx">
																<p>Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500S, When An Unknown </p>
																<div class="serbtn">
																		<a href="#"><span>Read Now</span></a>
																</div>	
															</div>
														</div>				
													</div>
											<?php 
											}
										} ?>
									</div>
							</div>
						</div>
						<div class="col-xl-4 col-lg-4">
								<div class="service-titlearea">
										<?php
												$servicetitle = get_theme_mod('service_title', 'What We Do ?');
												$service_text = get_theme_mod('service_text', 'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industrys Standard Dummy Text Ever Since The 1500S, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book. It Has Survived Not Only Five Centuries, But Also The Leap Into Electronic Typesetting, Remaining Essentially Unchanged.');
												$ser_btntxt = get_theme_mod('ser_btntxt', 'Read Now');
												$ser_btnlink = get_theme_mod('ser_btnlink', '#');
										?>
										<?php if($servicetitle){ ?>
											<div class="section-title">
												<h2><?php echo ($servicetitle);  ?></h2>
											</div>
										<?php }?>
										<?php if($service_text){ ?>
											<p><?php echo ($service_text);  ?></p>
										<?php }?>
										<div class="service-button">
											<?php 
												if($ser_btntxt){ 
											?>
												<a href="<?php echo ($ser_btnlink);  ?>">
													<span><?php echo ($ser_btntxt);  ?></span>
												</a>
											<?php }?>
										</div>
									</div>
						</div>
				</div>
		</div>
</div>
<script>
    $(document).ready(function() {
      $('#service .owl-carousel').owlCarousel({
        refreshClass: 'owl-refresh',
        autoplayTimeout:5000,
        autoplaySpeed: 4000,
        loop: true,
        margin: 0,
        autoHeight: true,
        autoWidth: false,
        autoplay: false,
        responsiveClass: true,
        navText: [
                '<i class="fa fa-caret-left" aria-hidden="true"></i>',
                '<i class="fa fa-caret-right" aria-hidden="true"></i>'
            ],
        responsive: {
          0: {
            items: 1,
            nav: true,
            margin: 20,
          },
          475: {
            items:2,
            nav: true,
            margin: 10,
          },
          1199: {
            items:3,
            nav: true,
            loop: true,
            margin: 12,
          }
        }
      })
    })
</script>
<?php }