 <!-- 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')).';';
 	}
 	?>
 	<div  class="team-area" id="team" style="<?php echo esc_attr($team_areaBpadding); ?>""<?php echo esc_attr($team_areaTpadding); ?>">
 		
 		<?php			
	 			$team_title = get_theme_mod('team_title_title', 'OUR TEAM');
	 			$team_subtitle = get_theme_mod('team_subtitle', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.');
 		?>
 		<div class="container">
			<div class="row justify-content-center">
			<?php if($team_title || $team_subtitle){ ?>
				<div class="col-md-10 col-md-offset2">
				    <div class="section-heading">
				        <h2><?php echo ($team_title);  ?></h2>
				        <p><?php echo ($team_subtitle);  ?></p>
				    </div>
			  </div>
			<?php }?>
			</div>
			<?php if( get_theme_mod('teamani_img_display','show' ) == 'show') : ?> 
				<div class="teamtop"><i class="fa fa-plus" ></i></div>
				<div class="teamtoprhs"><i class="fa fa-plus" ></i></div>

				<div class="teamdotrhs">
					<?php 
						$teamdotrhs_image = get_theme_mod('teamdotrhs_image');
						if(!empty($blgdot_image)){
							echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($teamdotrhs_image).'" class="img-responsive" />';
						}else{
							echo '<img alt="blgplse" src="'.get_template_directory_uri().'/images/Dotted-S2.png" class="img-responsive" />';
						}
					?>
				</div>
				<?php endif ?>
		</div>
		<div class="container"> 
			<?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="<?php echo $colCls;?> single-team ">
				<div team-match-height="groupName" class= "our-team">
					<div class="single-team-img">
						<img src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" alt="team" />
						<div class="tmimgbrd"></div>
					</div>	
					<div class="team-con">
						<h4 class="inner-area-title ">Williamson</h4>
						<div class="team-designation ">Web Devloper</div>
						<div class="clearfix"></div>

						<div class="team-social-icon ">
							<li>
								<a target="_blank" href="http://facebook.com">
									<i class="fa fa-facebook"></i>
								</a>
							</li>
							
							<li>
								<a target="_blank" href="http://instagram.com">
									<i class="fa fa-instagram"></i>
								</a>
							</li>
							<li>
								<a target="_blank" href="http://www.linkedin.com" >
									<i class="fa fa-linkedin"></i>
								</a>
							</li>
							<li>
								<a target="_blank" href="http://twitter.com" >
									<i class="fa-brands fa-x-twitter"></i>
								</a>
							</li>
						</div>

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

			<?php 
				}
			} ?>

			<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 }
