<?php   
if(get_theme_mod('service_area_disable') != 'on' ){ ?>
	<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', 'uppercase');

				  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', 'right');

		    if ($heading_alignment === 'left') {
				  $text_alignment = 'left';
				} elseif ($heading_alignment === 'center') {
				    $text_alignment = 'center';
				} elseif ($heading_alignment === 'right') {
				    $text_alignment = 'right';
				} else {
				    $text_alignment = 'right'; // Default to 'left' if the setting is invalid
				}
	    ?>

			<?php							
				$ser_title = get_theme_mod('ser_title', 'Services');
				$ser_subtitle = get_theme_mod('ser_subtitle', 'Services');
			?>

			
		<div class="section-title">
			<!-- <div class="container"> -->
			<div class="<?php echo esc_attr($c_width); ?>">
				<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>
					<?php if( $ser_subtitle ){ ?>
					<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($ser_subtitle); ?></h5>
					<?php }?>
				</div>
			</div>
		</div>
		
		<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', 5);
									$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-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_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" /> 
															</a>
															<div class="sertxbx">				
																	<div class="icn">
																			<a href="#">			
																				<i class="fa fa-plug"></i>	
																			</a>
																	</div>							
																	<a href="#">
																		<h4 class="post-title inner-area-title ">Electrical Repairs</h4>
																	</a>
																	<p class="section-area-text">
																			There are many variations of passages of Lorem Ipsum available, but the slightly believable.
																	</p>	
															</div>	
													</div>							
											</div>
											<div class="clearfix"></div>	
									</div>
									<?php 
									}
								} ?>
								</div>
						</div>
				</div>
		</div>
	</div>
 

<?php }