 <?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')).';';
 	}
 	?>
 	<div  class="team-area" id="team" >
 		<!-- <div class="ovly"></div> -->
 		<?php	
 			$team_subtitle = get_theme_mod('team_subtitle', 'Team');		
	 		$team_title = get_theme_mod('team_title_title', 'Meet The Best Team');
	 			
 		?>
 		<div class="container">
			<div class="row justify-content-center">
				  <div class="section-title wow zoomIn">
				    <div class="sub-title">
				    	<?php echo ($team_subtitle);  ?>
				    </div>
				    <?php if($team_title ){ ?>
					    <h2><?php echo ($team_title);  ?></h2> 
		         <?php }?>
		      </div>
			</div>
		
		 	<!-- <div class="gf-container">  -->
			  	 <!-- <div class="owl-carousel owl-theme"> --> 
			 				<?php 
			 				$showStatic = true;
			 				$cols = get_theme_mod('team_area_npp_count', 2);
			 				$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 wow zoomIn">
			 						<div team-match-height="groupName" class= "our-team">
			 							<div class="ovrly"></div>
			 								<div class="single-team-img">
			 									<div class="img-ovrly"></div>
													<img src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" alt="team" /> 
												<div class="team-con">
												<div class="team-text">
													<h4 class="inner-area-title">Rasalina Wilamson</h4>
													<div class="team-designation">SR. WEB DEVELOPER</div>
													<p>It is a long established fact that a reader will be
													distracted by the to readable a page at its layout.</p>
													
													<div class="team-social-icon">
					 									<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-brands fa-x-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="http://www.linkedin.com" class="wow fadeInDown" data-wow-duration="3s"><i class="fa fa-linkedin"></i></a>
															 
													</div>
												</div>
												<div class="clearfix"></div>
											</div>	
											<div class="clearfix"></div>
											</div>	
											<div class="clearfix"></div>
									
										</div>
			 						</div>  
			 				 <!-- </div>   -->
			 						<?php 
			 					}
			 				} ?>
				 		 <!-- </div> --> 
				 	<!-- </div> -->
				<div class="clearfix"></div>
		</div>	
 </div>
<script>
	var matchHeight = function () {
	
	function init() {
		eventListeners();
		matchHeight();
	}
	
	function eventListeners(){
		$(window).on('resize', function() {
			matchHeight();
		});
	}
	
	function matchHeight(){
		var groupName = $('[team-match-height]');
		var groupHeights = [];
		
		groupName.css('min-height', 'auto');
		
		groupName.each(function() {
			groupHeights.push($(this).outerHeight());
		});
		
		var maxHeight = Math.max.apply(null, groupHeights);
		groupName.css('min-height', maxHeight);
	};
	
	return {
		init: init
	};
	
} ();

$(document).ready(function() {
	matchHeight.init();
});

</script>
 <?php }