<?php 



/* Template Name: About Us */ 



get_header(); 



global $post;
$page_title = $post->post_title;
$page_content = $post->post_content;
$banner_title = get_field('banner_title',$post->ID);
$banner_desktop_img = get_field('banner_image',$post->ID);
$banner_mobile_img  = get_field('mobile_banner_image',$post->ID);
$clients_gallery = get_field('clients_gallery',$post->ID);
$learn_more_section = get_field('learn_more_section',$post->ID);
?>

<div class="banner-section no-overlay item-bg2" style="background-image: url('<?php echo $banner_desktop_img['url']; ?>');"></div>
<div class="banner-section no-overlay item-bg2 mobile" style="background-image: url('<?php echo $banner_mobile_img['url']; ?>');"></div>

<!-- Ens Main Banner Area -->

<section>
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<h3 class="title text-uppercase"><?php echo $page_title; ?></h3>
			</div>
			<div class="clearfix"></div>
			<?php echo $page_content; ?>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<div class="client-slider">
					
					<?php foreach($clients_gallery as $client_img) { ?>
						<img src="<?php echo $client_img['url']; ?>" alt="">
					<?php } ?>
				</div>
			</div>
		</div>
	</div>  
</section>  

<section class="bg-light">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<h4 class="title text-uppercase text-center text-black">Learn More</h4>						
			</div>
			<div class="col-sm-12">
				<div class="more-links">
					<?php foreach($learn_more_section as $learn_more_btn) {
						$learn_more_dt = $learn_more_btn['learn_more_button']; ?>
						<a target="_blank" href="<?php echo $learn_more_dt['button_link']; ?>" class="btn btn-dark inverse"><?php echo $learn_more_dt['button_text']; ?> &gt;</a>	
					<?php } ?>
				</div>	
			</div>
		</div>
	</div>  
</section>
<script>
	jQuery(document).ready(function($) {
		$('.client-slider').slick({
		  dots: false,
		  arrows: false,
		  infinite: false,
		  speed: 1000,
		  slidesToShow: 7,
		  slidesToScroll: 1,
		  responsive: [
			{
			  breakpoint: 1024,
			  settings: {
				slidesToShow: 5,
				slidesToScroll: 1
			  }
			},
			  {
			  breakpoint: 991,
			  settings: {
				slidesToShow: 4,
				slidesToScroll: 1,
				autoplay: true,
  				autoplaySpeed: 2000 
			  }
			},
			{
			  breakpoint: 600,
			  settings: {
				slidesToShow: 3,
				slidesToScroll: 1
			  }
			},
			{
			  breakpoint: 480,
			  settings: {
				slidesToShow: 2,
				slidesToScroll: 1
			  }
			}
		  ]
		});
	});
</script>
<?php get_footer(); ?>