<?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('aboutsubtitle', 'About Us');
				$abouttitle = get_theme_mod('about_title', 'YOUR ADVENTURE BEGINS HERE');
				$abouttext = get_theme_mod('about_text', 'Suspendisse ac nunc et leo egestas finibus. Fusce congue lorem sit amet massa luctus, in pretium mi ultricies. Suspendisse efficitur rutrum rutrum. Maecenas commodo libero sit amet purus interdum, a tincidunt ante hendrerit. Pellentesque elit ligula, dignissim at orci vitae, auctor consequat nunc. Aliquam vitae ultrices magna. Aliquam consectetur efficitur diam a ultrices.');

			?>
					<div class="col-lg-6 col-md-12 ">
						<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" />';
								}
							?>
	
						<?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="abtimgbx">
							<div class="abtimgbx-innbg"></div>
							<div class="abtimgbx-inn"></div>
							

								<?php
								$cols = get_theme_mod('abtimgbx_npp_count', 1);
								$cols++;
								// echo '$cold: '.$cols;
								switch($cols){
									case 1:
									$colCls = 'col-md-6 col-sm-6';
									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-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="abtimg-boxes">
									<div class="row mr-0">
								<?php
								for( $i = 1; $i <= $cols; $i++ ){
								if($showStatic === false){
									$aboutus_page_id = get_theme_mod('aboutus_page'.$i); 
									$abtimgbx_num = get_theme_mod('abtimgbx_num'.$i, '1200');
									$abtimgbx_text = get_theme_mod('abtimgbx_text'.$i, 'Safaries');
									$abtimgbx_icon = get_theme_mod('abtimgbx_icon'.$i);
									if($abtimgbx_icon){
										
								?>
										<div class=" <?php echo $colCls;?> abtimgbx-single   pl-0" >
											<div class="row mr-0">
												<?php if($abtimgbx_num || $abtimgbx_text ){ ?>
												<div class="col-lg-4 col-md-3 col-sm-3 col-3 pd-0">
													<div class="abtimgbx-icon">
														<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g ><path d="M18.4 17.6C26 10 14 3 3 3c0 11 7 23 14.6 15.4L6 6l12.4 11.6zM21 20l-2.6-2.4-.4.4-.4.4L20 21c1 1 2 0 1-1z"></path></g></svg>
														<span class="<?php echo $abtimgbx_icon; ?>"></span> 
													</div>
												</div>
												<div class="col-lg-8 col-md-9 col-sm-9 col-9 ">
													<div class="abtimgbx-data">
														<h5 class="inner-area-title"><?php echo $abtimgbx_num; ?></h5>
														<p><?php echo $abtimgbx_text; ?></p>
													</div>
												</div>
												<div class="clearfix"></div>
												<?php }?>
											</div>
											<div class="clearfix"></div>
										</div>
									<?php
											
									}
								}else{?>
										<div class="<?php echo $colCls;?> abtimgbx-single  pl-0" >
											<div class="row mr-0">
												<div class="col-lg-4 col-md-3 col-sm-3 col-3 pd-0">
													<div class="abtimgbx-icon">
														<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M18.4 17.6C26 10 14 3 3 3c0 11 7 23 14.6 15.4L6 6l12.4 11.6zM21 20l-2.6-2.4-.4.4-.4.4L20 21c1 1 2 0 1-1z"></path></g></svg>
														<span class="fa fa-car" ></span>
													</div>
												</div>
												<div class="col-lg-8 col-md-9 col-sm-9 col-9">
													<div class="abtimgbx-data">
														<h5 class="inner-area-title">1200</h5>
														<p>Safaries</p>
													</div>
												</div>
												<div class="clearfix"></div>	
											</div>				
											<div class="clearfix"></div>
										</div>
										
									<!-- </div> -->
								<?php }
								}?>
									<div class="clearfix"></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>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>

					<div class="col-lg-6 col-md-12 abt-rbx " data-wow-duration="1s">
						<?php if($aboutsubtitle || $abouttitle){ ?>	
						<div class="abtsection-title">
							<div class="abtbrd"></div>
							<?php if($aboutsubtitle){ ?>	
								<h1><?php echo ($aboutsubtitle);  ?></h1>
							<?php }?>
							<h2><?php echo ($abouttitle);  ?></h2>
						</div>
						<?php }?>
						<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_icon'.$i); 
								if(!empty($aboutus_page_id)){
									$showStatic = false;
									break;
								}
							}
						?>
						<div class="aboutus-post-wrap">
							<?php
							$cols = get_theme_mod('aboutus_npp_count', 1);
							$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, 'RAISING MONEY TO HELP');
								$aboutus_page_text = get_theme_mod('aboutus_page_text'.$i, 'Pellentesque auctor sagittis lacinia. Duis feugiat tristique lacus. porttitor sapien augue, id aliquet ex cursus vel.');
								$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;?> aboutus-single   pl-0" >
										<div class="row mr-0">
											<?php if($aboutus_page_title){ ?>
											<div class="col-lg-2 col-md-3 col-sm-3 col-3 pd-0">
												<div class="hi-icon">
													<!-- <img src="<//?php echo esc_url($aboutus_page_icon); ?>" class="img-responcive" /> -->
													<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M18.4 17.6C26 10 14 3 3 3c0 11 7 23 14.6 15.4L6 6l12.4 11.6zM21 20l-2.6-2.4-.4.4-.4.4L20 21c1 1 2 0 1-1z"></path></g></svg>
													<span class="<?php echo $aboutus_page_icon; ?>"></span> 
												</div>
											</div>
											<div class="col-lg-10 col-md-9 col-sm-9 col-9 pd-0">
												<div class="about-area-data">
													<h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
													<p><?php echo $aboutus_page_text; ?></p>
												</div>
											</div>
											<div class="clearfix"></div>
											<?php }?>
										</div>
										<div class="clearfix"></div>
									</div>
									
								<!-- </div> -->
								<?php
										
								}
							}else{?>
						
									<div class="<?php echo $colCls;?> aboutus-single  pl-0" >
										<div class="row mr-0">
											<div class="col-lg-2 col-md-3 col-sm-3 col-3 pd-0">
												<div class="hi-icon">
													<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M18.4 17.6C26 10 14 3 3 3c0 11 7 23 14.6 15.4L6 6l12.4 11.6zM21 20l-2.6-2.4-.4.4-.4.4L20 21c1 1 2 0 1-1z"></path></g></svg>
													<span class="fa fa-money" aria-hidden="true"></span>
													<!-- <img src="<//?php echo esc_url(get_template_directory_uri().'/images/abt1.jpg');?>"  /> -->
												</div>
											</div>
											<div class="col-lg-10 col-md-9 col-sm-9 col-9 ">
												<div class="about-area-data">
													<h4 class="inner-area-title">RAISING MONEY TO HELP</h4>
													<p>Pellentesque auctor sagittis lacinia. Duis feugiat tristique lacus. porttitor sapien augue, id aliquet ex cursus vel.</p>
												</div>
											</div>
											<div class="clearfix"></div>	
										</div>				
										<div class="clearfix"></div>
									</div>
									
							<?php }
							}?>
							<div class="clearfix"></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>
						
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>


<?php }  