<?php
if(get_theme_mod('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">
		<?php if( get_theme_mod('aboutwave_display','show' ) == 'show') :
        ?>
		<svg viewbox="0 0 100 25">
	 	 	<path fill="#fff" d="M0 35 V12 Q30 28 50 14 T100 18 V30z" />
		</svg>
		<?php endif ?>    
		<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', '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 to use a passage of Lorem Ipsum, you need to be sure there is not anything embarrassing hidden in the middle. 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 to use a passage of Lorem Ipsum.');
			?>
			<div class="col-md-5 wow bounceInLeft">
				<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.jpg" class="img-responsive" />';
					}

					?>
				</div>
			</div>
			<div class="col-md-7 wow fadeInRight" data-wow-duration="1s">
				<?php if($abouttitle){ ?>	
				<div class="section-title col-md-11 col-md-offset-1 pd-0">
					<h2><?php echo ($abouttitle);  ?></h2>
					<div class="titleborder"></div>
				</div>
				<?php }?>
				<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', 3);
					$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-6 col-sm-6';
						break;
						default: 
						$colCls = '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="row aboutus-post-boxes">
						<?php
						for( $i = 1; $i <= $cols; $i++ ){
								if($showStatic === false){
									
									$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'Starting New Project');
									$aboutus_page_description = get_theme_mod('aboutus_page_description'.$i,'Create a new idea for client project');
									$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 wow fadeInDown" data-wow-duration="3s">
											<div class="col-md-2 col-sm-2 col-xs-2 pd-0 about-btn">
												<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">
												<div class="about-area-data">
													<h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
													<div class="section-area-text">
														<?php echo $aboutus_page_description; ?>
													</div>
												</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 wow fadeInDown" data-wow-duration="3s">
											<div class="col-md-2 col-sm-2 col-xs-2 pd-0 about-btn">
												<div class="hi-icon">
													<span class="fa fa-check"></span>
												</div>
											</div>
											<div class="col-md-10 col-sm-10 col-xs-10">
													<div class="about-area-data">
													<h4 class="inner-area-title">Starting New Project</h4>
													<div class="section-area-text">
														Create a new idea for client project
													</div>	
												</div>
											</div>


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

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


			</div>

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