<?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', 'Unleash Your Software Potential');
				$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 ');

				$aboutlist = get_theme_mod('about_list', '<li>There are many variations of passages of</li> <li>available, but the majority have</li> <li>passages of Lorem Ipsum </li> <li>suffered alteration in some </li> ');

			?>
					<div class="col-lg-7 col-md-12 abt-rbx" data-wow-duration="1s">
						<div class="abtsection-title">
							<h1><?php echo ($aboutsubtitle);  ?></h1>
							<h2><?php echo ($abouttitle);  ?></h2>
						</div>
						<div class="section-subtext"><p><?php echo ($abouttext);  ?></p></div>
						<div class="section-list"><?php echo ($aboutlist);  ?></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', 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-4 col-sm-6';
								break;
								default: 
								$colCls = 'col-md-4 col-sm-6';
								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, 'More than 60,000 courses');
								//$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-3 col-3 pd-0">
												<div class="hi-icon">
													<!-- <img src="<//?php echo esc_url($aboutus_page_icon); ?>" class="img-responcive" /> -->
													<span class="<?php echo $aboutus_page_icon; ?>"></span> 
												</div>
											</div>
											<div class="col-lg-9 col-9">
												<div class="about-area-data">
													<h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
												</div>
											</div>
											<div class="clearfix"></div>
											<?php }?>
										</div>
										<div class="clearfix"></div>
									</div>
								<?php
										
								}
							}else{?>
						
									<div class="<?php echo $colCls;?> aboutus-single pl-0" >
										<div class="row mr-0">
											<div class="col-lg-3 col-3 pd-0">
												<div class="hi-icon">
													<span class="fa fa-youtube-play" aria-hidden="true"></span>
													<!-- <img src="<//?php echo esc_url(get_template_directory_uri().'/images/abt1.jpg');?>"  /> -->
												</div>
											</div>
											<div class="col-lg-9 col-9">
												<div class="about-area-data">
													<h4 class="inner-area-title">More than 60,000 courses</h4>
												</div>
											</div>
											<div class="clearfix"></div>	
										</div>				
										<div class="clearfix"></div>
									</div>
									
							<?php }
							}?>
									<div class="clearfix"></div>
								</div>
							</div>
						</div>
                        <?php
                            $abtbtn_text = get_theme_mod('abtbtntext', 'About us');
					        $abtbtnbtnlink = get_theme_mod('abtbtnbtnlink', '#');
					    ?>

                        <?php if($abtbtn_text ){ ?>
						<div class="abt-btn">
						  	<a href="<?php echo ($abtbtnbtnlink);  ?>">
						  	<?php echo ($abtbtn_text);  ?>
						  	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><style></style><path d="M7 28a.999.999 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.001 1.001 0 0 1 0 1.708l-18 11A1 1 0 0 1 7 28zM8 6.783v18.434L23.082 16 8 6.783z"/></svg>						      
						      	<div class="stars_an">
						    		<div class="starsinn"></div>
								</div>
						  	</a>
						</div>
                        <?php } ?>
				
						<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">
						<?php
                            $img_bt = get_theme_mod('imgbt', '5 YEAR');
					        $img_st = get_theme_mod('imgst', 'EXPERIENCE');
					        $iframe = get_theme_mod('luzuk_abt_vb_embade', 'Add your video embed code in customizer');
					    ?>
						<div class="row mr-0">
							<div class="col-md-10 md-0">
								<div class="aboutarea-img">
									<div class="sm-bx"></div>
									<?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>
							</div>
							<div class="col-md-2">
								<div class="imtx-bx">
									<div class="imatext">
										<h2><?php echo ($img_bt);  ?></h2>
										<h3><?php echo ($img_st);  ?></h3>
									</div>
								</div>
							</div>
						</div>
						<div class="video-content" >
							<?php	
							  $iframe = get_theme_mod('luzuk_abt_vb_embade', 'Add your video embed code in customizer');
							?>
					
							<div class="newvbox">
								<a class="video"  href="#vdpop">
                                    <div class="video-img">
                                        <?php 
											$vbabt_image = get_theme_mod('vbabt_image');
											if(!empty($vbabt_image)){
												echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($vbabt_image).'" class="img-responsive secondry-bg-img" />';
											}else{
												echo '<img alt="About us" src="'.get_template_directory_uri().'/images/abtvb.jpg" class="img-responsive" />';
											}
										?> 
										<div class="v-oly"></div>
                                        <div class="video-icon">
                                            <i class="fa fa-play" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </a>
							</div>
							<div id="vdpop" class="video-overlay">
								<div class="popup">
									<a class="close" href="#">&times;</a>
									<div class="content">
										<?php echo $iframe; ?>
									</div>
								</div>
							</div>
						</div>

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

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


<?php }  