 <!-- 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" >	
		<?php
				// width 
				$c_width = get_theme_mod('team_c_width', 'container');

			    if ($c_width === 'container') {
				    $c_alignment = 'container';
				} elseif ($c_width === 'container-fluid') {
				    $c_alignment = 'container-fluid';
				} else {
				    $text_alignment = 'container'; // Default to 'container' if the setting is invalid
				}

				// Heading Style
        	$heading_case = get_theme_mod('team_maintitle_case', 'capitalize');

		    if ($heading_case === 'uppercase') {
					$text_case = 'uppercase';
				} elseif ($heading_case === 'lowercase') {
				    $text_case = 'lowercase';
				} elseif ($heading_case === 'capitalize') {
				    $text_case = 'capitalize';
				} else {
				    $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
				}
				 
			// Alientment
        $heading_alignment = get_theme_mod('team_maintitle_align', 'left');

		    if ($heading_alignment === 'left') {
				    $text_alignment = 'left';
				} elseif ($heading_alignment === 'center') {
				    $text_alignment = 'center';
				} elseif ($heading_alignment === 'right') {
				    $text_alignment = 'right';
				} else {
				    $text_alignment = 'left'; // Default to 'left' if the setting is invalid
				}
    ?>
 		<?php			
 			$team_title = get_theme_mod('team_title', 'Our Team');
 			$team_subtitle = get_theme_mod('teamsubtitle', 'Lorem Ipsum Available, Injected');
 			$team_txt = get_theme_mod('teamtxt', 'There are many variations of passages of Lorem Ipsum available, but the even slightly believable.');
 		?>
 		<div class="<?php echo esc_attr($c_width); ?>">
	 			<div class="row ">
			 			<div class="col-lg-4 col-md-12 ">
								<div class="section-title2">
										<h3 style="text-align: <?php echo esc_attr($text_alignment); ?>;  text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($team_title); ?></h3>
										<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($team_subtitle); ?></h5>
										<p><?php echo ($team_txt); ?></p>
								</div>					
			 			</div>
			 			<div class="col-lg-8 col-md-12 ">
					 			<div class="teambx ">	
						 				<div class="owl-carousel feedback-slider"> 
								 				<?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-4 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="item single-team">
														<div class="our-team ">
																<div class="single-team-img">
																		<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="1.5s"><i class="fa-brands fa-x-twitter"></i></a>
																				<a target="_blank" href="http://instagram.com" class="wow fadeInDown" data-wow-duration="2s"><i class="fa fa-instagram"></i></a>
																				<a target="_blank" href="https://in.pinterest.com/" class="wow fadeInDown" data-wow-duration="2.5s"><i class="fa fa-pinterest"></i></a>
																				<div class="clearfix"></div>
																		</div> 
																	<img src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" alt="Team" />

																	<div class="team-text">
																			<h4 class="inner-area-title wow fadeInLeft" data-wow-duration="1s">Mak Jones</h4>
																			<div class=" team-designation wow fadeInLeft" data-wow-duration="2s">Creative Director</div>
																	</div>
																</div>
																<div class="clearfix"></div>
														</div>
												</div>  
										<?php 
										}
									} ?>
										</div>
					 			</div>
				 		</div>
			 	</div>
 		</div>	
 </div>
<script>
      jQuery(document).ready(function($) {
      var feedbackSlider = $('#team .feedback-slider');
      feedbackSlider.owlCarousel({
        items: 3,
        nav: true,
        dots: true,
        autoplay: true,
        loop: true,
        mouseDrag: true,
        touchDrag: true,
        navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
        responsive:{
            0: {
              items: 1,
              nav: true
            },
            600: {
               margin:20,
              items:2,
              nav: true
            },
            992: {
           	items:3,
              nav: true,
              loop: true,
               margin: 15
             },

             1300: {
           	items:3,
              nav: true,
              loop: true,
               margin: 20
             }
		        }
		      });

  feedbackSlider.on("translate.owl.carousel", function(){
    $(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
  });

  feedbackSlider.on("translated.owl.carousel", function(){
    $(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
  });
  feedbackSlider.on('changed.owl.carousel', function(property) {
    var current = property.item.index;
    var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
    var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
    var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
    var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
    $('.thumb-prev').find('img').attr('src', prevThumb);
    $('.thumb-next').find('img').attr('src', nextThumb);
    $('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
    $('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
  });
  $('.thumb-next').on('click', function() {
    feedbackSlider.trigger('next.owl.carousel', [300]);
    return false;
  });
  $('.thumb-prev').on('click', function() {
    feedbackSlider.trigger('prev.owl.carousel', [300]);
    return false;
  });
  
}); //end ready
      </script>


 <?php }
