GlobalVoyager Travel Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GlobalVoyager | Premium International Tour Packages</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap">
    
</head>
<body>
    
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <div class="logo-icon">
                    <i class="fas fa-globe-americas"></i>
                </div>
                <div class="logo-text">
                    <h1>GlobalVoyager</h1>
                    <span>Worldwide Travel Experiences</span>
                </div>
            </a>
            
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <i class="fas fa-bars"></i>
            </button>
            
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#destinations">Destinations</a></li>
                    <li><a href="#packages">Packages</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                </ul>
            </nav>
            
            <div class="header-cta">
               
                <button class="btn btn-primary" id="headerCta">Get Quote</button>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content fade-in">
                <h2>Discover the World's Most Extraordinary Destinations</h2>
                <p>Experience seamless international travel with our all-inclusive packages, expert visa assistance, and 24/7 concierge support. Your dream vacation is just a click away.</p>
                
                <div class="hero-btns">
                    <button class="btn btn-primary" id="exploreBtn">
                        <i class="fas fa-compass"></i> Explore Packages
                    </button>
                    <button class="btn btn-secondary" id="consultationBtn">
                        <i class="fas fa-headset"></i> Free Consultation
                    </button>
                </div>
                
                <div class="hero-stats">
                    <div class="stat">
                        <div class="stat-number">15,000+</div>
                        <div class="stat-label">Happy Travelers</div>
                    </div>
                    <div class="stat">
                        <div class="stat-number">50+</div>
                        <div class="stat-label">Countries</div>
                    </div>
                    <div class="stat">
                        <div class="stat-number">98%</div>
                        <div class="stat-label">Visa Success Rate</div>
                    </div>
                    <div class="stat">
                        <div class="stat-number">24/7</div>
                        <div class="stat-label">Support</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="visa-assistance" id="visa">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Stress-Free Visa Assistance</h2>
                <p>Our dedicated visa experts handle everything from documentation to appointment scheduling, ensuring a smooth process for your international travel.</p>
            </div>
            
            <div class="visa-features">
                <div class="visa-feature fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-passport"></i>
                    </div>
                    <h3>Documentation Guide</h3>
                    <p>Comprehensive checklist and assistance for all required documents with personalized guidance for each country.</p>
                </div>
                
                <div class="visa-feature fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <h3>Appointment Scheduling</h3>
                    <p>We schedule and prepare you for visa interviews and appointments with mock sessions and detailed briefings.</p>
                </div>
                
                <div class="visa-feature fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>24/7 Support</h3>
                    <p>Round-the-clock assistance for all your visa-related queries with dedicated visa consultants.</p>
                </div>
                
                <div class="visa-feature fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h3>High Success Rate</h3>
                    <p>98% visa approval rate with our expert guidance, document review, and application strategy.</p>
                </div>
            </div>
        </div>
    </section>

