@extends('layouts.main')
@section('main-section')
<!--Form Back Drop-->
<div class="form-back-drop"></div>

<!-- Hero Area Start -->
<section class="hero-area-three bgs-cover overflow-hidden pt-130 pb-100 br-15 rel z-2"
    style="background-image: url(assets/images/hero/hero-three-bg.jpg);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-9 col-lg-10">
                <div class="hero-content-three counter-text-wrap text-white text-center mb-125 rmb-65"
                    data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
                    <span class="subtitle mb-15">Maa Shiv Tour & Travel</span>
                    <h1> Explore, Discover, Travel with Maa Shiv!</h1>
                    <p>Covering <span class="count-text plus" data-speed="3000" data-stop="30">0</span> Destinations, One Memorable Journey at a Time!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-shapes">
        <div class="shape one" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500"
            data-aos-offset="50">
            <img src="assets/images/shapes/hero1.png" alt="Shape">
        </div>
        <div class="shape two" data-aos="fade-down" data-aos-delay="100" data-aos-duration="1500"
            data-aos-offset="50">
            <img src="assets/images/shapes/hero2.png" alt="Shape">
        </div>
        <div class="shape three" data-aos="fade-down" data-aos-duration="1500" data-aos-offset="50">
            <img src="assets/images/shapes/hero3.png" alt="Shape">
        </div>
        <div class="shape four" data-aos="fade-left" data-aos-delay="100" data-aos-duration="1500"
            data-aos-offset="50">
            <img src="assets/images/shapes/hero4.png" alt="Shape">
        </div>
    </div>
    <div class="container container-1400">
        <div class="search-filter-inner mt-0" data-aos="zoom-out-down" data-aos-duration="1500"
            data-aos-offset="50">
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-map-marker-alt"></i></div>
                <span class="title">Pickup Destinations</span>
                <input type="text" placeholder="Enter the Pickup Destination">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-flag"></i></div>
                <span class="title">Dropoff Location</span>
                <input type="text" placeholder="Enter the Dropoff Destination">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-calendar-alt"></i></div>
                <span class="title">Pickup Date</span>
                <input type="time" placeholder="Enter Pickup Date">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-users"></i></div>
                <span class="title">No of People</span>
                <select name="cuests" id="cuests">
                    <option value="value1">0</option>
                    <option value="value2">1</option>
                    <option value="value2">2</option>
                    <option value="value2">3</option>
                    <option value="value2">4</option>
                    <option value="value2">5</option>
                </select>
            </div>
            <div class="search-button">
                <button class="theme-btn">
                    <span data-hover="Search">Submit</span>
                    <i class="far fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</section>
<!-- Hero Area End -->


<!-- Features Area start -->
<section class="features-area-three pt-10 rel z-1">
    <div class="row justify-content-center">
        <div class="col-xxl-3 col-xl-4 col-md-6" data-aos="flip-left" data-aos-duration="1500"
            data-aos-offset="50">
            <div class="feature-item style-three">
                <div class="icon"><i class="flaticon-route"></i></div>
                <div class="content">
                    <h3><a href="/">30+ Destinations</a></h3>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6" data-aos="flip-left" data-aos-delay="50"
            data-aos-duration="1500" data-aos-offset="50">
            <div class="feature-item style-three bgc-secondary">
                <div class="icon"><i class="flaticon-best-price"></i></div>
                <div class="content">
                    <h3><a href="/">Best Price Guarantee</a></h3>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6" data-aos="flip-left" data-aos-delay="100"
            data-aos-duration="1500" data-aos-offset="50">
            <div class="feature-item style-three bgc-primary">
                <div class="icon"><i class="flaticon-travel-1"></i></div>
                <div class="content">
                    <h3><a href="/">Diverse Destinations</a></h3>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6" data-aos="flip-left" data-aos-delay="150"
            data-aos-duration="1500" data-aos-offset="50">
            <div class="feature-item style-three bgc-pink">
                <div class="icon"><i class="flaticon-guidepost"></i></div>
                <div class="content">
                    <h3><a href="/">Best Travel Guide</a></h3>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Features Area end -->


<section class="about-us-area pt-70 pb-100 rel z-1">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-5 col-lg-6">
                <div class="about-us-content rmb-55" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
                    <div class="section-title mb-25">
                        <h2>About Us <br> Maa Shiv Tour Travel</h2>
                    </div>
                    <p>Welcome to Maa Shiv Tour And Travel, your trusted partner for all your travel needs in Dehradun! We specialize in providing a range of services, including personalized tour packages, reliable taxi services, and comfortable Tempo Traveller rentals (A.C/Non A.C). Whether you're planning a local sightseeing trip or a long-distance journey, we ensure a seamless and comfortable experience. </p>
                    <div class="row pt-25">
                        <div class="col-6">
                            <div class="counter-item counter-text-wrap">
                                <span class="count-text" data-speed="3000" data-stop="3">15</span>
                                <span class="counter-title">Popular Destination</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="counter-item counter-text-wrap">
                                <span class="count-text k-plus" data-speed="3000" data-stop="9">0</span>
                                <span class="counter-title">Satisfied Clients</span>
                            </div>
                        </div>
                    </div>
                    <a href="tel:9410313766" class="theme-btn mt-10 style-two">
                        <span data-hover="Make a Call">Make a Call</span>
                        <i class="fal fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-xl-7 col-lg-6" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
                <div class="about-us-page">
                    <img src="{{asset('assets/about.jpg')}}" alt="About">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Hot Deals Area start -->
