@extends('layout.app')

@section('content')

<section class="layout-pt-md layout-pb-md" style="margin-top: 5rem;">
    <div data-anim-wrap class="container">
      <div data-anim-child="slide-up" class="row y-gap-20 justify-between items-end">
        <div class="col-auto">
          <div class="sectionTitle -md">
            <h2 class="sectionTitle__title">All Tours</h2>
            <p class=" sectionTitle__text mt-5 sm:mt-0">Interdum et malesuada fames ac ante ipsum</p>
          </div>
        </div>
      </div>

      <div class="row y-gap-30 pt-40 sm:pt-20">

        <div data-anim-child="slide-up delay-1" class="col-xl-3 col-lg-3 col-sm-6">

          <a href="{{route('thailand-tour')}}" class="tourCard -type-1 rounded-4 ">
            <div class="tourCard__image">

              <div class="cardImage ratio ratio-1:1">
                <div class="cardImage__content">

                  <img class="rounded-4 col-12" src="{{asset('assets/img/tours/Thailand.jpg')}}" alt="image">


                </div>

                <div class="cardImage__wishlist">
                  <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                    <i class="icon-heart text-12"></i>
                  </button>
                </div>


                <div class="cardImage__leftBadge">
                  <div class="py-5 px-15 rounded-right-4 text-12 lh-16 fw-500 uppercase bg-dark-1 text-white">
                    LIKELY TO SELL OUT*
                  </div>
                </div>

              </div>

            </div>

            <div class="tourCard__content mt-10">
              <div class="d-flex items-center lh-14 mb-5">
                {{-- <div class="text-14 text-light-1">16+ hours</div> --}}
                {{-- <div class="size-3 bg-light-1 rounded-full ml-10 mr-10"></div> --}}
                <div class="text-14 text-light-1">10 Days Tour</div>
              </div>

              <h4 class="tourCard__title text-dark-1 text-18 lh-16 fw-500">
                <span>Thailand Tour</span>
              </h4>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong>Service level:</strong> Upgraded</p>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong>Activity level:</strong> High</p>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong> Group size:</strong> Private group</p>

              <div class="row justify-between items-center pt-15">
                {{-- <div class="col-auto">
                  <div class="d-flex items-center">
                    <div class="d-flex items-center x-gap-5">

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                    </div>

                    <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                  </div>
                </div> --}}

                <div class="col-auto">
                  <div class="text-14 text-light-1">
                    From
                    <span class="text-16 fw-500 text-dark-1">$800 Per Person</span>
                  </div>
                </div>
              </div>
            </div>
          </a>

        </div>

        <div data-anim-child="slide-up delay-2" class="col-xl-3 col-lg-3 col-sm-6">

          <a href="{{route('baku-and-istanbul-tour')}}" class="tourCard -type-1 rounded-4 ">
            <div class="tourCard__image">

              <div class="cardImage ratio ratio-1:1">
                <div class="cardImage__content">


                  <div class="cardImage-slider rounded-4 overflow-hidden js-cardImage-slider">
                    <div class="swiper-wrapper">

                      <div class="swiper-slide">
                        <img class="col-12" src="{{asset('assets/img/tours/baku.jpg')}}" alt="image">
                      </div>

                      <div class="swiper-slide">
                        <img class="col-12" src="{{asset('assets/img/tours/istanbul.jpg')}}" alt="image">
                      </div>

                      <div class="swiper-slide">
                        <img class="col-12" src="{{asset('assets/img/tours/baku-instanbul.jpg')}}" alt="image">
                      </div>

                    </div>

                    <div class="cardImage-slider__pagination js-pagination"></div>

                    <div class="cardImage-slider__nav -prev">
                      <button class="button -blue-1 bg-white size-30 rounded-full shadow-2 js-prev">
                        <i class="icon-chevron-left text-10"></i>
                      </button>
                    </div>

                    <div class="cardImage-slider__nav -next">
                      <button class="button -blue-1 bg-white size-30 rounded-full shadow-2 js-next">
                        <i class="icon-chevron-right text-10"></i>
                      </button>
                    </div>
                  </div>

                </div>

                <div class="cardImage__wishlist">
                  <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                    <i class="icon-heart text-12"></i>
                  </button>
                </div>


              </div>

            </div>

            <div class="tourCard__content mt-10">
              <div class="d-flex items-center lh-14 mb-5">
                {{-- <div class="text-14 text-light-1">9+ hours</div>
                <div class="size-3 bg-light-1 rounded-full ml-10 mr-10"></div> --}}
                <div class="text-14 text-light-1">7 Days Tour</div>
              </div>

              <h4 class="tourCard__title text-dark-1 text-18 lh-16 fw-500">
                <span>Baku & Istanbul Combo Tour</span>
              </h4>

              <p class="text-light-1 lh-14 text-14 mt-5"><strong>Service level:</strong> Upgraded</p>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong>Activity level:</strong> Moderate</p>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong> Group size:</strong> Private group</p>

              <div class="row justify-between items-center pt-15">
                {{-- <div class="col-auto">
                  <div class="d-flex items-center">
                    <div class="d-flex items-center x-gap-5">

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                    </div>

                    <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                  </div>
                </div> --}}

                <div class="col-auto">
                  <div class="text-14 text-light-1">
                    From
                    <span class="text-16 fw-500 text-dark-1">$1000 Per Person</span>
                  </div>
                </div>
              </div>
            </div>
          </a>

        </div>

        <div data-anim-child="slide-up delay-3" class="col-xl-3 col-lg-3 col-sm-6">

          <a href="{{route('srilanka-tour')}}" class="tourCard -type-1 rounded-4 ">
            <div class="tourCard__image">

              <div class="cardImage ratio ratio-1:1">
                <div class="cardImage__content">

                  <img class="rounded-4 col-12" src="{{asset('assets/img/tours/srilanka.jpg')}}" alt="image">


                </div>

                <div class="cardImage__wishlist">
                  <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                    <i class="icon-heart text-12"></i>
                  </button>
                </div>


                <div class="cardImage__leftBadge">
                  <div class="py-5 px-15 rounded-right-4 text-12 lh-16 fw-500 uppercase bg-blue-1 text-white">
                    Best Seller
                  </div>
                </div>

              </div>

            </div>

            <div class="tourCard__content mt-10">
              <div class="d-flex items-center lh-14 mb-5">
                {{-- <div class="text-14 text-light-1">40–55 minutes</div>
                <div class="size-3 bg-light-1 rounded-full ml-10 mr-10"></div> --}}
                <div class="text-14 text-light-1">7 Days Tour</div>
              </div>

              <h4 class="tourCard__title text-dark-1 text-18 lh-16 fw-500">
                <span>Best of Srilanka Tour</span>
              </h4>

              <p class="text-light-1 lh-14 text-14 mt-5"><strong>Service level:</strong> Upgraded</p>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong>Activity level:</strong> Moderate</p>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong> Group size:</strong> Private group</p>

              <div class="row justify-between items-center pt-15">
                {{-- <div class="col-auto">
                  <div class="d-flex items-center">
                    <div class="d-flex items-center x-gap-5">

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                    </div>

                    <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                  </div>
                </div> --}}

                <div class="col-auto">
                  <div class="text-14 text-light-1">
                    From
                    <span class="text-16 fw-500 text-dark-1">$999 Per Person</span>
                  </div>
                </div>
              </div>
            </div>
          </a>

        </div>

        <div data-anim-child="slide-up delay-4" class="col-xl-3 col-lg-3 col-sm-6">

          <a href="{{route('countries-with-tomatina-tour')}}" class="tourCard -type-1 rounded-4 ">
            <div class="tourCard__image">

              <div class="cardImage ratio ratio-1:1">
                <div class="cardImage__content">

                  <img class="rounded-4 col-12" src="{{asset('assets/img/tours/la-tomatina.jpg')}}" alt="image">


                </div>

                <div class="cardImage__wishlist">
                  <button class="button -blue-1 bg-white size-30 rounded-full shadow-2">
                    <i class="icon-heart text-12"></i>
                  </button>
                </div>


                <div class="cardImage__leftBadge">
                  <div class="py-5 px-15 rounded-right-4 text-12 lh-16 fw-500 uppercase bg-yellow-1 text-dark-1">
                    Top Rated
                  </div>
                </div>

              </div>

            </div>

            <div class="tourCard__content mt-10">
              <div class="d-flex items-center lh-14 mb-5">
                {{-- <div class="text-14 text-light-1">4 Countries</div>
                <div class="size-3 bg-light-1 rounded-full ml-10 mr-10"></div> --}}
                <div class="text-14 text-light-1">Spain - Paris - Amsterdam - Italy Tour</div>
              </div>

              <h4 class="tourCard__title text-dark-1 text-18 lh-16 fw-500">
                <span>4 Countries With Tomatina</span>
              </h4>

              <p class="text-light-1 lh-14 text-14 mt-5"><strong>Spain Only -</strong> PKR 875,000 Per Person</p>
              <p class="text-light-1 lh-14 text-14 mt-5"><strong>4 Countries Europe Tour -</strong> PKR 1,375,000 Per Person</p>

              <div class="row justify-between items-center pt-15">
                {{-- <div class="col-auto">
                  <div class="d-flex items-center">
                    <div class="d-flex items-center x-gap-5">

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                      <div class="icon-star text-yellow-1 text-10"></div>

                    </div>

                    <div class="text-14 text-light-1 ml-10">3,014 reviews</div>
                  </div>
                </div> --}}

                <div class="col-auto">
                  <div class="text-14 text-light-1">
                    From
                    <span class="text-16 fw-500 text-dark-1">PKR 1,375,000 Per Person</span>
                  </div>
                </div>
              </div>
            </div>
          </a>

        </div>

      </div>
    </div>
  </section>

@endsection
@section('customJs')

@endsection