<section class="packages" id="packages">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Curated International Experiences</h2>
                <p>Handpicked journeys to the world's most sought-after destinations. All packages include flights, premium accommodation, and immersive guided tours.</p>
            </div>
            
            <div class="package-filter fade-in">
                <button class="filter-btn active" data-filter="all">All Destinations</button>
                <button class="filter-btn" data-filter="europe">Europe</button>
                <button class="filter-btn" data-filter="asia">Asia</button>
                <button class="filter-btn" data-filter="americas">Americas</button>
                <button class="filter-btn" data-filter="exotic">Exotic</button>
            </div>
            
            <div class="country-packages">
                
                <div class="package-card fade-in" data-category="europe">
                    <div class="package-badge">Most Popular</div>
                    <div class="package-image" style="background-image: url('https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2094&q=80');">
                        <div class="package-overlay">
                            <div class="package-duration">
                                <i class="far fa-calendar"></i> 10 Days / 9 Nights
                            </div>
                            <h3>Italian Delights</h3>
                        </div>
                    </div>
                    <div class="package-details">
                        <p>Rome, Florence, Venice & Amalfi Coast with exclusive wine tasting and cultural experiences.</p>
                        <div class="package-price">$2,899 <span>per person</span></div>
                        <div class="package-features">
                            <div class="package-feature">
                                <i class="fas fa-hotel"></i> 4-Star Hotels
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-utensils"></i> Breakfast Included
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-plane"></i> Flights Included
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-guide"></i> Private Guide
                            </div>
                        </div>
                        <button class="btn btn-primary" style="width: 100%; margin-top: 25px;">View Details</button>
                    </div>
                </div>
                
                
                <div class="package-card fade-in" data-category="asia">
                    <div class="package-badge">Cultural Immersion</div>
                    <div class="package-image" style="background-image: url('https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
                        <div class="package-overlay">
                            <div class="package-duration">
                                <i class="far fa-calendar"></i> 12 Days / 11 Nights
                            </div>
                            <h3>Japanese Cultural Journey</h3>
                        </div>
                    </div>
                    <div class="package-details">
                        <p>Tokyo, Kyoto, Osaka & Mount Fuji with traditional tea ceremonies and bullet train experience.</p>
                        <div class="package-price">$3,499 <span>per person</span></div>
                        <div class="package-features">
                            <div class="package-feature">
                                <i class="fas fa-hotel"></i> Traditional Ryokan
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-utensils"></i> All Meals Included
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-train"></i> Bullet Train Pass
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-gem"></i> Cultural Workshops
                            </div>
                        </div>
                        <button class="btn btn-primary" style="width: 100%; margin-top: 25px;">View Details</button>
                    </div>
                </div>
                
                
                <div class="package-card fade-in" data-category="europe">
                    <div class="package-badge">Adventure</div>
                    <div class="package-image" style="background-image: url('https://images.unsplash.com/photo-1513326738677-b964603b136d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2020&q=80');">
                        <div class="package-overlay">
                            <div class="package-duration">
                                <i class="far fa-calendar"></i> 8 Days / 7 Nights
                            </div>
                            <h3>Swiss Alpine Adventure</h3>
                        </div>
                    </div>
                    <div class="package-details">
                        <p>Zurich, Interlaken, Lucerne & Jungfrau with mountain resorts and premium ski passes.</p>
                        <div class="package-price">$3,199 <span>per person</span></div>
                        <div class="package-features">
                            <div class="package-feature">
                                <i class="fas fa-hotel"></i> Mountain Resorts
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-utensils"></i> Breakfast & Dinner
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-skiing"></i> Ski Pass Included
                            </div>
                            <div class="package-feature">
                                <i class="fas fa-hiking"></i> Guided Hikes
                            </div>
                        </div>
                        <button class="btn btn-primary" style="width: 100%; margin-top: 25px;">View Details</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="itinerary" id="itinerary">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Immersive Itinerary Previews</h2>
                <p>Get a detailed glimpse of what your dream vacation will look like with our day-by-day itineraries.</p>
            </div>
            
            <div class="itinerary-container fade-in">
                <div class="itinerary-header">
                    <div class="itinerary-title">
                        <h3>Italian Delights Tour</h3>
                        <p>10 Days | Rome, Florence, Venice & Amalfi Coast</p>
                    </div>
                    <div class="itinerary-nav">
                        <button class="itinerary-nav-btn" id="prevDay">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="itinerary-nav-btn" id="nextDay">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                
                <div class="itinerary-content">
                    <div class="day-highlights">
                        <h4 id="dayTitle">Day 1-3: Arrival & Ancient Rome</h4>
                        <ul class="day-activities" id="dayActivities">
                            <li>
                                <div class="activity-icon">
                                    <i class="fas fa-plane-arrival"></i>
                                </div>
                                <div>
                                    <strong>Airport pickup</strong> and transfer to 4-star hotel in central Rome with welcome drinks
                                </div>
                            </li>
                            <li>
                                <div class="activity-icon">
                                    <i class="fas fa-landmark"></i>
                                </div>
                                <div>
                                    <strong>Guided tour</strong> of Colosseum, Roman Forum, and Palatine Hill with skip-the-line access
                                </div>
                            </li>
                            <li>
                                <div class="activity-icon">
                                    <i class="fas fa-gopuram"></i>
                                </div>
                                <div>
                                    <strong>Vatican City exploration</strong>: Sistine Chapel and St. Peter's Basilica with expert art historian
                                </div>
                            </li>
                            <li>
                                <div class="activity-icon">
                                    <i class="fas fa-utensils"></i>
                                </div>
                                <div>
                                    <strong>Welcome dinner</strong> at authentic Roman trattoria with wine pairing
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="day-map">
                        <div class="map-placeholder">
                            <i class="fas fa-map-marked-alt" style="font-size: 3rem; margin-bottom: 15px; display: block;"></i>
                            Interactive Tour Map<br>
                            <span style="font-size: 0.9rem;">(Available in detailed itinerary)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Traveler Experiences</h2>
                <p>See what our customers have to say about their journeys with GlobalVoyager.</p>
            </div>
            
            <div class="testimonial-slider fade-in">
                <div class="testimonial-track" id="testimonialTrack">
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            "The Italian tour package exceeded all expectations. Every detail was perfectly planned, and the visa assistance made everything stress-free. Our guide in Florence was exceptionally knowledgeable, and the wine tasting in Tuscany was unforgettable. Can't wait to book our next adventure with GlobalVoyager!"
                        </div>
                        <div class="customer-info">
                            <div class="customer-avatar">SM</div>
                            <div class="customer-details">
                                <h4>Sarah Mitchell</h4>
                                <p>Italian Delights Tour, March 2023</p>
                                <div class="rating">
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            "As first-time travelers to Japan, we were nervous about the language barrier and logistics. GlobalVoyager handled everything seamlessly from visa processing to daily itineraries. The cultural experiences they included were authentic and unforgettable, especially the tea ceremony in Kyoto and the sushi-making class in Tokyo."
                        </div>
                        <div class="customer-info">
                            <div class="customer-avatar">RJ</div>
                            <div class="customer-details">
                                <h4>Robert Johnson</h4>
                                <p>Japanese Cultural Journey, November 2023</p>
                                <div class="rating">
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            "The Swiss Alpine Adventure was a dream come true. The itinerary balanced adventure with relaxation perfectly. Their 24/7 support gave us peace of mind throughout the trip. The ski passes were pre-arranged, and our mountain guide was exceptional. The Swiss fondue evening was the perfect end to each day. Highly recommended!"
                        </div>
                        <div class="customer-info">
                            <div class="customer-avatar">EC</div>
                            <div class="customer-details">
                                <h4>Emma Chen</h4>
                                <p>Swiss Alpine Adventure, January 2024</p>
                                <div class="rating">
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                    <i class="fas fa-star" style="color: #e6b325;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-nav">
                    <button class="testimonial-dot active" data-slide="0"></button>
                    <button class="testimonial-dot" data-slide="1"></button>
                    <button class="testimonial-dot" data-slide="2"></button>
                </div>
            </div>
        </div>
    </section>

