<?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">
		<div class="container">
		<?php
			$about_page_id = get_theme_mod('about_page');
			$aboutsubtitle = get_theme_mod('aboutsubtitle', 'About us');
			$abouttitle = get_theme_mod('about_title', 'WE’RE COMMITTED TO QUALITY');
			$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.');
			$aboutimglebalyear = get_theme_mod('aboutimglebalyear', '30');
			$aboutimglebal = get_theme_mod('aboutimglebal', '<span>YEAR</span> Exprience');

		?>
			<div class="col-md-5 wow bounceInLeft" data-wow-duration="1s">
				<div class="section-title">
					<?php if(!empty($aboutsubtitle)){ ?>
					<h1><?php echo ($aboutsubtitle);  ?></h1>
							<?php }?> 
					<h2><?php echo ($abouttitle);  ?></h2>
				</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 class="btn btn-lg" href="<?php echo $abtbtnlink ?>"><span><?php echo ($abtbtntxt);  ?></span></a>
						<?php }?> 
				</div>
			</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="col-md-3 col-sm-6 aboutus-post-wrap wow bounceInDown" style="padding-top: 4.5em; padding-right: 2em;">
					<?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">
					<?php
					for( $i = 1; $i <= $cols; $i++ ){
					if($showStatic === false){
						
						$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'Welding Work Pro');
						$aboutus_page_number = get_theme_mod('aboutus_page_number'.$i, '380+');
						$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">
							<?php if(!empty($aboutus_page_number || $aboutus_page_title)){ ?>
							<div class="aboutus-single wow zoomI" >
								<div class="col-md-3 col-sm-2 pd-0">
									<div class="hi-icon">
										<span class="<?php echo $aboutus_page_icon; ?>"></span> 
									</div>
								</div>
								<div class="col-md-9 col-sm-10 als">
									<div class="about-area-data">
										<h1 class="inner-area-number"><?php echo $aboutus_page_number; ?></h1>
										<h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<?php }?>
							<div class="clearfix"></div>
						</div>
						
						<?php
								
						}
					}else{?>
						<div class="<?php echo $colCls;?> pd-0">
							<div class="aboutus-single wow zoomI" >
								<div class="col-md-3 col-sm-2 pd-0">
									<div class="hi-icon">
										<span class="fa fa-gears"></span>
									</div>
								</div>
								<div class="col-md-9 col-sm-10 als">
									<div class="about-area-data">
										<h1 class="inner-area-number">380+</h1>
										<h4 class="inner-area-title">Project Completed</h4>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="clearfix"></div>
						</div>
					<?php }
					}?>
					<div class="clearfix"></div>
					</div>
				</div>

			<div class="col-md-4 col-sm-6 wow bounceInRight" style="padding-top: 3em;">
				<div class="aboutarea-img">
					<?php $showContent = get_theme_mod('about_image_anim_display', 'off'); ?>
					<?php
                		if($showContent == 'off'){
           			 ?>
					<?php 
						$about_image_anim = get_theme_mod('about_image_anim');
						if(!empty($about_image_anim)){
							echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image_anim).'" class="aboutrdot" />';
						}else{
							echo '<img alt="About us" src="'.get_template_directory_uri().'/images/about2.png" class="aboutrdot" />';
						}
					?>
					<?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/about1.png" class="img-responsive" />';
						}
					?>
					<?php }?>
					<?php if(!empty($aboutimglebal)){ ?>
					<div class="alebal">
					  <h1><?php echo ($aboutimglebalyear);  ?></h1>
					  <h6><?php echo ($aboutimglebal);  ?></h6>
				    </div>
				    <?php }?> 
				</div>
			</div>
			
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- About Area End -->
	
<?php }  