<?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">
				<?php if( get_theme_mod('about_img_display','show' ) == 'show') :?>
					<div class="about-cornimg">
						<?php 
							echo '<img alt="About us" src="'.get_template_directory_uri().'/images/flwr.png" class="img-responsive" />';
						?>	
					</div>
				<?php endif ?>
				<div class="row mr-0">
					<?php
						$about_page_id = get_theme_mod('about_page');
						$abouttitle = get_theme_mod('about_title', 'About Us');
						$abouttext = get_theme_mod('about_text', 'Pellentesque eget dolor turpis. Nunc eget leo mi. Suspendisse potenti. Nullam quis tempus felis. Duis id finibus lacus. Nulla mi orci, lobortis in gravida eget, tincidunt quis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed interdum ligula non nisl sodales dictum.');

					?>
					<div class="col-lg-7 col-md-12 abt-rbx wow zoomIn" data-wow-duration="1s">
						<div class="abtsection-title">
							<?php if($abouttitle){ ?>	
								<h2><?php echo ($abouttitle);  ?></h2>
							<?php }?>
						</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', 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);
								if($aboutus_page_title){
									
							?>
								<!-- <div class=" pl-0"> -->
									<div class=" <?php echo $colCls;?> aboutus-single wow zoomIn  pl-0" >
										<!-- <div class="col-md-1 col-sm-1 pd-0">
											<div class="hi-icon">
												<img src="<//?php echo esc_url($aboutus_page_title); ?>" class="img-responcive" />
												
											</div>
										</div> -->
										<?php if($aboutus_page_title){ ?>
											<div class="about-area-data">
												<h4 class="inner-area-title">
													<span><?php echo $i . "."; ?></span>
													<?php echo $aboutus_page_title; ?>
												</h4>
											</div>
										<div class="clearfix"></div>
										<?php }?>
									</div>
								<!-- </div> -->
								<?php
								}
							}else{?>
								<!-- <div class="</?php echo $colCls;?> pl-0"> -->
									<div class="<?php echo $colCls;?> aboutus-single wow zoomIn pl-0" >
											<!-- <div class="hi-icon">
												<img src="<//?php echo esc_url(get_template_directory_uri().'/images/abt1.jpg');?>"  />
											</div> -->
											<div class="about-area-data">
												<h4 class="inner-area-title">
													<span><?php echo $i . ".";  ?></span>
												Etiam feugiat dolor cursus aliquet viverra.</h4>
											</div>
										<div class="clearfix"></div>
									</div>
								<!-- </div> -->
							<?php }
							}?>
							<div class="clearfix"></div>
						</div>
							</div>
						</div>
						<div class="abt-btn btn1">
							<?php
								$abtbtntxt = get_theme_mod('abtbtntxt', 'View More '); 
								$abtbtnlink = get_theme_mod('abtbtnlink', 'add link here');
							?>
								<?php if(!empty($abtbtntxt)){ ?>
									<a href="<?php echo $abtbtnlink ?>">
										<span><?php echo ($abtbtntxt);  ?></span>
									</a>
								<?php }?> 
						</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>
						
					</div>
					<div class="col-lg-5 col-md-12 pd-0 wow zoomIn">
						<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/abotimg.jpg" class="img-responsive" />';
								}

							?>
							<div class="clearfix"></div>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
				<svg class="svg">
				    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.013,0 H0.984 C0.993,0,1,0.016,1,0.036 V0.968 a0.015,0.031,0,0,1,-0.016,0.032 l-0.93,-0.087 C0.047,0.912,0.04,0.898,0.039,0.881 L0.001,0.033 C0,0.015,0.005,0,0.013,0"></path></clipPath>
				  </svg>
				  <div class="clipped"> </div>
			</div>
		</div>
	</div>


<?php }  