<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>
<!-- Hot Deals Area end -->


<!-- Blog Area start -->
<section class="blog-area pt-100 pb-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 mb-70" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                    <h2>Our Services</h2>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @foreach($service as $services)
            <div class="col-xxl-4 col-lg-6">
                <div class="blog-item style-two" data-aos="fade-up" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="image">
                        <img src="{{asset('uploads/post/'.$services->image)}}" alt="Blog">
                    </div>
                    <div class="content">
                        <h5><a href="/service">{{$services->name}}</a></h5>
                        <p>{{$services->description}}</p>
                        <a href="tel:9410313766" class="read-more">Enquire Now <i
                                class="fal fa-angle-right"></i></a>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
<!-- Blog Area end -->








<!-- Mobile App Area start -->
<section class="mobile-app-area pt-100 rel z-1">
    <div class="container">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-6">
                <div class="row no-gap rmb-55" data-aos="fade-left" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-business-travel"></i></div>
                            <span class="count-text k-plus" data-speed="3000" data-stop="28">0</span>
                            <span class="counter-title">Total Clients</span>
                        </div>
                    </div>
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-plane"></i></div>
                            <span class="count-text plus" data-speed="3000" data-stop="486">0</span>
                            <span class="counter-title">Total tours</span>
                        </div>
                    </div>
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-signpost"></i></div>
                            <span class="count-text plus" data-speed="3000" data-stop="200">0</span>
                            <span class="counter-title">Tour Guides</span>
                        </div>
                    </div>
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-key"></i></div>
                            <span class="count-text plus" data-speed="3000" data-stop="258">0</span>
                            <span class="counter-title">Luxury Hotel</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-5 col-lg-6">
                <div class="mobile-app-content" data-aos="fade-right" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="section-title mb-30">
                        <h2>Why Choose Us</h2>
                    </div>
                    <p>At Maa Shiv Tour And Travel, we understand that every journey is special, and we are dedicated to providing services that meet your unique needs. Here's why you should choose us:
                    </p>
                    <ul class="list-style-two mt-35 mb-30">
                        <li>Experienced Team</li>
                        <li>Comfortable & Well-Maintained Fleet</li>
                        <li>Tailored Travel Experiences</li>
                        <li>Affordable Rates</li>
                    </ul>
                    <a href="tel:9410313766" class="theme-btn style-two">
                        <span data-hover="Make a Call Now">Make a Call Now</span>
                        <i class="fal fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Mobile App Area end -->
<!-- Features Tours Area start -->
<section class="features-tour-area pt-100 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 mb-50" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                    <h2>Our Vehicles</h2>
                    <p>We have a Large Accomodation of Vehicles</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">

            @foreach($vehicles as $vehicle)
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="destination-item style-four no-border" data-aos="flip-left" 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/'.$vehicle->image)}}" alt="Tour">
                    </div>
                    <div class="content">
                        <h6><a href="/vehicle">{{$vehicle->name}}</a></h6>
                    </div>
                    <div class="destination-footer">
                        <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-half-alt"></i>
                        </div>
                    </div>
                    <a href="tel:9410313766" class="theme-btn style-three">
                        <span data-hover="Explore">Make a Call</span>
                        <i class="fal fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!-- Features Tours Area end -->
<section class="gallery-slider-area py-100 rel z-1">
    <div class="section-title text-center counter-text-wrap mb-50" data-aos="fade-up" data-aos-duration="1500"
        data-aos-offset="50">
        <h2>Explore Our Photo Gallery</h2>
        <p>Journey Through Moments – Explore Our Travel Memories in the Gallery!</p>
    </div>
    <div class="gallery-slider-active">
        @foreach($gallery as $gallerys)
        <div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
            <div class="image">
                <img src="{{asset('uploads/post/'.$gallerys->image)}}" alt="Gallery">
            </div>
        </div>
        @endforeach

    </div>
</section>


<section class="testimonials-area rel z-1">
    <div class="container">
        <div class="testimonials-wrap bgc-lighter">
            <div class="row">
                <div class="col-lg-5 rel" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
                    <div class="testimonial-left-image rmb-55" style="background-image: url(assets/images/testimonials/testimonial-left.jpg);"></div>
                </div>
                <div class="col-lg-7">
                    <div class="testimonial-right-content" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
                        <div class="section-title mb-55">
                            <h2> See What our Clients Say About Our Services</h2>
                        </div>
                        <div class="testimonials-active">
                            @foreach($testimonial as $testimonals)
                            <div class="testimonial-item">
                                <div class="testi-header">
                                    <div class="quote"><i class="flaticon-double-quotes"></i></div>
                                    <h4>Quality Services</h4>
                                    <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>
                                <div class="text">{{$testimonals->description}}</div>
                                <div class="author">
                                    <div class="image"><img src="{{asset('uploads/post/'.$testimonals->image)}}" alt="Author"></div>
                                    <div class="content">
                                        <h5>{{$testimonals->name}}</h5>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>




@endsection