 <!-- team Area Start -->
 <?php   
 if(get_theme_mod('team_area_disable') != 'on' ){?>
 	<?php 
 	if( get_theme_mod('team_areaTpadding',true) ) {
 		$team_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('team_areaTpadding')).';';
 	}
 	if( get_theme_mod('team_areaBpadding',true) ) {
 		$team_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('team_areaBpadding')).';';
 	}
 	if( get_theme_mod('team_areaLpadding',true) ) {
 		$team_areaLpadding = 'padding-left:'.esc_attr(get_theme_mod('team_areaLpadding')).';';
 	}
 	if( get_theme_mod('team_areaRpadding',true) ) {
 		$team_areaRpadding = 'padding-right:'.esc_attr(get_theme_mod('team_areaRpadding')).';';
 	}
 	?>
 	<div  class="team-area " id="team" style="<?php echo esc_attr($team_areaTpadding); ?>" "<?php echo esc_attr($team_areaBpadding); ?>" "<?php echo esc_attr($team_areaLpadding); ?>" "<?php echo esc_attr($team_areaRpadding); ?>" "<?php echo esc_attr($team_areaLpadding); ?>">
 
 		<?php			
 		$team_title = get_theme_mod('team_title_title', 'Our Team');
 		$team_text = get_theme_mod('team_text', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the');
 		?>
 		<div class="container">
 			<div class="row justify-content-center">
 				<div class="col-xl-6 col-lg-6 col-sm-8">
 					<?php if($team_title|| $team_text){ ?>
 					<div class="section-title text-center">
 						<h2><?php echo ($team_title);  ?></h2>
 						
 					</div>
 					<div class="section-sub text-center">
 						<p><?php echo ($team_text);  ?></p>
 					</div>

 				<?php }?>
 				</div>
 			</div>
 		</div>
 		<div class="container">
 			<div class="row ">	
 				<div class="teambox">	
  					<div class="owl-carousel owl-theme"> 
 				<?php 
 				$showStatic = true;
 				$cols = get_theme_mod('team_area_npp_count', 3);
 				$cols++;
 				switch($cols){
 					case 1:
					$colCls = 'col-md-12 col-sm-12 col-xs-12';
					break;
					case 2:	
					$colCls = 'col-md-6 col-sm-6 col-xs-12';
					break;
					case 3:
					case 5:
					case 6:
					case 9:
					case 11:
					case 13:
					case 15:
					$colCls = 'col-md-4 col-sm-6 col-xs-12';
					break;
					default: 
					$colCls = 'col-md-3 col-sm-6 col-xs-12';
					break;
 				}
 				for( $i = 1; $i <= $cols; $i++ ){
 					$team_area_page_id = get_theme_mod('team_area_page'.$i); 
 					$team_area_page_icon = get_theme_mod('team_area_page_icon'.$i);
 					if($team_area_page_id){
 						$showStatic = false;
 						echo teamShortCode($team_area_page_id, $isCustomizer=true, $i);
 					}
 				}
 				if($showStatic === true){
 					for( $i = 1; $i <= $cols; $i++ ){ ?> 
 						<div class="item">
 						<!-- <div class="<?php //echo $colCls;?> single-team"> -->
 							<div class="our-team">
 								<div class="single-team-img">
									<img src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" alt="Team" />
								</div>
								<div class="team-text">
									<h4 class="inner-area-title " data-wow-duration="1s">Name Here</h4>
									<div class="section-area-text team-designation " data-wow-duration="2s">Position</div>
									<div class="clearfix"></div>
								</div>

									<div class="clearfix"></div>
								<div class="team-social-icon">
									<!-- <p>There are many variations of passages of Lorem</p> -->

									<a target="_blank" href="http://facebook.com" class="wow fadeInDown" data-wow-duration="1s"><i class="fa fa-facebook"></i></a>
									<a target="_blank" href="http://twitter.com" class="wow fadeInDown" data-wow-duration="2s"><i class="fa fa-twitter"></i></a>
									<a target="_blank" href="http://instagram.com" class="wow fadeInDown" data-wow-duration="3s"><i class="fa fa-instagram"></i></a>
									<a target="_blank" href="https://in.pinterest.com/" class="wow fadeInDown" data-wow-duration="4s"><i class="fa fa-pinterest"></i></a>
									<a target="_blank" href="http://linkedin.com" class="wow fadeInDown" data-wow-duration="5s"><i class="fa fa-linkedin"></i></a>
								
								</div> 

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

 							</div>
 						<!-- </div> -->
 						</div>  
 						<?php 
 					}
 				} ?>
 			</div>
 			<div class="clearfix"></div>
 		</div>
 			</div>
 			<div class="clearfix"></div>
 		</div>	
 	</div>
 	 <script>
            $(document).ready(function() {
              $('.teambox .owl-carousel').owlCarousel({
                loop: true,               
                margin: 30,
                responsiveClass: true,
                responsive: {
                  0: {
                    items: 1,
                    nav: true
                  },
                  600: {
                    items:2,
                    nav: false
                  },
                  1000: {
                    items:3,
                    nav: true,
                    loop: false,                   
                    margin: 45
                  }
                }
              })
            })
          </script> 

  <script type="text/javascript">
    var title = 0;
    jQuery("#team .our-team").each(function(){
    if ($(this).height() > title) { title = $(this).height(); }
    });
    jQuery("#team .our-team").height(title);


    // on Resize change height

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

 <?php }
