Divine Yatra 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>Divine Yatra | Spiritual Pilgrimage Tours</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
    
</head>
<body>
    
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <i class="fas fa-om logo-icon"></i>
                <div class="logo-text">Divine<span>Yatra</span></div>
            </a>

<nav id="mainNav">
                <ul>
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#destinations">Destinations</a></li>
                    <li><a href="#packages">Packages</a></li>
                    <li><a href="#accommodation">Stay</a></li>
                    <li><a href="#testimonials">Experiences</a></li>
                    <li><a href="#enquiry" class="btn">Enquire Now</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Journey to the Divine</h1>
                <p>Embark on a sacred pilgrimage that nourishes the soul and brings you closer to enlightenment. Experience spiritual transformation with our carefully curated yatras to India's holiest sites.</p>
                <div class="hero-btns">
                    <a href="#destinations" class="btn">Explore Sacred Destinations</a>
                    <a href="#enquiry" class="btn btn-outline">Plan Your Pilgrimage</a>
                </div>
            </div>
        </div>
    </section>

<section class="stats">
        <div class="container">
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-number" data-count="5000">0</div>
                    <div class="stat-text">Pilgrims Guided</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="50">0</div>
                    <div class="stat-text">Sacred Destinations</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="15">0</div>
                    <div class="stat-text">Years of Service</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="98">0</div>
                    <div class="stat-text">Satisfaction Rate</div>
                </div>
            </div>
        </div>
    </section>

<section class="destinations" id="destinations">
        <div class="container">
            <div class="section-title">
                <h2>Sacred Destinations</h2>
                <p>Journey to India's most revered pilgrimage sites, each offering unique spiritual experiences and divine blessings.</p>
            </div>

<div class="destinations-grid">
                <div class="destination-card">
                    <div class="destination-overlay"></div>
                    <img src="https://images.unsplash.com/photo-1627938823193-fd13c1c867dd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8VmFyYW5hc2l8ZW58MHx8MHx8fDA%3D" alt="Varanasi" class="destination-image">
                    <div class="destination-content">
                        <h3>Varanasi</h3>
                        <p>The eternal city on the banks of the sacred Ganges, where spirituality permeates every ghat and temple.</p>
                        <div class="destination-meta">
                            <div class="destination-duration">
                                <i class="far fa-calendar-alt"></i>
                                <span>4-7 Days</span>
                            </div>
                            <a href="#enquiry" class="btn">Plan Visit</a>
                        </div>
                    </div>
                </div>

<div class="destination-card">
                    <div class="destination-overlay"></div>
                    <img src="https://images.unsplash.com/photo-1601821139990-9fc929db79ce?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8QmFkcmluYXRofGVufDB8fDB8fHww" alt="Badrinath" class="destination-image">
                    <div class="destination-content">
                        <h3>Badrinath</h3>
                        <p>Nestled in the Himalayas, this sacred abode of Lord Vishnu is one of the Char Dham pilgrimage sites.</p>
                        <div class="destination-meta">
                            <div class="destination-duration">
                                <i class="far fa-calendar-alt"></i>
                                <span>10-12 Days</span>
                            </div>
                            <a href="#enquiry" class="btn">Plan Visit</a>
                        </div>
                    </div>
                </div>

<div class="destination-card">
                    <div class="destination-overlay"></div>
                    <img src="https://images.unsplash.com/photo-1706932642959-97cdde19ef0b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8UmFtZXN3YXJhbXxlbnwwfHwwfHx8MA%3D%3D" alt="Rameswaram" class="destination-image">
                    <div class="destination-content">
                        <h3>Rameswaram</h3>
                        <p>Renowned for its legendary Ramanathaswamy Temple, this sacred island is a key pilgrimage site for devotees.</p>
                        <div class="destination-meta">
                            <div class="destination-duration">
                                <i class="far fa-calendar-alt"></i>
                                <span>5-8 Days</span>
                            </div>
                            <a href="#enquiry" class="btn">Plan Visit</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="packages" id="packages">
        <div class="container">
            <div class="section-title">
                <h2>Pilgrimage Packages</h2>
                <p>Choose from our thoughtfully designed packages that cater to different spiritual needs and preferences.</p>
            </div>

