<?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">
		<?php
			$about_page_id = get_theme_mod('about_page');
			$abouttitle1 = get_theme_mod('about_title1', 'ABOUT');
			$abouttitle2 = get_theme_mod('about_title2', 'US');
			$aboutsubtitle = get_theme_mod('aboutsubtitle', 'Designs that Inspire, Comfort, and Enrich');
			$abouttext = get_theme_mod('about_text', '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 dont look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isnt anything');
			$about_image = get_theme_mod('about_image');
		?>
		<div class="row">
			<div class="col-xl-7 col-lg-6 col-md-6 col-xs-5 pd-0 abtleft-box">
				<div class="aboutarea-img">
					<div class="about-imgsec">
						<?php 
							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.jpg" class="img-responsive" />';
							}
						?>
						<div class="about-ovly"></div>
					</div>
				</div>
			</div>
			<div class="col-xl-5 col-lg-6 col-md-6 col-xs-7 abtright-box">
				<div class="abtsection-title">
					<?php if($abouttitle1){ ?>	
						<h2><?php echo ($abouttitle1);  ?></h2>
					<?php }?>
				</div>
				<div class="abtsection-title">
					<?php if($abouttitle2){ ?>
						<div class="abt-title"><h2><?php echo ($abouttitle2);  ?></h2></div>
					<?php }?>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="about-area-bx">
				<div class="row about-contbx">
					<div class="col-lg-7 col-md-12 pd-0 abt-rbx wow zoomIn" data-wow-duration="1s">
						<div class="section-subtitle">
							<h3><?php echo ($aboutsubtitle);  ?></h3>
						</div>
						<div class="section-subtext">
							<p><?php echo ($abouttext);  ?></p>
						</div>
						<div class="clearfix"></div>
						<div class="abt-btn">
							<?php
								$abtbtntxt = get_theme_mod('abtbtntxt', 'Read More '); 
								$abtbtnlink = get_theme_mod('abtbtnlink', 'add link here');
							?>
								<?php if(!empty($abtbtntxt)){ ?>
									<a href="<?php echo $abtbtnlink ?>">
										<?php echo ($abtbtntxt);  ?>
										<span>
                                            <svg height="25px" width="25px" viewBox="0 0 32 32"><path d="M19,25.6c-0.3,0-0.5-0.1-0.8-0.2c-0.8-0.3-1.2-1-1.2-1.8V20H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h12V8.4 c0-0.8,0.5-1.5,1.2-1.8C19,6.3,19.8,6.4,20.4,7l8.3,8.3c0.4,0.4,0.4,1,0,1.4L20.4,25C20,25.4,19.5,25.6,19,25.6z"></path> </svg>
                                        </span>
									</a>
								<?php }?> 
						</div>
					</div>
					<div class="col-lg-5 col-md-12 wow zoomIn">
						<?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', 2);
							$cols++;
							// echo '$cold: '.$cols;
							switch($cols){
								case 1:
								$colCls = 'col-md-12 col-sm-12';
								break;
								case 2:
								case 4:
								case 8:
								case 7:
								case 10:
								case 11:
								case 12:
								$colCls = 'col-md-12 col-sm-12';
								break;
								default: 
								$colCls = 'col-md-12 col-sm-12';
								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, 'Etiam feugiat dolor cursus aliquet viverra.');
								$aboutus_page_id = get_theme_mod('aboutus_page'.$i); 
								$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i);
								$aboutus_page_text = get_theme_mod('aboutus_page_text'.$i);
								$aboutus_page_icon = get_theme_mod('aboutus_page_icon'.$i);
								if($aboutus_page_icon){
							?>
							<?php if($aboutus_page_title || $aboutus_page_text ){ ?>
								<div class="<?php echo $colCls;?>">
									<div class="aboutus-single wow zoomIn  pl-0" >
										<div class="row">
											<div class="col-md-10 col-xs-9 about-data">
												<?php if($aboutus_page_title){ ?>
													<div class="about-area-data">
														<h4 class="inner-area-title">
															<?php echo $aboutus_page_title; ?>
														</h4>
													</div>
												<?php }?>
												<div class="about-text">
													<p>
														<?php echo $aboutus_page_text; ?>
													</p>
												</div>
											</div>
											<div class="col-md-2 col-xs-3 pd-0">
												<div class="hi-icon">
													<i class="<?php echo $aboutus_page_icon; ?>"></i>
												</div>
											</div>
										</div>
									</div>
								</div>
								<?php }?>
								<?php
								}
							}else{?>
								<div class="<?php echo $colCls;?>">
									<div class=" aboutus-single wow zoomIn pl-0" >
										<div class="row">
											<div class="col-md-10 about-data">
												<div class="about-area-data">
													<h4 class="inner-area-title">
														Initial Client Consultation
													</h4>
												</div>
												<div class="about-text">
													<p>
														There are many variations of
													</p>
												</div>
											</div>
											<div class="col-md-2 pd-0">
												<div class="hi-icon">
													<i class="fa fa-user-o"></i>
												</div>
											</div>
										</div>
										<div class="clearfix"></div>
									</div>
								</div>
							<?php }
							}?>
							<div class="clearfix"></div>
						</div>
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
	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 }  