<section class="trip-category my-64">
  <div class="container-xl slider-section">
    <?php if( $title ) : ?><h2><?php echo esc_html( $title ); ?></h2><?php endif; ?>
    <?php if( class_exists( 'Wp_Travel_Engine' ) ) : ?>
    <div id="owl-slider" class="owl-carousel"> 
      <?php foreach ( $terms as $term ) :
        $image_id = get_term_meta( $term->term_id, 'category-image-id', true);
        $image = wp_get_attachment_image_src( $image_id, 'travel-tour-slider' );
        if ($image) {
          $finalImage = $image[0];
        } else {
          $finalImage = get_template_directory_uri() . '/images/no-image.png';
        }
      ?>
      <div class="slider-layout-one">
        <a href="<?php echo esc_url( get_term_link( $term ) ); ?>">
          <img src="<?php echo esc_url( $finalImage ); ?>" alt="<?php echo esc_attr( $term->name ); ?>" class="image">
          <div class="caption">
            <h3><?php echo esc_html( $term->name ); ?></h3>
            <span class="readmore fs-6 text-uppercase"><?php esc_html_e( 'View Tours', 'travel-tour' ); ?></span>
          </div>
        </a>
      </div>
      <?php endforeach; ?>
    </div> 
    <?php endif; ?>
  </div>
</section>
<style>
  .trip-category .slider-layout-one {
    position: relative;
    height: 350px;
  }
  .trip-category .slider-layout-one .image {
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 100%;
  }
  .trip-category .slider-layout-one .caption {
    position: absolute;
    bottom: 0;
    transition: all 200ms ease-out;
    padding: 90px 15px 20px 15px;
    width: 100%;
    text-align: center;
    background: linear-gradient(transparent, #000000ad);
  }
  .trip-category .slider-layout-one .caption h3 {
    margin: 0;
    color: var(--light-color);
  }
  .trip-category .slider-layout-one span.readmore {
    position: absolute;
    bottom: -35px;
    transition: all 200ms ease-out;
    width: 100%;
    left: 0;
    padding-bottom:5px;
    color: var(--secondary-color);
    border-bottom: 3px solid var(--secondary-color);
  }
  .trip-category .slider-layout-one:hover span.readmore {
    bottom: 0;
  }
  .trip-category .slider-layout-one:hover .caption {
    padding: 90px 15px 35px 15px;
  }

  .trip-category .slider-layout-one:hover:after, .trip-category .slider-layout-one:hover:before {
    bottom: 75px;
  }
  .trip-category .owl-stage {
    counter-reset: my-badass-counter;
  }
  .trip-category .slider-layout-one:before {
    content: counter(my-badass-counter, decimal);
    counter-increment: my-badass-counter;
    z-index:1000;
  }
  .trip-category .slider-layout-one:after, .trip-category .slider-layout-one:before {
    position: absolute;
    transition: all 200ms ease-out;
    font-size: 14px;
    height: 25px;
    width: 25px;
    display: inline-block;
    text-align: center;
    bottom: 60px;
    color: #000;
    overflow: hidden;
    left: 48%;
    line-height: 25px;
  }
  .trip-category .slider-layout-one:after {
    background: #fff;
    transform: rotate(45deg);
    content: '';
    z-index: 100;
  }
  .trip-category .slider-layout-one:hover:before {
    color: var(--light-color);
  }
  .trip-category .slider-layout-one:hover:after {
    background: var(--primary-color);
    color: var(--light-color);
    transform: rotate(45deg);
    content: '';
    z-index: 100;
  }
  .trip-category  .fa-2x {
    transform: rotate(-45deg);
    font-size: 15px;
    width: 6px;
  }
</style>