<div class="packages-container">
                <div class="package-card">
                    <div class="package-badge">Most Popular</div>
                    <div class="package-header">
                        <h3>Char Dham Yatra</h3>
                        <p>Complete pilgrimage to the four sacred Himalayan abodes</p>
                        <div class="package-price">₹89,999 <span>/ person</span></div>
                    </div>
                    <div class="package-features">
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>12 Days / 11 Nights</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>All Meals Included</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Expert Spiritual Guide</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Luxury Accommodation</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Helicopter Service Available</span>
                        </div>
                    </div>
                    <div class="package-footer">
                        <a href="#enquiry" class="btn">Book This Journey</a>
                    </div>
                </div>

<div class="package-card">
                    <div class="package-header">
                        <h3>South India Temple Tour</h3>
                        <p>Explore the majestic temples of Tamil Nadu and Kerala</p>
                        <div class="package-price">₹64,999 <span>/ person</span></div>
                    </div>
                    <div class="package-features">
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>10 Days / 9 Nights</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Breakfast & Dinner</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Temple Darshan Arrangements</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>4-Star Accommodation</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Cultural Performances</span>
                        </div>
                    </div>
                    <div class="package-footer">
                        <a href="#enquiry" class="btn">Book This Journey</a>
                    </div>
                </div>

<div class="package-card">
                    <div class="package-badge">New</div>
                    <div class="package-header">
                        <h3>Varanasi & Prayagraj</h3>
                        <p>Spiritual journey along the sacred Ganges River</p>
                        <div class="package-price">₹42,999 <span>/ person</span></div>
                    </div>
                    <div class="package-features">
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>7 Days / 6 Nights</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>All Meals Included</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Boat Ride on Ganges</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Heritage Hotel Stay</span>
                        </div>
                        <div class="package-feature">
                            <i class="fas fa-check-circle"></i>
                            <span>Evening Aarti Experience</span>
                        </div>
                    </div>
                    <div class="package-footer">
                        <a href="#enquiry" class="btn">Book This Journey</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="itinerary" id="itinerary">
        <div class="container">
            <div class="section-title">
                <h2>Journey Itinerary</h2>
                <p>Experience a well-planned spiritual journey with daily activities designed for maximum spiritual benefit.</p>
            </div>

<div class="itinerary-container">
                <div class="itinerary-timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker">Day 1</div>
                        <div class="timeline-content">
                            <h3>Arrival in Delhi</h3>
                            <p>Welcome ceremony with traditional tilak and garlanding. Orientation session about the pilgrimage journey. Evening meditation and satsang. Overnight stay in Delhi hotel with vegetarian dinner.</p>
                        </div>
                    </div>

<div class="timeline-item">
                        <div class="timeline-marker">Day 2</div>
                        <div class="timeline-content">
                            <h3>Delhi to Haridwar</h3>
                            <p>Travel to Haridwar, the gateway to the Gods. Check into riverside hotel. Evening Ganga Aarti at Har Ki Pauri - a mesmerizing spiritual experience. Overnight stay in Haridwar with sattvic meals.</p>
                        </div>
                    </div>

<div class="timeline-item">
                        <div class="timeline-marker">Day 3</div>
                        <div class="timeline-content">
                            <h3>Haridwar to Barkot</h3>
                            <p>Scenic journey to Barkot with breathtaking Himalayan views. Visit Yamunotri Temple after a short trek. Participate in evening prayers and meditation. Overnight stay in Barkot with mountain views.</p>
                        </div>
                    </div>

<div class="timeline-item">
                        <div class="timeline-marker">Day 4</div>
                        <div class="timeline-content">
                            <h3>Barkot to Uttarkashi</h3>
                            <p>Travel to Uttarkashi. Visit Gangotri Temple, the sacred source of River Ganges. Perform rituals and puja with guidance from our priest. Evening spiritual discourse. Overnight stay in Uttarkashi.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="accommodation" id="accommodation">
        <div class="container">
            <div class="section-title">
                <h2>Sacred Stays</h2>
                <p>Experience comfortable and spiritually conducive accommodation during your pilgrimage journey.</p>
            </div>