<section class="trust-badges">
        <div class="container">
            <div class="section-title fade-in">
                <h2 style="color: #ffffff;">Why Travelers Trust Us</h2>
                <p style="color: #ffffff;">Our credentials and commitments that ensure a reliable and exceptional travel experience.</p>
            </div>
            
            <div class="badges-container">
                <div class="badge fade-in">
                    <div class="badge-icon">
                        <i class="fas fa-award"></i>
                    </div>
                    <h3>ATA Certified</h3>
                    <p>Accredited Travel Agency with 15+ years of excellence</p>
                </div>
                
                <div class="badge fade-in">
                    <div class="badge-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Financial Protection</h3>
                    <p>All bookings 100% financially secured and insured</p>
                </div>
                
                <div class="badge fade-in">
                    <div class="badge-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3>4.9/5 Rating</h3>
                    <p>Based on 2,500+ verified customer reviews</p>
                </div>
                
                <div class="badge fade-in">
                    <div class="badge-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>24/7 Global Support</h3>
                    <p>Dedicated concierge assistance during your entire trip</p>
                </div>
            </div>
        </div>
    </section>

<section class="enquiry-form" id="enquiry">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Start Your Journey</h2>
                <p>Contact us for a personalized quote and itinerary based on your preferences.</p>
            </div>
            
            <div class="form-container fade-in">
                <div class="form-info">
                    <h3>Plan Your Dream Vacation</h3>
                    <p>Our travel experts will contact you within 24 hours to discuss your preferences and create a customized itinerary.</p>
                    
                    <ul>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Personalized itinerary planning</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Expert visa guidance</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Best price guarantee</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>24/7 customer support</span>
                        </li>
                    </ul>
                </div>
                
                <div class="form-content">
                    <form id="enquiryForm">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="fullName">Full Name *</label>
                                <input type="text" id="fullName" required placeholder="John Smith">
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address *</label>
                                <input type="email" id="email" required placeholder="john@example.com">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" id="phone" placeholder="+1 (123) 456-7890">
                            </div>
                            <div class="form-group">
                                <label for="travelers">Number of Travelers</label>
                                <select id="travelers">
                                    <option value="">Select</option>
                                    <option value="1">1 Traveler</option>
                                    <option value="2">2 Travelers</option>
                                    <option value="3-4">3-4 Travelers</option>
                                    <option value="5+">5+ Travelers</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="destination">Preferred Destination</label>
                                <select id="destination">
                                    <option value="">Select Destination</option>
                                    <option value="europe">Europe</option>
                                    <option value="asia">Asia</option>
                                    <option value="americas">Americas</option>
                                    <option value="africa">Africa</option>
                                    <option value="multiple">Multiple Destinations</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="travelDate">Travel Month</label>
                                <input type="month" id="travelDate">
                            </div>
                        </div>
                        
                        <div class="form-group full-width">
                            <label for="message">Additional Requirements</label>
                            <textarea id="message" placeholder="Tell us about your travel preferences, special requirements, or any questions..."></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-primary" style="width: 100%; padding: 18px;">
                            <i class="fas fa-paper-plane"></i> Request Custom Itinerary
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <div class="footer-logo">
                        <div class="logo">
                            <div class="logo-icon" style="width: 40px; height: 40px; font-size: 1.3rem;">
                                <i class="fas fa-globe-americas"></i>
                            </div>
                            <div class="logo-text">
                                <h1 style="font-size: 1.5rem;">GlobalVoyager</h1>
                            </div>
                        </div>
                    </div>
                    <p>Creating unforgettable travel experiences since 2008. We specialize in crafting personalized international tour packages with end-to-end support.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3 class="footer-heading">Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#packages">Tour Packages</a></li>
                        <li><a href="#visa">Visa Assistance</a></li>
                        <li><a href="#itinerary">Itineraries</a></li>
                        <li><a href="#testimonials">Customer Reviews</a></li>
                        <li><a href="#enquiry">Get a Quote</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3 class="footer-heading">Top Destinations</h3>
                    <ul class="footer-links">
                        <li><a href="#">Italy</a></li>
                        <li><a href="#">Japan</a></li>
                        <li><a href="#">Switzerland</a></li>
                        <li><a href="#">Greece</a></li>
                        <li><a href="#">Thailand</a></li>
                        <li><a href="#">Australia</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3 class="footer-heading">Contact Us</h3>
                    <ul class="contact-info">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <div>
                                <strong>GlobalVoyager HQ</strong><br>
                                123 Travel Street, Suite 500<br>
                                New York, NY 10001
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-phone-alt"></i>
                            <div>
                                <strong>Phone</strong><br>
                                +1 (800) 555-TOUR
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-envelope"></i>
                            <div>
                                <strong>Email</strong><br>
                                info@globalvoyager.com
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2024 GlobalVoyager International Tours. All rights reserved. | <a href="#" style="color: rgba(255, 255, 255, 0.8);">Privacy Policy</a> | <a href="#" style="color: rgba(255, 255, 255, 0.8);">Terms & Conditions</a></p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --navy-blue: #0d1b3e;
            --navy-blue-light: #1a2d5e;
            --sky-blue: #3d8bf7;
            --sky-blue-light: #6aa9ff;
            --light-blue: #f0f7ff;
            --accent-gold: #e6b325;
            --accent-teal: #2ab7ca;
            --text-dark: #1a1a2e;
            --text-light: #f8f9fa;
            --gray-light: #e9ecef;
            --gray-medium: #adb5bd;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --border-radius: 12px;
            --border-radius-lg: 20px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Open Sans', sans-serif;
            color: var(--text-dark);
            line-height: 1.7;
            overflow-x: hidden;
            background-color: #f9fbfd;
        }

