@extends('layouts.app')

@section('title', 'Homepage - YN Tourism')
@section('description', '')
@section('keywords', '')

@push('preload')
    <link rel="preload" href="{{ asset('assets/css/theme-color.css') }}" as="style">
    <link rel="preload" href="{{ asset('assets/js/adivaha-library.js') }}" as="script">
@endpush

@push('css')
    <link rel="stylesheet" id="child-style-css"
          href="{{ asset('assets/css/theme-color.css?v=') . filemtime(public_path('assets/css/theme-color.css')) }}"
          type="text/css" media="all"/>
@endpush

@section('content')
    <main>
        {{--    Hero Section    --}}
        <div class="ot-hero-wrapper hero-1">
            @if($heroes->count() > 0)
                <div class="hero-slider ot-carousel" data-fade="true">
                    @foreach($heroes as $item)
                        <div class="ot-hero-slide">
                            <div class="ot-hero-bg" data-bg-src="{{ asset('storage/'. $item->image->path) }}"></div>
                            <div class="container z-index-common">
                                <div class="hero-style1">
                                <span class="sub-title hero-subtitle" data-ani="slideinup" data-ani-delay="0.1s">
                                    {{ $item->sub_title }}
                                  <span class="shape">
                                      <span class="dots"></span>
                                  </span>
                                </span>
                                    <h1 class="hero-title" data-ani="slideinup" data-ani-delay="0.2s">
                                        {{ $item->title }}
                                    </h1>
                                    <p class="hero-text" data-ani="slideinup" data-ani-delay="0.4s">
                                        {{ $item->description }}
                                    </p>
                                    @if($item->link)
                                        <a href="{{ $item->link }}" class="ot-btn" data-ani="slideinup"
                                           data-ani-delay="0.5s">
                                            {{ $item->cta_text }}
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="search">
                <div class="search-container">
                    <form method="get" action="" class="newsletter-form w-100 d-flex py-2 gap-3"
                          style="max-width: 100% !important;">
                        @csrf
                        <div class="form-group">
                            <input
                                class="form-control"
                                type="text" placeholder="What`s your destination?"/>
                        </div>
                        <button type="submit" class="ot-btn">Search</button>
                    </form>
                </div>
            </div>
        </div>

        {{--    Service Section    --}}
        <section class="space">
            <div class="container">

                <div
                    class="row gap-2 ot-carousel"
                    id="testiSlide1"
                    data-slide-show="4"
                    data-ml-slide-show="4"
                    data-lg-slide-show="3"
                    data-md-slide-show="2"
                    data-sm-slide-show="1"
                >
                    @foreach($services as $item)
                        <div class=" col-md-6">
                            <div class="counter-card border-left" style="min-height: 160px;">
                                <div
                                    class="counter-card_icon"
                                    style="cursor: pointer"
                                    @if(!$item->is_page)
                                        data-bs-toggle="modal"
                                    data-bs-target="#serviceModel{{$item->id}}"
                                    @else
                                        data-url="{{ $item->link }}"
                                    @endif
                                >
                                    <img src="{{ asset('storage/'. $item->image->path) }}"
                                         alt="{{ $item->image->alt }}" title="{{ $item->image->item }}"/>
                                </div>
                                <div class="media-body">
                                    <h4
                                        class="counter-card_text"
                                        style="cursor: pointer"
                                        @if(!$item->is_page)
                                            data-bs-toggle="modal"
                                        data-bs-target="#serviceModel{{$item->id}}"
                                        @endif
                                    >
                                        @if($item->is_page)
                                            <a href="{{ $item->link }}" style="color: var(--black-color)">{{ $item->name }}</a>
                                        @else
                                            {{ $item->name }}
                                        @endif
                                    </h4>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-5">
                    <div class="icon-box style2">
                        <button
                            data-slick-prev="#testiSlide1"
                            class="slick-arrow slick-arrow-explore default"
                        >
                            <i class="far fa-arrow-left"></i>
                        </button>
                        <button
                            data-slick-next="#testiSlide1"
                            class="slick-arrow slick-arrow-explore default"
                        >
                            <i class="far fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section class="" data-pos-for="#tour-sec" data-sec-pos="bottom-half">
            <div class="container">

                <div
                    class="row gap-2 ot-carousel"
                    id="Slide2"
                    data-slide-show="2"
                    data-ml-slide-show="2"
                    data-lg-slide-show="2"
                    data-md-slide-show="2"
                    data-sm-slide-show="1"
                >
                    <div class=" col-md-6">
                        <div class="offer-card" data-bg-src="assets/img/bg/offer_bg_2.jpg">
                            <h2 class="offer-card__offer">35% OFF</h2>
                            <h3 class="offer-card__text box-title">
                                On Flight Ticket Grab This Now.
                            </h3>
                            <a href="contact.html" class="ot-btn">Buy Now</a>
                        </div>
                    </div>
                    <div class=" col-md-6">
                        <div class="offer-card" data-bg-src="assets/img/bg/offer_bg_1.jpg">
                            <h2 class="offer-card__offer">45% OFF</h2>
                            <h3 class="offer-card__text box-title">
                                Explore The World Tour Hotel Booking.
                            </h3>
                            <a href="contact.html" class="ot-btn">Book Now</a>
                        </div>
                    </div>
                    <div class=" col-md-6">
                        <div class="offer-card" data-bg-src="assets/img/bg/offer_bg_2.jpg">
                            <h2 class="offer-card__offer">35% OFF</h2>
                            <h3 class="offer-card__text box-title">
                                On Flight Ticket Grab This Now.
                            </h3>
                            <a href="contact.html" class="ot-btn">Buy Now</a>
                        </div>
                    </div>
                    <div class=" col-md-6">
                        <div class="offer-card" data-bg-src="assets/img/bg/offer_bg_1.jpg">
                            <h2 class="offer-card__offer">45% OFF</h2>
                            <h3 class="offer-card__text box-title">
                                Explore The World Tour Hotel Booking.
                            </h3>
                            <a href="contact.html" class="ot-btn">Book Now</a>
                        </div>
                    </div>

                </div>
                <div class="sec-btn mt-2">
                    <div class="icon-box style2">
                        <button
                            data-slick-prev="#Slide2"
                            class="slick-arrow slick-arrow-explore default"
                        >
                            <i class="far fa-arrow-left"></i>
                        </button>
                        <button
                            data-slick-next="#Slide2"
                            class="slick-arrow slick-arrow-explore default"
                        >
                            <i class="far fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section
            class="space bg-repeat bg-smoke"
            id="tour-sec"
            data-bg-src="assets/img/bg/pattern_bg_1.png"
        >
            <div class="container">
                <div class="title-area text-center">
          <span class="sub-title justify-content-center"
          ><span class="shapeleft"><span class="dots"></span></span> Featured
            Tour <span class="shape"><span class="dots"></span></span>
          </span>
                    <h2 class="sec-title">Most Popular Tours</h2>
                </div>
                <div class="row gy-30">
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_1.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Madrid, Spain</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Brooklyn Beach Resort Tour</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i><span> 10 Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i> <span>+</span></span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span> <span class="price">$250</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_2.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Chumphon,
                                        Thailand</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Pak Chumphon Town Tour</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i><span> 12 Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i> <span> 70+ </span></span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span> <span class="price">$450</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_3.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Lasvegus, USA</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Bali One Life Adventure</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i><span> 07 Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i><span> 52+</span></span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span>  <span class="price">$350</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_4.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Barcelona,
                                        Spain</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Places To Travel November</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i> <span> Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i><span> 100+ </span></span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span> <span class="price">$550</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_5.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Lasvegus, USA</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Brooklyn Christmas Lights</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i><span> 15 Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i><span>312+</span> </span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span> <span class="price">$600</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_6.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Madrid, Spain</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Discovery Island Kayaking</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i><span> 18 Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i><span> 500+ </span></span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span> <span class="price">$250</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_7.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Chumphon,
                                        Thailand</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Los Glaciares & Fitz Trip</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i><span> 20 Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i><span> 50+ </span></span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span> <span class="price">$250</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-card__img">
                                <img src="assets/img/trip/tour_1_8.jpg" alt="Tour Image"/>
                                <span class="tour-card__tag"><i class="far fa-heart"></i></span>
                            </div>
                            <div class="tour-card__content">
                                <div class="tour-card__top">
                                    <a
                                        href="https://www.google.com/maps"
                                        class="tour-card__location"
                                    ><i class="fa-light fa-location-dot"></i> Lasvegus, USA</a
                                    >
                                    <div class="tour-card__rating">
                                        <i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i
                                        ><i class="fa-solid fa-star-sharp"></i>
                                    </div>
                                </div>
                                <h3 class="tour-card__title">
                                    <a href="hotel-details.html">Kupland Christmas Tour</a>
                                </h3>
                                <div class="tour-meta d-flex gap-3">
                                    <span class="d-flex gap-1 align-items-center"><i
                                            class="fa-light fa-clock"></i><span> 06 Days </span></span>
                                    <span class="d-flex gap-1 align-items-center"><i class="fa-light fa-user-group"></i><span> 60+ </span></span>
                                </div>
                                <div class="tour-card__bottom">
                  <span class="tour-card__price d-flex"
                  ><span>From</span> <span class="price">$550</span></span
                  >
                                    <a href="hotel-details.html" class="link-btn"
                                    >See Details <i class="fas fa-arrow-up-right"></i
                                        ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="space bg-smoke overflow-hidden">
            <div class="container">
                <div class="title-area text-center">
          <span class="sub-title justify-content-center"
          ><span class="shapeleft"><span class="dots"></span></span> Top
            Destinations
            <span class="shape"><span class="dots"></span></span>
          </span>
                    <h2 class="sec-title">Popular Destinations</h2>
                </div>
                <div class="row align-items-center">
                    <div class="col-xl-3 mb-40 mb-xl-0">
                        <div class="trip-details-slide ot-carousel" data-fade="true">
                            <div>
                                <div class="trip-card-details">
                                    <span class="subtitle">Locations</span>
                                    <h3 class="trip-title">
                                        <a href="destination.html">Switzerland</a>
                                    </h3>
                                    <p class="trip-text">
                                        Globally drive pandemic e-business via functionalized
                                        e-business. Rapidiously simplify covalent leadership whereas
                                        distributed results.
                                    </p>
                                </div>
                            </div>
                            <div>
                                <div class="trip-card-details">
                                    <span class="subtitle">Locations</span>
                                    <h3 class="trip-title">
                                        <a href="destination.html">Barcelona</a>
                                    </h3>
                                    <p class="trip-text">
                                        Simplify Globally pandemic e-business via functionalized
                                        e-business. Rapidiously covalent leadership whereas
                                        distributed results drive.
                                    </p>
                                </div>
                            </div>
                            <div>
                                <div class="trip-card-details">
                                    <span class="subtitle">Locations</span>
                                    <h3 class="trip-title">
                                        <a href="destination.html">Amsterdam</a>
                                    </h3>
                                    <p class="trip-text">
                                        Drive pandemic e-business via functionalized e-business.
                                        Rapidiously simplify covalent leadership whereas distributed
                                        results Globally.
                                    </p>
                                </div>
                            </div>
                            <div>
                                <div class="trip-card-details">
                                    <span class="subtitle">Locations</span>
                                    <h3 class="trip-title">
                                        <a href="destination.html">Budapest City</a>
                                    </h3>
                                    <p class="trip-text">
                                        Pandemic Globally drive e-business via functionalized
                                        e-business. Rapidiously simplify covalent leadership whereas
                                        distributed results.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="icon-box text-center text-xl-start">
                            <button
                                data-slick-prev=".trip-details-slide"
                                class="slick-arrow default"
                            >
                                <i class="far fa-arrow-left"></i>
                            </button>
                            <button
                                data-slick-next=".trip-details-slide"
                                class="slick-arrow default"
                            >
                                <i class="far fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-xl-9">
                        <div class="trip-tab" data-asnavfor=".trip-details-slide">
                            <div class="trip-card active">
                                <div class="trip-card__img">
                                    <img src="assets/img/trip/dest_1_1.jpg" alt="Trip image"/>
                                </div>
                                <div class="trip-card__content">
                                    <div class="trip-card__location">
                                        <i class="fas fa-location-dot"></i>
                                    </div>
                                    <h2 class="trip-card__title box-title">
                                        <a href="destination-details.html">Switzerland</a>
                                    </h2>
                                    <span class="trip-card__count">6+ Trips</span>
                                    <a href="destination.html" class="ot-btn">Explore All</a>
                                </div>
                            </div>
                            <div class="trip-card">
                                <div class="trip-card__img">
                                    <img src="assets/img/trip/dest_1_2.jpg" alt="Trip image"/>
                                </div>
                                <div class="trip-card__content">
                                    <div class="trip-card__location">
                                        <i class="fas fa-location-dot"></i>
                                    </div>
                                    <h2 class="trip-card__title box-title">
                                        <a href="destination-details.html">Barcelona</a>
                                    </h2>
                                    <span class="trip-card__count">8+ Trips</span>
                                    <a href="destination.html" class="ot-btn">Explore All</a>
                                </div>
                            </div>
                            <div class="trip-card">
                                <div class="trip-card__img">
                                    <img src="assets/img/trip/dest_1_3.jpg" alt="Trip image"/>
                                </div>
                                <div class="trip-card__content">
                                    <div class="trip-card__location">
                                        <i class="fas fa-location-dot"></i>
                                    </div>
                                    <h2 class="trip-card__title box-title">
                                        <a href="destination-details.html">Amsterdam</a>
                                    </h2>
                                    <span class="trip-card__count">6+ Trips</span>
                                    <a href="destination.html" class="ot-btn">Explore All</a>
                                </div>
                            </div>
                            <div class="trip-card">
                                <div class="trip-card__img">
                                    <img src="assets/img/trip/dest_1_4.jpg" alt="Trip image"/>
                                </div>
                                <div class="trip-card__content">
                                    <div class="trip-card__location">
                                        <i class="fas fa-location-dot"></i>
                                    </div>
                                    <h2 class="trip-card__title box-title">
                                        <a href="destination-details.html">Budapest City</a>
                                    </h2>
                                    <span class="trip-card__count">5+ Trips</span>
                                    <a href="destination.html" class="ot-btn">Explore All</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="shape-mockup jump-reverse d-none d-lg-block"
                data-top="2%"
                data-left="0%"
            >
                <img src="assets/img/shape/plane_shape_1.svg" alt="shapes"/>
            </div>
            <div
                class="shape-mockup jump d-none d-xl-block"
                data-bottom="2%"
                data-right="0%"
            >
                <img src="assets/img/shape/plane_shape_2.svg" alt="shapes"/>
            </div>
        </div>

        <section class="space-top" data-bg-src="assets/img/bg/deal_bg_1.jpg">
            <div class="container">
                <div
                    class="row text-center text-lg-start justify-content-lg-between justify-content-center align-items-end"
                >
                    <div class="col-lg-8 mb-n2 mb-lg-0">
                        <div class="title-area">
              <span
                  class="sub-title justify-content-center justify-content-lg-start"
              ><span class="shapeleft d-inline-block d-lg-none"
                  ><span class="dots"></span
                      ></span>
                Deals & Offers
                <span class="shape"><span class="dots"></span></span>
              </span>
                            <h2 class="sec-title text-white">Last Minute Amazing Deals</h2>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="sec-btn">
                            <div class="icon-box style2">
                                <button
                                    data-slick-prev="#dealSlide1"
                                    class="slick-arrow default"
                                >
                                    <i class="far fa-arrow-left"></i>
                                </button>
                                <button
                                    data-slick-next="#dealSlide1"
                                    class="slick-arrow default"
                                >
                                    <i class="far fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="row gx-0 ot-carousel"
                id="dealSlide1"
                data-slide-show="4"
                data-ml-slide-show="3"
                data-lg-slide-show="3"
                data-md-slide-show="2"
                data-sm-slide-show="1"
            >
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="tour-offer">
                        <div class="tour-offer__img">
                            <img src="assets/img/trip/tour_2_1.jpg" alt="Tour Image"/>
                            <span class="tour-offer__tag">40% Off</span>
                        </div>
                        <div class="tour-offer__content">
                            <div class="tour-offer__top">
                                <div>
                                    <h3 class="tour-offer__title box-title">
                                        <a href="hotel-details.html">Maldivs Beach</a>
                                    </h3>
                                    <span class="tour-offer__subtitle">Exploring Maldivs</span>
                                </div>
                                <span class="tour-offer__price"
                                ><span class="price">$250</span></span
                                >
                            </div>
                            <p class="tour-offer__text">
                                Professionally optimize mission-critical networks rather than
                                resource maximizing ideas globally.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="tour-offer">
                        <div class="tour-offer__img">
                            <img src="assets/img/trip/tour_2_2.jpg" alt="Tour Image"/>
                            <span class="tour-offer__tag">30% Off</span>
                        </div>
                        <div class="tour-offer__content">
                            <div class="tour-offer__top">
                                <div>
                                    <h3 class="tour-offer__title box-title">
                                        <a href="hotel-details.html">Seychelles</a>
                                    </h3>
                                    <span class="tour-offer__subtitle">Enjoy Seychelles</span>
                                </div>
                                <span class="tour-offer__price"
                                ><span class="price">$150</span></span
                                >
                            </div>
                            <p class="tour-offer__text">
                                Professionally optimize mission-critical networks rather than
                                resource maximizing ideas globally.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="tour-offer">
                        <div class="tour-offer__img">
                            <img src="assets/img/trip/tour_2_3.jpg" alt="Tour Image"/>
                            <span class="tour-offer__tag">25% Off</span>
                        </div>
                        <div class="tour-offer__content">
                            <div class="tour-offer__top">
                                <div>
                                    <h3 class="tour-offer__title box-title">
                                        <a href="hotel-details.html">Adventure Mountain</a>
                                    </h3>
                                    <span class="tour-offer__subtitle">Mountain Iceland</span>
                                </div>
                                <span class="tour-offer__price"
                                ><span class="price">$250</span></span
                                >
                            </div>
                            <p class="tour-offer__text">
                                Professionally optimize mission-critical networks rather than
                                resource maximizing ideas globally.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="tour-offer">
                        <div class="tour-offer__img">
                            <img src="assets/img/trip/tour_2_4.jpg" alt="Tour Image"/>
                            <span class="tour-offer__tag">30% Off</span>
                        </div>
                        <div class="tour-offer__content">
                            <div class="tour-offer__top">
                                <div>
                                    <h3 class="tour-offer__title box-title">
                                        <a href="hotel-details.html">Adventures</a>
                                    </h3>
                                    <span class="tour-offer__subtitle">Explore Adventures</span>
                                </div>
                                <span class="tour-offer__price"
                                ><span class="price">$350</span></span
                                >
                            </div>
                            <p class="tour-offer__text">
                                Professionally optimize mission-critical networks rather than
                                resource maximizing ideas globally.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="tour-offer">
                        <div class="tour-offer__img">
                            <img src="assets/img/trip/tour_2_5.jpg" alt="Tour Image"/>
                            <span class="tour-offer__tag">45% Off</span>
                        </div>
                        <div class="tour-offer__content">
                            <div class="tour-offer__top">
                                <div>
                                    <h3 class="tour-offer__title box-title">
                                        <a href="hotel-details.html">Night City</a>
                                    </h3>
                                    <span class="tour-offer__subtitle">City Night Beauty</span>
                                </div>
                                <span class="tour-offer__price"
                                ><span class="price">$200</span></span
                                >
                            </div>
                            <p class="tour-offer__text">
                                Professionally optimize mission-critical networks rather than
                                resource maximizing ideas globally.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="space">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-7">
                        <div class="title-area mb-30 text-center text-xl-start">
              <span
                  class="sub-title justify-content-center justify-content-xl-start"
              ><span class="shapeleft d-inline-block d-xl-none"
                  ><span class="dots"></span
                      ></span>
                Why Choose Us
                <span class="shape"><span class="dots"></span></span>
              </span>
                            <h2 class="sec-title">Get The Best Travel Experience</h2>
                        </div>
                        <p class="mt-n2 mb-35 text-center text-xl-start">
                            Professionally engineer world-class leadership skills after
                            end-to-end growth strategies. Assertively create innovative
                            schemas through installed base potentialities.
                        </p>
                        <div class="feature-media-wrap">
                            <div class="feature-media">
                                <div class="feature-media__icon">
                                    <i class="fa-solid fa-calendar-clock"></i>
                                </div>
                                <div class="media-body">
                                    <h3 class="feature-media__title">Set Travel Plan</h3>
                                    <p class="feature-media__text">
                                        Distinctively impact client-centered ideas via future-proof
                                        paradigms.
                                    </p>
                                </div>
                            </div>
                            <div class="feature-media">
                                <div class="feature-media__icon">
                                    <i class="fa-solid fa-compass"></i>
                                </div>
                                <div class="media-body">
                                    <h3 class="feature-media__title">Explore Around</h3>
                                    <p class="feature-media__text">
                                        Distinctively impact client-centered ideas via future-proof
                                        paradigms.
                                    </p>
                                </div>
                            </div>
                            <div class="feature-media">
                                <div class="feature-media__icon">
                                    <i class="fa-solid fa-person-sign"></i>
                                </div>
                                <div class="media-body">
                                    <h3 class="feature-media__title">Best Guide</h3>
                                    <p class="feature-media__text">
                                        Distinctively impact client-centered ideas via future-proof
                                        paradigms.
                                    </p>
                                </div>
                            </div>
                            <div class="feature-media">
                                <div class="feature-media__icon">
                                    <i class="fa-solid fa-headset"></i>
                                </div>
                                <div class="media-body">
                                    <h3 class="feature-media__title">Support 24/7</h3>
                                    <p class="feature-media__text">
                                        Distinctively impact client-centered ideas via future-proof
                                        paradigms.
                                    </p>
                                </div>
                            </div>
                            <div class="feature-media">
                                <div class="feature-media__icon">
                                    <i class="fa-solid fa-hotel"></i>
                                </div>
                                <div class="media-body">
                                    <h3 class="feature-media__title">Luxary Hotel</h3>
                                    <p class="feature-media__text">
                                        Distinctively impact client-centered ideas via future-proof
                                        paradigms.
                                    </p>
                                </div>
                            </div>
                            <div class="feature-media">
                                <div class="feature-media__icon">
                                    <i class="fa-solid fa-file-check"></i>
                                </div>
                                <div class="media-body">
                                    <h3
                                        class="feature-media__title"
                                        data-bs-toggle="modal"
                                        data-bs-target="#bookingModal"
                                    >
                                        Easy Booking
                                    </h3>
                                    <p class="feature-media__text">
                                        Distinctively impact client-centered ideas via future-proof
                                        paradigms.
                                    </p>
                                </div>
                            </div>
                            <a
                                href="#"
                                class="ot-btn d-flex justify-content-center align-items-center w-100 m-auto"
                                style="height: 40px;"
                            >About Us</a>
                        </div>
                    </div>
                    <div class="col-xl-5 mt-40 mt-xl-0">
                        <div class="text-center">
                            <img src="assets/img/normal/travel_1_1.png" alt="image"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="space-top bg-auto" data-bg-src="assets/img/bg/bg_map_1.png">
            <div class="">
                <div class="container">
                    <div class="title-area text-center">
            <span class="sub-title justify-content-center"
            ><span class="shapeleft"><span class="dots"></span></span> Watch
              Our Story
              <span class="shape"><span class="dots"></span></span>
            </span>
                        <h2 class="sec-title">
                            Unforgettable Travel Experiences<br/>Get Your Guide
                        </h2>
                        <div class="btn-group pb-3 mt-30 justify-content-center">
                            <a href="contact.html" class="ot-btn">Contact Us</a>
                            <a href="contact.html" class="ot-btn style3 d-flex justify-content-center">Book Now</a>
                        </div>
                    </div>
                    <div
                        class="ot-video"
                        data-overlay="title"
                        data-opacity="5"
                        data-pos-for=".testi-sec"
                        data-sec-pos="bottom-half"
                    >
                        <img src="assets/img/normal/video_1.jpg" alt="Video"/>
                        <a
                            href="https://www.youtube.com/watch?v=_sI_Ps7JSEk"
                            class="play-btn style3 popup-video"
                        ><i class="fas fa-play"></i
                            ></a>
                    </div>
                </div>
            </div>
        </section>

        <section class="space-bottom">
            <div class="testi-sec space" data-bg-src="assets/img/bg/bg_map_2.png">
                <div class="container">
                    <div class="title-area text-center">
            <span class="sub-title justify-content-center"
            ><span class="shapeleft"><span class="dots"></span></span>
              Testimonials
              <span class="shape"><span class="dots"></span></span>
            </span>
                        <h2 class="sec-title">What Customer Say About Us</h2>
                    </div>
                    <div
                        class="row slider-shadow ot-carousel"
                        id="testiSlide1"
                        data-slide-show="3"
                        data-lg-slide-show="2"
                        data-md-slide-show="2"
                        data-sm-slide-show="1"
                    >
                        <div class="col-lg-6">
                            <div class="testi-card">
                                <div class="testi-card__rating">
                                    <i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i>
                                </div>
                                <p class="testi-card__text">
                                    “Objectively deploy open-source web-readiness impactful
                                    bandwidth. Compellingly coordinate business deliverables
                                    rather equity invested technologies. Phosfluorescently
                                    reinvent.”
                                </p>
                                <div class="testi-card__profile">
                                    <div class="testi-card__avater">
                                        <img
                                            src="assets/img/testimonial/testi_1_1.jpg"
                                            alt="Avater"
                                        />
                                    </div>
                                    <div class="media-body">
                                        <h3 class="testi-card__name">Mary Cruzleen</h3>
                                        <span class="testi-card__desig">CEO of Maithon</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="testi-card">
                                <div class="testi-card__rating">
                                    <i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i>
                                </div>
                                <p class="testi-card__text">
                                    “Objectively deploy open-source web-readiness impactful
                                    bandwidth. Compellingly coordinate business deliverables
                                    rather equity invested technologies. Phosfluorescently
                                    reinvent.”
                                </p>
                                <div class="testi-card__profile">
                                    <div class="testi-card__avater">
                                        <img
                                            src="assets/img/testimonial/testi_1_2.jpg"
                                            alt="Avater"
                                        />
                                    </div>
                                    <div class="media-body">
                                        <h3 class="testi-card__name">David Milton</h3>
                                        <span class="testi-card__desig">CEO of Gazal</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="testi-card">
                                <div class="testi-card__rating">
                                    <i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i>
                                </div>
                                <p class="testi-card__text">
                                    “Objectively deploy open-source web-readiness impactful
                                    bandwidth. Compellingly coordinate business deliverables
                                    rather equity invested technologies. Phosfluorescently
                                    reinvent.”
                                </p>
                                <div class="testi-card__profile">
                                    <div class="testi-card__avater">
                                        <img
                                            src="assets/img/testimonial/testi_1_3.jpg"
                                            alt="Avater"
                                        />
                                    </div>
                                    <div class="media-body">
                                        <h3 class="testi-card__name">Abraham Khalil</h3>
                                        <span class="testi-card__desig">CEO Adivaha</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="testi-card">
                                <div class="testi-card__rating">
                                    <i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i
                                    ><i class="fa-solid fa-star-sharp"></i>
                                </div>
                                <p class="testi-card__text">
                                    “Objectively deploy open-source web-readiness impactful
                                    bandwidth. Compellingly coordinate business deliverables
                                    rather equity invested technologies. Phosfluorescently
                                    reinvent.”
                                </p>
                                <div class="testi-card__profile">
                                    <div class="testi-card__avater">
                                        <img
                                            src="assets/img/testimonial/testi_1_4.jpg"
                                            alt="Avater"
                                        />
                                    </div>
                                    <div class="media-body">
                                        <h3 class="testi-card__name">Pisoori Janu</h3>
                                        <span class="testi-card__desig">CEO at YN Tourism</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="space-bottom">
            <div class="container">
                <div
                    class="row justify-content-lg-between justify-content-center align-items-end"
                >
                    <div class="col-lg-8 mb-n2 mb-lg-0">
                        <div class="title-area text-center text-lg-start">
              <span
                  class="sub-title justify-content-center justify-content-lg-start"
              ><span class="shapeleft d-inline-block d-lg-none"
                  ><span class="dots"></span
                      ></span>
                News & Updates
                <span class="shape"><span class="dots"></span></span>
              </span>
                            <h2 class="sec-title">Our Latest News & Articles</h2>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="sec-btn">
                            <a href="blog.html" class="ot-btn">View All Post</a>
                        </div>
                    </div>
                </div>
                <div
                    class="row slider-shadow ot-carousel"
                    data-slide-show="3"
                    data-lg-slide-show="2"
                    data-md-slide-show="2"
                    data-sm-slide-show="1"
                    data-arrows="true"
                >
                    <div class="col-md-6 col-xl-4">
                        <div class="blog-card">
                            <div class="blog-img">
                                <img src="assets/img/blog/blog_1_1.jpg" alt="blog image"/>
                            </div>
                            <div class="blog-content">
                                <div class="blog-meta">
                                    <a href="blog.html"
                                    ><i class="fas fa-calendar-days"></i>15 July, 2023</a
                                    >
                                    <a href="blog.html"><i class="fas fa-tags"></i> Mountain</a>
                                </div>
                                <h3 class="blog-title box-title">
                                    <a href="blog-details.html"
                                    >Get Tips For Making the Most of Your Summer</a
                                    >
                                </h3>
                                <a href="blog-details.html" class="link-btn"
                                >Read More <i class="fas fa-arrow-up-right"></i
                                    ></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-4">
                        <div class="blog-card">
                            <div class="blog-img">
                                <img src="assets/img/blog/blog_1_2.jpg" alt="blog image"/>
                            </div>
                            <div class="blog-content">
                                <div class="blog-meta">
                                    <a href="blog.html"
                                    ><i class="fas fa-calendar-days"></i>16 July, 2023</a
                                    >
                                    <a href="blog.html"
                                    ><i class="fas fa-tags"></i> Parasailing</a
                                    >
                                </div>
                                <h3 class="blog-title box-title">
                                    <a href="blog-details.html"
                                    >Top 15 Holiday Can Enjoy in India Trips</a
                                    >
                                </h3>
                                <a href="blog-details.html" class="link-btn"
                                >Read More <i class="fas fa-arrow-up-right"></i
                                    ></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-4">
                        <div class="blog-card">
                            <div class="blog-img">
                                <img src="assets/img/blog/blog_1_3.jpg" alt="blog image"/>
                            </div>
                            <div class="blog-content">
                                <div class="blog-meta">
                                    <a href="blog.html"
                                    ><i class="fas fa-calendar-days"></i>17 July, 2023</a
                                    >
                                    <a href="blog.html"><i class="fas fa-tags"></i> Lake View</a>
                                </div>
                                <h3 class="blog-title box-title">
                                    <a href="blog-details.html"
                                    >The Impact of Covid-19 on Tour Industry</a
                                    >
                                </h3>
                                <a href="blog-details.html" class="link-btn"
                                >Read More <i class="fas fa-arrow-up-right"></i
                                    ></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-4">
                        <div class="blog-card">
                            <div class="blog-img">
                                <img src="assets/img/blog/blog_1_4.jpg" alt="blog image"/>
                            </div>
                            <div class="blog-content">
                                <div class="blog-meta">
                                    <a href="blog.html"
                                    ><i class="fas fa-calendar-days"></i>18 July, 2023</a
                                    >
                                    <a href="blog.html"
                                    ><i class="fas fa-tags"></i> Newyork City</a
                                    >
                                </div>
                                <h3 class="blog-title box-title">
                                    <a href="blog-details.html"
                                    >Five Ways to Get Best Photos On Picnic Spot</a
                                    >
                                </h3>
                                <a href="blog-details.html" class="link-btn"
                                >Read More <i class="fas fa-arrow-up-right"></i
                                    ></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @forelse($services as $item)
            @if(!$item->is_page)
                <x-service-model :service="$item"/>
            @endif
        @empty
        @endforelse

    </main>
@endsection

@push('js')
    <script type="text/javascript"
            src="{{ asset('assets/js/adivaha-library.js?v=') . filemtime('assets/js/adivaha-library.js') }}"></script>
    <script>
        $('.counter-card_icon').each(function () {
            let url = $(this).attr('data-url');
            if (url) {
                $(this).on('click', function () {
                    window.location = url;
                });
            }
        });
    </script>
@endpush