<?php   
if(get_theme_mod('service_area_disable') != 'on' ){ ?>
<div class="service-area " id="service" data-wow-duration="1s">	
<?php
	// Heading 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
		}

	// slider width 
	// $sliderc_width = get_theme_mod('ser_slider_width', 'container-fluid');

  //   if ($sliderc_width === 'container') {
	// 	    $sliderc_alignment = 'container';
	// 	} elseif ($sliderc_width === 'container-fluid') {
	// 	    $sliderc_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 = 'right'; // Default to 'left' if the setting is invalid
	}
?>

<?php
	//$ser_subtitle = get_theme_mod('ser_subtitle', 'Our Service');							
	$ser_title = get_theme_mod('ser_title', 'Amazing Services');
	$ser_subtxt = get_theme_mod('ser_subtxt', 'Our proactive tax solutions support your business success, letting you focus on your strengths.');

	$sersubbtntxt = get_theme_mod('sersubbtntxt', 'GET SERVICE');
	$sersublink = get_theme_mod('sersublink', '#');	
?>	
	<div class="<?php echo esc_attr($c_width); ?>">
		<div class="serbx">
			<div class=" row mr-0" >
				<div class="col-lg-4 col-md-6 col-sm-6 single-service-bx">
					<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>
						<p style="text-align: <?php echo esc_attr($text_alignment); ?>; "><?php echo ($ser_subtxt); ?></p>

						<?php if( $sersubbtntxt ){ ?>
						<div class="ser-sub-btn" style="text-align: <?php echo esc_attr($text_alignment); ?>;">
							<a href="<?php echo ($sersublink);  ?>" >
								<?php echo ($sersubbtntxt);  ?>
							</a>					
						</div>
						<?php }?>
					</div>
				</div>
			
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('service_npp_count', 4);
				$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="single-service ">
						<div class="service-icon">
							<a href="#">
								<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/ser2.png');?>" alt="services" /> 
								<i class="fa fa-university"></i>
							</a>
							<div class="sertxbx">										
								<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 class="s-btn">
									<a href="#">READ MORE</a>
								</div>
							</div>	
						</div>							
					</div>
					<div class="clearfix"></div>	
				</div>
				<?php 
					}
				} ?>
			</div>
		</div>
		
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    var highestBox = 0;
        $('#service .single-service').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('#feature .f-bxinn').height(highestBox);
});
</script>

<?php }