<?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 " id="features">		  
			<div class="container">
					<div class="row">
							<div class="col-lg-6 col-md-12">
								<?php
									$fea_maintitle = get_theme_mod('fea_maintitle', 'Plumbing Solutions ');
									$fea_subtitle = get_theme_mod('fea_subtitle', 'You Can Rely On');
									$fea_txt = get_theme_mod('fea_txt', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration. in some form, by injected humour, or randomised words . which do not look even slightly believable. If you are going ');
								?>
									<div class="features-title ">
											<h2><?php echo ($fea_maintitle);  ?><br>
												<span><?php echo ($fea_subtitle);  ?></span>
											</h2>
											<p><?php echo ($fea_txt);  ?></p>

											<div class="fea-btn">
													<?php
														$feabtntxt = get_theme_mod('feabtntxt', 'Explore more'); 
														$feabtnlink = get_theme_mod('feabtnlink', 'add link here');
													?>
														<?php if(!empty($feabtntxt)){ ?>
													<a href="<?php echo $feabtnlink ?>"><span><?php echo ($feabtntxt);  ?></span>
															<svg xmlns="http://www.w3.org/2000/svg" width="50.243" height="13.501" viewBox="0 0 50.243 13.501">
																  <path id="Icon_ionic-ios-arrow-round-forward" data-name="Icon ionic-ios-arrow-round-forward" d="M20.784,11.51a.919.919,0,0,0-.007,1.294l4.275,4.282h-46.27a.911.911,0,0,0-.907.914.911.911,0,0,0,.907.914H25.045L20.77,23.2a.925.925,0,0,0,.007,1.294.91.91,0,0,0,1.287-.007l5.794-5.836h0a1.026,1.026,0,0,0,.19-.288.872.872,0,0,0,.07-.352.916.916,0,0,0-.26-.64l-5.794-5.836A.9.9,0,0,0,20.784,11.51Z" transform="translate(22.125 -11.252)" fill="#f4b504"/>
															</svg>
													</a>
														<?php }?> 
											</div>
									</div>
							</div>
							<div class="col-lg-6 col-md-12">
							<?php
								$showStatic = true;
								for( $i = 1; $i < 11; $i++ ){
									$featuresus_page_id = get_theme_mod('featuresus_page_icon'.$i); 
									if(!empty($featuresus_page_id)){
										$showStatic = false;
										break;
									}
								}
							?>
									<div class="featuresus-post-wrap">
										<?php
											$cols = get_theme_mod('featuresus_npp_count', 1);
											$cols++;
											// echo '$cold: '.$cols;
											switch($cols){
												case 1:
												$colCls = 'col-lg-12 col-md-6 col-sm-12';
												break;
												case 2:	
												$colCls = 'col-lg-6 col-md-6 col-sm-12';
												break;
												case 3:
												case 5:
												case 6:
												case 9:
												case 11:
												case 13:
												case 15:
												$colCls = 'col-lg-6 col-md-6 col-sm-12';
												break;
												default: 
												$colCls = 'col-lg-6 col-md-6 col-sm-12';
												break;
											}
											$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
										?>
											<div class="featuresus-post-boxes row ">
																
												<?php
														for( $i = 1; $i <= $cols; $i++ ){
															if($showStatic === false){
														$url = get_theme_mod('luzuk_features_page_url_'.$i, '#');	
														$featuresus_page_title = get_theme_mod('featuresus_page_title'.$i, 'Quick Response Times');
														$featuresus_page_text = get_theme_mod('featuresus_page_text'.$i, 'There are many variations of passages of Lorem Ipsum');
														$featuresus_page_id = get_theme_mod('featuresus_page'.$i); 
														$featuresus_page_icon = get_theme_mod('featuresus_page_icon'.$i);
														if($featuresus_page_icon){	
												?>
													<div class="<?php echo $colCls;?> featuresbx " data-wow-duration="1s">
															<div class="featuresus-single " >
																	<div class="features-box"> 
																			<div class="hi-icon">
																					<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
																						<!-- <span class="</?php echo $featuresus_page_icon; ?>"></span> -->
																						<img src="<?php echo esc_url($featuresus_page_icon); ?>" class="img-responcive" />
																					</a>
																			</div>
																	</div> 
																	<div class="features-area-data">
																			<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
																					<h4 class="inner-area-title">
																					<?php echo $featuresus_page_title; ?>
																				</h4>
																			</a>
																			<p><?php echo $featuresus_page_text; ?></p>

																			<?php
																			$fea_rbtn = get_theme_mod('fea_rbtn'.$i, 'Read More');
																					//$fea_rbtn = get_theme_mod('fearbtn', 'Explore more'); 
																					//$fea_rbtnlink = get_theme_mod('fearbtnlink', 'add link here');
																				?>
																			<div class="fea-rbtn">
																				
																		<?php if(!empty($fea_rbtn)){ ?>	
																				<a href="<?php echo esc_url(!empty($url)?$url:'#');?>"><span><?php echo $fea_rbtn; ?></span>
																					<svg xmlns="http://www.w3.org/2000/svg" width="50.243" height="13.501" viewBox="0 0 50.243 13.501">
																						  <path id="Icon_ionic-ios-arrow-round-forward" data-name="Icon ionic-ios-arrow-round-forward" d="M20.784,11.51a.919.919,0,0,0-.007,1.294l4.275,4.282h-46.27a.911.911,0,0,0-.907.914.911.911,0,0,0,.907.914H25.045L20.77,23.2a.925.925,0,0,0,.007,1.294.91.91,0,0,0,1.287-.007l5.794-5.836h0a1.026,1.026,0,0,0,.19-.288.872.872,0,0,0,.07-.352.916.916,0,0,0-.26-.64l-5.794-5.836A.9.9,0,0,0,20.784,11.51Z" transform="translate(22.125 -11.252)" fill="#f4b504"/>
																					</svg>
																			</a>
																		<?php }?>
																			</div>
																	</div>
															</div>
													</div>
												<?php					
														}
													}else{?>
													<div class="<?php echo $colCls;?>  featuresbx " data-wow-duration="1s">
															<div class="featuresus-single" >
																<!-- <div class="feainn-oly"></div> -->
																	<div class="features-box"> 
																			<div class="hi-icon">
																					<a href="#">
																						<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/features.jpg');?>" alt="features" />
																						<!-- <span class="fa fa-podcast"></span> -->
																					</a>
																			</div>
																	</div> 
																	<div class="features-area-data">
																			<a href="#"><h4 class="inner-area-title">Quick Response Times</h4></a>
																			<p>There are many variations of passages of Lorem Ipsum</p>
																			<div class="fea-rbtn">
																				<a href="#"><span>Explor more</span>
																					<svg xmlns="http://www.w3.org/2000/svg" width="50.243" height="13.501" viewBox="0 0 50.243 13.501">
																						  <path id="Icon_ionic-ios-arrow-round-forward" data-name="Icon ionic-ios-arrow-round-forward" d="M20.784,11.51a.919.919,0,0,0-.007,1.294l4.275,4.282h-46.27a.911.911,0,0,0-.907.914.911.911,0,0,0,.907.914H25.045L20.77,23.2a.925.925,0,0,0,.007,1.294.91.91,0,0,0,1.287-.007l5.794-5.836h0a1.026,1.026,0,0,0,.19-.288.872.872,0,0,0,.07-.352.916.916,0,0,0-.26-.64l-5.794-5.836A.9.9,0,0,0,20.784,11.51Z" transform="translate(22.125 -11.252)" fill="#f4b504"/>
																					</svg>
																			</a>
																			</div>
																	</div>
															</div>
													</div>
												<?php }

													}?>
												<!-- </div>	 -->
											</div>
									</div>
							</div>
					</div>
			</div>
	</div>
<script type="text/javascript">
	var title = 0;
jQuery(".features-area .featuresbx").each(function(){
  if ($(this).height() > title) { title = $(this).height(); }
});
jQuery(".features-area .featuresbx").height(title);


// on Resize change height

jQuery(window).resize(function(){
  jQuery(".features-area .featuresbx").height("");
  var title = 0;
  jQuery(".features-area .featuresbx").each(function(){
    if ($(this).height() > title) { title = $(this).height(); }
  });
  jQuery(".features-area .featuresbx").height(title);
});
</script>
<?php }  