<?php
if(get_theme_mod('about_area_disable') != 'on' ){
?>
	<?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" id="about">
		<div class="container">
			<div class="about-area-bx">
				<div class="row mr-0">
			<?php
				$about_page_id = get_theme_mod('about_page');
				$aboutsubtitle = get_theme_mod('about_subtitle', 'About Us');
				$abouttitle = get_theme_mod('about_title', 'Enhancing Your Home is Functionality and Comfort');
				$abouttext = get_theme_mod('about_text', 'Maecenas venenatis sapien nec libero tempus, sed pretium justo scelerisque. Morbi nulla enim, iaculis non tempor vel, fermentum eu mi. Nam malesuada eros a nulla mattis, ut sollicitudin magna elementum. Etiam porttitor non lacus pellentesque ullamcorper.');
				$imgtitle = get_theme_mod('imgtitle', 'ABOUT US');
				
			?>
					<div class="col-lg-6 col-md-12 imgbx pl-0">
						<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 src="'.get_template_directory_uri().'/images/abotimg1.jpg" class="img-responsive" />';
								}
							?>	
							<div class="abt-oly"></div>
							<div class="img-title">
								<h3><?php echo ($imgtitle);  ?></h3>
							</div>					
						</div>	
						<div class="clearfix"></div>	
					</div>
					<div class="col-lg-6 col-md-12 abt-rbx " data-wow-duration="1s">
						<div class="abtsection-title">
							<h1><?php echo ($aboutsubtitle);  ?></h1>
							<h2><?php echo ($abouttitle);  ?></h2>
						</div> 
						<div class="section-subtext">
							<p><?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_title'.$i); 
								if(!empty($aboutus_page_id)){
									$showStatic = false;
									break;
								}
							}
						?>
						<div class="aboutus-post-wrap">
							<?php
							$cols = get_theme_mod('aboutus_npp_count', 5);
							$cols++;
							// echo '$cold: '.$cols;
							switch($cols){
								case 1:
								$colCls = 'col-lg-12 col-md-6 col-sm-6';
								break;
								case 2:
								case 4:
								case 8:
								case 7:
								case 10:
								case 11:
								case 12:
								$colCls = 'col-lg-6 col-md-6 col-sm-6';
								break;
								default: 
								$colCls = 'col-lg-6 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="aboutus-post-boxes">
								<div class="row mr-0">
							<?php
							for( $i = 1; $i <= $cols; $i++ ){
							if($showStatic === false){
								
								$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'Plumbing and Electrical Repairs');
								//$aboutus_page_txt = get_theme_mod('aboutus_page_txt'.$i, 'Nunc porta pellentesque nunc vitae dictum. Donec non orci id tellus.');
								$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=" pl-0"> -->
									<div class=" <?php echo $colCls;?> aboutus-single " >
										<div class="abtbx">			
										<div class="row m-0">
											<div class="col-md-2 col-sm-2 icnbx pd-0">							
												<div class="hi-icon">
												<!-- <img src="<//?php echo esc_url($aboutus_page_icon); ?>" class="img-responcive" /> -->
													<span class="<?php echo $aboutus_page_icon; ?>"></span> 
												</div>											
											</div>	
											<div class="col-md-10 col-sm-10 contbx pd-0">
												<div class="about-area-data">
													<h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
												</div>
											</div>
										</div>
										<div class="clearfix"></div>
									</div>								
								</div>
								<?php
										
								}
							}else{?>
									<div class="<?php echo $colCls;?> aboutus-single pl-0" >
										<div class="abtbx">
											<div class="row m-0">
												<div class="col-md-2 col-sm-2 icnbx pd-0">
													<div class="hi-icon">
														<span class="fa fa-stumbleupon" aria-hidden="true"></span>
													</div>
												</div>
												<div class="col-md-10 col-sm-10 contbx pd-0">
													<div class="about-area-data">
														<h4 class="inner-area-title">Plumbing and Electrical Repairs</h4>
													</div>
												</div>
											</div>	
										</div>				
										<div class="clearfix"></div>
									</div>								
							<?php }
							}?>
								<div class="clearfix"></div>
								</div>
							</div>
						</div>
						<script type="text/javascript">
							jQuery.noConflict();
					        var title = 0;
					        jQuery("#about .aboutus-single").each(function(){
					          if ($(this).height() > title) { title = $(this).height(); }
					        });
					        jQuery("#about .aboutus-single").height(title);


					        // on Resize change height

					        jQuery(window).resize(function(){
					          jQuery("#about .aboutus-single").height("");
					          var title = 0;
					          jQuery("#about .aboutus-single").each(function(){
					            if ($(this).height() > title) { title = $(this).height(); }
					          });
					          jQuery("#about .aboutus-single").height(title);
					        });
					    </script>
						<!--  -->

						<?php
							$abtbtn_text = get_theme_mod('abtbtn_text', 'Read More');
							$abtbtnlink = get_theme_mod('abtbtnlink', '#');
						?>
						<div class="abt-btn">
							<?php if($abtbtn_text ){ ?>	
							<a href="<?php echo ($abtbtnlink);  ?>">
                            	<?php echo ($abtbtn_text);  ?> <i class="fa fa-long-arrow-right"></i>
							</a>
							<?php }?>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>


<?php }  