 <!-- team Area Start -->
 <?php   
 if(get_theme_mod('team_area_disable') != 'on' ){?>
 
<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', 'uppercase');

		    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', 'Our Team');
 			$team_txt = get_theme_mod('teamtxt', 'Dedicated Team');
 			$team_hightxt = get_theme_mod('teamhightxt', '#Members');

 			$d_txt1 = get_theme_mod('d_txt1', 'Book an ');
 			$d_txt2 = get_theme_mod('d_txt2', 'Appointment for Services.');
 			$date_txt = get_theme_mod('date_txt', 'Mon - Fri (9 am - 6 pm)');
 		?>
 		<div class="detailbx">
		 		<div class="<?php echo esc_attr($c_width); ?>">
			 			<div class="row ">
					 			<div class="col-lg-8 col-md-12 ">
						 				<div class="section-title">
						            <div class="titlebx">
						                <h3 style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($team_title); ?></h3>
						                <?php if( $team_subtitle ){ ?>
						                <h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($team_subtitle); ?></h5>
						                <?php }?>
						                <h6 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($team_txt); ?> <span><?php echo ($team_hightxt); ?></span></h6>
						            </div>
							    	</div>					
					 			</div>
					 			<div class="col-lg-4 col-md-12 ">
					 					<div class="datebx">
					 							<div class="txt1"><?php echo ($d_txt1); ?></div>
					 							<div class="txt2"><?php echo ($d_txt2); ?></div>
					 							<?php if( $date_txt ){ ?>
					 							<div class="datetxt"><i class="fa fa-calendar"></i> <?php echo ($date_txt); ?></div>
					 							<?php }?>
					 					</div>
					 			</div>
						</div>
				</div>
		</div>
			<div class="<?php echo esc_attr($c_width); ?>">
				 	<div class="teambx ">	
			 				<div class="row"> 
					 				<?php 
					 				$showStatic = true;
					 				$cols = get_theme_mod('team_area_npp_count', 3);
					 				$cols++;
					 				switch($cols){
					 					case 1:
										$colCls = 'col-lg-12 col-md-12 col-sm-12 col-xs-12';
										break;
										case 2:	
										$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-6';
										break;
										case 3:
										case 5:
										case 6:
										case 9:
										case 11:
										case 13:
										case 15:
										$colCls = 'col-lg-3 col-md-6 col-sm-6 col-xs-6';
										break;
										default: 
										$colCls = 'col-lg-3 col-md-6 col-sm-6 col-xs-6';
										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 ">
													<div class="single-team-img">				
														<img src="<?php echo esc_url(get_template_directory_uri().'/images/team.jpg');?>" alt="Team" />
															<div class="t_oly"></div>

														<div class="team-text">
																<h4 class="inner-area-title " data-wow-duration="1s">Edward Matthew</h4>
																<div class=" team-designation " data-wow-duration="2s">CEO - FOUNDER</div>
																<div class="team-social-icon ">
																		<a target="_blank" href="http://facebook.com"><i class="fa fa-facebook"></i></a>
																		<a target="_blank" href="http://twitter.com"><i class="fa-brands fa-x-twitter"></i></a>
																		<a target="_blank" href="http://instagram.com"><i class="fa fa-instagram"></i></a>
																		<a target="_blank" href="https://in.pinterest.com"><i class="fa fa-pinterest"></i></a>
																		<div class="clearfix"></div>
																</div> 
														</div>
													</div>
													<div class="clearfix"></div>
											</div>
									</div>  
							<?php 
								}
							} ?>
							</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 }
