<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>MR.TAXI | Your Trusted Ride, Anytime, Anywhere</title>

    <!-- head -->
    <?php include('./includes/head.php'); ?>

</head>

<body>

    <div class="body-wrap">
        <!-- header -->
        <?php include('./includes/header.php'); ?>

        <main>

            <!-- Hero Section -->
            <section class="hero-banner position-relative">
                <div class="owl-carousel hero-carousel owl-theme">

                    <!-- Slide 1 -->
                    <div class="hero-slide" style="background-image: url('./assets/image/banner/banner-1.png');">
                        <div class="hero-content text-center">
                            <h1 data-aos="fade-up" data-aos-duration="1000">Explore the World with Us</h1>
                            <p data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">Your Journey Starts Here — Discover Exclusive Tours & Packages</p>
                            <div class="custom-btn" data-aos="fade-up" data-aos-duration="1400" data-aos-delay="400">
                                <a href="contact.php" class="hero-btn">Book Now <i class="bi bi-chevron-double-right"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Slide 2 -->
                    <div class="hero-slide" style="background-image: url('./assets/image/banner/banner-2.png');">
                        <div class="hero-content text-center">
                            <h1 data-aos="fade-up" data-aos-duration="1000">Luxury Rides & Premium Travel</h1>
                            <p data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">Experience Comfort and Class with Every Trip</p>
                            <div class="custom-btn" data-aos="fade-up" data-aos-duration="1400" data-aos-delay="400">
                                <a href="about.php" class="hero-btn">Know More <i class="bi bi-chevron-double-right"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Slide 3 -->
                    <div class="hero-slide" style="background-image: url('./assets/image/banner/banner-3.png');">
                        <div class="hero-content text-center">
                            <h1 data-aos="fade-up" data-aos-duration="1000">Travel Beyond Expectations</h1>
                            <p data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">Discover Comfort, Luxury, and Adventure — All in One Journey</p>
                            <div class="custom-btn" data-aos="fade-up" data-aos-duration="1400" data-aos-delay="400">
                                <a href="kandhaloor.php" class="hero-btn">Explore Now <i class="bi bi-chevron-double-right"></i></a>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="hero-nav">
                    <button class="hero-prev"><i class="bi bi-arrow-left"></i></button>
                    <button class="hero-next"><i class="bi bi-arrow-right"></i></button>
                </div>

                <div class="booking-box container" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="500">
                    <form id="package-enquiry-form" class="row g-3 align-items-end enquiry-form">
                        <!-- Destination -->
                        <div class="col-md-3 col-sm-6">
                            <label for="destination" class="form-label">
                                <i class="bi bi-geo-alt-fill"></i> Destination
                            </label>
                            <select id="destination" class="form-select" required>
                                <option value="" disabled selected>Select Destination</option>
                                <option>Thirumoorthy Falls</option>
                                <option>Valparai</option>
                                <option>Athirapalli</option>
                                <option>Munnar</option>
                                <option>Kodaikanal</option>
                            </select>
                            <small id="destination-error" class="text-danger"></small>
                        </div>

                        <!-- Start Date -->
                        <div class="col-md-3 col-sm-6">
                            <label for="start-date" class="form-label">
                                <i class="bi bi-calendar-event-fill"></i> Start Date
                            </label>
                            <input type="date" id="start-date" class="form-control" required>
                            <small id="start-date-error" class="text-danger"></small>
                        </div>

                        <!-- Package -->
                        <div class="col-md-3 col-sm-6">
                            <label for="package" class="form-label">
                                <i class="bi bi-briefcase-fill"></i> Select Package
                            </label>
                            <select id="package" class="form-select" required>
                                <option value="" disabled selected>Choose Package</option>
                                <option>2 Days / 1 Night</option>
                                <option>3 Days / 2 Nights</option>
                                <option>Weekend Trip</option>
                                <option>Custom Plan</option>
                            </select>
                            <small id="package-error" class="text-danger"></small>
                        </div>

                        <!-- Number of Persons -->
                        <div class="col-md-2 col-sm-6">
                            <label for="persons" class="form-label">
                                <i class="bi bi-people-fill"></i> No. of Persons
                            </label>
                            <select id="persons" class="form-select" required>
                                <option value="" disabled selected>Select</option>
                                <option>1 Person</option>
                                <option>2 Persons</option>
                                <option>3–5 Persons</option>
                                <option>6+ Group</option>
                            </select>
                            <small id="persons-error" class="text-danger"></small>
                        </div>

                        <!-- Enquiry Button -->
                        <div class="col-md-1 col-sm-12 d-grid">
                            <button type="submit" class="btn enquiry-btn" title="Send Enquiry">
                                <i class="bi bi-send-fill"></i>
                            </button>
                        </div>
                    </form>

                    <script>
                        document.addEventListener("DOMContentLoaded", () => {
                            const form = document.getElementById("package-enquiry-form");

                            form.addEventListener("submit", (e) => {
                                e.preventDefault();
                                let isValid = true;

                                // Reset error messages
                                document.querySelectorAll(".text-danger").forEach((el) => (el.textContent = ""));

                                const destination = document.getElementById("destination").value;
                                const startDate = document.getElementById("start-date").value;
                                const packageSelect = document.getElementById("package").value;
                                const persons = document.getElementById("persons").value;

                                if (!destination) {
                                    document.getElementById("destination-error").textContent = "Please select a destination.";
                                    isValid = false;
                                }

                                if (!startDate) {
                                    document.getElementById("start-date-error").textContent = "Please select a start date.";
                                    isValid = false;
                                } else {
                                    const today = new Date().toISOString().split("T")[0];
                                    if (startDate < today) {
                                        document.getElementById("start-date-error").textContent = "Start date cannot be in the past.";
                                        isValid = false;
                                    }
                                }

                                if (!packageSelect) {
                                    document.getElementById("package-error").textContent = "Please choose a package.";
                                    isValid = false;
                                }

                                if (!persons) {
                                    document.getElementById("persons-error").textContent = "Please select number of persons.";
                                    isValid = false;
                                }

                                if (!isValid) return;

                                Toastify({
                                    text: "Enquiry submitted successfully!",
                                    duration: 3000,
                                    backgroundColor: "linear-gradient(90deg, #e2bd0c, #f7e37c)",
                                    className: "toast-success",
                                }).showToast();

                                form.reset();
                            });
                        });
                    </script>


                </div>

            </section>

            <!-- About Us -->
            <section>
                <div class="inner-about">
                    <div class="container-fluid">

                        <div class="head-center">
                            <h4 class="sub-head" data-aos="zoom-in" data-aos-delay="200"><span>About Mr.Taxi</span></h4>
                            <h2 class="main-head" data-aos="zoom-in" data-aos-delay="300">Your Ride, Your Comfort — Every Mile Matters</h2>
                        </div>

                        <div class="row">

                            <div class="col-lg-7 col-md-6 d-flex justify-content-center align-items-center">
                                <div class="about-left">
                                    <h4 class="sub-head" data-aos="fade-up" data-aos-delay="200"><span>About Mr.Taxi</span></h4>
                                    <h2 class="main-head" data-aos="fade-up" data-aos-delay="250">Driving Comfort, Safety & Trust</h2>

                                    <p data-aos="fade-up" data-aos-delay="250">
                                        <i class="bi bi-caret-right-fill"></i> Mr.Taxi is more than a ride — it’s a promise of reliability, punctuality, and premium service.
                                        Our goal is to make every journey smooth, secure, and enjoyable for every customer.
                                    </p>

                                    <p data-aos="fade-up" data-aos-delay="300">
                                        <i class="bi bi-caret-right-fill"></i> Whether you’re commuting to the office, heading out for leisure, or planning a long-distance trip,
                                        our experienced drivers and well-maintained vehicles ensure a comfortable experience every time.
                                    </p>

                                    <p data-aos="fade-up" data-aos-delay="350">
                                        <i class="bi bi-caret-right-fill"></i> With GPS-enabled rides, transparent pricing, and 24/7 availability,
                                        we’re redefining local travel with smarter technology and human care combined.
                                    </p>

                                    <p data-aos="fade-up" data-aos-delay="400">
                                        <i class="bi bi-caret-right-fill"></i> Experience the freedom to move — anytime, anywhere — with a service
                                        that values your time, safety, and satisfaction above all.
                                    </p>

                                    <div class="custom-btn" data-aos="fade-up" data-aos-delay="450">
                                        <a href="about.php" class="liquid-btn">
                                            Know more <i class="bi bi-chevron-double-right"></i>
                                        </a>
                                    </div>

                                </div>
                            </div>
                            <!-- <img src="./assets/image/home/about-img.png" class="img-fluid" alt=""> -->

                            <div class="col-lg-5 col-md-6 mt-4 d-flex align-items-center justify-content-center">
                                <div class="about-right " data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="400">
                                    <video class="masked-video" autoplay muted loop playsinline>
                                        <source src="./assets/image/gallery/video-5.mp4" type="video/mp4">
                                        Your browser does not support HTML5 video.
                                    </video>
                                </div>
                            </div>



                        </div>
                    </div>
                    <div class="about-overlay-go" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="500">
                        <h2>GO</h2>
                    </div>

                </div>
            </section>

            <!-- packages -->
            <section>
                <div class="inner-packages">
                    <div class="container-fluid">
                        <div class="side-head-wrap">

                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="head-left">
                                        <h4 class="sub-head" data-aos="fade-up" data-aos-delay="200">Explore Our Packages</h4>
                                        <h2 class="main-head" data-aos="fade-up" data-aos-delay="250">Discover Your Perfect Getaway</h2>
                                    </div>
                                </div>
                                <div class="col-lg-7" data-aos="fade-up" data-aos-delay="300">
                                    <div class="head-right d-flex justify-content-center align-items-center">
                                        <p>Choose from a variety of carefully curated travel packages that cater to every type of traveler. Whether you want a relaxing beach holiday, an adventurous mountain trek, or a cultural city tour, we have the perfect plan to make your journey unforgettable.</p>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="package-carousle owl-carousel owl-theme">

                        <div class="package-item" data-aos="zoom-in" data-aos-delay="200">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-1.webp" alt="Kandhaloor Tour Package">
                                <span class="offer-tag">Best Seller</span>
                            </div>
                            <div class="package-info">
                                <a href="kandhaloor.php">
                                    <div class="info-header">
                                        <h4>Kandhaloor(2D/1N)</h4>
                                        <p class="price">₹750 </p>

                                    </div>
                                    <p class="desc">
                                        Enjoy a refreshing escape to Kandhaloor — known for its lush strawberry farms, misty hills, and serene landscapes perfect for nature lovers.
                                    </p>
                                </a>
                            </div>
                        </div>

                        <div class="package-item" data-aos="zoom-in" data-aos-delay="250">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-2.webp" alt="Valparai & Athirappilly Tour">
                                <span class="offer-tag">Top Rated</span>
                            </div>
                            <div class="package-info">
                                <a href="Valparai-&-Athirappilly.php">
                                    <div class="info-header">
                                        <h4>Valparai & Athirappilly(3D/1N)</h4>
                                       <p class="price">₹2750 </p>

                                    </div>
                                    <p class="desc">
                                        Journey through mist-covered hills of Valparai and witness the majestic Athirappilly Falls — a perfect mix of greenery and adventure.
                                    </p>
                                </a>
                            </div>
                        </div>

                        <div class="package-item" data-aos="zoom-in" data-aos-delay="300">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-3.webp" alt="Topslip & Valparai Tour">
                                <span class="offer-tag">Wildlife Special</span>
                            </div>
                            <div class="package-info">
                                <a href="Topslip-&-Valparai.php">
                                    <div class="info-header">
                                        <h4>Topslip & Valparai(2D/1N)</h4>
                                    <p class="price">₹3450 </p>

                                    </div>
                                    <p class="desc">
                                        Explore the wild beauty of Topslip’s forest reserves and enjoy the tranquil tea estates of Valparai — a true nature escape.
                                    </p>
                                </a>
                            </div>
                        </div>

                        <div class="package-item" data-aos="zoom-in" data-aos-delay="350">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-4.webp" alt="Thirumoorthy Falls Tour">
                                <span class="offer-tag">Adventure Pick</span>
                            </div>
                            <div class="package-info">
                                <a href="munnar-kandhaloor.php">
                                    <div class="info-header">
                                        <h4>Munnar(3D/2N)</h4>
                                       <p class="price">₹3250 </p>

                                    </div>
                                    <p class="desc">
                                        A serene getaway with cascading waterfalls, temple visits, and a calm lake view — perfect for a one-day relaxation trip.
                                    </p>
                                </a>
                            </div>
                        </div>

                        <div class="package-item" data-aos="zoom-in" data-aos-delay="400">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-5.webp" alt="Kandhaloor Tour from Pollachi">
                                <span class="offer-tag">Trending</span>
                            </div>
                            <div class="package-info">
                                <a href="valparai-&-kandhaloor-tour-package.php">
                                    <div class="info-header">
                                        <h4>Valparai & Kandhaloor(3D/2N)</h4>
                               <p class="price">₹2299 </p>

                                    </div>
                                    <p class="desc">
                                        Start your trip from Pollachi and experience the cool climate and scenic charm of Kandhaloor — a perfect short getaway.
                                    </p>
                                </a>
                            </div>
                        </div>
                        <div class="package-item" data-aos="zoom-in" data-aos-delay="450">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-6.webp" alt="Kandhaloor Tour from Pollachi">
                                <span class="offer-tag">Trending</span>
                            </div>
                            <div class="package-info">
                                <a href="topslip-athirappilly.php">
                                    <div class="info-header">
                                        <h4>Topslip – Valparai – Athirappilly(2D)</h4>
                                     <p class="price">₹1950 </p>

                                    </div>
                                    <p class="desc">
                                        Start your trip from Pollachi and experience the cool climate and scenic charm of Kandhaloor — a perfect short getaway.
                                    </p>
                                </a>
                            </div>
                        </div>
                        <div class="package-item" data-aos="zoom-in" data-aos-delay="500">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-7.webp" alt="Kandhaloor Tour from Pollachi">
                                <span class="offer-tag">Trending</span>
                            </div>
                            <div class="package-info">
                                <a href="thirumoorthi-falls">
                                    <div class="info-header">
                                        <h4>THIRUMOORTHI FALLS</h4>
                              <p class="price">₹2350 </p>

                                    </div>
                                    <p class="desc">
                                        Start your trip from Pollachi and experience the cool climate and scenic charm of Kandhaloor — a perfect short getaway.
                                    </p>
                                </a>
                            </div>
                        </div>
                        <div class="package-item" data-aos="zoom-in" data-aos-delay="550">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-8.webp" alt="Kandhaloor Tour from Pollachi">
                                <span class="offer-tag">Trending</span>
                            </div>
                            <div class="package-info">
                                <a href="valparai-&-athirappilly-3-day-tour.php">
                                    <div class="info-header">
                                        <h4>VALPARAI</h4>
                                     <p class="price">₹2750 </p>

                                    </div>
                                    <p class="desc">
                                        Start your trip from Pollachi and experience the cool climate and scenic charm of Kandhaloor — a perfect short getaway.
                                    </p>
                                </a>
                            </div>
                        </div>
                        <!-- <div class="package-item" data-aos="zoom-in" data-aos-delay="600">
                            <div class="package-img">
                                <img src="./assets/image/packages/img-9.webp" alt="Kandhaloor Tour from Pollachi">
                                <span class="offer-tag">Trending</span>
                            </div>
                            <div class="package-info">
                                <a href="#">
                                    <div class="info-header">
                                        <h4>ATHIRAPALI PLAN</h4>
                                        <p class="price">$730</p>
                                    </div>
                                    <p class="desc">
                                        Start your trip from Pollachi and experience the cool climate and scenic charm of Kandhaloor — a perfect short getaway.
                                    </p>
                                </a>
                            </div>
                        </div> -->

                    </div>

                </div>
            </section>

            <!-- car rental -->
            <section>
                <div class="inner-rental">
                    <div class="container-fluid">

                        <div class="head-center">
                            <h4 class="sub-head" data-aos="zoom-in" data-aos-delay="200"><span>Car Tourism</span></h4>

                            <h2 class="main-head" data-aos="zoom-in" data-aos-delay="250">Reliable Car Tourism — Wherever You Need to Go</h2>
                            <p class="text-center">
                                At Mr.Taxi, we provide reliable, comfortable car tourism with skilled drivers, flexible bookings, transparent pricing, and 24/7 support.
                            </p>

                        </div>

                        <div class="rental-wrap">

                            <div class="owl-carousel car-rental-carousel">

                                <!-- Sedan -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="300">

                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/Sedan.webp" alt="Sedan">
                                        </a>

                                    </div>
                                    <div class="rentel-detail">
                                        <a href="#">

                                            <h4>Sedan</h4>
                                        </a>

                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹1800 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.4</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>10 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-indian-rupee-sign"></i>
                                                    <p>₹14/km + Bata</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>Hills:₹2000</p>
                                                </div>
                                            </div>

                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Sedan">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>



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

                                <!-- Maruthi Ciaz -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="350">
                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/Maruthi.webp" alt="Maruthi Ciaz">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">

                                            <h4>Maruthi Ciaz</h4>
                                        </a>
                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹2100 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.5</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>12 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>Hills:₹2250</p>
                                                </div>
                                            </div>
                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Maruthi Ciaz">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>



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

                                <!-- Eritiga / Xylo / Tavera / Marazzo -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="400">
                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/Eritiga.webp" alt="Eritiga">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">
                                            <h4>Eritiga / Xylo / Tavera / Marazzo</h4>
                                        </a>
                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹2400 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.6</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>13 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-indian-rupee-sign"></i>
                                                    <p>₹17/km + Bata</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>Hills:₹2500</p>
                                                </div>
                                            </div>
                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Eritiga">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>


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

                                <!-- Innova -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="450">
                                    <div class="rental-img">
                                        <a href="travels.php">

                                            <img src="./assets/image/rental/Innova.webp" alt="Innova">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">

                                            <h4>Innova</h4>
                                        </a>
                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹2500 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.6</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>14 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-indian-rupee-sign"></i>
                                                    <p>₹18/km + Bata</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>Hills:₹2700</p>
                                                </div>
                                            </div>
                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Innova">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>



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

                                <!-- Crysta -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="500">
                                    <div class="rental-img">
                                        <a href="travels.php">

                                            <img src="./assets/image/rental/crata.webp" alt="Crysta">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">

                                            <h4>Crysta</h4>
                                        </a>

                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹3200 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.7</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>15 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-indian-rupee-sign"></i>
                                                    <p>₹22/km + Bata</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>Hills:₹3500</p>
                                                </div>
                                            </div>
                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Crysta">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>



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

                                <!-- Hycross -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="600">
                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/Hycross.webp" alt="Hycross">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">
                                            <h4>Hycross</h4>
                                        </a>
                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹4000 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.8</span>
                                                </div>
                                            </div>
                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>20 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>Hills:₹3500</p>
                                                </div>
                                            </div>
                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Hycross">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>


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

                                <!-- Tempo Traveller Non-AC -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="650">
                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/tempo.webp" alt="Tempo Traveller Non AC">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">
                                            <h4>Tempo Traveller (Non AC)</h4>
                                        </a>

                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹3200 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.6</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>16 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-mountain"></i>
                                                    <p>Hills: ₹3500</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                            </div>

                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Tempo Traveller (Non AC)">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tempo Traveller AC -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="700">
                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/tempo.webp" alt="Tempo Traveller AC">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">
                                            <h4>Tempo Traveller (AC)</h4>
                                        </a>

                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹3500 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.7</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>18 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-gas-pump"></i>
                                                    <p>Per 300KM+</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-snowflake"></i>
                                                    <p>AC ₹24 + Bata</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-temperature-low"></i>
                                                    <p>Non AC ₹22 + Bata</p>
                                                </div>
                                            </div>

                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Tempo Traveller (AC)">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Coach -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="750">
                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/coach.webp" alt="Coach">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">
                                            <h4>Coach</h4>
                                        </a>

                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹3800 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.7</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-road"></i>
                                                    <p><strong>22 KM/litre</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-mountain"></i>
                                                    <p>Hills: ₹4000</p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>300 KM/day+</p>
                                                </div>
                                            </div>

                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Coach">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Urbania -->
                                <div class="car-item" data-aos="zoom-in" data-aos-delay="800">
                                    <div class="rental-img">
                                        <a href="travels.php">
                                            <img src="./assets/image/rental/urbania.webp" alt="Urbania 12+1">
                                        </a>
                                    </div>
                                    <div class="rentel-detail">
                                        <a href="travels.php">
                                            <h4>Urbania 12+1</h4>
                                        </a>

                                        <div class="car-details">
                                            <div class="amount">
                                                <p>₹10,000 <span>/day</span></p>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-alt"></i>
                                                    <span class="rate-text">4.9</span>
                                                </div>
                                            </div>

                                            <div class="specification">
                                                <div class="spec-item"><i class="fa-solid fa-gas-pump"></i>
                                                    <p><strong>100 KM Free</strong></p>
                                                </div>
                                                <div class="spec-item"><i class="fa-solid fa-car-side"></i>
                                                    <p>Luxury 12+1 Seater</p>
                                                </div>
                                            </div>


                                            <div class="custom-btn">
                                                <a href="#" class="liquid-btn book-now-btn" data-car="Urbania 12+1">
                                                    Book Now <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

            <!-- cta section -->
            <section class="home-cta">
                <video autoplay muted loop playsinline class="bg-video">
                    <source src="./assets/image/gallery/video-1.mp4" type="video/mp4" />
                </video>
                <div class="cta-content">
                    <h4 class="sub-head" data-aos="zoom-in" data-aos-delay="200">Your Next Adventure Awaits</h4>
                    <h2 class="main-head" data-aos="zoom-in" data-aos-delay="250">Explore the World with Us</h2>
                    <p>Discover breathtaking destinations, create unforgettable memories, and experience travel like never before with us.</p>
                    <div class="custom-btn" data-aos="zoom-in" data-aos-delay="300">
                        <a href="tel:+917845830046" class="liquid-btn">
                            Book now <i class="bi bi-chevron-double-right"></i>
                        </a>
                    </div>
                </div>
            </section>

            <!-- gallery section -->
            <section>
                <div class="inner-gallery">
                    <div class="container">

                        <div class="side-head-wrap">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="head-left">
                                        <h4 class="sub-head" data-aos="fade-up" data-aos-delay="200">Travel Moments</h4>
                                        <h2 class="main-head" data-aos="fade-up" data-aos-delay="250">A Glimpse Into Our Beautiful Journeys</h2>
                                    </div>
                                </div>
                                <div class="col-lg-7" data-aos="fade-up" data-aos-delay="300">
                                    <div class="head-right d-flex justify-content-center align-items-center">
                                        <p>Step into our travel gallery and relive the unforgettable moments from our tours. From serene landscapes to lively adventures, every photo captures the essence of nature, culture, and joy that our travelers experience along the way.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="gallery-wrap">
                        <div class="container-fluid">

                            <div class="row">
                                <!-- Image 1 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 mt-3" data-aos="zoom-in" data-aos-delay="200">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/img-1.png" class="gallery-img">
                                        <img src="./assets/image/gallery/img-1.png" alt="Gallery Image 1">
                                    </a>
                                </div>

                                <!-- Video 1 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 mt-3" data-aos="zoom-in" data-aos-delay="250">
                                    <div class="gallery-img">

                                        <video src="./assets/image/gallery/video-6.mp4" autoplay muted loop playsinline></video>
                                    </div>

                                </div>

                                <!-- Image 2 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 mt-3" data-aos="zoom-in" data-aos-delay="300">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/img-2.png" class="gallery-img">
                                        <img src="./assets/image/gallery/img-2.png" alt="Gallery Image 2">
                                    </a>
                                </div>

                                <!-- Video 2 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 mt-3" data-aos="zoom-in" data-aos-delay="350">
                                    <div class="gallery-img">

                                        <video src="./assets/image/gallery/video-2.mp4" autoplay muted loop playsinline></video>
                                    </div>

                                </div>

                                <!-- Image 3 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6  mt-3" data-aos="zoom-in" data-aos-delay="400">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/gallery-1.webp" class="gallery-img">
                                        <img src="./assets/image/gallery/gallery-1.webp" alt="Gallery Image 3">
                                    </a>
                                </div>

                                <!-- Image 4 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6  mt-3" data-aos="zoom-in" data-aos-delay="450">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/gallery-2.webp" class="gallery-img">
                                        <img src="./assets/image/gallery/gallery-2.webp" alt="Gallery Image 4">
                                    </a>
                                </div>

                                <!-- Video 3 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6  mt-3" data-aos="zoom-in" data-aos-delay="500">
                                    <div class="gallery-img">

                                        <video src="./assets/image/gallery/video-3.mp4" autoplay muted loop playsinline></video>
                                    </div>

                                </div>

                                <!-- Image 5 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6  mt-3" data-aos="zoom-in" data-aos-delay="550">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/gallery-3.webp" class="gallery-img">
                                        <img src="./assets/image/gallery/gallery-3.webp" alt="Gallery Image 5">
                                    </a>
                                </div>

                                <!-- Image 6 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6  mt-3" data-aos="zoom-in" data-aos-delay="600">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/gallery-4.webp" class="gallery-img">
                                        <img src="./assets/image/gallery/gallery-4.webp" alt="Gallery Image 6">
                                    </a>
                                </div>

                                <!-- Video 4 -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6  mt-3" data-aos="zoom-in" data-aos-delay="650">
                                    <div class="gallery-img">

                                        <video src="./assets/image/gallery/video-4.mp4" autoplay muted loop playsinline></video>
                                    </div>

                                </div>

                                <!-- Repeat images if needed -->
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6  mt-3" data-aos="zoom-in" data-aos-delay="700">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/gallery-5.webp" class="gallery-img">
                                        <img src="./assets/image/gallery/gallery-5.webp" alt="Gallery Image 7">
                                    </a>
                                </div>

                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 mt-3" data-aos="zoom-in" data-aos-delay="750">
                                    <a data-fancybox="gallery" href="./assets/image/gallery/gallery-6.webp" class="gallery-img">
                                        <img src="./assets/image/gallery/gallery-6.webp" alt="Gallery Image 8">
                                    </a>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="gallery-overlay">
                        <h2>Explore</h2>
                    </div>


                </div>
            </section>

            <!-- form section -->
            <section>
                <div class="inner-form contact-page">
                    <div class="container-fluid">
                        <div class="head-center">
                            <h4 class="sub-head" data-aos="zoom-in" data-aos-delay="250"><span>Get in Touch</span></h4>
                            <h2 class="main-head" data-aos="zoom-in" data-aos-delay="300">Plan Your Ride with Ease — We're Just a Form Away!</h2>
                            <p class="text-center" data-aos="zoom-in" data-aos-delay="350">Book your next trip effortlessly with Mr.Taxi. Whether it’s a quick city ride or a long-distance journey, our team ensures a comfortable, safe, and timely experience. Fill out the form below and let us take care of the rest.</p>
                        </div>

                        <div class="form-wrap">
                            <form id="booking-form" class="booking-form">
                                <div class="row g-3">
                                    <!-- Name -->
                                    <div class="col-lg-6 col-md-6 col-sm-6" data-aos="zoom-in" data-aos-delay="200">
                                        <label class="form-label"><i class="bi bi-person-fill"></i> Full Name</label>
                                        <input type="text" id="name" class="form-control" placeholder="Enter your name">
                                        <small id="name-error" class="text-danger error-message"></small>
                                    </div>

                                    <!-- Phone -->
                                    <div class="col-lg-6 col-md-6 col-sm-6" data-aos="zoom-in" data-aos-delay="250">
                                        <label class="form-label"><i class="bi bi-telephone-fill"></i> Phone Number</label>
                                        <input type="tel" id="phone" class="form-control" placeholder="Enter phone number">
                                        <small id="phone-error" class="text-danger error-message"></small>
                                    </div>

                                    <!-- Destination -->
                                    <div class="col-lg-6 col-md-6 col-sm-6" data-aos="zoom-in" data-aos-delay="300">
                                        <label class="form-label"><i class="bi bi-geo-alt-fill"></i> Trip Destination</label>
                                        <select id="destination" class="form-select">
                                            <option value="" selected disabled>Select Destination</option>
                                            <option value="kandhaloor.php">Kandhaloor (2D/1N)</option>
                                            <option value="Valparai-&-Athirappilly.php">Valparai & Athirappilly (3D/1N)</option>
                                            <option value="Topslip-&-Valparai.php">Topslip & Valparai (2D/1N)</option>
                                            <option value="munnar-kandhaloor.php">Munnar & Kandhaloor (3D/2N)</option>
                                            <option value="valparai-&-kandhaloor-tour-package.php">Valparai & Kandhaloor (3D/2N)</option>
                                            <option value="topslip-athirappilly.php">Topslip – Valparai – Athirappilly (2D)</option>
                                            <option value="thirumoorthi-falls.php">Thirumoorthi Falls</option>
                                            <option value="valparai-&-athirappilly-3-day-tour.php">Valparai & Athirappilly 3-Day</option>
                                        </select>
                                        <small id="destination-error" class="text-danger error-message"></small>
                                    </div>

                                    <!-- Package -->
                                    <div class="col-lg-6 col-md-6 col-sm-6" data-aos="zoom-in" data-aos-delay="350">
                                        <label class="form-label"><i class="bi bi-box-seam-fill"></i> Select Package</label>
                                        <select id="package" class="form-select">
                                            <option value="" selected disabled>Select Package</option>
                                            <option value="Standard">Standard</option>
                                            <option value="Premium">Premium</option>
                                            <option value="Luxury">Luxury</option>
                                        </select>
                                        <small id="package-error" class="text-danger error-message"></small>
                                    </div>

                                    <!-- Starting Date -->
                                    <div class="col-lg-6 col-md-6 col-sm-6" data-aos="zoom-in" data-aos-delay="400">
                                        <label class="form-label"><i class="bi bi-calendar-event-fill"></i> Trip Date</label>
                                        <input type="date" id="trip-date" class="form-control">
                                        <small id="trip-date-error" class="text-danger error-message"></small>
                                    </div>

                                    <!-- Number of Persons -->
                                    <div class="col-lg-6 col-md-6 col-sm-6" data-aos="zoom-in" data-aos-delay="450">
                                        <label class="form-label"><i class="bi bi-people-fill"></i> Number of Persons</label>
                                        <input type="number" id="persons" class="form-control" placeholder="Enter number of persons" min="1">
                                        <small id="persons-error" class="text-danger error-message"></small>
                                    </div>

                                    <!-- Message -->
                                    <div class="col-12" data-aos="zoom-in" data-aos-delay="500">
                                        <label class="form-label"><i class="bi bi-chat-dots-fill"></i> Message</label>
                                        <textarea id="message" class="form-control" rows="4" placeholder="Your message here..."></textarea>
                                        <small id="message-error" class="text-danger error-message"></small>
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="col-12 text-center mt-3" data-aos="zoom-in" data-aos-delay="550">
                                        <div class="custom-btn">
                                            <button type="submit" class="liquid-btn">
                                                Book now <i class="bi bi-chevron-double-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>


                        </div>


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


        </main>

        <!-- travels book form -->
        <?php include('./includes/travels-form.php'); ?>

        <!-- Footer -->
        <?php include('./includes/footer.php'); ?>

    </div>


    <!-- Script -->
    <?php include('./includes/script.php'); ?>


    <!-- form validation -->
    <script>
        document.getElementById('booking-form').addEventListener('submit', function(e) {
            e.preventDefault();

            // Reset previous errors
            document.querySelectorAll('.error-message').forEach(el => el.textContent = '');
            let isValid = true;

            const name = document.getElementById('name').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const destination = document.getElementById('destination').value;
            const packageType = document.getElementById('package').value;
            const tripDate = document.getElementById('trip-date').value;
            const persons = document.getElementById('persons').value.trim();
            const message = document.getElementById('message').value.trim();

            // Validation
            if (name === '') {
                document.getElementById('name-error').textContent = 'Please enter your name';
                isValid = false;
            }

            if (!/^\d{10,15}$/.test(phone)) {
                document.getElementById('phone-error').textContent = 'Enter a valid phone number';
                isValid = false;
            }

            if (destination === '') {
                document.getElementById('destination-error').textContent = 'Select a destination';
                isValid = false;
            }

            if (packageType === '') {
                document.getElementById('package-error').textContent = 'Select a package';
                isValid = false;
            }

            if (tripDate === '') {
                document.getElementById('trip-date-error').textContent = 'Select your trip date';
                isValid = false;
            }

            if (persons === '' || persons <= 0) {
                document.getElementById('persons-error').textContent = 'Enter a valid number of persons';
                isValid = false;
            }

            if (message === '') {
                document.getElementById('message-error').textContent = 'Please write a message';
                isValid = false;
            }

            if (!isValid) return;

            // Form data
            const formData = new FormData();
            formData.append('name', name);
            formData.append('phone', phone);
            formData.append('destination', destination);
            formData.append('package', packageType);
            formData.append('trip_date', tripDate);
            formData.append('persons', persons);
            formData.append('message', message);

            // Send request
            fetch('mail.php', {
                    method: 'POST',
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                    Toastify({
                        text: data.message || 'Form submitted successfully!',
                        duration: 3000,
                        backgroundColor: data.status === 'success' ? 'green' : 'red'
                    }).showToast();

                    if (data.status === 'success') document.getElementById('booking-form').reset();
                })
                .catch(() => {
                    Toastify({
                        text: 'Something went wrong. Please try again!',
                        duration: 3000,
                        backgroundColor: 'red'
                    }).showToast();
                });
        });
    </script>

</body>

</html>