<div class="accommodation-slider swiper">
                <div class="swiper-wrapper">
                    <div class="accommodation-slide swiper-slide">
                        <img src="https://images.unsplash.com/photo-1611892440504-42a792e24d32?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Heritage Stay" class="accommodation-image">
                        <div class="accommodation-overlay">
                            <h3>Heritage Stays</h3>
                            <p>Experience traditional architecture and authentic hospitality at our carefully selected heritage properties near sacred sites. These accommodations offer a unique blend of historical charm and modern comforts.</p>
                            <div class="accommodation-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <span>4.5/5</span>
                            </div>
                        </div>
                    </div>

<div class="accommodation-slide swiper-slide">
                        <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Luxury Accommodation" class="accommodation-image">
                        <div class="accommodation-overlay">
                            <h3>Luxury Accommodation</h3>
                            <p>Modern amenities with spiritual ambiance. Our luxury stays offer comfort after a day of pilgrimage and reflection. Enjoy premium facilities while maintaining the spiritual focus of your journey.</p>
                            <div class="accommodation-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <span>5/5</span>
                            </div>
                        </div>
                    </div>

<div class="accommodation-slide swiper-slide">
                        <img src="https://plus.unsplash.com/premium_photo-1697729444936-8c6a6f643312?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8UmFtZXN3YXJhbXxlbnwwfHwwfHx8MA%3D%3D" alt="Ashram Stay" class="accommodation-image">
                        <div class="accommodation-overlay">
                            <h3>Ashram Experience</h3>
                            <p>For those seeking an immersive spiritual experience, we offer stays in authentic ashrams. Participate in daily routines, meditation sessions, and satsangs while living simply and spiritually.</p>
                            <div class="accommodation-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <span>4/5</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Divine Experiences</h2>
                <p>Hear from pilgrims who have transformed their lives through our spiritual journeys.</p>
            </div>

<div class="testimonials-container">
                <div class="testimonial-slider swiper">
                    <div class="swiper-wrapper">
                        <div class="testimonial-card swiper-slide">
                            <p class="testimonial-text">"The Char Dham Yatra with Divine Yatra was a life-changing experience. Every detail was taken care of, allowing us to focus entirely on our spiritual journey. The guides were knowledgeable and compassionate, making this pilgrimage the most meaningful experience of my life."</p>
                            <div class="testimonial-author">
                                <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Mrs. Sharma" class="author-avatar">
                                <div class="author-info">
                                    <h4>Mrs. Anjali Sharma</h4>
                                    <p>Char Dham Yatra, 2023</p>
                                </div>
                            </div>
                        </div>

<div class="testimonial-card swiper-slide">
                            <p class="testimonial-text">"As a senior citizen, I was concerned about the physical demands of pilgrimage. Divine Yatra made special arrangements that made the journey comfortable and accessible. Their care and attention were exceptional. The spiritual guides helped me connect deeply with each sacred site."</p>
                            <div class="testimonial-author">
                                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Mr. Patel" class="author-avatar">
                                <div class="author-info">
                                    <h4>Mr. Rajesh Patel</h4>
                                    <p>Varanasi Tour, 2023</p>
                                </div>
                            </div>
                        </div>

<div class="testimonial-card swiper-slide">
                            <p class="testimonial-text">"The South India Temple Tour exceeded all expectations. The accommodations were excellent, the food was authentic and sattvic, and the spiritual guidance was profound. I returned home not just with memories, but with a renewed sense of purpose and peace."</p>
                            <div class="testimonial-author">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ms. Desai" class="author-avatar">
                                <div class="author-info">
                                    <h4>Ms. Priya Desai</h4>
                                    <p>South India Tour, 2023</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </section>

<section class="enquiry" id="enquiry">
        <div class="container">
            <div class="section-title">
                <h2 style="color: white;">Begin Your Spiritual Journey</h2>
                <p style="color: rgba(255, 255, 255, 0.9);">Fill out the form below, and our pilgrimage experts will help you plan the perfect spiritual journey.</p>
            </div>

