<?php
if(get_theme_mod('skill_area_disable') != 'on' ){
	?>
	<?php 
		if( get_theme_mod('skill_areaTpadding',true) ) {
			$skill_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('skill_areaTpadding')).';';
		}
		if( get_theme_mod('skill_areaBpadding',true) ) {
			$skill_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('skill_areaBpadding')).';';
		}
	?>			
	<div id="skill" class="skill-area " >		  
		<?php			
			$skill_heading = get_theme_mod('skill_heading', 'ITS EASY, ITS <br> BRILLIANT IT WORKS !');
 		?>

 		<div class="container">
				<div class="row justify-content-center ">
						<?php if($skill_heading ){ ?>	
						<div class="section-title1">
								<h2><?php echo ($skill_heading);  ?></h2>
						</div>
						<?php }?>	
				</div> 
		</div>

		<div class="container">
				<div class="main-box">
					<?php
						$showStatic = true;
						for( $i = 1; $i < 11; $i++ ){
							$skillus_page_id = get_theme_mod('skillus_page_icon'.$i); 
							if(!empty($skillus_page_id)){
								$showStatic = false;
								break;
							}
						}
					?>
				<div class="row mr-0">
						<div class="skillus-post-wrap ">
							
							<?php
								$cols = get_theme_mod('skillus_npp_count', 2);
								$cols++;
								// echo '$cold: '.$cols;
								switch($cols){
										case 1:
										$colCls = 'col-md-12 col-sm-12';
										break;
										case 2:	
										$colCls = 'col-md-6 col-sm-6';
										break;
										case 3:
										case 5:
										case 6:
										case 9:
										case 11:
										case 13:
										case 15:
										$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="skillus-post-boxes">
								<div class="row mr-0">
								<?php
									for( $i = 1; $i <= $cols; $i++ ){
										if($showStatic === false){
									$url = get_theme_mod('luzuk_skill_page_url_'.$i, '#');	
									$skillus_page_title = get_theme_mod('skillus_page_title'.$i, 'Join Our Regular Test Series!');
									$skill_txt = get_theme_mod('skill_txt'.$i, 'There are many variations of passages of Lorem Ipsum');
									$skillus_page_id = get_theme_mod('skillus_page'.$i); 
									$skillus_page_icon = get_theme_mod('skillus_page_icon'.$i);
									if($skillus_page_icon){
												
								?>
									<div class="<?php echo $colCls;?> skillbx">
											<div class="skill-single " data-wow-duration="1s">
													<div class="stars_an">
							    						<div class="starsinn"></div>
													</div>
													<div class="skill-box"> 
															<div class="hi-icon">
																	<div class="icn-bx">
																			<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
																				<span class="<?php echo $skillus_page_icon; ?>"></span>
																			</a>
																	</div>
															</div>

															<div class="skill-area-data">
																	<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
																			<h4 class="inner-area-title"><?php echo $skillus_page_title; ?></h4>
																	</a>	
															</div>
													</div>
											</div>
									</div>
								<?php					
									}
								}else{?>
									<div class="<?php echo $colCls;?> skillbx">
											<div class="skill-single " data-wow-duration="1s">
													<div class="stars_an">
							    						<div class="starsinn"></div>
													</div>
													<div class="skill-box "> 
															<div class="hi-icon">
																	<div class="icn-bx">
																		<a href="#"><span class="fa fa-globe"></span></a>
																	</div>
															</div>
															<div class="skill-area-data">
																	<a href="#"><h4 class="inner-area-title">Join Our Regular Test Series!</h4></a>
															</div>
													</div> 			
											</div>
									</div>
									<?php }

									}?>
								</div> 
							</div>
						</div>					
				</div><!--row -->
				<?php
            $skillbtn_text = get_theme_mod('skillbtntext', 'see more');
					  $skillbtnlink = get_theme_mod('skillbtnlink', '#');
				?>

        <?php if($skillbtn_text ){ ?>
						<div class="skill-btn">
						  	<a href="<?php echo ($skillbtnlink);  ?>">
						  	<?php echo ($skillbtn_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 } ?>
			</div>
		</div>
	</div>
	<script type="text/javascript">
    var title = 0;
    jQuery(".skill-area .skill-single").each(function(){
      if ($(this).height() > title) { title = $(this).height(); }
    });
    jQuery(".skill-area .skill-single").height(title);


    // on Resize change height

    jQuery(window).resize(function(){
      jQuery(".skill-area .skill-single").height("");
      var title = 0;
      jQuery(".skill-area .skill-single").each(function(){
        if ($(this).height() > title) { title = $(this).height(); }
      });
      jQuery(".skill-area .skill-single").height(title);
    });
	</script>

<?php }  