ÿØÿÛ C 

ÿØÿÛ C 

<?php
	$marin_step_disabled       = get_theme_mod( 'marin_step_disabled', true );
	$marin_step_area_title     = get_theme_mod( 'marin_step_area_title', 'Our Simple <span class="primary-color">Working Steps</span>' );
	$marin_step_area_des       = get_theme_mod( 'marin_step_area_des', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' );
	$marin_step_container_size = get_theme_mod( 'marin_step_container_size', 'av-container' );
	$marin_step_content        = get_theme_mod( 'marin_step_content', MARIN_STEP_DEFAULT_CONTENT );
if ( true === $marin_step_disabled ) :
	?>
<section id="step-section" class="step-section av-py-default step-home" data-roller="start:0.5">
	<div class="<?php echo esc_attr( $marin_step_container_size ); ?>">
	<?php if ( ! empty( $marin_step_area_title ) || ! empty( $marin_step_area_des ) ) : ?>
			<div class="av-columns-area">
				<div class="av-column-12">
					<div class="heading-default text-center wow fadeInUp">
						<?php if ( ! empty( $marin_step_area_title ) ) : ?>
							<h3><?php echo wp_kses_post( $marin_step_area_title ); ?></h3>
							<span class="separator"><span><span></span></span></span>
						<?php endif; ?>
						<?php if ( ! empty( $marin_step_area_des ) ) : ?>
							<p><?php echo wp_kses_post( $marin_step_area_des ); ?></p>
						<?php endif; ?>	
					</div>
				</div>
			</div>
		<?php endif; ?>
		<div class="av-columns-area">
			<div class="av-column-12">
				<div class="step-carousel owl-carousel owl-theme">
				<?php
				if ( ! empty( $marin_step_content ) ) {
					$marin_step_content = json_decode( $marin_step_content );
					$count              = 1; // Initialize the count variable.
					foreach ( $marin_step_content as $step_item ) {
						$title    = ! empty( $step_item->title ) ? apply_filters( 'marin_translate_single_string', $step_item->title, 'step section' ) : '';
						$subtitle = ! empty( $step_item->subtitle ) ? apply_filters( 'marin_translate_single_string', $step_item->subtitle, 'step section' ) : '';
						$text     = ! empty( $step_item->text ) ? apply_filters( 'marin_translate_single_string', $step_item->text, 'Service section' ) : '';
						$link     = ! empty( $step_item->link ) ? apply_filters( 'marin_translate_single_string', $step_item->link, 'step section' ) : '';
						$image    = ! empty( $step_item->image_url ) ? apply_filters( 'marin_translate_single_string', $step_item->image_url, 'step section' ) : '';
						$icon     = ! empty( $step_item->icon_value ) ? apply_filters( 'marin_translate_single_string', $step_item->icon_value, 'Service section' ) : '';
						?>
						<div class="stepbox">
							<div class="stepbox-outer">
								<div class="step-effect"></div>
								<?php if ( ! empty( $icon ) ) : ?>
									<div class="stepbox-icon">
										<span class="stepbox-number"><?php echo esc_html( $count ); ?></span>
										<i class="fa <?php echo esc_attr( $icon ); ?>" aria-hidden="true"></i>
									</div>
								<?php endif; ?>
							</div>
							<?php if ( ! empty( $title ) || ! empty( $subtitle ) ) : ?>
								<div class="stepbox-content">
									<h5 class="stepbox-title"><a href="<?php echo esc_html( $link ); ?>"><?php echo esc_html( $title ); ?></a></h5>
									<h6 class="primary-color stepbox-subtitle"><?php echo esc_html( $subtitle ); ?></h6>
									<div class="stepbox-text"><?php echo esc_html( $text ); ?></div>
								</div>
							<?php endif; ?>
						</div>
						<?php
						$count++; // Increment the count.
					}
				}
				?>
				</div>
			</div>
		</div>
	</div>
</section>
	<?php
		$marin_step_autoplay_disable = get_theme_mod( 'marin_step_autoplay_disable', true );
		$marin_step_loop             = get_theme_mod( 'marin_step_loop', false );
		$marin_step_dots             = get_theme_mod( 'marin_step_dots', false );
		$marin_step_nav              = get_theme_mod( 'marin_step_nav', true );
		$marin_step_column_layout    = get_theme_mod( 'marin_step_column_layout', '4' );
		$marin_step_animation_speed  = get_theme_mod(
			'marin_step_animation_speed',
			array(
				'slider' => 6000,
				'suffix' => 'px',
			)
		);
	?>
<script>
	jQuery( document ).ready(function() {
		jQuery(".step-carousel").owlCarousel({
			rtl: jQuery("html").attr("dir") == 'rtl' ? true : false,
			<?php if ( false !== $marin_step_nav ) { ?>
				nav: true,
				navText: ['<i class="fa fa-arrow-left"></i>', '<i class="fa fa-arrow-right"></i>'],
			<?php } ?>
			//margin: 30,
			//stagePadding: 15,
			<?php if ( false !== $marin_step_autoplay_disable ) { ?>
				autoplay: true,
			<?php } ?>
			<?php if ( null !== $marin_step_animation_speed ) { ?>
				autoplayTimeout: <?php echo $marin_step_animation_speed['slider']; ?>,
			<?php } ?>
			loop: false,
			<?php if ( true !== $marin_step_dots ) { ?>
				dots: false,
			<?php } ?>
			//center: true,
			animateOut: 'fadeOut',
			animateIn: 'fadeIn',
			responsive: {
				0: {
					items: 2
				},
				768: {
					items: 3
				},
				992: {
					items: <?php echo $marin_step_column_layout; ?>,
				}
			}
		});
	});
</script>
<?php endif; ?>
