 <!-- 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 text-center" id="team" style="<?php echo esc_attr($team_areaTpadding); ?><?php echo esc_attr($team_areaBpadding); ?>">
 		<?php			
 			$team_title = get_theme_mod('team_title_title', '<span>OUR</span> TEAM');
 		?>
 		<div class="container">
			<div class="row justify-content-center">
				<?php if($team_title){ ?>	
				<div class="section-title">
					<h2><?php echo ($team_title);  ?></h2>
				</div>
				<?php }?>
			</div>
		</div>
 		<div class="container">
	 		<div class="teambx ">	
	 				<?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="<?php echo $colCls;?> single-team">	
						<div class="our-team wow zoomIn">
							<div class="single-team-img">
								<div class="overlay"></div>
								<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 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-linkedin"></i></a>
									<div class="clearfix"></div>
								</div> 
								<img src="<?php echo esc_url(get_template_directory_uri().'/images/team.png');?>" alt="Team" />
							</div>
							<div class="team-text">
								<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="311.494" height="69.113" viewBox="0 0 311.494 69.113">
								  <defs>
								    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
								      <stop offset="0" stop-color="#ffa200"/>
								      <stop offset="1" stop-color="#ff6f00"/>
								    </linearGradient>
								  </defs>
								  <path id="Rectangle_1" data-name="Rectangle 1" d="M21,851.471H99.255c15.124,0,41.151-39.055,67.148-36.655H327.8v67.007H21Z" transform="translate(-17 -814.71)" fill-rule="evenodd" fill="url(#linear-gradient)"/>
								  <path id="Rectangle_1-2" data-name="Rectangle 1" d="M17,851.471H99.439c15.158,0,41.243-39.055,67.3-36.655H328.494v67.007H17Z" transform="translate(-17 -812.71)" fill="#fff" fill-rule="evenodd"/>
								</svg>
								<h4 class="inner-area-title wow fadeInLeft" data-wow-duration="1s">Marcia M. Lawson</h4>
								<div class="team-designation wow fadeInLeft" data-wow-duration="2s">(welder worker)</div>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>  
					<?php 
					}
				} ?>
			</div>
	 			<!-- </div> -->
 		</div>
 		<div class="clearfix"></div>	
 	</div>
 </div>

    
<!--  	<script>
		jQuery.noConflict();
		$(function(){
			function teamtextHeight(){
				var ht = 0;
				$('#team .team-text').each(function(i){
					var tHt = $(this).height();
					if(ht<tHt){
						ht=tHt;
					}
				});
				$('#team .team-text').height(ht+'px');
			}
			teamtextHeight();
		});
		$( window ).resize(function(){
			teamtextHeight();
		});
	</script> -->

 <?php }
