@include('header')

@php
    $toursList = [
        [
            'id' => 'trichy-temple-circuit',
            'title' => 'Trichy Temple Circuit',
            'category' => 'Spiritual Circuit',
            'icon' => 'fa-solid fa-gopuram',
            'image' => 'images/mj_srirangam_gopuram.jpg',
            'desc' => 'Day pilgrimage to Rockfort, Srirangam, Thiruvanaikaval and Samayapuram temples.',
            'badge' => '1 Day Tour',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Rockfort Ucchi Pillayar • Srirangam Ranganathaswamy • Thiruvanaikaval Jambukeswarar • Samayapuram Mariamman',
            'duration' => '1 Day (8 - 10 Hours)',
            'recommended' => 'Sedan (4 Pax) / Innova Crysta (7 Pax)',
            'has_dedicated_page' => true
        ],
        [
            'id' => 'trichy-city-sightseeing',
            'title' => 'Trichy City Sightseeing',
            'category' => 'City Sightseeing',
            'icon' => 'fa-solid fa-city',
            'image' => 'images/tour_trichy_city_new.jpg',
            'desc' => 'Explore historical Rockfort, butterfly park, local bazaars and Kaveri river viewpoints.',
            'badge' => 'Half / Full Day',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Rockfort Fort Complex • Tropical Butterfly Park • St. Joseph Church • Kaveri River Front • Local Bazaars',
            'duration' => 'Half Day / Full Day',
            'recommended' => 'Toyota Etios / Swift Dzire / Ertiga',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'kallanai-mukkombu',
            'title' => 'Kallanai & Mukkombu',
            'category' => 'Scenic Riverside',
            'icon' => 'fa-solid fa-water',
            'image' => 'images/tour_kallanai_new.jpg',
            'desc' => 'Visit the ancient Grand Anicut dam, Mukkombu park, and serene Kaveri river picnic spots.',
            'badge' => 'Day Picnic',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => '2000-year-old Kallanai Grand Anicut • Mukkombu Upper Dam • Riverside Garden & Children\'s Park • Kaveri Sunset Halt',
            'duration' => '4 to 6 Hours',
            'recommended' => 'Sedan / SUV / Tempo Traveller',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'vayalur-temple-visits',
            'title' => 'Vayalur & Temple Visits',
            'category' => 'Murugan Temple',
            'icon' => 'fa-solid fa-om',
            'image' => 'images/tour_vayalur_new.jpg',
            'desc' => 'Peaceful village pilgrimage to Lord Murugan temple surrounded by lush paddy fields.',
            'badge' => '3 - 4 Hours',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Lord Murugan Vayalur Temple • Sakthi Theertham • Kumaravayalur Scenic Village Drive • Relaxed Darshan Halt',
            'duration' => '3 to 4 Hours',
            'recommended' => 'Toyota Etios / Swift Dzire',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'shopping-city-errands',
            'title' => 'Shopping & City Errands',
            'category' => 'Local Errands',
            'icon' => 'fa-solid fa-bag-shopping',
            'image' => 'images/tour_shopping_new.jpg',
            'desc' => 'Dedicated cab with waiting driver for Thillai Nagar, NSB Road, and showroom shopping.',
            'badge' => 'Hourly Rental',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Thillai Nagar Boutiques • NSB Road Silk Showrooms • Chinnar Bazaar • Dedicated Chauffeur Waiting',
            'duration' => 'Hourly / Flexible Rental',
            'recommended' => 'Sedan / Ertiga',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'hospital-family-visits',
            'title' => 'Hospital & Family Visits',
            'category' => 'Comfort Care',
            'icon' => 'fa-solid fa-heart-pulse',
            'image' => 'images/tour_hospital_new.jpg',
            'desc' => 'Gentle, compassionate chauffeur travel for medical visits, elder care, and family reunions.',
            'badge' => 'Doorstep Care',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Doorstep Pickup • Apollo / Kauvery / City Hospitals • Patient Waiting • Senior Citizen Support',
            'duration' => 'Custom As Needed',
            'recommended' => 'Spacious AC Sedan / Ertiga',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'ooty-coonoor',
            'title' => 'Ooty & Coonoor Tour',
            'category' => 'Hill Station',
            'icon' => 'fa-solid fa-mountain-sun',
            'image' => 'images/tour_ooty_coonoor.jpg',
            'desc' => 'Scenic Nilgiri mountain drive covering tea gardens, botanical parks, and viewpoints.',
            'badge' => '2 - 3 Days',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Ooty Botanical Gardens • Ooty Lake & Boating • Doddabetta Peak • Coonoor Sim\'s Park & Tea Estates',
            'duration' => '2 to 3 Days Tour',
            'recommended' => 'Innova Crysta / Mahindra Xylo',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'kodaikanal',
            'title' => 'Kodaikanal Holiday',
            'category' => 'Hill Station',
            'icon' => 'fa-solid fa-tree',
            'image' => 'images/dest_kodaikanal_hd.jpg',
            'desc' => 'Princess of Hill Stations tour to Kodai lake, Coaker\'s Walk, and pine forests.',
            'badge' => '2 - 3 Days',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Kodai Star Lake • Pillar Rocks • Coaker\'s Walk • Pine Forest • Silver Cascade Falls',
            'duration' => '2 to 3 Days Tour',
            'recommended' => 'Toyota Innova / Crysta / Ertiga',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'kolli-malai',
            'title' => 'Kolli Malai Safari',
            'category' => 'Adventure Drive',
            'icon' => 'fa-solid fa-route',
            'image' => 'images/tour_kolli_hills.jpg',
            'desc' => 'Thrilling 70 hairpin bends road trip to Agaya Gangai falls and herbal hilltop points.',
            'badge' => '1 - 2 Days',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => '70 Thrilling Hairpin Bends • Agaya Gangai Waterfalls • Arapaleeswarar Temple • Seekuparai Viewpoint',
            'duration' => '1 to 2 Days Tour',
            'recommended' => 'Innova Crysta / Mahindra Xylo / Ertiga',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'yercaud',
            'title' => 'Yercaud Getaway',
            'category' => 'Hill Station',
            'icon' => 'fa-solid fa-cloud-sun',
            'image' => 'images/home_hero_hillstation_cars.jpg',
            'desc' => 'Relaxing getaway to Shevaroy hills, emerald lake boating, and picturesque coffee estates.',
            'badge' => '1 - 2 Days',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Yercaud Lake Boating • Lady\'s Seat Viewpoint • Pagoda Point • Shevaroy Temple • Coffee Plantations',
            'duration' => '1 to 2 Days Tour',
            'recommended' => 'Sedan / Innova Crysta',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'munnar',
            'title' => 'Munnar Hills Tour',
            'category' => 'Weekend Holiday',
            'icon' => 'fa-solid fa-leaf',
            'image' => 'images/tours_holidays_promo.jpg',
            'desc' => 'Misty rolling tea valleys, Mattupetty dam, and breathtaking Western Ghats landscapes.',
            'badge' => '3 Days Tour',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Eravikulam National Park • Mattupetty Dam • Kundala Lake • Tea Museum & Top Station View',
            'duration' => '3 Days Comprehensive Tour',
            'recommended' => 'Innova Crysta / Tempo Traveller',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'thanjavur-heritage',
            'title' => 'Thanjavur Heritage',
            'category' => 'Heritage Tour',
            'icon' => 'fa-solid fa-landmark',
            'image' => 'images/dest_thanjavur_hd.jpg',
            'desc' => 'UNESCO World Heritage tour to Brihadisvara Temple, Maratha Palace, and art gallery.',
            'badge' => '1 Day Tour',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Brihadisvara Big Temple (UNESCO) • Thanjavur Royal Palace • Saraswathi Mahal Library • Art Gallery',
            'duration' => '1 Day Tour',
            'recommended' => 'Toyota Etios / Ertiga / Crysta',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'chettinad',
            'title' => 'Chettinad Heritage',
            'category' => 'Heritage & Culture',
            'icon' => 'fa-solid fa-monument',
            'image' => 'images/tour_chettinad_new.jpg',
            'desc' => 'Architectural palace mansions, famous Chettinad culinary culture, and Athangudi tiles.',
            'badge' => '1 - 2 Days',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Kanadukathan 1000-Window Palace • Athangudi Handmade Tiles Factory • Authentic Chettinad Cuisine Lunch',
            'duration' => '1 to 2 Days Tour',
            'recommended' => 'Sedan / Innova Crysta',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'pondicherry',
            'title' => 'Pondicherry Coastal',
            'category' => 'Coastal Holiday',
            'icon' => 'fa-solid fa-umbrella-beach',
            'image' => 'images/tour_pondicherry_new.jpg',
            'desc' => 'Coastal French Quarter promenade, Auroville township, and pristine sunny beaches.',
            'badge' => '2 Days Tour',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Promenade Beach Walk • French Quarter Heritage Villas • Auroville Matrimandir • Paradise Beach',
            'duration' => '2 Days Tour',
            'recommended' => 'Innova Crysta / Sedan / Traveller',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'rameswaram-dhanushkodi',
            'title' => 'Rameswaram & Dhanushkodi',
            'category' => 'Pilgrimage & Coast',
            'icon' => 'fa-solid fa-water',
            'image' => 'images/dest_rameswaram_hd.jpg',
            'desc' => 'Sacred 22 theerthams darshan, iconic Pamban Sea Bridge, and ghost town Dhanushkodi.',
            'badge' => '2 Days Tour',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Ramanathaswamy Temple 22 Theerthams • Pamban Sea Bridge • Dhanushkodi Land\'s End Point • APJ Abdul Kalam Memorial',
            'duration' => '2 Days Tour',
            'recommended' => 'Innova Crysta / Tempo Traveller',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'velankanni-nagapattinam',
            'title' => 'Velankanni & Nagapattinam',
            'category' => 'Sacred Shrine',
            'icon' => 'fa-solid fa-church',
            'image' => 'images/dest_velankanni_church.jpg',
            'desc' => 'Basilica of Our Lady of Good Health shrine darshan and Nagapattinam coastal drive.',
            'badge' => '1 - 2 Days',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Basilica of Our Lady of Good Health • Holy Path & Beach • Nagapattinam Port & Coast Drive',
            'duration' => '1 to 2 Days Tour',
            'recommended' => 'Toyota Etios / Ertiga / Crysta',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'nagore-masuthi',
            'title' => 'Nagore Masuthi',
            'category' => 'Spiritual Dargah',
            'icon' => 'fa-solid fa-mosque',
            'image' => 'images/tour_nagore_new.jpg',
            'desc' => 'Historic 16th-century Sufi dargah shrine visit with peaceful family transit.',
            'badge' => '1 Day Tour',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Nagore Shahul Hameed Dargah • Holy Tank • Heritage Bazaar • Nagapattinam Coastal Halt',
            'duration' => '1 Day Tour',
            'recommended' => 'Sedan / Innova Crysta',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'kallanai-riverside-outing',
            'title' => 'Kallanai Riverside Outing',
            'category' => 'Riverside Picnic',
            'icon' => 'fa-solid fa-ferry',
            'image' => 'images/tour_kallanai_new.jpg',
            'desc' => 'Refreshing weekend family outing by the ancient stone barrage with cool river breezes.',
            'badge' => 'Half Day',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Kallanai Barrage • Karikalan Statue • Kaveri Riverside Park • Local Fish Fry & Eateries',
            'duration' => 'Half Day (4 - 5 Hours)',
            'recommended' => 'Sedan / SUV / Traveller',
            'has_dedicated_page' => false
        ],
        [
            'id' => 'pachamalai-day-trip',
            'title' => 'Pachamalai Day Trip',
            'category' => 'Nature & Hills',
            'icon' => 'fa-solid fa-mountain',
            'image' => 'images/tour_pachamalai_new.jpg',
            'desc' => 'Eco-tourism forest drive through Eastern Ghats tribal hills, trekking paths, and streams.',
            'badge' => '1 Day Tour',
            'micro1' => 'On Time',
            'micro2' => 'Safe & Secure Ride',
            'micro3' => 'Professional Drivers',
            'itinerary' => 'Eastern Ghats Hill Drive • Top Sengattupatti View • Mangalam Falls Stream • Tribal Village Eco Walk',
            'duration' => '1 Day Tour (8 Hours)',
            'recommended' => 'Innova Crysta / Mahindra Xylo / Ertiga',
            'has_dedicated_page' => false
        ],
    ];
