@extends('layouts.main')
@section('main-section')
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url(assets/images/banner/banner.jpg);">
    <div class="container">
        <div class="banner-inner text-white">
            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Packages</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Packages</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
<section class="hot-deals-area pt-70 rel z-1">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="section-title text-center counter-text-wrap" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                    <h2>Discover Hot Tour Packages</h2>
                    <p>Discover More with Every Journey – Tailored Tour Packages for Unforgettable Adventures!</p>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach($package as $packages)
            <div class="col-xl-4 col-md-6">
                <div class="destination-item tour-grid style-three bgc-lighter" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
                    <div class="image">
                        <a href="#" class="heart"><i class="fas fa-heart"></i></a>
                        <img src="{{asset('uploads/post/'.$packages->image)}}" alt="Tour List">
                    </div>
                    <div class="content">
                        <div class="destination-header">
                            <span class="location"><i class="fal fa-map-marker-alt"></i> Dehradun</span>
                            <div class="ratting">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                        <h5><a href="/packages">{{$packages->name}}</a></h5>
                        <p>{{$packages->para}}</p>
                        <ul class="blog-meta">
                            <li><i class="far fa-clock"></i> 3 days 2 nights</li>
                            <li><i class="far fa-user"></i> 5-8 guest</li>
                        </ul>
                        <div class="destination-footer">
                            <span class="price"><span>₹{{$packages->price}}</span>/person</span>
                            <a href="tel:9410313766" class="theme-btn style-two style-three">
                                <span data-hover="Book Now">Call Now</span>
                                <i class="fal fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endsection