h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            line-height: 1.3;
        }

.container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

section {
            padding: 100px 0;
        }

.section-title {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

.section-title h2 {
            font-size: 2.8rem;
            color: var(--navy-blue);
            margin-bottom: 16px;
            position: relative;
            display: inline-block;
        }

.section-title h2:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, var(--sky-blue), var(--accent-teal));
            border-radius: 2px;
        }

.section-title p {
            font-size: 1.1rem;
            color: var(--text-dark);
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.85;
        }

.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px 32px;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            border: none;
            outline: none;
            font-family: 'Montserrat', sans-serif;
        }

.btn-primary {
            background: linear-gradient(135deg, var(--sky-blue), var(--sky-blue-light));
            color: white;
            box-shadow: var(--shadow-md);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            background: linear-gradient(135deg, var(--sky-blue-light), var(--sky-blue));
        }

.btn-secondary {
            background-color: white;
            color: var(--navy-blue);
            border: 2px solid var(--navy-blue);
        }

.btn-secondary:hover {
            background-color: var(--navy-blue);
            color: white;
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

/* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(13, 27, 62, 0.95);
            backdrop-filter: blur(10px);
            padding: 20px 0;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
        }

header.scrolled {
            padding: 12px 0;
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
            text-decoration: none;
        }

.logo-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--sky-blue), var(--accent-teal));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
        }

.logo-text {
            display: flex;
            flex-direction: column;
        }

.logo-text h1 {
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1;
            margin: 0;
        }

.logo-text span {
            font-size: 0.85rem;
            opacity: 0.9;
            font-weight: 300;
            margin-top: 3px;
        }

nav ul {
            display: flex;
            list-style: none;
            gap: 40px;
        }

nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            position: relative;
            padding: 5px 0;
            transition: var(--transition);
        }

nav a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--sky-blue);
            transition: var(--transition);
        }

nav a:hover {
            color: var(--sky-blue);
        }

nav a:hover:after {
            width: 100%;
        }

.header-cta {
            display: flex;
            align-items: center;
            gap: 20px;
        }

.phone-number {
            display: flex;
            align-items: center;
            gap: 8px;
            color: white;
            font-weight: 600;
        }

.phone-number i {
            color: var(--accent-gold);
            font-size: 1.2rem;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            background: linear-gradient(rgba(13, 27, 62, 0.9), rgba(58, 139, 247, 0.7)), url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            padding: 180px 0 120px;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

.hero-content {
            max-width: 800px;
        }

.hero h2 {
            font-size: 3.8rem;
            margin-bottom: 24px;
            line-height: 1.2;
        }

.hero p {
            font-size: 1.3rem;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 700px;
        }

.hero-btns {
            display: flex;
            gap: 20px;
            margin-bottom: 60px;
        }

.hero-stats {
            display: flex;
            gap: 40px;
            margin-top: 60px;
        }

.stat {
            display: flex;
            flex-direction: column;
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-gold);
            line-height: 1;
        }

.stat-label {
            font-size: 1rem;
            opacity: 0.9;
        }

/* Visa Assistance */
        .visa-assistance {
            background-color: var(--light-blue);
            position: relative;
            overflow: hidden;
        }

.visa-assistance:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(61, 139, 247, 0.1) 0%, rgba(61, 139, 247, 0) 70%);
            border-radius: 50%;
        }

