<?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-single-area" > 
			<?php
				$services_page_id = get_theme_mod('services_page');
				$services_maintitle = get_theme_mod('services_maintitle', '<span>OUR</span> SERVICES');

			?>
			
			<div class="container">
				<div class="row justify-content-center">
					<?php if($services_maintitle){ ?>	
						<!-- <div class="col-md-4"> -->
							<div class="section-title">
								<?php if(!empty($services_maintitle)){ ?>
								<h1><?php echo ($services_maintitle);  ?></h1>
									<?php }?> 
							</div>
						<!-- </div> -->
					<?php }?>
				</div>
			</div>
				<div class="container">
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('service_npp_count', 2);
				$cols++;
				switch($cols){
					case 1:
					$colCls = 'col-md-12 col-sm-12';
					break;
					case 2:	
					$colCls = 'col-md-6 col-sm-6';
					break;
					case 3:
					case 5:
					case 6:
					case 9:
					case 11:
					case 13:
					case 15:
					$colCls = 'col-md-4 col-sm-6';
					break;
					default: 
					$colCls = 'col-md-4 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 wow bounceInDown">
						<div class="single-service wow zoomIn">
							<div class="overlay"></div>
								<a href="#">
									<div class="service-containt">
									<h4 class="post-title inner-area-title wow fadeInDown">STEEL WELDING</h4>
									<div class="service-text"><p class="section-area-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p></div>
									</div>
									<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/blog.png');?>" alt="services" />
								</a>
								<div class="clearfix"></div>
							<!-- </div> -->
						</div>
					</div>
						<?php 
					}
				} ?>
				</div>
			<div class="clearfix"></div>
		</div>
	</div>

<script>
                jQuery.noConflict();
                $(function(){
                    function servicetextHeight(){
                        var ht = 0;
                        $('#service .service-text p').each(function(i){
                            var tHt = $(this).height();
                            if(ht<tHt){
                                ht=tHt;
                            }
                        });
                        $('#service .section-area-text p').height(ht+'px');
                    }
                    servicetextHeight();
                });
                $( window ).resize(function(){
                    servicetextHeight();
                });
            </script>

<!-- -------------------------- -->


<?php }