@endphp

<!-- SVG ClipPath for Organic Wave Shape (Exact Reference Cutout) -->
<svg width="0" height="0" style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true">
  <defs>
    <clipPath id="mjTourWaveClip" clipPathUnits="objectBoundingBox">
      <path d="M 0.22,0 C 0.05,0.18 0.0,0.38 0.02,0.5 C 0.05,0.65 0.32,0.88 0.72,1 L 1,1 L 1,0 Z" />
    </clipPath>
  </defs>
</svg>

<style>
    /* Filter & View Switcher Styles */
    .mj-filter-btn {
        border: 1px solid rgba(212, 167, 98, 0.3);
        color: #CBD5E1;
        background: #121722;
        font-size: 13px;
        font-weight: 600;
        padding: 7px 16px;
        border-radius: 20px;
        transition: all 0.3s ease;
    }
    .mj-filter-btn:hover {
        border-color: #D4A762;
        color: #FFFFFF;
        transform: translateY(-2px);
    }
    .mj-filter-btn.active {
        background: #D4A762 !important;
        color: #080A0E !important;
        border-color: #D4A762 !important;
        font-weight: 700;
        box-shadow: 0 4px 15px rgba(212, 167, 98, 0.35);
    }
    /* Enhanced Card Hover (from Services) */
    .mj-tour-split-card {
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
    }
    .mj-tour-split-card:hover {
        transform: translateY(-8px) !important;
        border-color: #D4A762 !important;
        box-shadow: 0 18px 40px rgba(212, 167, 98, 0.25), 0 8px 24px rgba(0, 0, 0, 0.7) !important;
    }
    .mj-tour-split-img {
        transition: transform 0.4s ease !important;
    }
    .mj-tour-split-card:hover .mj-tour-split-img {
        transform: scale(1.06) !important;
    }
    /* Compact View Layout for Tours */
    .compact-view .tour-item-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .compact-view .mj-tour-split-card {
        min-height: 200px;
    }
    .compact-view .mj-tour-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* ==========================================================================
   Tours Card Design - Our Website Theme (Dark Luxury with Gold Accents)
   (Same height uniform cards, Circular Gold Icon Badge, Cinzel Typography,
    3 Micro Highlights, Pill Action Buttons & Organic Wave Image Cutout)
   ========================================================================== */
.mj-tour-split-card {
    background: #0E131F;
    border: 1.5px solid rgba(212, 167, 98, 0.35);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    cursor: pointer !important;
    min-height: 275px;
    height: 100% !important;
    width: 100%;
}

.mj-tour-split-card,
.mj-tour-split-card * {
    cursor: pointer !important;
}

.mj-tour-split-card:hover {
    transform: translateY(-5px);
    border-color: #D4A762;
    box-shadow: 0 16px 36px rgba(212, 167, 98, 0.22), 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* Left Side: Content Section */
.mj-tour-split-left {
    width: 58%;
    min-width: 58%;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    z-index: 2;
}

/* Category header with circular icon */
.mj-tour-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mj-tour-cat-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(212, 167, 98, 0.14);
    border: 1.5px solid #D4A762;
    color: #D4A762;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(212, 167, 98, 0.2);
}

