	<?php

if(get_theme_mod('features_area_disable') != 'on' ){
	?>

	<?php 
	if( get_theme_mod('features_areaTpadding',true) ) {
		$features_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('features_areaTpadding')).';';
	}
	if( get_theme_mod('features_areaBpadding',true) ) {
		$features_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('features_areaBpadding')).';';
	}

	?>
	<div class="features-area-inn " id="features" style="<?php echo esc_attr($features_areaTpadding); ?>" "<?php echo esc_attr($features_areaBpadding); ?>">

		<?php
			$fea_maintitle = get_theme_mod('fea_maintitle', 'OUR FEATURES');
			$fea_subtitle = get_theme_mod('fea_subtitle', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.');
		?>
		

		<div class="container">
			  <div class="row justify-content-center">
			    <?php if($fea_maintitle || $fea_subtitle){ ?>
			    	<div class="col-md-10 col-md-offset2">
				      <div class="section-heading">
				          <h2><?php echo ($fea_maintitle);  ?></h2>
				          <p><?php echo ($fea_subtitle);  ?></p>
				      </div>
			    	</div>
			    <?php }?>
			  </div>
		</div>
		
		<?php
			$showStatic = true;
			for( $i = 1; $i < 3; $i++ ){
				$url = get_theme_mod('ourfeatured_page_url_'.$i, '#');
				$pro_b_page_id = get_theme_mod('fea_page_icon'.$i); 
							if(!empty($pro_b_page_id)){
								$showStatic = false;
								break;
				}
			}
		?>
		<div class="container">  
				<div class="col-md-4">
						<div class="fealhs">
							
							<?php 
								$fea_image5 = get_theme_mod('fea_image5');
								if(!empty($fea_image5)){
									echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($fea_image5).'" class="img-responsive" />';
								}else{
									echo '<img alt="Abouimg" src="'.get_template_directory_uri().'/images/fea1.png" class="img-responsive" />';
								}
							?>
						</div>
				</div>
			<div class="col-md-8">
			<?php
				$cols = get_theme_mod('features_npp_count', 5);
				$cols++;
							// echo '$cold: '.$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-6 col-sm-6';
					break;
					default: 
					$colCls = 'col-md-6 col-sm-6';
					break;
				}
				$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
				?>
			<!-- <div class="owl-carousel owl-theme">  -->
				<?php
				for( $i = 1; $i <= $cols; $i++ ){

					if($showStatic === false){
						$url = get_theme_mod('ourfeatured_page_url_'.$i, '#');
						//$fea_page_num = get_theme_mod('fea_page_num'.$i, '01');
						$fea_page_title = get_theme_mod('fea_page_title'.$i, 'FULL SERVICE');
						$fea_page_description = get_theme_mod('fea_page_description'.$i,'Lorem ipsum dolor sit amet, consectetur adipiscing elit,');
						$pro_b_page_id = get_theme_mod('pro_b_page'.$i); 
						$fea_page_icon = get_theme_mod('fea_page_icon'.$i);
						if($fea_page_icon){
									
				?>
					<div class="<?php echo $colCls;?> fbox">
							<div class="features-area">
									<div class="features-single " data-wow-duration="1s">
											<div class="col-md-9 col-xs-12 lhsbx">
												<div class="pro_b-area-data">
														<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
																<h4 class="inner-area-title"><?php echo $fea_page_title; ?></h4>
														</a>
														<div class="section-area-text">
															<?php echo $fea_page_description; ?>
													</div>	
												</div>
											</div>
											<div class="col-md-3 col-xs-12 pd-0 rhsbx">
													<div class="hi-icon">
															<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
														<!-- <img src="<?php //echo esc_url($fea_page_icon); ?>" class="img-responcive" /> -->
							                  <i class="<?php echo $fea_page_icon; ?>"></i>
							                </a>
													</div>
											</div>		
											<div class="clearfix"></div>			
									</div>	
							</div>
							<div class="clearfix"></div>
					</div> 
					<?php
				}
			}else{?>
					<div class="<?php echo $colCls;?> fbox">
							<div class="features-area">
									<div class="features-single " data-wow-duration="1s">
											<div class="col-md-9 col-xs-12 lhsbx">
												<div class="pro_b-area-data">
														<a href="#"><h4 class="inner-area-title">FULL SERVICE</h4></a>
														<div class="section-area-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>	
												</div>
											</div>
											<div class="col-md-3 col-xs-12 pd-0 rhsbx">
													<div class="hi-icon">
															<a href="#">
															<!-- <img class="img-responsive" src="<?php //echo esc_url(get_template_directory_uri().'/images/fea1.jpg');?>" alt="features" /> -->
																	<i class="fa fa-user-o"></i>
															</a>
															<div class="clearfix"></div>
													</div>
											</div>		
											<div class="clearfix"></div>		
									</div>
							</div>
						<div class="clearfix"></div>
					</div> 
					<?php }

				}?>
		 </div> 
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
<script type="text/javascript">
$(document).ready(function(){
    var highestBox = 0;
        $('.features-area-inn .features-area').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.features-area-inn .features-area').height(highestBox);
});
</script> 

<?php } 