 <!-- 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')).';';
 	}
 	$color_overlay_classes = '';
      $color_overlay_opacity = get_theme_mod( 'cover_team_template_overlay_opacity' );
      $color_overlay_opacity = ( false === $color_overlay_opacity ) ? 65 : $color_overlay_opacity;
      $color_overlay_classes .= ' opacity-' . $color_overlay_opacity;
 	?>
 	<div class="team-area" id="team">
 		<div class="team-main-area">
 		<div class="team-overlay <?php echo esc_attr( $color_overlay_classes ); ?>"></div>
 		<?php			
        $team_page_maintitle = get_theme_mod('team_title_title', 'Our Team Member');
        $team_page_mainsubtitle = get_theme_mod('team_page_mainsubtitle', 'Lets Help You');
 		?>
 		<div class="container">
		   <?php if($team_page_maintitle|| $team_page_mainsubtitle){ ?>
		    <div class="row justify-content-center">
		      <div class="col-xl-6 col-lg-6 col-sm-11 col-xs-12">        
		        <div class="section-title-area">
		          <?php if($team_page_mainsubtitle){ ?> 
		          <div class="section-subtitle">
		            <h4><?php echo ($team_page_mainsubtitle);  ?></h4>
		          </div>
		          <?php }?>
		          <?php if($team_page_maintitle){ ?>
		          <div class="section-title">
		            <h2><?php echo ($team_page_maintitle);  ?></h2>
		            <div class="sec-border"></div>
		          </div>
		          <?php }?>
		        </div>
		      </div>
		    </div>
		    <?php }?>
 		</div>
 		
 		<div class="team-inner-area">
 			<div class="container">
 			  <div class="owl-carousel owl-theme">	
 				<?php 
 				$showStatic = true;
 				$cols = get_theme_mod('team_area_npp_count', 4);
 				$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:
					$colCls = 'col-md-3 ';
					case 11:
					case 13:
					case 15:
					$colCls = 'col-md-4 col-sm-6 col-xs-12';
					break;
					default: '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 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-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>
                  </div>					
  								<div class="team-text">
  									<h4 class="inner-area-title wow fadeInLeft" data-wow-duration="1s">Lora Audrin</h4>
  									<div class="section-area-text team-designation wow fadeInLeft" data-wow-duration="2s">Head Director</div>
  									<div class="clearfix"></div>
  								</div>
								  <div class="clearfix"></div>
 							</div>
 					</div>  
 						<?php 
 					}
 				} ?>
 			</div>
 			<div class="clearfix"></div>
 		</div>
 		</div>	
 		<div class="clearfix"></div>
 	</div>
 	</div>

 	<script>
        $(document).ready(function() {
          $('.team-area .owl-carousel').owlCarousel({
           slideSpeed : 1500,
            autoplay: true,
              loop: true,
              margin: 30,
              responsiveClass: true,
              responsive: {
                0: {
                  items: 1,
                  nav: true
                },
                600: {
                  items:2,
                  nav: true
                },
                1000: {
                  items:4,
                  nav: true,
                  loop: true,
                  margin: 15
              }
            }
          })
        })
  </script>
  
<script>
  (function ($) {
    var equalHeight = function (column) {
      // Set variables.
      var currentTallest = 0;
      var currentRowStart = 0;
      var currentColumn = 0;
      var topPosition = 0;
      var arrColumns = [];

      $(column).each(function () {
        var $column = $(this);

        // Reset height.
        $column.height('auto'); 

        // Get top position of this column
        // relative to the document.
        topPosition = $column.offset().top; 

        if (currentRowStart != topPosition) {
          for (currentColumn = 0 ; currentColumn < arrColumns.length; currentColumn++) {
            arrColumns[currentColumn].height(currentTallest);
          }

          arrColumns.length = 0; // Empty the array.
          currentRowStart = topPosition; // Set next row start based on top position.
          currentTallest = $column.height();
          arrColumns.push($column);
        } else {
          arrColumns.push($column);
          currentTallest = (currentTallest < $column.height()) ? ($column.height()) : (currentTallest);
        }

        for (currentColumn = 0 ; currentColumn < arrColumns.length; currentColumn++) {
           arrColumns[currentColumn].height(currentTallest);
        }
      });

    }

    $(window).on('load resize', function() {
      equalHeight('#team .single-team');
    });

        $('.single-team').each(function () {
      	 var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
      	$(this).css("background", hue);
      });
    
  }(jQuery));

</script>

 <?php }
