	<?php

if(get_theme_mod('features_area_disable') != 'on' ){
	?>
	<!-- features Area Start -->
	<?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 bg-img-1 " id="features" style="<?php echo esc_attr($features_areaTpadding); ?>" "<?php echo esc_attr($features_areaBpadding); ?>">

		<?php
			$fea_subtitle = get_theme_mod('fea_subtitle', 'Heading Here');
			$fea_maintitle = get_theme_mod('fea_maintitle', 'OUR FEATURES');
		?>

		<div class="container">
		
		    <?php if($fea_maintitle || $fea_subtitle){ ?>
		      <div class="section-heading">
		        <div class="heading-inn">
		          <p><?php echo ($fea_subtitle);  ?></p>
		            <h2><?php echo ($fea_maintitle);  ?></h2>
		        </div> 
		      </div>
		    <?php }?>
		
		</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('pro_b_page_icon'.$i); 
							if(!empty($pro_b_page_id)){
								$showStatic = false;
								break;
				}
			}
		?>
		<div class="container">  

			<?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-4 col-sm-6';
					break;
					default: 
					$colCls = 'col-md-3 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, '#');
						$pro_b_page_title = get_theme_mod('pro_b_page_title'.$i, 'Heading Here');
						$pro_b_page_description = get_theme_mod('pro_b_page_description'.$i,'Vivamus feugiat, lacus eu suscipit mattis, tortor mi aliquam leo, quis laoreet ante sem sed sapien.');
						$pro_b_page_id = get_theme_mod('pro_b_page'.$i); 
						$pro_b_page_icon = get_theme_mod('pro_b_page_icon'.$i);
						if($pro_b_page_icon){
									
				?>

							<div class=" item">
								<div class="features-area">
									<div class="features-single" data-wow-duration="1s">
										<div class="hi-icon">
											<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
												<img src="<?php echo esc_url($pro_b_page_icon); ?>" class="img-responcive" />
			                            	</a>
			                            	<a href="<?php echo esc_url(!empty($url)?$url:'#');?>"><div class="featured-icon">	+</div></a>
											<div class="clearfix"></div>	
										</div>
										<div class="clearfix"></div>	
										<div class="pro_b-area-data">
											<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
												<h4 class="inner-area-title"><?php echo $pro_b_page_title; ?></h4>
											</a>
											<div class="section-area-text">
												<?php echo $pro_b_page_description; ?>
											</div>	
										</div>
										<div class="clearfix"></div>						
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
							<?php
						}
					}else{?>
						<div class=" item">
							<div class="features-area">
								<div class="features-single" data-wow-duration="1s">
									<div class="hi-icon">
										<a href="#">
											<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/fea1.jpg');?>" alt="features" />
										</a>
										<a href="#"><div class="featured-icon">	+</div></a>
										<div class="clearfix"></div>	
									</div>
									<div class="clearfix"></div>	
									<div class="pro_b-area-data">
										<a href="#"><h4 class="inner-area-title">Heading Here</h4></a>
										<div class="section-area-text">
											Vivamus feugiat, lacus eu suscipit mattis, tortor mi aliquam leo, quis laoreet ante sem sed sapien. 
										</div>	
									</div>
									<div class="clearfix"></div>						
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="clearfix"></div>
						</div>
					<?php }

				}?>
			</div>
		<div class="clearfix"></div>
		</div>
	<div class="clearfix"></div>
	</div> 

	<script>
	$(document).ready(function() {
	  $('#features .owl-carousel').owlCarousel({
	  	slideSpeed : 1500,
		autoplay: false,
	    loop: true,
	    margin: 20,
	    responsiveClass: true,
	    responsive: {
	      0: {
	        items: 1,
	        nav: true
	      },
	      600: {
	        items:2,
	        nav: true
	      },
	      1000: {
	        items:3,
	        nav: true,
	        loop: true,
	        margin: 50
	      }
	    }
	  })
	})
</script>
<?php } 