<div class="enquiry-container">
                <div class="enquiry-form">
                    <h3>Plan Your Pilgrimage</h3>
                    <form id="pilgrimageForm">
                        <div class="form-grid">
                            <div class="form-group">
                                <label for="name">Full Name *</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="email">Email Address *</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="phone">Phone Number *</label>
                                <input type="tel" id="phone" name="phone" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="package">Select Package</label>
                                <select id="package" name="package">
                                    <option value="">Choose a package</option>
                                    <option value="char-dham">Char Dham Yatra</option>
                                    <option value="south-india">South India Temple Tour</option>
                                    <option value="varanasi">Varanasi & Prayagraj</option>
                                    <option value="custom">Custom Pilgrimage</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="travel-date">Preferred Travel Date</label>
                                <input type="date" id="travel-date" name="travel-date">
                            </div>
                            
                            <div class="form-group">
                                <label for="people">Number of Pilgrims</label>
                                <select id="people" name="people">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3-5">3-5</option>
                                    <option value="6-10">6-10</option>
                                    <option value="10+">10+</option>
                                </select>
                            </div>
                            
                            <div class="form-group full-width">
                                <label for="message">Additional Requirements</label>
                                <textarea id="message" name="message" rows="4" placeholder="Tell us about any special requirements, dietary restrictions, or specific spiritual needs..."></textarea>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn submit-btn">Submit Enquiry</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-column">
                    <h3>Divine Yatra</h3>
                    <p style="color: rgba(255, 255, 255, 0.7); margin-bottom: 20px;">Guiding pilgrims on spiritual journeys since 2008. We are committed to providing authentic, meaningful, and comfortable pilgrimage experiences.</p>
                    <div style="color: rgba(255, 255, 255, 0.7); margin-bottom: 10px;">
                        <i class="fas fa-phone" style="margin-right: 10px;"></i> +91 98765 43210
                    </div>
                    <div style="color: rgba(255, 255, 255, 0.7);">
                        <i class="fas fa-envelope" style="margin-right: 10px;"></i> info@divineyatra.com
                    </div>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home"><i class="fas fa-chevron-right"></i> Home</a></li>
                        <li><a href="#destinations"><i class="fas fa-chevron-right"></i> Destinations</a></li>
                        <li><a href="#packages"><i class="fas fa-chevron-right"></i> Packages</a></li>
                        <li><a href="#itinerary"><i class="fas fa-chevron-right"></i> Itinerary</a></li>
                        <li><a href="#accommodation"><i class="fas fa-chevron-right"></i> Accommodation</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Popular Yatras</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Char Dham Yatra</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Amarnath Yatra</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Vaishno Devi Yatra</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> 12 Jyotirlinga Yatra</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> South India Temple Tour</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 Divine Yatra. All rights reserved. | Designed with devotion for spiritual seekers</p>
            </div>
        </div>
    </footer>

<div class="back-to-top" id="backToTop">
        <i class="fas fa-chevron-up"></i>
    </div>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    
</body>
</html>

CSS

:root {
            --saffron: #FF8C32;
            --saffron-light: #FFB26B;
            --saffron-lighter: #FFD8B5;
            --saffron-dark: #E67329;
            --white: #FFFFFF;
            --off-white: #FEFAF6;
            --light-gray: #F5F5F5;
            --medium-gray: #E8E8E8;
            --text-dark: #2D2D2D;
            --text-medium: #555555;
            --text-light: #777777;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.05);
            --border-radius: 12px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }

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

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Poppins', sans-serif;
            color: var(--text-dark);
            background-color: var(--off-white);
            line-height: 1.7;
            overflow-x: hidden;
        }

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

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

.section-title h2 {
            font-size: 2.8rem;
            display: inline-block;
            position: relative;
            padding-bottom: 20px;
            color: var(--text-dark);
        }

.section-title h2::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--saffron), var(--saffron-light));
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            border-radius: 2px;
        }

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

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

.btn {
            display: inline-block;
            background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
            color: var(--white);
            border: none;
            padding: 16px 34px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            text-align: center;
            box-shadow: 0 5px 20px rgba(255, 140, 50, 0.3);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--saffron-dark), var(--saffron));
            transition: left 0.5s ease;
            z-index: -1;
        }

