<?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" >	
			<?php
				// width 
				$c_width = get_theme_mod('ser_c_width', 'container');

			    if ($c_width === 'container') {
					    $c_alignment = 'container';
					} elseif ($c_width === 'container-fluid') {
					    $c_alignment = 'container-fluid';
					} else {
					    $text_alignment = 'container'; // Default to 'container' if the setting is invalid
					}

					// Heading Style
        	$heading_case = get_theme_mod('ser_maintitle_case', 'capitalize');

				  if ($heading_case === 'uppercase') {
						$text_case = 'uppercase';
					} elseif ($heading_case === 'lowercase') {
					    $text_case = 'lowercase';
					} elseif ($heading_case === 'capitalize') {
					    $text_case = 'capitalize';
					} else {
					    $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
					}
					 
					// Alignment
	        $heading_alignment = get_theme_mod('ser_maintitle_align', 'left');

			    if ($heading_alignment === 'left') {
					    $text_alignment = 'left';
					} elseif ($heading_alignment === 'center') {
					    $text_alignment = 'center';
					} elseif ($heading_alignment === 'right') {
					    $text_alignment = 'right';
					} else {
					    $text_alignment = 'left'; // Default to 'left' if the setting is invalid
					}
	    ?>
			<?php							
				$ser_title = get_theme_mod('ser_title', 'Our Services');
				$ser_subtitle = get_theme_mod('ser_subtitle', 'Reliable Handyman Services For Every Job, Big Or Small');
				$ser_txt = get_theme_mod('ser_txt', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or which do not look even slightly believable.');
			?>

			<?php if( $ser_title || $ser_subtitle || $ser_txt ){ ?>	
			<div class="section-title">
					<!-- <div class="container"> -->
						<div class="<?php echo esc_attr($c_width); ?>">
							<div class="row">
									<div class="col-lg-6">
											<div class="titlebx">
													<h3 style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($ser_title); ?></h3>
													<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($ser_subtitle); ?></h5>
													<div class="titlebrd"></div>
											</div>
									</div>
									<div class="col-lg-6">
											<p>
												<?php echo ($ser_txt); ?>	
											</p>
											<div class="clearfix"></div>
									</div>
							</div>
					</div>
			</div>
			<?php }?>
		
		<div class="<?php echo esc_attr($c_width); ?>">
				<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-6 col-sm-6';
										break;
										default: 
										$colCls = 'col-lg-3 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="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" /> 
																	<div class="ser-oly"></div>
															
																<div class="sertxbx">			
																		<div class="row mr-0">		
																				<div class="icn">			
																						<i class="fa fa-wrench"></i>	
																				</div>							
																				<h4 class="post-title inner-area-title ">Plumbing</h4>
																		</div>
																		<p class="section-area-text">
																				Learn Your Next (Or First!) Level Of Reiki In A Traditional Japanese House In A Beautiful
																		</p>	
																		<!-- <div class="serbtn">
																				<a href="#"> <span >View More</span>	</a>
																		</div> -->	 	
																</div>	
															</a>
													</div>							
											</div>
											<div class="clearfix"></div>	
									</div>
									<?php 
									}
								} ?>
								</div>
						</div>
						<div class="bttnbx">
								<?php
									$serbtn_text1 = get_theme_mod('serbtn_text1', 'Browse All Services');
									$serbtn1link = get_theme_mod('serbtn1link', '#');

									$serbtn_text2 = get_theme_mod('serbtn_text2', 'Get a quote');
									$serbtn2link = get_theme_mod('serbtn2link', '#');
								?>
								<?php if($serbtn_text1 ){ ?>
								<div class="ser-btn1">									
										<a href="<?php echo ($serbtn1link);  ?>" >
				                <span><?php echo($serbtn_text1); ?> </span>
										</a>	
								</div>	
								<?php }?>
								
								<?php if($serbtn_text2 ){ ?>
								<div class="ser-btn2">
										<a href="<?php echo ($serbtn2link);  ?>" >
				                <span><?php echo($serbtn_text2); ?> </span>
										</a>
								</div>
								<?php }?>
						</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,
          navText: [
                    '<i class="fa fa-angle-left"></i> ',
                    '<i class="fa fa-angle-right" ></i>'
                ],
          responsiveClass: true,
          responsive: {
            0: {
              items: 1,
              nav: true,
              margin: 10
            },
            400: {
              items: 1,
              nav: true,
              margin: 10
            },
            500: {
              items: 2,
              nav: true,
              margin: 20
            },
            991: {
              items:2,
              nav: true,
              margin: 20
            },
            1000: {
              items:3,
              nav: true,
              loop: true,
              margin: 50
            }
          }
        })
      })
  </script>

<?php }