<?php   
if(get_theme_mod('course_area_disable') != 'on' ){ ?>
	<?php 
		if( get_theme_mod('course_areaTpadding',true) ) {
			$course_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('course_areaTpadding')).';';
		}
		if( get_theme_mod('course_areaBpadding',true) ) {
			$course_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('course_areaBpadding')).';';
		}
	
	?>	
	<div class="course-area " id="course" style="<?php echo esc_attr($course_areaTpadding); ?>" "<?php echo esc_attr($course_areaBpadding); ?>" >
			<div class="course-single-area" > 
				<?php
					$courses_page_id = get_theme_mod('courses_page');
						
					$courses_maintitle = get_theme_mod('courses_maintitle', 'Our Most Popular Courses');
					$coursesubtitle = get_theme_mod('coursesubtitle', '20,000+ unique online course list');

				?>
					<div class="container">
							<div class="row justify-content-center">
								<?php if($courses_maintitle || $coursesubtitle){ ?>	
									<div class="section-title">
											<h2><?php echo ($courses_maintitle);  ?></h2>					
											<h1><?php echo ($coursesubtitle);  ?></h1>
									</div>
								<?php }?>
							</div> 
					</div>
							
					<div class="coursebx">
							<div class="container">
									<div class="row">
									<?php 
									$showStatic = true;
									$cols = get_theme_mod('course_npp_count', 2);
									$cols++;
									switch($cols){
										case 1:
										$colCls = 'col-lg-12 col-md-12 col-sm-12';
										break;
										case 2:	
										$colCls = 'col-lg-6 col-md-6 col-sm-6';
										break;
										case 3:
										case 5:
										case 6:
										case 9:
										case 11:
										case 13:
										case 15:
										$colCls = 'col-lg-4 col-md-6 col-sm-6';
										break;
										default: 
										$colCls = 'col-lg-4 col-md-6 col-sm-6';
										break;
									}
											
									for( $i = 1; $i <= $cols; $i++ ){
										$courses_page_id = get_theme_mod('courses_page'.$i); 
										$courses_page_icon = get_theme_mod('courses_page_icon'.$i);
										$courses_page_icon1 = get_theme_mod('courses_page_icon1'.$i);
										if($courses_page_id){
											$showStatic = false;
											echo courseShortCode($courses_page_id, $isCustomizer=true, $i);
										}
									}
								if($showStatic === true){
									for( $i = 1; $i <= $cols; $i++ ){ ?>
										<div class="<?php echo $colCls;?> single-course-bx">
												<div class="single-course " >
														<div class="course-bx ">
																<div class="coursetxbx">
																		<h3 >For Users</h3>
																		<a href="#">
																			<h4 class="post-title inner-area-title wow fadeInDown">UI/UX Design Essential Training</h4>
																		</a>
																		<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected</p>
																						<!-- <div class="coursebtn">
																								<a href="#">Read More<i class="fa fa-arrow-right"></i></a>
																						</div>	
																				 -->
																</div>
																<div class="courseimgbx">
																		<a href="#">
																			<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/course.jpg');?>" alt="courses" />
																		</a>
																</div>
																<div class="row mr-0">
																		<div class="col-md-5 pl-0">
																			<div class="stake">START STAKING</div>
																		</div>
																		<div class="col-md-7 pd-0">
																			<li><P><i class="fa fa-file-text-o"> </i>5 Lessons</P> </li>
																			<li><p><i class="fa fa-clock-o"> </i> 15 Day</p></li>
																		</div>
																</div>
																
														</div>	
			
												</div>
										</div>
										<?php 
										}
									} ?>
									</div>
							</div>
					</div>
				<!-- <div class="clearfix"></div> -->
			</div>
	</div>
	
	<script type="text/javascript">
    var title = 0;
    jQuery(".course-area .single-course").each(function(){
      if ($(this).height() > title) { title = $(this).height(); }
    });
    jQuery(".course-area .single-course").height(title);


    // on Resize change height

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

<?php }