.visa-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

.visa-feature {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.visa-feature:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--sky-blue), var(--accent-teal));
        }

.visa-feature:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

.feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--light-blue), #e3f0ff);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2rem;
            color: var(--sky-blue);
        }

.visa-feature h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--navy-blue);
        }

/* Packages */
        .packages {
            background-color: white;
        }

.package-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;
        }

.filter-btn {
            padding: 12px 28px;
            background-color: var(--gray-light);
            border: none;
            border-radius: 50px;
            font-weight: 600;
            color: var(--navy-blue);
            cursor: pointer;
            transition: var(--transition);
        }

.filter-btn.active, .filter-btn:hover {
            background: linear-gradient(135deg, var(--sky-blue), var(--accent-teal));
            color: white;
        }

.country-packages {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 30px;
        }

.package-card {
            background-color: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            position: relative;
        }

.package-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-lg);
        }

.package-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: var(--accent-gold);
            color: white;
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            z-index: 2;
        }

.package-image {
            height: 240px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

.package-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
        }

.package-duration {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

.package-details {
            padding: 30px;
        }

.package-details h3 {
            font-size: 1.6rem;
            margin-bottom: 10px;
            color: var(--navy-blue);
        }

.package-price {
            color: var(--sky-blue);
            font-size: 1.8rem;
            font-weight: 700;
            margin: 15px 0;
        }

.package-price span {
            font-size: 1rem;
            color: var(--gray-medium);
            font-weight: 400;
        }

.package-features {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }

.package-feature {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: var(--gray-medium);
        }

.package-feature i {
            color: var(--accent-teal);
        }

/* Itinerary */
        .itinerary {
            background-color: var(--light-blue);
        }

.itinerary-container {
            background-color: white;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

.itinerary-header {
            display: flex;
            background-color: var(--navy-blue);
            color: white;
            padding: 25px 40px;
        }

.itinerary-title {
            flex: 1;
        }

.itinerary-title h3 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }

.itinerary-nav {
            display: flex;
            gap: 15px;
        }

.itinerary-nav-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

.itinerary-nav-btn:hover {
            background-color: var(--sky-blue);
        }

.itinerary-content {
            padding: 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

.day-highlights {
            background-color: var(--light-blue);
            border-radius: var(--border-radius);
            padding: 30px;
        }

.day-highlights h4 {
            font-size: 1.4rem;
            margin-bottom: 20px;
            color: var(--navy-blue);
        }

.day-activities {
            list-style: none;
        }

.day-activities li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

.day-activities li:last-child {
            border-bottom: none;
        }

.activity-icon {
            width: 40px;
            height: 40px;
            background-color: var(--sky-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
        }

.day-map {
            background-color: #f5f5f5;
            border-radius: var(--border-radius);
            overflow: hidden;
            position: relative;
        }

.map-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
            color: var(--gray-medium);
            font-weight: 600;
        }

/* Testimonials */
        .testimonials {
            position: relative;
            overflow: hidden;
        }

.testimonials:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(61, 139, 247, 0.05) 0%, rgba(61, 139, 247, 0) 70%);
            border-radius: 50%;
        }

