<?php
if ( get_theme_mod( 'travel_tour_testimonial_section_display_option', true ) ) :
	$title = get_theme_mod('travel_tour_testimonial_section_title', 'What our clients have to say about us');
	$bg_color = get_theme_mod('travel_tour_testimonial_section_bg_color', '#f7f7f7');
	$shortcode = get_theme_mod('travel_tour_testimonial_shortcode', '');
	$sidebar = is_active_sidebar( 'testimonials' );
	if ( !empty($shortcode) || !empty($sidebar) ) :
?>
<section class="testimonials py-96" style="background: url('<?php echo esc_url(get_template_directory_uri()); ?>/images/quote.png') no-repeat center 10px <?php esc_html_e($bg_color); ?>; background-size: 100px;">
	<div class="container-xl">
		<?php if (!empty($title)) : ?>
		<h2 class="text-center mb-24">
			<?php esc_html_e( $title ); ?>
		</h2>
		<?php endif; ?>
		<?php if (!empty($shortcode)) : ?>
		<div class="d-flex justify-content-center align-items-center text-center">
			<?php echo do_shortcode( $shortcode ); ?>
		</div>
		<?php else : ?>
		<div id="owl-testimonials" class="owl-carousel">
			<?php dynamic_sidebar( 'testimonials' ); ?>	
		</div>
		<style>
			.testimonials .owl-item {
				text-align: center;padding: 0 5%;border-radius: 5px;margin-bottom: 0;
				-webkit-transition: all 0.5s ease-in-out;
		    -moz-transition: all 0.5s ease-in-out;
		    -ms-transition: all 0.5s ease-in-out;
		    -o-transition: all 0.5s ease-in-out;
		    transition: all 0.5s ease-in-out;
			}
			.testimonials .owl-dots{
				text-align: center;
			}
			.testimonials .owl-dot {
		    background: #ccc;
		    height: 2px;
		    width: 10px;
		    display: inline-block;margin: 0 3px;
			}
			.testimonials .owl-dot.active {
			    background: #888;
			}
			.testimonials .owl-item.active{
				opacity: 1;
			}
			.testimonials .owl-item img{
				width: 100px;
				display: inline-block;
				border-radius: 50%;
				height: 100px;
				padding: 7px;
				border:2px solid var(--primary-color);
			}
			.testimonials .owl-item .testimonial-meta{
				margin-top: 10px;
			}
			.testimonials .owl-item .testimonial-meta .name{
				display: block;
				font-size: 17px;
				font-weight: 600;
			}
			.testimonials .owl-item .testimonial-meta .designation{
				display: block;
				color: #aaa;
				margin-bottom: 15px;
				font-weight: 400;
			}
			.testimonials .owl-dot{
				margin-top: 15px;
				width: 7px;
				height: 7px;
				transform: rotate(45deg);
			}
		</style>
		<?php endif; ?>
	</div>
</section>
<?php endif; endif;