<?php
if(get_theme_mod('luzuk_about_area_disable') != 'on' ){
	?>
	<!-- About Area Start -->
	<?php 
				if( get_theme_mod('about_areaTpadding',true) ) {
					$about_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('about_areaTpadding')).';';
				}
				if( get_theme_mod('about_areaBpadding',true) ) {
					$about_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('about_areaBpadding')).';';
				}
				if( get_theme_mod('about_areawave',true) ) {
					$about_areawave = 'top:'.esc_attr(get_theme_mod('about_areawave')).';';
				}
				?>			
	<div class="about-area bg-img-1" id="about">  
		<!-- <div class="container"> -->
			<?php
			$about_page_id = get_theme_mod('about_page');
			$abouttitle = get_theme_mod('about_title', 'ABOUT US');
			$abouttext = get_theme_mod('about_text', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante a nibh ornare tristique laoreet ac odio. Donec ac eleifend lacus. Etiam bibendum nec mi non consequat. ');
			?>

			<div class="col-md-4 padding0">
				<div class="aboutarea-img">
					<?php 
					$about_image = get_theme_mod('about_image');
					if(!empty($about_image)){
						echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image).'" class="img-responsive secondry-bg-img" />';
					}else{
						echo '<img alt="About us" src="'.get_template_directory_uri().'/images/about-img.png" class="img-responsive" />';
					}

					?>
					
				</div>
			</div>
			<div class="col-md-8 about-rhs" data-wow-duration="1s">
				<div class="row">
			 		<div class="ht-section-title-tagline">
			 			<?php if($abouttitle){ ?>
			 				<div class="heading-icon-l">
								<i class="fa fa-user"></i>
							</div> 
				 			<div class="section-title about-title ht-border">
				 				<h2><?php echo ($abouttitle);  ?></h2>
				 				<div class="title-icon">
			 					 	<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/heading-tap.png" />
			 					</div>
			 				</div>

			 				<div class="clearfix"></div>
			 			<?php }?>
			 		</div> 
			 	</div>		
 				
				<div class="section-subtitle">
					<p class="section-area-text"><?php echo ($abouttext);  ?></p>
				</div>

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

			<?php
				$showStatic = true;
				for( $i = 1; $i < 11; $i++ ){
					$aboutus_page_id = get_theme_mod('aboutus_page_icon'.$i); 
					if(!empty($aboutus_page_id)){
						$showStatic = false;
						break;
					}
				}
				?>

				<div class="aboutus-post-wrap">
					<?php
					$cols = get_theme_mod('aboutus_npp_count', 1);
					$cols++;
					// echo '$cold: '.$cols;
					switch($cols){
						case 1:
						$colCls = 'col-md-6 col-sm-6 col-xs-12';
						break;
						case 2:
						case 4:
						case 8:
						case 7:
						case 10:
						case 11:
						case 12:
						$colCls = 'col-md-6 col-sm-6 col-xs-12';
						break;
						default: 
						$colCls = 'col-md-6 col-sm-6 col-xs-12';
						break;
					}
					$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
					?>
					<div class="row aboutus-post-boxes">
						<?php
						for( $i = 1; $i <= $cols; $i++ ){
								if($showStatic === false){
									
									$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'Consectetur Adipcing');
									$aboutus_page_id = get_theme_mod('aboutus_page'.$i); 
									$aboutus_page_icon = get_theme_mod('aboutus_page_icon'.$i);
									if($aboutus_page_icon){
										
									?>
									<div class="<?php echo $colCls;?> pd-0">
										<div class="aboutus-single">
											<div class="col-md-2 col-sm-2 col-xs-2 pd-0">
												<div class="hi-icon">
													<span class="<?php echo $aboutus_page_icon; ?>"></span>
												</div>
											</div>	
											<div class="col-md-10 col-sm-10 col-xs-10 pd-0">
												<div class="about-area-data">
													<h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
												</div>
											</div>
											
											<div class="clearfix"></div>
										</div>
										<div class="clearfix"></div>
									</div>
									<?php
											
									}
								}else{?>
									<div class="<?php echo $colCls;?> pd-0">
										<div class="aboutus-single">
											<div class="col-md-2 col-sm-2 col-xs-2 pd-0">
												<div class="hi-icon">
													<span class="fa fa-check"></span>
												</div>
											</div>
											<div class="col-md-10 col-sm-10 col-xs-10 pd-0">
													<div class="about-area-data">
													<h4 class="inner-area-title">Consectetur Adipcing</h4>
														
												</div>
											</div>
											<div class="clearfix"></div>						
										</div>
										<div class="clearfix"></div>
									</div>
								<?php }
						}?>
						<div class="clearfix"></div>
					</div>
				</div>
				<!-- for button display-->
					<?php if( get_theme_mod('aboutscd_button_display','show' ) == 'show') :
						?>
						<?php
						$aboutreadmore1button = get_theme_mod('lz_fitness_headermain_aboutreadmore1button', 'LEARN MORE'); 
						$aboutreadmore1buttonlink = get_theme_mod('lz_fitness_header_aboutreadmore1buttonlink', 'add link here');
						?>
						<div class="readmore">
							
							<?php if(!empty($aboutreadmore1buttonlink)){ ?>
							<div class='button'> <a class="secondry-bg" href="<?php echo $aboutreadmore1buttonlink ?>"><?php echo($aboutreadmore1button );?><i class="fa fa-long-arrow-right"></i></a>

							</div>
						<?php }?>
						
						</div>
					<?php endif ?>
			
				<!-- for button display-->
			</div>
			<div class="clearfix"></div>
		<!-- </div>
		<div class="clearfix"></div> -->
	</div>
	<!-- About Area End -->
<?php }  