.testimonial-slider {
            position: relative;
            overflow: hidden;
            max-width: 900px;
            margin: 0 auto;
        }

.testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }

.testimonial-card {
            min-width: 100%;
            background-color: white;
            border-radius: var(--border-radius);
            padding: 50px;
            box-shadow: var(--shadow-md);
            position: relative;
        }

.testimonial-card:before {
            content: "\201C";
            font-size: 10rem;
            color: rgba(61, 139, 247, 0.1);
            position: absolute;
            top: -30px;
            left: 20px;
            font-family: serif;
            line-height: 1;
        }

.testimonial-text {
            font-size: 1.2rem;
            line-height: 1.8;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }

.customer-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

.customer-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--sky-blue), var(--accent-teal));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            font-weight: 700;
        }

.customer-details h4 {
            font-size: 1.3rem;
            margin-bottom: 5px;
            color: var(--navy-blue);
        }

.customer-details p {
            color: var(--gray-medium);
        }

.testimonial-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 40px;
        }

.testimonial-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--gray-light);
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

.testimonial-dot.active {
            background-color: var(--sky-blue);
            transform: scale(1.2);
        }

/* Trust Badges */
        .trust-badges {
            background-color: var(--navy-blue);
            color: white;
            position: relative;
            overflow: hidden;
        }

.trust-badges:before {
            content: '';
            position: absolute;
            top: -150px;
            right: -150px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
            border-radius: 50%;
        }

.badges-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }

.badge {
            text-align: center;
            position: relative;
            z-index: 1;
        }

.badge-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2.5rem;
            color: var(--accent-gold);
        }

.badge h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

/* Enquiry Form */
        .enquiry-form {
            background-color: white;
        }

.form-container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            display: grid;
            grid-template-columns: 1fr 1.5fr;
        }

.form-info {
            background: linear-gradient(135deg, var(--navy-blue), var(--navy-blue-light));
            color: white;
            padding: 60px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.form-info h3 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

.form-info ul {
            list-style: none;
            margin-top: 30px;
        }

.form-info li {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

.form-info li i {
            color: var(--accent-gold);
            font-size: 1.2rem;
        }

.form-content {
            padding: 60px 50px;
        }

.form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 25px;
        }

.form-group {
            margin-bottom: 25px;
        }

.form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--navy-blue);
        }

.form-group input, 
        .form-group select, 
        .form-group textarea {
            width: 100%;
            padding: 16px 20px;
            border: 1px solid var(--gray-light);
            border-radius: 10px;
            font-size: 1rem;
            font-family: 'Open Sans', sans-serif;
            transition: var(--transition);
        }

.form-group input:focus, 
        .form-group select:focus, 
        .form-group textarea:focus {
            outline: none;
            border-color: var(--sky-blue);
            box-shadow: 0 0 0 3px rgba(61, 139, 247, 0.1);
        }

