<?php if ( true == get_theme_mod( 'cargo_ships_services_on_off', 'off' ) ) : ?>

<?php 

$services_count = get_theme_mod('cargo_ships_services_count'); 

$cargo_ships_services_main_heading = get_theme_mod('cargo_ships_services_main_heading');

$cargo_ships_services_short_heading = get_theme_mod('cargo_ships_services_short_heading');

?>

<section id="home_services" class="py-5">
  <div class="container">

    <?php if ( ! empty( $cargo_ships_services_short_heading ) ): ?>
      <h3 class="text-center wow fadeInDown" data-wow-duration="2s"><?php echo esc_html( $cargo_ships_services_short_heading ); ?>
      <hr>
      </h3>
    <?php endif; ?>
    <?php if ( ! empty( $cargo_ships_services_main_heading ) ): ?>
      <p class="text-center mb-4 wow fadeInDown" data-wow-duration="2s"><?php echo esc_html( $cargo_ships_services_main_heading ); ?></p>
    <?php endif; ?>


    <div class="row">
      <?php for ($i=1; $i <= $services_count; $i++) {
        
        $cargo_ships_services_image = get_theme_mod('cargo_ships_services_image'.$i);
        $cargo_ships_services_heading = get_theme_mod('cargo_ships_services_heading'.$i);
        $cargo_ships_services_heading_link = get_theme_mod('cargo_ships_services_heading_link'.$i);
        $cargo_ships_services_content = get_theme_mod('cargo_ships_services_content'.$i); 
        $cargo_ships_services_icon = get_theme_mod('cargo_ships_services_icon'.$i);
        $cargo_ships_services_button_text = get_theme_mod('cargo_ships_services_button_text'.$i);
        $cargo_ships_services_button_link = get_theme_mod('cargo_ships_services_button_link'.$i);
        ?>

        <div class="col-lg-3 col-md-6 col-sm-6 align-self-center">
          <div class="box wow fadeInUp" data-wow-duration="2s">
            <?php if ( ! empty( $cargo_ships_services_image ) ) : ?>
              <img src="<?php echo esc_url( $cargo_ships_services_image ); ?>">
            <?php endif; ?>
            <div class="image-box">
              <?php if ( ! empty( $cargo_ships_services_heading_link ) || ! empty( $cargo_ships_services_heading ) ): ?>
                <h4 class="title title-front"><a href="<?php echo esc_url( $cargo_ships_services_heading_link ); ?>"><?php echo esc_html( $cargo_ships_services_heading ); ?></a></h4>
              <?php endif; ?>
              <?php if ( ! empty( $cargo_ships_services_content ) ): ?>
                <span class="post post-front"><?php echo esc_html( $cargo_ships_services_content ); ?></span>
              <?php endif; ?>
            </div>
            <div class="box-content">
              <?php if ( ! empty( $cargo_ships_services_icon ) ): ?>
                <i class="<?php echo esc_html( $cargo_ships_services_icon ); ?>"></i>
              <?php endif; ?>
              <?php if ( ! empty( $cargo_ships_services_heading_link ) || ! empty( $cargo_ships_services_heading ) ): ?>
                <h4 class="title"><a href="<?php echo esc_url( $cargo_ships_services_heading_link ); ?>"><?php echo esc_html( $cargo_ships_services_heading ); ?></a></h4>
              <?php endif; ?>
              <?php if ( ! empty( $cargo_ships_services_content ) ): ?>
                <span class="post"><?php echo esc_html( $cargo_ships_services_content ); ?></span>
              <?php endif; ?>
              <?php if ( ! empty( $cargo_ships_services_button_link ) || ! empty( $cargo_ships_services_button_text ) ): ?>
                <a class="box-button" href="<?php echo esc_url( $cargo_ships_services_button_link ); ?>"><?php echo esc_html( $cargo_ships_services_button_text ); ?></a>
              <?php endif; ?>
            </div>
          </div>
        </div>
      <?php } ?>
    </div>
  </div>
</section>

<?php endif; ?>