.btn:hover::before {
            left: 0;
        }

.btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255, 140, 50, 0.4);
        }

.btn-outline {
            background: transparent;
            border: 2px solid var(--saffron);
            color: var(--saffron);
            box-shadow: none;
        }

.btn-outline::before {
            background: var(--saffron);
        }

.btn-outline:hover {
            color: var(--white);
        }

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

header.scrolled {
            padding: 10px 0;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            transition: var(--transition);
        }

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

.logo-icon {
            color: var(--saffron);
            font-size: 32px;
            filter: drop-shadow(0 3px 5px rgba(255, 140, 50, 0.3));
        }

.logo-text {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--text-dark);
        }

.logo-text span {
            color: var(--saffron);
        }

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

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

nav a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--saffron);
            left: 0;
            bottom: 0;
            transition: width 0.3s ease;
            border-radius: 1px;
        }

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

nav a:hover::after,
        nav a.active::after {
            width: 100%;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--saffron);
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            padding: 180px 0 120px;
            background: linear-gradient(rgba(0, 0, 0, 0.384), rgba(0, 0, 0, 0.411)), 
                        url('https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dG9reW98ZW58MHx8MHx8fDA%3D');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: var(--white);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.3;
        }

.hero-content {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 25px;
            color: var(--white);
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            line-height: 1.2;
        }

.hero p {
            font-size: 1.3rem;
            margin-bottom: 40px;
            color: rgba(255, 255, 255, 0.9);
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

.hero-btns {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

/* Stats Section */
        .stats {
            background-color: var(--white);
            padding: 80px 0;
            box-shadow: var(--shadow);
            margin-top: -60px;
            position: relative;
            z-index: 5;
            border-radius: 0 0 30px 30px;
        }

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

.stat-item {
            text-align: center;
            padding: 20px;
        }

.stat-number {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--saffron);
            margin-bottom: 10px;
            font-family: 'Playfair Display', serif;
        }

.stat-text {
            font-size: 1.1rem;
            color: var(--text-medium);
            font-weight: 500;
        }

/* Destinations */
        .destinations {
            padding: 120px 0 100px;
            background-color: var(--light-gray);
        }

.destinations-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 40px;
        }

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

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

.destination-image {
            height: 250px;
            width: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.destination-card:hover .destination-image {
            transform: scale(1.05);
        }

.destination-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8));
            z-index: 1;
        }

.destination-content {
            padding: 25px;
            position: relative;
            z-index: 2;
        }

.destination-content h3 {
            font-size: 1.6rem;
            margin-bottom: 10px;
            color: var(--text-dark);
        }

.destination-content p {
            color: var(--text-medium);
            margin-bottom: 20px;
        }

.destination-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--medium-gray);
        }

.destination-duration {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--saffron);
            font-weight: 500;
        }

/* Packages */
        .packages {
            padding: 120px 0;
            background-color: var(--white);
        }

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

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

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

.package-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
            color: var(--white);
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            z-index: 3;
            box-shadow: 0 5px 15px rgba(255, 140, 50, 0.3);
        }

.package-header {
            padding: 30px 30px 20px;
            border-bottom: 1px solid var(--medium-gray);
        }

.package-header h3 {
            font-size: 1.8rem;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

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

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

.package-features {
            padding: 30px;
        }

.package-feature {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 18px;
        }

.package-feature i {
            color: var(--saffron);
            font-size: 1.2rem;
            width: 25px;
        }

.package-footer {
            padding: 0 30px 30px;
        }

/* Itinerary */
        .itinerary {
            padding: 120px 0;
            background-color: var(--light-gray);
            position: relative;
        }

.itinerary-container {
            max-width: 1000px;
            margin: 0 auto;
        }

.itinerary-timeline {
            position: relative;
            padding-left: 50px;
        }

.itinerary-timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, var(--saffron), var(--saffron-light));
            border-radius: 3px;
        }

.timeline-item {
            position: relative;
            margin-bottom: 50px;
        }

.timeline-item:last-child {
            margin-bottom: 0;
        }