.form-group.full-width {
            grid-column: 1 / -1;
        }

/* Footer */
        footer {
            background-color: var(--navy-blue);
            color: white;
            padding: 80px 0 30px;
        }

.footer-content {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 50px;
            margin-bottom: 60px;
        }

.footer-logo {
            margin-bottom: 25px;
        }

.footer-about p {
            opacity: 0.8;
            margin-bottom: 25px;
        }

.social-links {
            display: flex;
            gap: 15px;
        }

.social-link {
            width: 45px;
            height: 45px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }

.social-link:hover {
            background-color: var(--sky-blue);
            transform: translateY(-5px);
        }

.footer-heading {
            font-size: 1.3rem;
            margin-bottom: 30px;
            color: white;
            position: relative;
            padding-bottom: 15px;
        }

.footer-heading:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background-color: var(--sky-blue);
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 15px;
        }

.footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: var(--transition);
        }

.footer-links a:hover {
            color: var(--sky-blue);
            padding-left: 5px;
        }

.contact-info {
            list-style: none;
        }

.contact-info li {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            margin-bottom: 20px;
        }

.contact-info i {
            color: var(--sky-blue);
            font-size: 1.2rem;
            margin-top: 3px;
        }

.copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            .container {
                max-width: 1000px;
            }
            
            .hero h2 {
                font-size: 3.2rem;
            }
        }

