<?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-fluid');

    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
		}

	//sub Heading Style
	$subheading_case = get_theme_mod('ser_subtitle_case', 'uppercase');

	if ($subheading_case === 'uppercase') {
			$text_case = 'uppercase';
		} elseif ($subheading_case === 'lowercase') {
		    $text_case = 'lowercase';
		} elseif ($subheading_case === 'capitalize') {
		    $text_case = 'capitalize';
		} else {
		    $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
		}
		 

	//Main 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', 'Services');							
	$ser_title = get_theme_mod('ser_title', 'What We Offer');
?>	
	<div class="<?php echo esc_attr($c_width); ?> cf-ps">
		<div class="section-title " style="text-align: <?php echo esc_attr($text_alignment); ?>;">        
            <div class="titlebx ">
	            <h2 style="text-transform: <?php echo esc_attr($subheading_case); ?>;"><?php echo ($ser_subtitle); ?></h2>
	            <h3 style=" text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($ser_title); ?></h3>
            </div>     
	    </div>
	
		<div class="serbx">
			<div class=" row mr-0" >
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('service_npp_count', 2);
				$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.jpg');?>" alt="services" /> 
								<!-- <i class="fa fa-university"></i> -->
							</a>
						</div>
						<div class="sertxbx">									
							<a href="#">
								<h4 class="post-title inner-area-title ">Custom Software Development</h4>
							</a>
							<p class="section-area-text">
								We build scalable, high-performance software tailored to your business needs.
							</p>	
							<div class="s-btn">
								<a href="#">Learn More </a>
							</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();  
        }
    });    
    $('#service .single-service').height(highestBox);
});
</script>

<?php }