.timeline-marker {
            position: absolute;
            left: -40px;
            top: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: 600;
            box-shadow: 0 5px 15px rgba(255, 140, 50, 0.4);
            z-index: 2;
        }

.timeline-content {
            background-color: var(--white);
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            margin-left: 30px;
        }

.timeline-content h3 {
            font-size: 1.5rem;
            color: var(--saffron-dark);
            margin-bottom: 10px;
        }

/* Accommodation */
        .accommodation {
            padding: 120px 0;
            background-color: var(--white);
        }

.accommodation-slider {
            overflow: hidden;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

.accommodation-slide {
            position: relative;
            height: 500px;
        }

.accommodation-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.accommodation-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 40px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: var(--white);
        }

.accommodation-overlay h3 {
            font-size: 2rem;
            margin-bottom: 10px;
        }

.accommodation-rating {
            color: var(--saffron-light);
            margin: 15px 0;
        }

.swiper-pagination-bullet {
            background-color: var(--saffron);
            width: 12px;
            height: 12px;
            opacity: 0.5;
        }

.swiper-pagination-bullet-active {
            opacity: 1;
        }

/* Testimonials */
        .testimonials {
            padding: 120px 0;
            background-color: var(--light-gray);
            position: relative;
        }

.testimonials::before {
            content: '"';
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 15rem;
            color: rgba(255, 140, 50, 0.05);
            font-family: 'Playfair Display', serif;
            z-index: 0;
        }

.testimonials-container {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
        }

.testimonial-card {
            background-color: var(--white);
            padding: 50px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            text-align: center;
            position: relative;
        }

.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 30px;
            font-size: 6rem;
            color: var(--saffron-lighter);
            font-family: 'Playfair Display', serif;
            line-height: 1;
        }

.testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            color: var(--text-medium);
            margin-bottom: 30px;
            line-height: 1.8;
        }

.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

.author-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--saffron-light);
        }

.author-info h4 {
            font-size: 1.3rem;
            color: var(--text-dark);
            margin-bottom: 5px;
        }

.author-info p {
            color: var(--saffron);
            font-weight: 500;
        }

.swiper-button-next, .swiper-button-prev {
            color: var(--saffron);
        }

/* Enquiry Form */
        .enquiry {
            padding: 120px 0;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), 
                        url('https://images.unsplash.com/photo-1548013146-72479768bada?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            color: var(--white);
            position: relative;
        }

.enquiry-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

.enquiry-form {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 50px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

.enquiry-form h3 {
            color: var(--text-dark);
            font-size: 2rem;
            margin-bottom: 30px;
            text-align: center;
        }

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

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

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

label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-dark);
        }

input, select, textarea {
            width: 100%;
            padding: 16px 20px;
            border: 1px solid var(--medium-gray);
            border-radius: 8px;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            transition: var(--transition);
            background-color: var(--white);
        }

input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--saffron);
            box-shadow: 0 0 0 3px rgba(255, 140, 50, 0.2);
        }

.submit-btn {
            width: 100%;
            padding: 18px;
            font-size: 1.1rem;
        }

/* Footer */
        footer {
            background-color: var(--text-dark);
            color: var(--white);
            padding: 100px 0 40px;
            position: relative;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 50px;
            margin-bottom: 60px;
        }

.footer-column h3 {
            font-size: 1.5rem;
            margin-bottom: 25px;
            color: var(--white);
            position: relative;
            padding-bottom: 15px;
        }

.footer-column h3::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background: var(--saffron);
            left: 0;
            bottom: 0;
            border-radius: 2px;
        }

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

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

.footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
        }

.footer-links a:hover {
            color: var(--saffron);
            transform: translateX(5px);
        }

.footer-links i {
            width: 20px;
        }

.social-links {
            display: flex;
            gap: 20px;
            margin-top: 25px;
        }

.social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--white);
            font-size: 1.2rem;
            transition: var(--transition);
        }

.social-links a:hover {
            background-color: var(--saffron);
            transform: translateY(-5px);
        }

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