@media (max-width: 992px) {
            .header-container {
                padding: 0 20px;
            }
            
            nav {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h2 {
                font-size: 2.8rem;
            }
            
            .itinerary-content {
                grid-template-columns: 1fr;
            }
            
            .form-container {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
        }

@media (max-width: 768px) {
            section {
                padding: 70px 0;
            }
            
            .section-title h2 {
                font-size: 2.2rem;
            }
            
            .hero {
                padding: 150px 0 80px;
                min-height: auto;
            }
            
            .hero h2 {
                font-size: 2.3rem;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .hero-stats {
                flex-wrap: wrap;
                gap: 30px;
            }
            
            .country-packages {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 576px) {
            .container {
                padding: 0 20px;
            }
            
            .hero h2 {
                font-size: 2rem;
            }
            
            .package-filter {
                flex-direction: column;
                align-items: center;
            }
            
            .form-content {
                padding: 40px 30px;
            }
            
            .form-info {
                padding: 40px 30px;
            }
        }

/* Animation Classes */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

JavaScript

// DOM Elements
        const header = document.getElementById('header');
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const exploreBtn = document.getElementById('exploreBtn');
        const consultationBtn = document.getElementById('consultationBtn');
        const headerCta = document.getElementById('headerCta');
        const filterBtns = document.querySelectorAll('.filter-btn');
        const packageCards = document.querySelectorAll('.package-card');
        const prevDayBtn = document.getElementById('prevDay');
        const nextDayBtn = document.getElementById('nextDay');
        const testimonialTrack = document.getElementById('testimonialTrack');
        const testimonialDots = document.querySelectorAll('.testimonial-dot');
        const enquiryForm = document.getElementById('enquiryForm');
        const fadeElements = document.querySelectorAll('.fade-in');
        
        // Itinerary data
        const itineraryData = [
            {
                title: "Day 1-3: Arrival & Ancient Rome",
                activities: [
                    "Airport pickup and transfer to 4-star hotel in central Rome with welcome drinks",
                    "Guided tour of Colosseum, Roman Forum, and Palatine Hill with skip-the-line access",
                    "Vatican City exploration: Sistine Chapel and St. Peter's Basilica with expert art historian",
                    "Welcome dinner at authentic Roman trattoria with wine pairing"
                ]
            },
            {
                title: "Day 4-6: Renaissance Florence & Tuscany",
                activities: [
                    "High-speed train from Rome to Florence with scenic countryside views",
                    "Skip-the-line access to Uffizi Gallery and Accademia (Michelangelo's David)",
                    "Day trip to Chianti region with vineyard tour and premium wine tasting",
                    "Visit Ponte Vecchio, Duomo di Firenze, and Piazza della Signoria"
                ]
            },
            {
                title: "Day 7-10: Venetian Canals & Departure",
                activities: [
                    "Scenic transfer from Florence to Venice via luxury coach",
                    "Gondola ride through Grand Canal and hidden waterways with local gondolier",
                    "Tour of St. Mark's Basilica, Doge's Palace, and Bell Tower",
                    "Day trip to Murano (glass blowing) and Burano (colorful houses) islands"
                ]
            }
        ];
        
        let currentDay = 0;
        let currentSlide = 0;
        
        // Header scroll effect
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Mobile menu toggle
        mobileMenuBtn.addEventListener('click', () => {
            const nav = document.querySelector('nav');
            nav.style.display = nav.style.display === 'block' ? 'none' : 'block';
        });
        
        // Smooth scrolling for navigation links
        document.querySelectorAll('nav a, .footer-links a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    if (window.innerWidth <= 992) {
                        document.querySelector('nav').style.display = 'none';
                    }
                }
            });
        });
        
        // CTA buttons
        exploreBtn.addEventListener('click', () => {
            document.querySelector('#packages').scrollIntoView({ behavior: 'smooth' });
        });
        
        consultationBtn.addEventListener('click', () => {
            document.querySelector('#enquiry').scrollIntoView({ behavior: 'smooth' });
        });
        
        headerCta.addEventListener('click', () => {
            document.querySelector('#enquiry').scrollIntoView({ behavior: 'smooth' });
        });
        
        // Package filtering
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class from all buttons
                filterBtns.forEach(b => b.classList.remove('active'));
                // Add active class to clicked button
                btn.classList.add('active');
                
                const filter = btn.getAttribute('data-filter');
                
                packageCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });
        
        // Itinerary navigation
        function updateItinerary() {
            const dayTitle = document.getElementById('dayTitle');
            const dayActivities = document.getElementById('dayActivities');
            const data = itineraryData[currentDay];
            
            dayTitle.textContent = data.title;
            dayActivities.innerHTML = '';
            
            data.activities.forEach((activity, index) => {
                const icons = ['fa-plane-arrival', 'fa-landmark', 'fa-gopuram', 'fa-utensils'];
                const li = document.createElement('li');
                li.innerHTML = `
                    <div class="activity-icon">
                        <i class="fas ${icons[index] || 'fa-map-marker-alt'}"></i>
                    </div>
                    <div>
                        <strong>${activity.split(':')[0]}</strong>${activity.includes(':') ? ':' + activity.split(':')[1] : ''}
                    </div>
                `;
                dayActivities.appendChild(li);
            });
        }
        
        prevDayBtn.addEventListener('click', () => {
            currentDay = currentDay === 0 ? itineraryData.length - 1 : currentDay - 1;
            updateItinerary();
        });
        
        nextDayBtn.addEventListener('click', () => {
            currentDay = currentDay === itineraryData.length - 1 ? 0 : currentDay + 1;
            updateItinerary();
        });
        
        // Testimonial slider
        function updateTestimonialSlider() {
            const slideWidth = document.querySelector('.testimonial-card').clientWidth;
            testimonialTrack.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
            
            testimonialDots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentSlide);
            });
        }
        
        testimonialDots.forEach(dot => {
            dot.addEventListener('click', () => {
                currentSlide = parseInt(dot.getAttribute('data-slide'));
                updateTestimonialSlider();
            });
        });
        
        // Auto-advance testimonials
        setInterval(() => {
            currentSlide = (currentSlide + 1) % testimonialDots.length;
            updateTestimonialSlider();
        }, 5000);
        
        // Form submission
        enquiryForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('fullName').value;
            const email = document.getElementById('email').value;
            
            // In a real application, you would send this data to a server
            // For this demo, we'll just show a success message
            alert(`Thank you ${name}! We have received your enquiry and will contact you at ${email} within 24 hours.`);
            
            // Reset form
            enquiryForm.reset();
        });
        
        // Scroll animations
        function checkFade() {
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (elementTop < windowHeight - 100) {
                    element.classList.add('visible');
                }
            });
        }
        
        window.addEventListener('scroll', checkFade);
        window.addEventListener('load', checkFade);
        
        // Initialize
        updateItinerary();
        updateTestimonialSlider();
        
        // Close mobile menu when clicking outside
        document.addEventListener('click', (e) => {
            const nav = document.querySelector('nav');
            if (window.innerWidth <= 992 && nav.style.display === 'block' && 
                !e.target.closest('nav') && !e.target.closest('#mobileMenuBtn')) {
                nav.style.display = 'none';
            }
        });

GlobalVoyager Travel Template Preview

Download Options