<?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 text-center" id="service" style="<?php echo esc_attr($service_areaTpadding); ?>" "<?php echo esc_attr($service_areaBpadding); ?>" >

		<?php
		$service_area_subtitle = get_theme_mod('service_area_subtitle', 'HEADING HERE');
		$service_area_title = get_theme_mod('service_area_title', 'Our <span>Services</span>');
		$service_area_content = get_theme_mod('service_area_content', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu pharetra ex. Etiam eget diam ligula..');
		?>
		<?php if($service_area_subtitle || $service_area_title){ ?>
		<div class="col-md-6 col-md-offset-3 col-sm-12 section-title-subtitle">
				
			<div class="section-subheading text-center">
				<?php
				if(!empty($service_area_subtitle))  { 
					echo ($service_area_subtitle);
				} ?>										
			</div>
			<h2 class="section-heading text-center">
				<?php
				if(!empty($service_area_title))  {
					echo ($service_area_title);
				} ?>
			</h2>
			
		</div>
		<?php }?>
		<div class="col-md-6 col-md-offset-3 col-sm-12 section-text">
			<?php
			if(!empty($service_area_content))  {
				echo ($service_area_content);
			} ?>
		</div>
		<div class="service-single-area" > 
			<div class="container">
				<?php 
				$showStatic = true;
				$cols = get_theme_mod('rg_service_npp_count', 3);
				$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:
					$colCls = 'col-md-4 col-sm-6';
					break;
					case 4:
					case 7:
					case 8:
					case 10:
					case 11:
					case 12:
					$colCls = 'col-md-3 col-sm-6';
					break;
					default: 
					$colCls = 'col-md-3 col-sm-6';
					break;
				}
				for( $i = 1; $i <= $cols; $i++ ){
					$rg_service_page_id = get_theme_mod('rg_service_page'.$i); 
					$rg_service_page_icon = get_theme_mod('rg_service_page_icon'.$i);
					//$services_page_icon1 = get_theme_mod('services_page_icon1'.$i);
					if($rg_service_page_id){
						$showStatic = false;
						echo serviceShortCode($rg_service_page_id, $isCustomizer=true, $i);
					}
				}
				if($showStatic === true){
					for( $i = 1; $i <= $cols; $i++ ){ ?>
						<div class="<?php echo $colCls;?> pd-5 single-service">
							<div class="section-element section-element-blog">
								<div class="post uk-grid-margin bg-hovered uk-width-1-3@m uk-scrollspy-inview uk-animation-slide-bottom-small" style="">


									<div class="thumb_backound pr4 pl4 uk-transition-toggle uk-light uk-flex-bottom" >
										<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/service-1.jpg');?>" alt="services" /> 
										<div class="entry-hover"></div>
										<div class="uk-flex uk-flex-column">
											<h3 class="animeblogtitle">
												<a href="">Commercial Service</a>
											</h3>
											<p class="animeblogtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

											<a class="main-btn btn-1" href="">Read More  <i class="fa fa-long-arrow-right"></i></a>
										</div>
									</div>
								</div>
							</div><!-- end .section-element/blog -->
						</div>
						<?php 
					}
				} ?>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
</div>
	<?php }