/* Back to top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: var(--saffron);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
            box-shadow: 0 5px 15px rgba(255, 140, 50, 0.4);
        }

.back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

.back-to-top:hover {
            background-color: var(--saffron-dark);
            transform: translateY(-5px);
        }

/* Responsive */
        @media (max-width: 1100px) {
            .hero h1 {
                font-size: 3.5rem;
            }
        }

@media (max-width: 992px) {
            .mobile-menu-btn {
                display: block;
            }

nav {
                position: fixed;
                top: 80px;
                left: 0;
                width: 100%;
                background-color: var(--white);
                padding: 30px;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                transform: translateY(-100%);
                opacity: 0;
                visibility: hidden;
                transition: var(--transition);
                z-index: 999;
            }

nav.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }

nav ul {
                flex-direction: column;
                gap: 20px;
            }

.hero h1 {
                font-size: 3rem;
            }

.form-grid {
                grid-template-columns: 1fr;
            }

.destinations-grid,
            .packages-container {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto;
            }
        }

@media (max-width: 768px) {
            .hero {
                padding: 150px 0 100px;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero p {
                font-size: 1.1rem;
            }

.section-title h2 {
                font-size: 2.2rem;
            }

.stat-number {
                font-size: 2.8rem;
            }

.enquiry-form {
                padding: 30px;
            }

.testimonial-card {
                padding: 30px;
            }
        }

@media (max-width: 576px) {
            .container {
                padding: 0 20px;
            }

.hero h1 {
                font-size: 2.2rem;
            }

.hero-btns {
                flex-direction: column;
                align-items: center;
            }

.section-title h2 {
                font-size: 2rem;
            }

.stats-container {
                grid-template-columns: 1fr 1fr;
            }
        }

JavaScript

// Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mainNav = document.getElementById('mainNav');
        
        mobileMenuBtn.addEventListener('click', () => {
            mainNav.classList.toggle('active');
            mobileMenuBtn.innerHTML = mainNav.classList.contains('active') 
                ? '<i class="fas fa-times"></i>' 
                : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('#mainNav a').forEach(link => {
            link.addEventListener('click', () => {
                mainNav.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Header scroll effect
        const header = document.getElementById('header');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Back to top button
        const backToTop = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });

backToTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Animated stats counter
        const statNumbers = document.querySelectorAll('.stat-number');
        
        const animateStats = () => {
            statNumbers.forEach(stat => {
                const target = parseInt(stat.getAttribute('data-count'));
                const duration = 2000;
                const step = target / (duration / 16);
                let current = 0;
                
                const updateCount = () => {
                    current += step;
                    if (current < target) {
                        stat.textContent = Math.floor(current);
                        requestAnimationFrame(updateCount);
                    } else {
                        stat.textContent = target;
                    }
                };
                
                updateCount();
            });
        };

// Initialize stats animation when in viewport
        const statsSection = document.querySelector('.stats');
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateStats();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

observer.observe(statsSection);

// Initialize Swiper sliders
        const accommodationSwiper = new Swiper('.accommodation-slider', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

const testimonialSwiper = new Swiper('.testimonial-slider', {
            loop: true,
            autoplay: {
                delay: 8000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

// Form submission
        document.getElementById('pilgrimageForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const package = document.getElementById('package').value;
            const packageName = package ? document.querySelector(`#package option[value="${package}"]`).textContent : 'a pilgrimage';
            
            // Show success message
            alert(`Thank you ${name}! Your enquiry for ${packageName} has been received. Our pilgrimage expert will contact you within 24 hours to discuss your spiritual journey.`);
            
            // Reset form
            this.reset();
        });

// Set min date for travel date to today
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('travel-date').setAttribute('min', today);

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                if(this.getAttribute('href') === '#') return;
                
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if(targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                }
            });
        });

// Set active nav link based on scroll position
        const sections = document.querySelectorAll('section[id]');
        
        window.addEventListener('scroll', () => {
            let current = '';
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                
                if (scrollY >= (sectionTop - 150)) {
                    current = section.getAttribute('id');
                }
            });
            
            document.querySelectorAll('#mainNav a').forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === `#${current}`) {
                    link.classList.add('active');
                }
            });
        });

Divine Yatra Travel Template Preview

Download Options