.mj-tour-cat-name {
    color: #D4A762;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Title - Uniform Fixed Space */
.mj-tour-card-title {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 6px;
    line-height: 1.25;
    min-height: 50px;
    max-height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.mj-tour-split-card:hover .mj-tour-card-title {
    color: #D4A762;
}

/* Description - Uniform Fixed Space */
.mj-tour-card-desc {
    color: #94A3B8;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 38px;
    max-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3 Micro highlights row */
.mj-tour-micro-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    min-height: 24px;
}

.mj-tour-micro-item {
    color: #CBD5E1;
    font-size: 11.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mj-tour-micro-item i {
    color: #D4A762;
    font-size: 13px;
}

/* Action Buttons */
.mj-tour-split-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: auto;
}

.mj-tour-btn-pill-details {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 167, 98, 0.12);
    border: 1.5px solid #D4A762;
    color: #D4A762 !important;
    border-radius: 25px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.22s ease;
}

.mj-tour-btn-pill-details:hover {
    background: #D4A762;
    color: #080A0E !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 167, 98, 0.35);
}

.mj-tour-btn-pill-book {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #D4A762 0%, #B8860B 100%);
    color: #080A0E !important;
    border: 1.5px solid #D4A762;
    border-radius: 25px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.22s ease;
}

.mj-tour-btn-pill-book:hover {
    background: linear-gradient(135deg, #E5BA75 0%, #D4A762 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(212, 167, 98, 0.45);
}

/* Right Side: Organic Curved Image with Website Dark Frame */
.mj-tour-split-right {
    width: 42%;
    min-width: 42%;
    position: relative;
    overflow: hidden;
    clip-path: url(#mjTourWaveClip);
    -webkit-clip-path: url(#mjTourWaveClip);
    background: #141A28;
    border-radius: 0 20px 20px 0;
}

.mj-tour-split-right img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.mj-tour-split-card:hover .mj-tour-split-right img {
    transform: scale(1.08);
}

.mj-tour-split-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(8, 10, 14, 0.88);
    border: 1px solid #D4A762;
    color: #D4A762;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
    backdrop-filter: blur(4px);
}

/* Responsive adjustments for mobile screens - Keep same split card view on mobile as requested */
@media (max-width: 767px) {
    .mj-tour-split-card {
        flex-direction: row !important;
        align-items: stretch !important;
        min-height: 220px;
        border-radius: 16px;
    }

    .mj-tour-split-left {
        width: 58% !important;
        min-width: 58% !important;
        padding: 14px 10px 14px 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        z-index: 2;
    }

    .mj-tour-cat-row {
        gap: 6px;
        margin-bottom: 4px;
    }

    .mj-tour-cat-icon {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .mj-tour-cat-name {
        font-size: 10.5px;
        letter-spacing: 0.2px;
    }

    .mj-tour-card-title {
        font-size: 15px;
        line-height: 1.25;
        min-height: auto;
        max-height: none;
        margin-bottom: 4px;
        -webkit-line-clamp: 2;
    }

    .mj-tour-card-desc {
        font-size: 11px;
        line-height: 1.35;
        min-height: auto;
        max-height: none;
        margin-bottom: 8px;
        -webkit-line-clamp: 2;
    }

    .mj-tour-micro-row {
        gap: 4px 8px;
        margin-bottom: 10px;
        min-height: auto;
    }

    .mj-tour-micro-item {
        font-size: 10px;
        gap: 4px;
    }

    .mj-tour-micro-item i {
        font-size: 11px;
    }

    .mj-tour-split-actions {
        gap: 6px;
        margin-top: auto;
    }

    .mj-tour-btn-pill-details,
    .mj-tour-btn-pill-book {
        padding: 5px 10px;
        font-size: 10.5px;
        gap: 4px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .mj-tour-split-right {
        width: 42% !important;
        min-width: 42% !important;
        height: auto !important;
        position: relative;
        overflow: hidden;
        clip-path: url(#mjTourWaveClip);
        -webkit-clip-path: url(#mjTourWaveClip);
        border-radius: 0 16px 16px 0;
        background: #141A28;
    }

    .mj-tour-split-right img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block;
    }

    .mj-tour-split-badge {
        font-size: 8.5px;
        padding: 2px 6px;
        top: 6px;
        right: 6px;
        max-width: calc(100% - 12px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .mj-tour-split-card {
        flex-direction: row !important;
        align-items: stretch !important;
        min-height: 190px;
        border-radius: 12px;
    }

    .mj-tour-split-left {
        width: 60% !important;
        min-width: 60% !important;
        padding: 10px 8px 10px 10px;
    }

    .mj-tour-cat-icon {
        width: 22px;
        height: 22px;
        font-size: 9.5px;
    }

    .mj-tour-cat-name {
        font-size: 9.5px;
    }

    .mj-tour-card-title {
        font-size: 13.5px;
        margin-bottom: 2px;
    }

    .mj-tour-card-desc {
        font-size: 10px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .mj-tour-micro-row {
        gap: 2px 6px;
        margin-bottom: 6px;
    }

    .mj-tour-micro-item {
        font-size: 9px;
        gap: 3px;
    }

    .mj-tour-split-actions {
        gap: 4px;
    }

    .mj-tour-btn-pill-details,
    .mj-tour-btn-pill-book {
        padding: 4px 7px;
        font-size: 9.5px;
        gap: 3px;
    }

    .mj-tour-split-right {
        width: 40% !important;
        min-width: 40% !important;
        border-radius: 0 12px 12px 0;
    }

    .mj-tour-split-badge {
        font-size: 7.5px;
        padding: 1.5px 5px;
        top: 4px;
        right: 4px;
    }
}

/* ==========================================================================
   Tour Details Popup Modal
   ========================================================================== */
.mj-tour-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 12, 0.88);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 18px;
    overflow-y: auto;
}

.mj-tour-modal-backdrop.show {
    display: flex;
    animation: fadeInModal 0.25s ease forwards;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mj-tour-modal-box {
    background: #0E131F;
    border: 1.5px solid #D4A762;
    border-radius: 20px;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(212, 167, 98, 0.2);
    position: relative;
    color: #C4CDD9;
}

.mj-tour-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(8, 10, 14, 0.8);
    border: 1px solid #D4A762;
    color: #D4A762;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.mj-tour-modal-close:hover {
    background: #D4A762;
    color: #080A0E;
    transform: rotate(90deg);
}

.mj-tour-modal-img-wrap {
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.mj-tour-modal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mj-tour-modal-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.1) 0%, rgba(14, 19, 31, 0.95) 100%);
}

.mj-tour-modal-badges {
    position: absolute;
    bottom: 14px;
    left: 18px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.mj-tour-modal-body {
    padding: 22px 24px;
}

.mj-tour-modal-title {
    font-family: 'Cinzel', serif;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.mj-tour-modal-desc {
    color: #94A3B8;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.mj-tour-modal-detail-card {
    background: rgba(212, 167, 98, 0.06);
    border: 1px solid rgba(212, 167, 98, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.mj-tour-modal-detail-card h5 {
    color: #D4A762;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mj-tour-modal-detail-card p {
    color: #E2E8F0;
    font-size: 13.5px;
    margin-bottom: 0;
    line-height: 1.5;
}

.mj-tour-modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-modal-wa {
    flex: 1;
    background: #25D366;
    color: #FFFFFF !important;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-modal-wa:hover {
    background: #1EBE5D;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}

.btn-modal-book {
    flex: 1;
    background: #D4A762;
    color: #080A0E !important;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-modal-book:hover {
    background: #E5BA75;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(212, 167, 98, 0.4);
}
</style>

<div class="mj-dark-theme-wrapper" style="background-color: #080A0E; color: #C4CDD9; min-height: 100vh;">

    <!-- Tours Main Section -->
    <section class="mj-tours-section" style="padding-bottom: 70px;">
        <div class="container">

            <!-- Top Tour Packages Hero CTA Card (Trichy Sightseeing Format) -->
            <div class="mb-4 wow fadeInDown" data-wow-delay="0.1s">
                <div class="p-4 p-md-5 rounded-4 text-center" style="background: linear-gradient(135deg, rgba(14, 18, 26, 0.95) 0%, rgba(22, 28, 42, 0.85) 100%); border: 1.5px solid #D4A762; box-shadow: 0 15px 40px rgba(0,0,0,0.7);">
                    <span class="mj-tagline-badge mb-2">Book Your Tour</span>
                    <h1 style="font-family: 'Cinzel', serif; font-size: clamp(24px, 3.2vw, 36px); color: #FFFFFF; margin-bottom: 12px; font-weight: 700;">
                        Tour Packages from Trichy
                    </h1>
                    <p style="color: #CBD5E1; font-size: 15.5px; max-width: 820px; margin: 0 auto 20px; line-height: 1.65;">
                        Plan your next journey with convenient tour packages from Trichy for sightseeing, temple visits, family trips, weekend getaways, and planned travel. Share your destination, group size, and itinerary with MJ Car Rentals.
                    </p>
                    
                    <div class="mj-detail-hero-btn-group w-100">
                        <div class="row g-2 justify-content-center mb-2">
                            <div class="col-6 col-md-auto">
                                <a href="{{ url('/contact-mj-car-rentals') }}?service=Tour+Packages+from+Trichy&tab=packages#enquiry-form-section" class="mj-btn-gold" style="font-weight: 700;">
                                    <span>Plan Your Tour Trip</span>
                                    <i class="fa-solid fa-arrow-right ms-2"></i>
                                </a>
                            </div>
                            <div class="col-6 col-md-auto">
                                <a href="{{ url('/contact-mj-car-rentals') }}?service=Tour+Packages+from+Trichy&tab=packages#enquiry-form-section" class="mj-btn-outline-gold">
                                    <span>Contact MJ Car Rentals</span>
                                    <i class="fa-solid fa-phone ms-2"></i>
                                </a>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-auto text-center">
                                <a href="{{ url('/mj-car-rentals-vehicles') }}" class="btn btn-outline-secondary" style="border-color: rgba(255,255,255,0.3); color: #E2E8F0; padding: 12px 24px; font-weight: 600; border-radius: 8px;">
                                    <span>View vehicle rates</span>
                                    <i class="fa-solid fa-car ms-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Duration Filter & View Options Bar -->
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-3 mb-4 p-3 rounded-4 wow fadeInDown" data-wow-delay="0.15s" style="background: rgba(14, 19, 31, 0.85); border: 1px solid rgba(212, 167, 98, 0.35); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,0.4);">
                <!-- Duration Filter Pills -->
                <div class="d-flex align-items-center gap-2 flex-wrap" id="durationFilterGroup">
                    <span class="text-white-50 small me-1 d-none d-sm-inline"><i class="fa-solid fa-filter text-warning me-1"></i>Duration:</span>
                    <button type="button" class="btn mj-filter-btn active" data-filter="all">All Packages (19)</button>
                    <button type="button" class="btn mj-filter-btn" data-filter="1-day">1 Day</button>
                    <button type="button" class="btn mj-filter-btn" data-filter="2-3-days">2 - 3 Days</button>
                    <button type="button" class="btn mj-filter-btn" data-filter="4-5-days">4 - 5 Days</button>
                </div>

                <!-- Package Count Badge -->
                <div>
                    <span id="packageCountBadge" class="badge" style="background: rgba(212, 167, 98, 0.15); color: #F5C869; border: 1px solid rgba(212, 167, 98, 0.3); font-weight: 600; padding: 6px 14px; border-radius: 20px;">
                        Showing All (19)
                    </span>
                </div>
            </div>

            <!-- Tours Grid: 2 Columns Layout with Exact Same Card Heights (Centered Last Row) -->
            <div class="row g-4 justify-content-center align-items-stretch" id="toursGrid">
                @foreach ($toursList as $index => $tour)
                    @php
                        $tourUrlMap = [
                            'trichy-temple-circuit' => url('/trichy-temple-tour-package'),
                            'trichy-city-sightseeing' => url('/trichy-city-sightseeing'),
                            'kallanai-mukkombu' => url('/kallanai-mukkombu-tour'),
                            'vayalur-temple-visits' => url('/vayalur-temple-tour'),
                            'shopping-city-errands' => url('/shopping-taxi-service-in-trichy'),
                            'hospital-family-visits' => url('/hospital-taxi-service-in-trichy'),
                            'ooty-coonoor' => url('/ooty-coonoor-tour-from-trichy'),
                            'kodaikanal' => url('/kodaikanal-tour-package-from-trichy'),
                            'kolli-malai' => url('/kolli-malai-tour-from-trichy'),
                            'yercaud' => url('/yercaud-tour-from-trichy'),
                            'munnar' => url('/munnar-tour-package-from-trichy'),
                            'thanjavur-heritage' => url('/thanjavur-heritage-tour-from-trichy'),
                            'chettinad' => url('/chettinad-tour-package-from-trichy'),
                            'pondicherry' => url('/pondicherry-tour-package-from-trichy'),
                            'rameswaram-dhanushkodi' => url('/rameswaram-dhanushkodi-tour-package-from-trichy'),
                            'velankanni-nagapattinam' => url('/velankanni-tour-package-from-trichy'),
                            'nagore-masuthi' => url('/nagore-tour-package-from-trichy'),
                            'kallanai-riverside-outing' => url('/kallanai-riverside-tour'),
                            'pachamalai-day-trip' => url('/pachamalai-tour-package-from-trichy'),
                        ];
                        $dedicatedUrl = $tourUrlMap[$tour['id']] ?? url('/' . $tour['id']);
                        $bookUrl = url('/contact-mj-car-rentals') . '?service=Tours&tab=packages&package=' . urlencode($tour['title']) . '#enquiry-form-section';
                        $tourJson = htmlspecialchars(json_encode($tour), ENT_QUOTES, 'UTF-8');
                    @endphp
                    @php
                        $durations = '1-day';
                        $multiDays = ['ooty-coonoor', 'kodaikanal', 'munnar', 'pondicherry', 'rameswaram-dhanushkodi'];
                        $flexDays = ['kolli-malai', 'yercaud', 'chettinad', 'velankanni-nagapattinam'];
                        $longDays = ['munnar', 'ooty-coonoor', 'kodaikanal', 'rameswaram-dhanushkodi'];
                        
                        if (in_array($tour['id'], $longDays)) {
                            $durations = '2-3-days 4-5-days';
                        } elseif (in_array($tour['id'], $multiDays)) {
                            $durations = '2-3-days';
                        } elseif (in_array($tour['id'], $flexDays)) {
                            $durations = '1-day 2-3-days';
                        } else {
                            $durations = '1-day';
                        }
                    @endphp
                    <div class="col-lg-6 col-12 d-flex align-items-stretch tour-item-col wow {{ $index % 2 === 0 ? 'fadeInLeft' : 'fadeInRight' }}" data-durations="{{ $durations }}" data-wow-delay="{{ 0.08 + ($index % 2) * 0.12 }}s">
                        <div class="mj-tour-split-card mj-hover-card" 
                             data-tour="{{ $tourJson }}"
                             onclick="window.location.href='{{ $dedicatedUrl }}';" style="cursor: pointer;" 
                             title="View {{ $tour['title'] }} Details">
                            
                            <!-- Left Content Section -->
                            <div class="mj-tour-split-left">
                                <div>
                                    <!-- Category with Circular Gold Icon Badge -->
                                    <div class="mj-tour-cat-row">
                                        <div class="mj-tour-cat-icon">
                                            <i class="{{ $tour['icon'] }}"></i>
                                        </div>
                                        <span class="mj-tour-cat-name">{{ $tour['category'] }}</span>
                                    </div>

                                    <!-- Title (Normalized Height) -->
                                    <h3 class="mj-tour-card-title">{{ $tour['title'] }}</h3>

                                    <!-- Description (Normalized Height) -->
                                    <p class="mj-tour-card-desc">{{ $tour['desc'] }}</p>

                                    <!-- 3 Micro Highlights Row -->
                                    <div class="mj-tour-micro-row">
                                        <span class="mj-tour-micro-item">
                                            <i class="fa-solid fa-clock"></i> {{ $tour['micro1'] }}
                                        </span>
                                        <span class="mj-tour-micro-item">
                                            <i class="fa-solid fa-shield-halved"></i> {{ $tour['micro2'] }}
                                        </span>
                                        <span class="mj-tour-micro-item">
                                            <i class="fa-solid fa-user-tie"></i> {{ $tour['micro3'] }}
                                        </span>
                                    </div>
                                </div>

                                <!-- Action Buttons: Rounded Pill Buttons -->
                                <div class="mj-tour-split-actions">
                                    <a href="{{ $dedicatedUrl }}" class="mj-tour-btn-pill-details" onclick="event.stopPropagation(); window.location.href='{{ $dedicatedUrl }}';"><span>View Details</span> <i class="fa-solid fa-arrow-right"></i></a>
                                    <a href="{{ $bookUrl }}" class="mj-tour-btn-pill-book" onclick="event.stopPropagation(); window.location.href='{{ $bookUrl }}';">
                                        <span>Book Now</span> <i class="fa-solid fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>

                            <!-- Right Image with Organic Left Curve Mask -->
                            <div class="mj-tour-split-right">
                                <img src="{{ asset($tour['image']) }}" alt="{{ $tour['title'] }}" loading="lazy">
                                <span class="mj-tour-split-badge">{{ $tour['badge'] }}</span>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>

            
            <!-- Tour Packages from Trichy: Comprehensive Guide Sections -->
            <div class="mt-5 pt-4">

                <!-- 1. Tour Packages from Trichy for Different Travel Plans -->
                <div class="mb-5">
                    <div class="text-center mb-4">
                        <span class="mj-tagline-badge">Travel Plans</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 30px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            Tour Packages from Trichy for Different Travel Plans
                        </h2>
                        <p style="color: #94A3B8; font-size: 15px; max-width: 820px; margin: 0 auto; line-height: 1.65;">
                            A tour from Trichy can be planned around the places you want to visit and the time available for your trip. Whether you are planning a short local outing or a longer journey, having your travel route arranged in advance can make the trip easier to manage.
                        </p>
                    </div>

                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(212, 167, 98, 0.15); display: flex; align-items: center; justify-content: center; color: #D4A762; font-size: 20px;">
                                        <i class="fa-solid fa-gopuram"></i>
                                    </div>
                                    <h3 style="font-family: 'Cinzel', serif; font-size: 18px; color: #FFFFFF; margin: 0; font-weight: 700;">Temple Tours</h3>
                                </div>
                                <p style="color: #CBD5E1; font-size: 14px; line-height: 1.65; margin: 0;">
                                    Plan visits to popular temples and pilgrimage destinations from Trichy with a travel schedule that suits your group.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(212, 167, 98, 0.15); display: flex; align-items: center; justify-content: center; color: #D4A762; font-size: 20px;">
                                        <i class="fa-solid fa-camera"></i>
                                    </div>
                                    <h3 style="font-family: 'Cinzel', serif; font-size: 18px; color: #FFFFFF; margin: 0; font-weight: 700;">Sightseeing Tours</h3>
                                </div>
                                <p style="color: #CBD5E1; font-size: 14px; line-height: 1.65; margin: 0;">
                                    Explore tourist attractions, heritage locations, natural destinations, and nearby places with a planned travel route.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(212, 167, 98, 0.15); display: flex; align-items: center; justify-content: center; color: #D4A762; font-size: 20px;">
                                        <i class="fa-solid fa-users"></i>
                                    </div>
                                    <h3 style="font-family: 'Cinzel', serif; font-size: 18px; color: #FFFFFF; margin: 0; font-weight: 700;">Family Tours</h3>
                                </div>
                                <p style="color: #CBD5E1; font-size: 14px; line-height: 1.65; margin: 0;">
                                    Choose a comfortable travel option for family trips where children, elderly members, and luggage may need additional space.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(212, 167, 98, 0.15); display: flex; align-items: center; justify-content: center; color: #D4A762; font-size: 20px;">
                                        <i class="fa-solid fa-calendar-week"></i>
                                    </div>
                                    <h3 style="font-family: 'Cinzel', serif; font-size: 18px; color: #FFFFFF; margin: 0; font-weight: 700;">Weekend Trips</h3>
                                </div>
                                <p style="color: #CBD5E1; font-size: 14px; line-height: 1.65; margin: 0;">
                                    Plan a short trip from Trichy for a weekend or available holiday without having to arrange transportation separately for each part of the journey.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. Cab Tours from Trichy -->
                <div class="mb-5">
                    <div class="p-4 p-md-5 rounded-4" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.4);">
                        <span class="mj-tagline-badge">Convenient Route Planning</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 28px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            Cab Tours from Trichy
                        </h2>
                        <p style="color: #CBD5E1; font-size: 15px; line-height: 1.7; margin-bottom: 12px;">
                            Cab tours from Trichy provide a convenient way to travel between multiple destinations during the same trip. Instead of arranging separate transportation for different locations, you can plan your route around the places you want to cover.
                        </p>
                        <p style="color: #94A3B8; font-size: 14.5px; line-height: 1.65; margin: 0;">
                            A cab tour can be useful when your itinerary includes multiple stops, sightseeing locations, temple visits, meals, or overnight stays. The journey can be discussed in advance so the travel plan matches your destinations and available time.
                        </p>
                    </div>
                </div>

                <!-- 3. Trichy Tour Services for Different Groups -->
                <div class="mb-5">
                    <div class="text-center mb-4">
                        <span class="mj-tagline-badge">Tailored Group Travel</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 30px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            Trichy Tour Services for Different Groups
                        </h2>
                        <p style="color: #94A3B8; font-size: 15px; max-width: 800px; margin: 0 auto; line-height: 1.65;">
                            Different travellers may have different requirements when planning a tour from Trichy. Your vehicle and travel plan can be selected according to the number of people travelling and the type of trip you have planned.
                        </p>
                    </div>

                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: rgba(14, 19, 31, 0.85); border: 1.5px solid rgba(212, 167, 98, 0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">For Families</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Family tours can be arranged with space for passengers and luggage, making longer journeys easier to manage.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: rgba(14, 19, 31, 0.85); border: 1.5px solid rgba(212, 167, 98, 0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">For Couples</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Couples can plan private sightseeing trips, weekend journeys, or destination-based tours from Trichy.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: rgba(14, 19, 31, 0.85); border: 1.5px solid rgba(212, 167, 98, 0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">For Friends &amp; Small Groups</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Small groups can plan trips with multiple destinations while travelling together in one vehicle.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: rgba(14, 19, 31, 0.85); border: 1.5px solid rgba(212, 167, 98, 0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">For Larger Groups</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Larger groups can discuss their travel requirements in advance and choose an appropriate vehicle for the journey.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 4. Travel Tours from Trichy for Different Destinations -->
                <div class="mb-5">
                    <div class="p-4 p-md-5 rounded-4" style="background: linear-gradient(135deg, rgba(212, 167, 98, 0.08) 0%, rgba(14, 19, 31, 0.95) 100%); border: 1.5px solid #D4A762;">
                        <span class="mj-tagline-badge">Destination-Based Travel</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 28px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            Travel Tours from Trichy for Different Destinations
                        </h2>
                        <p style="color: #CBD5E1; font-size: 15px; line-height: 1.7; margin-bottom: 12px;">
                            Trichy provides a convenient starting point for travelling to different destinations across Tamil Nadu and nearby areas. Your tour can be planned according to the destination, number of stops, trip duration, and activities you want to include.
                        </p>
                        <p style="color: #CBD5E1; font-size: 15px; line-height: 1.7; margin-bottom: 12px;">
                            You can plan destination-based travel for temple visits, sightseeing, heritage exploration, hill station trips, family outings, or other planned journeys.
                        </p>
                        <p style="color: #94A3B8; font-size: 14px; line-height: 1.65; margin: 0;">
                            <i class="fa-solid fa-circle-info text-warning me-1"></i> For multi-destination trips, it is useful to decide the main places you want to visit before booking. This helps create a practical route and reduces unnecessary travel between locations.
                        </p>
                    </div>
                </div>

                <!-- 5. How to Plan a Tour from Trichy -->
                <div class="mb-5">
                    <div class="text-center mb-4">
                        <span class="mj-tagline-badge">Step-by-Step Guide</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 30px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            How to Plan a Tour from Trichy
                        </h2>
                        <p style="color: #94A3B8; font-size: 15px; max-width: 800px; margin: 0 auto; line-height: 1.65;">
                            Planning your tour in advance can make the journey more organised and help you understand the transportation needed for the trip.
                        </p>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-4 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1px solid rgba(212, 167, 98, 0.25);">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="badge rounded-circle" style="background: #D4A762; color: #080A0E; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;">1</span>
                                    <h4 style="font-family: 'Cinzel', serif; font-size: 16px; color: #F5C869; font-weight: 700; margin: 0;">Choose Your Destination</h4>
                                </div>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Decide where you want to travel and identify the main places you want to visit.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1px solid rgba(212, 167, 98, 0.25);">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="badge rounded-circle" style="background: #D4A762; color: #080A0E; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;">2</span>
                                    <h4 style="font-family: 'Cinzel', serif; font-size: 16px; color: #F5C869; font-weight: 700; margin: 0;">Plan Your Route</h4>
                                </div>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Arrange the destinations in a practical order so you can manage your travel time more effectively.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1px solid rgba(212, 167, 98, 0.25);">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="badge rounded-circle" style="background: #D4A762; color: #080A0E; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;">3</span>
                                    <h4 style="font-family: 'Cinzel', serif; font-size: 16px; color: #F5C869; font-weight: 700; margin: 0;">Decide the Trip Duration</h4>
                                </div>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Consider whether your tour will be a one-day trip, weekend journey, or multi-day travel plan.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1px solid rgba(212, 167, 98, 0.25);">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="badge rounded-circle" style="background: #D4A762; color: #080A0E; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;">4</span>
                                    <h4 style="font-family: 'Cinzel', serif; font-size: 16px; color: #F5C869; font-weight: 700; margin: 0;">Consider Your Group Size</h4>
                                </div>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    The number of passengers can help determine the type of vehicle required for your journey.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1px solid rgba(212, 167, 98, 0.25);">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="badge rounded-circle" style="background: #D4A762; color: #080A0E; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;">5</span>
                                    <h4 style="font-family: 'Cinzel', serif; font-size: 16px; color: #F5C869; font-weight: 700; margin: 0;">Share Your Travel Plan</h4>
                                </div>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Provide the destination, travel date, passenger count, and itinerary details when enquiring about the tour.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 6. Tour Options Based on Your Travel Needs -->
                <div class="mb-5">
                    <div class="text-center mb-4">
                        <span class="mj-tagline-badge">Tour Options</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 30px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            Tour Options Based on Your Travel Needs
                        </h2>
                        <p style="color: #94A3B8; font-size: 15px; max-width: 800px; margin: 0 auto; line-height: 1.65;">
                            A tour from Trichy can be planned differently depending on the purpose of your journey.
                        </p>
                    </div>

                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">One-Day Tours</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Suitable for travellers who want to visit selected destinations and return to Trichy on the same day.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">Multi-Day Tours</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Useful for longer journeys where you want to visit several places without rushing between destinations.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">Multi-Stop Tours</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    A practical option when your itinerary includes multiple attractions or destinations along the route.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="p-4 rounded-3 h-100" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.3);">
                                <h4 style="font-family: 'Cinzel', serif; font-size: 17px; color: #F5C869; font-weight: 700; margin-bottom: 8px;">Private Tours</h4>
                                <p style="color: #CBD5E1; font-size: 13.5px; line-height: 1.6; margin: 0;">
                                    Private travel allows your group to plan the journey around your own destinations and schedule.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 7. What to Check Before Booking a Tour from Trichy -->
                <div class="mb-5">
                    <div class="p-4 p-md-5 rounded-4" style="background: linear-gradient(135deg, rgba(212, 167, 98, 0.08) 0%, rgba(14, 19, 31, 0.95) 100%); border: 1.5px solid #D4A762;">
                        <span class="mj-tagline-badge">Essential Details</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 28px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            What to Check Before Booking a Tour from Trichy
                        </h2>
                        <p style="color: #CBD5E1; font-size: 15px; line-height: 1.7; margin-bottom: 16px;">
                            Before confirming your tour, make sure the travel plan is clearly discussed. This helps avoid confusion during the journey.
                        </p>
                        <h4 style="font-family: 'Cinzel', serif; font-size: 18px; color: #D4A762; margin-bottom: 16px; font-weight: 700;"><i class="fa-solid fa-clipboard-check me-2"></i> Check the following details:</h4>
                        <div class="row g-3">
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Travel date and preferred departure time</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Pickup location in Trichy</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Number of passengers</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Main destinations and planned stops</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Expected trip duration</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Vehicle requirement</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">One-way or return travel</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Accommodation requirements, if applicable</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Any special travel needs for your group</span>
                            </div>
                            <div class="col-md-6 col-12 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-square-check text-warning" style="font-size: 15px;"></i>
                                <span style="color: #E2E8F0; font-size: 14.5px;">Booking and payment details</span>
                            </div>
                        </div>
                        <p class="mt-3 mb-0" style="color: #94A3B8; font-size: 13.5px; line-height: 1.6; border-top: 1px solid rgba(212, 167, 98, 0.2); padding-top: 12px;">
                            <i class="fa-solid fa-circle-info text-warning me-1"></i> Providing complete information allows the travel plan to be prepared according to your actual requirements.
                        </p>
                    </div>
                </div>

                <!-- Section 8: FAQ About Tour Packages from Trichy (Modern 2-Column Luxury Accordion) -->
                <div class="mb-5">
                    <div class="text-center mb-4">
                        <span class="mj-tagline-badge"><i class="fa-solid fa-circle-question me-1 text-warning"></i> Got Questions?</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: clamp(24px, 3.2vw, 32px); color: #FFFFFF; margin-top: 8px; margin-bottom: 12px; font-weight: 700;">
                            FAQ About Tour Packages from Trichy
                        </h2>
                        <p style="color: #94A3B8; font-size: 15px; max-width: 760px; margin: 0 auto; line-height: 1.65;">
                            Find clear answers to common questions about planning, customising itineraries, vehicle options, and booking tour packages from Trichy with MJ Car Rentals.
                        </p>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-lg-10 col-12">
                            <div class="accordion mj-faq-accordion" id="mjTourMainFaqAccordion">
                                <!-- FAQ 1 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.05s">
                                    <h3 class="accordion-header" id="tourMainFaqH1">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC1" aria-expanded="false" aria-controls="tourMainFaqC1">
                                            <span class="faq-num-badge">01.</span> What types of tour packages can I plan from Trichy?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC1" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH1" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            You can plan temple tours, sightseeing trips, family journeys, weekend trips, heritage visits, hill station travel, and multi-destination tours from Trichy with flexible start timings and dedicated vehicles.
                                        </div>
                                    </div>
                                </div>

                                <!-- FAQ 2 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.1s">
                                    <h3 class="accordion-header" id="tourMainFaqH2">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC2" aria-expanded="false" aria-controls="tourMainFaqC2">
                                            <span class="faq-num-badge">02.</span> Can I plan a cab tour with multiple destinations?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC2" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH2" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            Yes. You can discuss your destinations and planned stops in advance to create a suitable route for your journey. We customize pickup points, intermediate halts, and drops across Tamil Nadu.
                                        </div>
                                    </div>
                                </div>

                                <!-- FAQ 3 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.15s">
                                    <h3 class="accordion-header" id="tourMainFaqH3">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC3" aria-expanded="false" aria-controls="tourMainFaqC3">
                                            <span class="faq-num-badge">03.</span> Are tour packages from Trichy suitable for families?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC3" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH3" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            Yes. Family groups can plan their journey based on passenger count, luggage requirements, destinations, and trip duration. We provide spacious Innova Crysta, Ertiga, and Tempo Travellers with senior citizen care.
                                        </div>
                                    </div>
                                </div>

                                <!-- FAQ 4 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s">
                                    <h3 class="accordion-header" id="tourMainFaqH4">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC4" aria-expanded="false" aria-controls="tourMainFaqC4">
                                            <span class="faq-num-badge">04.</span> Can I plan a one-day tour from Trichy?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC4" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH4" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            Yes. One-day tours from Trichy include popular circuits like Thanjavur Big Temple, Madurai Meenakshi Temple, Chettinad heritage, Kumbakonam temples, or Kolli Hills, returning the same evening comfortably.
                                        </div>
                                    </div>
                                </div>

                                <!-- FAQ 5 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.25s">
                                    <h3 class="accordion-header" id="tourMainFaqH5">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC5" aria-expanded="false" aria-controls="tourMainFaqC5">
                                            <span class="faq-num-badge">05.</span> Can I plan a multi-day tour from Trichy?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC5" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH5" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            Yes. Multi-day travel (2 to 5 days) can be arranged around hill stations like Ooty and Kodaikanal, coastal pilgrimage to Rameswaram and Kanyakumari, or full Navagraha temple circuits with hotel halts.
                                        </div>
                                    </div>
                                </div>

                                <!-- FAQ 6 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.3s">
                                    <h3 class="accordion-header" id="tourMainFaqH6">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC6" aria-expanded="false" aria-controls="tourMainFaqC6">
                                            <span class="faq-num-badge">06.</span> How do I enquire about a tour from Trichy?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC6" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH6" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            Simply share your travel dates, pickup address in Trichy, destinations, passenger count, and preferred vehicle with MJ Car Rentals via WhatsApp, phone (+91 85265 48059), or our online enquiry form.
                                        </div>
                                    </div>
                                </div>

                                <!-- FAQ 7 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.35s">
                                    <h3 class="accordion-header" id="tourMainFaqH7">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC7" aria-expanded="false" aria-controls="tourMainFaqC7">
                                            <span class="faq-num-badge">07.</span> Can I customise my tour itinerary?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC7" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH7" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            Yes! All our tour packages are 100% customizable. You can modify departure times, add sightseeing spots, arrange specific restaurant halts, and select your preferred vehicle model.
                                        </div>
                                    </div>
                                </div>

                                <!-- FAQ 8 -->
                                <div class="accordion-item wow fadeInUp" data-wow-delay="0.4s">
                                    <h3 class="accordion-header" id="tourMainFaqH8">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tourMainFaqC8" aria-expanded="false" aria-controls="tourMainFaqC8">
                                            <span class="faq-num-badge">08.</span> How do I choose the right vehicle for a tour?
                                        </button>
                                    </h3>
                                    <div id="tourMainFaqC8" class="accordion-collapse collapse" aria-labelledby="tourMainFaqH8" data-bs-parent="#mjTourMainFaqAccordion">
                                        <div class="accordion-body">
                                            We recommend Swift Dzire / Etios for couples (up to 4 passengers), Maruti Ertiga or Innova Crysta for families (4-7 passengers), and Tempo Travellers (12-18 seats) or Urbania for large groups.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Direct Help Banner under FAQ -->
                    <div class="p-3 p-md-4 rounded-4 mt-4 text-center" style="background: linear-gradient(135deg, rgba(212, 167, 98, 0.08) 0%, rgba(14, 19, 31, 0.85) 100%); border: 1px dashed rgba(212, 167, 98, 0.35); box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
                        <p class="mb-0 text-white-50" style="font-size: 14.5px;">
                            <span class="text-white fw-semibold me-2"><i class="fa-solid fa-circle-question text-warning me-1"></i> Have more questions about your tour itinerary?</span>
                            <span class="d-inline-block mt-2 mt-md-0">
                                Call our travel desk: <a href="tel:+918526548059" class="text-warning fw-bold text-decoration-none mx-1"><i class="fa-solid fa-phone me-1"></i>+91 85265 48059</a>
                                <span class="text-white-50 mx-2">|</span>
                                WhatsApp: <a href="https://wa.me/918526548059?text=Hello%20MJ%20Travels!%20I%20have%20a%20question%20about%20your%20tour%20packages%20from%20Trichy." target="_blank" class="text-success fw-bold text-decoration-none"><i class="fa-brands fa-whatsapp me-1"></i>Chat Now</a>
                            </span>
                        </p>
                    </div>
                </div>

            </div>

            <!-- Custom Tour Banner Strip -->
            <div class="mt-5 p-4 rounded-4 wow zoomIn" data-wow-delay="0.15s" style="background: linear-gradient(135deg, rgba(212, 167, 98, 0.12) 0%, rgba(14, 19, 31, 0.95) 100%); border: 1.5px solid #D4A762;">
                <div class="row align-items-center g-3">
                    <div class="col-lg-8">
                        <span class="badge" style="background: #D4A762; color: #080A0E; font-weight: 700; font-size: 12px;">CUSTOMIZED TOURS</span>
                        <h3 class="text-white mt-2 mb-1" style="font-family: 'Cinzel', serif; font-size: 22px;">Looking for a Personalized Multi-Day Tour Itinerary?</h3>
                        <p class="mb-0" style="color: #CBD5E1; font-size: 14px;">
                            We craft tailor-made tour packages with customized halts, hotel pickups, hill-station drops, and family-sized Innova Crysta or Force Travellers.
                        </p>
                    </div>
                    <div class="col-lg-4 text-lg-end">
                        <a href="{{ url('/contact-mj-car-rentals') }}?service=Tours&tab=packages#enquiry-form-section" class="mj-btn-gold" style="padding: 12px 28px !important; font-size: 15px !important; font-weight: 700; display: inline-block;">
                            <span>Plan Custom Trip</span>
                            <i class="fa-solid fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </section>

</div>

<!-- Tour Details Popup Modal -->
<div class="mj-tour-modal-backdrop" id="tourDetailsModal">
    <div class="mj-tour-modal-box">
        <button type="button" class="mj-tour-modal-close" onclick="closeTourDetailsModal()" aria-label="Close modal">
            <i class="fa-solid fa-xmark"></i>
        </button>

        <div class="mj-tour-modal-img-wrap">
            <img id="tmodalImg" src="" alt="Tour destination">
            <div class="mj-tour-modal-img-overlay"></div>
            <div class="mj-tour-modal-badges">
                <span class="badge" id="tmodalCategoryBadge" style="background: rgba(212, 167, 98, 0.18); border: 1.5px solid #D4A762; color: #D4A762; font-size: 12px; padding: 6px 12px; font-weight: 700;"></span>
                <span class="badge" id="tmodalDurationBadge" style="background: rgba(8, 10, 14, 0.85); border: 1px solid #D4A762; color: #D4A762; font-size: 12px; padding: 6px 12px;"></span>
            </div>
        </div>

        <div class="mj-tour-modal-body">
            <h3 class="mj-tour-modal-title" id="tmodalTitle"></h3>
            <p class="mj-tour-modal-desc" id="tmodalDesc"></p>

            <div class="mj-tour-modal-detail-card">
                <h5><i class="fa-solid fa-map-location-dot"></i> Planned Itinerary &amp; Highlights</h5>
                <p id="tmodalItinerary"></p>
            </div>

            <div class="mj-tour-modal-detail-card">
                <h5><i class="fa-solid fa-car"></i> Recommended Vehicle</h5>
                <p id="tmodalVehicle"></p>
            </div>

            <div class="mj-tour-modal-detail-card">
                <h5><i class="fa-solid fa-shield-halved"></i> MJ Travel Inclusions</h5>
                <p>Clean sanitized AC cab • Experienced professional highway chauffeur • Punctual doorstep pickup &amp; drops • Dedicated halts for food &amp; sightseeing</p>
            </div>

            <div class="mj-tour-modal-footer">
                <a href="#" id="tmodalWhatsAppBtn" target="_blank" class="btn-modal-wa">
                    <i class="fa-brands fa-whatsapp"></i> Chat on WhatsApp
                </a>
                <a href="#" id="tmodalBookBtn" class="btn-modal-book">
                    <i class="fa-solid fa-calendar-check"></i> Book This Tour
                </a>
            </div>
        </div>
    </div>
</div>

<script>
window.openTourDetailsModal = function (cardElement) {
    if (!cardElement) return;
    const tourDataAttr = cardElement.getAttribute('data-tour');
    if (!tourDataAttr) return;

    try {
        const tour = JSON.parse(tourDataAttr);

        document.getElementById('tmodalImg').src = '{{ asset("") }}' + tour.image;
        document.getElementById('tmodalCategoryBadge').textContent = tour.category;
        document.getElementById('tmodalDurationBadge').textContent = tour.duration || tour.badge;
        document.getElementById('tmodalTitle').textContent = tour.title;
        document.getElementById('tmodalDesc').textContent = tour.desc;
        document.getElementById('tmodalItinerary').textContent = tour.itinerary || tour.desc;
        document.getElementById('tmodalVehicle').textContent = tour.recommended || 'Clean AC Sedan / SUV / Traveller';

        // Pre-filled WhatsApp message
        const waText = "Hello MJ Travels! I want to inquire about booking the *" + tour.title + "* tour package (" + (tour.duration || tour.badge) + "). Please share vehicle availability and tariff details.";
        document.getElementById('tmodalWhatsAppBtn').href = "https://wa.me/918526548059?text=" + encodeURIComponent(waText);

        // Book now button URL
        document.getElementById('tmodalBookBtn').href = "{{ url('/contact-mj-car-rentals') }}?service=Tours&tab=packages&package=" + encodeURIComponent(tour.title) + "#enquiry-form-section";

        const modal = document.getElementById('tourDetailsModal');
        if (modal) modal.classList.add('show');
    } catch (e) {
        console.error('Error parsing tour data:', e);
    }
};

window.closeTourDetailsModal = function () {
    const modal = document.getElementById('tourDetailsModal');
    if (modal) modal.classList.remove('show');
};

document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('tourDetailsModal');
    if (modal) {
        modal.addEventListener('click', function (e) {
            if (e.target === modal) {
                closeTourDetailsModal();
            }
        });
    }

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closeTourDetailsModal();
        }
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enable closing an accordion item when clicking its body
    document.querySelectorAll('#mjTourMainFaqAccordion .accordion-body').forEach(function(body) {
        body.style.cursor = 'pointer';
        body.addEventListener('click', function() {
            var collapseEl = this.closest('.accordion-collapse');
            if (collapseEl && window.bootstrap && window.bootstrap.Collapse) {
                var bsCollapse = bootstrap.Collapse.getInstance(collapseEl) || new bootstrap.Collapse(collapseEl, { toggle: false });
                bsCollapse.hide();
            }
        });
    });
});
</script>


<script>
document.addEventListener('DOMContentLoaded', function() {
    var filterBtns = document.querySelectorAll('#durationFilterGroup .mj-filter-btn');
    var items = document.querySelectorAll('.tour-item-col');
    var badge = document.getElementById('packageCountBadge');

    filterBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            filterBtns.forEach(function(b) { b.classList.remove('active'); });
            this.classList.add('active');

            var filter = this.getAttribute('data-filter');
            var visibleCount = 0;

            items.forEach(function(item) {
                var itemDurations = item.getAttribute('data-durations') || '';
                if (filter === 'all' || itemDurations.indexOf(filter) !== -1) {
                    item.classList.remove('d-none');
                    item.style.setProperty('display', 'flex', 'important');
                    item.style.opacity = '1';
                    visibleCount++;
                } else {
                    item.classList.add('d-none');
                    item.style.setProperty('display', 'none', 'important');
                    item.style.opacity = '0';
                }
            });

            if (badge) {
                badge.textContent = filter === 'all' ? 'Showing All (' + visibleCount + ')' : visibleCount + ' Tours';
            }
        });
    });
});
</script>

<style>
/* ==========================================================================
   MJ TOURS PAGE - FAQ & ACCORDION CUSTOM STYLES
   ========================================================================== */
.mj-tour-faq-item {
    background: #0E121A !important;
    border: 1px solid rgba(212, 167, 98, 0.25) !important;
    border-radius: 12px !important;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.mj-tour-faq-item:hover {
    border-color: #D4A762 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), 0 0 16px rgba(212, 167, 98, 0.15) !important;
    transform: translateY(-2px);
}
.mj-tour-faq-btn {
    background: #0E121A !important;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 15px;
    padding: 16px 20px !important;
    box-shadow: none !important;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    transition: all 0.25s ease;
}
.mj-tour-faq-btn:not(.collapsed) {
    background: linear-gradient(90deg, rgba(212, 167, 98, 0.15) 0%, rgba(14, 18, 26, 0.95) 100%) !important;
    color: #F5C869 !important;
    border-bottom: 1px solid rgba(212, 167, 98, 0.25) !important;
}
.mj-tour-faq-btn::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D4A762'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    filter: drop-shadow(0 0 4px rgba(212, 167, 98, 0.5));
    transition: transform 0.3s ease;
    margin-left: auto;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-size: 16px;
}
.mj-tour-faq-btn:not(.collapsed)::after {
    transform: rotate(-180deg);
}
.mj-tour-faq-badge {
    background: rgba(212, 167, 98, 0.14);
    color: #D4A762;
    border: 1px solid rgba(212, 167, 98, 0.35);
    font-size: 12.5px;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    padding: 3px 9px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.mj-tour-faq-btn:not(.collapsed) .mj-tour-faq-badge {
    background: #D4A762;
    color: #080A0E;
    box-shadow: 0 2px 8px rgba(212, 167, 98, 0.4);
}
.mj-tour-faq-title {
    flex: 1;
    font-size: 14.5px;
    line-height: 1.45;
}
.mj-tour-faq-body {
    background: #090C12 !important;
    color: #CBD5E1 !important;
    font-size: 14.5px;
    line-height: 1.7;
    padding: 18px 22px 22px 22px !important;
    border-top: 1px solid rgba(212, 167, 98, 0.15);
}
@media (max-width: 767.98px) {
    .mj-tour-faq-btn {
        padding: 14px 16px !important;
        font-size: 14px;
        gap: 10px;
    }
    .mj-tour-faq-title {
        font-size: 13.5px;
    }
    .mj-tour-faq-body {
        padding: 14px 16px 18px !important;
        font-size: 13.5px;
    }
}
</style>

@include('footer')