Premium Adventure 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>WildTrails | Premium Adventure Travel Experiences</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@400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600&display=swap">
    
</head>
<body>
    
    <header id="header">
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <div class="logo-icon"><i class="fas fa-mountain"></i></div>
                    <div class="logo-text">
                        <span>WILDTRAILS</span>
                        <span>ADVENTURE CO.</span>
                    </div>
                </a>
                
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
                
                <div class="nav-links" id="navLinks">
                    <a href="#trips">Destinations</a>
                    <a href="#safety">Safety</a>
                    <a href="#itinerary">Itineraries</a>
                    <a href="#testimonials">Stories</a>
                    <a href="#stats">Our Impact</a>
                   
                </div>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title fade-in">UNLEASH YOUR <span>WILD</span> SIDE</h1>
                <p class="hero-subtitle fade-in">Experience earth's most breathtaking landscapes with expert guides, premium equipment, and unforgettable adventures tailored to your spirit of exploration.</p>
                <div class="cta-buttons">
                    <a href="#booking" class="primary-btn fade-in"><i class="fas fa-play-circle"></i> Start Adventure</a>
                    <a href="#trips" class="secondary-btn fade-in"><i class="fas fa-compass"></i> Explore Tours</a>
                </div>
            </div>
        </div>
        
        <div class="floating-elements">
            <div class="floating-element fe1"></div>
            <div class="floating-element fe2"></div>
            <div class="floating-element fe3"></div>
        </div>
    </section>

<section id="trips" class="trips">
        <div class="container">
            <div class="section-title">
                <h2 class="fade-in">Adventure Awaits</h2>
                <p class="fade-in">Choose your path. From serene forest walks to extreme mountain climbs, we have the perfect adventure for every explorer.</p>
            </div>
            
            <div class="trip-categories">
                
                <div class="category-card fade-in">
                    <div class="category-img" style="background-image: url('https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
                        <div class="category-overlay">
                            <h3>Mountain Trekking</h3>
                        </div>
                    </div>
                    <div class="category-content">
                        <div class="difficulty">
                            <span class="difficulty-label">Challenge Level</span>
                            <span class="difficulty-level">Advanced</span>
                        </div>
                        <p>Conquer breathtaking peaks with our expert mountain guides. Our treks take you through untouched alpine landscapes with summit views that will change your perspective forever.</p>
                        <ul class="category-features">
                            <li><i class="fas fa-check-circle"></i> High-altitude acclimatization</li>
                            <li><i class="fas fa-check-circle"></i> Technical climbing sections</li>
                            <li><i class="fas fa-check-circle"></i> Summit certification</li>
                        </ul>
                        <a href="#" class="category-link">Explore Treks <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                
                <div class="category-card fade-in">
                    <div class="category-img" style="background-image: url('https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2065&q=80');">
                        <div class="category-overlay">
                            <h3>Wilderness Camping</h3>
                        </div>
                    </div>
                    <div class="category-content">
                        <div class="difficulty">
                            <span class="difficulty-label">Challenge Level</span>
                            <span class="difficulty-level">Beginner - Intermediate</span>
                        </div>
                        <p>Immerse yourself in nature with our guided camping experiences. Learn wilderness skills, sleep under the stars, and connect with the natural world in ways you never thought possible.</p>
                        <ul class="category-features">
                            <li><i class="fas fa-check-circle"></i> Survival skills workshops</li>
                            <li><i class="fas fa-check-circle"></i> Gourmet campfire cooking</li>
                            <li><i class="fas fa-check-circle"></i> Stargazing with astronomers</li>
                        </ul>
                        <a href="#" class="category-link">Explore Camping <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                
                <div class="category-card fade-in">
                    <div class="category-img" style="background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dHJhdmVsfGVufDB8fDB8fHww');">
                        <div class="category-overlay">
                            <h3>Extreme Adventures</h3>
                        </div>
                    </div>
                    <div class="category-content">
                        <div class="difficulty">
                            <span class="difficulty-label">Challenge Level</span>
                            <span class="difficulty-level">Expert</span>
                        </div>
                        <p>For adrenaline seekers who want to push their limits. From white-water rafting through raging rivers to multi-pitch rock climbing on sheer cliffs - this is where legends are made.</p>
                        <ul class="category-features">
                            <li><i class="fas fa-check-circle"></i> Professional equipment provided</li>
                            <li><i class="fas fa-check-circle"></i> Advanced safety protocols</li>
                            <li><i class="fas fa-check-circle"></i> Certification courses available</li>
                        </ul>
                        <a href="#" class="category-link">Explore Adventures <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="stats" class="stats fade-in">
        <div class="container">
            <div class="stats-container">
                <div class="stat-item">
                    <h3>15,000+</h3>
                    <p>Adventurers Guided</p>
                </div>
                <div class="stat-item">
                    <h3>47</h3>
                    <p>Countries Explored</p>
                </div>
                <div class="stat-item">
                    <h3>98.7%</h3>
                    <p>Safety Record</p>
                </div>
                <div class="stat-item">
                    <h3>24/7</h3>
                    <p>Guide Support</p>
                </div>
            </div>
        </div>
    </section>

<section id="safety" class="safety">
        <div class="container">
            <div class="section-title">
                <h2 class="fade-in">Adventure With Confidence</h2>
                <p class="fade-in">Your safety is our highest priority. We implement rigorous protocols so you can focus on the experience.</p>
            </div>
            
            <div class="safety-highlights">
                <div class="safety-item fade-in">
                    <div class="safety-icon">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <h3>Certified Expert Guides</h3>
                    <p>All guides are certified Wilderness First Responders with minimum 10 years experience in their specialty areas.</p>
                </div>
                
                <div class="safety-item fade-in">
                    <div class="safety-icon">
                        <i class="fas fa-satellite-dish"></i>
                    </div>
                    <h3>Satellite Communication</h3>
                    <p>Real-time GPS tracking and satellite phones ensure constant connectivity even in the most remote locations.</p>
                </div>
                
                <div class="safety-item fade-in">
                    <div class="safety-icon">
                        <i class="fas fa-medkit"></i>
                    </div>
                    <h3>Advanced Medical Support</h3>
                    <p>Comprehensive medical kits, emergency evacuation plans, and 24/7 access to wilderness medicine physicians.</p>
                </div>
                
                <div class="safety-item fade-in">
                    <div class="safety-icon">
                        <i class="fas fa-clipboard-check"></i>
                    </div>
                    <h3>Small Group Focus</h3>
                    <p>Maximum 8:1 participant-to-guide ratio ensures personalized attention and optimal safety management.</p>
                </div>
            </div>
        </div>
    </section>

<section id="itinerary" class="itinerary">
        <div class="container">
            <div class="section-title">
                <h2 class="fade-in">The Ultimate 7-Day Adventure</h2>
                <p class="fade-in">Experience the perfect blend of challenge, discovery, and connection on our signature Alpine Explorer journey.</p>
            </div>
            
            <div class="timeline">
                <div class="timeline-item fade-in">
                    <div class="timeline-dot">D1</div>
                    <div class="timeline-content">
                        <div class="timeline-day">Arrival & Preparation</div>
                        <div class="timeline-activity">Base Camp Orientation</div>
                        <p class="timeline-details">Arrive at our mountain lodge, meet your expedition team, complete gear check, and attend comprehensive safety briefing. Evening welcome dinner with local cuisine.</p>
                        <div class="timeline-features">
                            <span class="timeline-feature">Gear Inspection</span>
                            <span class="timeline-feature">Safety Training</span>
                            <span class="timeline-feature">Team Building</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item fade-in">
                    <div class="timeline-dot">D2</div>
                    <div class="timeline-content">
                        <div class="timeline-day">Acclimatization</div>
                        <div class="timeline-activity">High Altitude Training</div>
                        <p class="timeline-details">Moderate hike to 3,000m with focus on altitude adaptation, proper hiking techniques, and Leave No Trace principles. Afternoon workshop on mountain weather patterns.</p>
                        <div class="timeline-features">
                            <span class="timeline-feature">Altitude Training</span>
                            <span class="timeline-feature">Navigation Basics</span>
                            <span class="timeline-feature">Eco-Education</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item fade-in">
                    <div class="timeline-dot">D3</div>
                    <div class="timeline-content">
                        <div class="timeline-day">Summit Day</div>
                        <div class="timeline-activity">Peak Ascent Challenge</div>
                        <p class="timeline-details">Early alpine start for the summit push. Experience breathtaking sunrise from 4,200m peak. Technical sections with fixed ropes. Celebrate achievement at the summit.</p>
                        <div class="timeline-features">
                            <span class="timeline-feature">Alpine Start</span>
                            <span class="timeline-feature">Technical Climbing</span>
                            <span class="timeline-feature">Summit Celebration</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item fade-in">
                    <div class="timeline-dot">D4</div>
                    <div class="timeline-content">
                        <div class="timeline-day">Skills Development</div>
                        <div class="timeline-activity">Wilderness Mastery</div>
                        <p class="timeline-details">Learn advanced wilderness skills including emergency shelter building, water purification, and advanced navigation. Optional via ferrata climbing session.</p>
                        <div class="timeline-features">
                            <span class="timeline-feature">Survival Skills</span>
                            <span class="timeline-feature">Advanced Navigation</span>
                            <span class="timeline-feature">Via Ferrata</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item fade-in">
                    <div class="timeline-dot">D5</div>
                    <div class="timeline-content">
                        <div class="timeline-day">Exploration</div>
                        <div class="timeline-activity">Hidden Valley Discovery</div>
                        <p class="timeline-details">Journey to a remote glacial valley accessible only on foot. Explore ice caves, pristine alpine lakes, and observe native wildlife in their natural habitat.</p>
                        <div class="timeline-features">
                            <span class="timeline-feature">Glacial Exploration</span>
                            <span class="timeline-feature">Wildlife Observation</span>
                            <span class="timeline-feature">Remote Wilderness</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="testimonials" class="testimonials">
        <div class="container">
            <div class="section-title">
                <h2 class="fade-in">Adventurer Stories</h2>
                <p class="fade-in">Don't just take our word for it - hear from those who've lived the WildTrails experience.</p>
            </div>
            
            <div class="testimonial-cards">
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "The Himalayan expedition changed my life. The guides were not just experts but true mentors who pushed me beyond what I thought possible. The summit sunrise was worth every challenging step."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-img">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Johnson">
                        </div>
                        <div class="author-info">
                            <h4>Michael Johnson</h4>
                            <p>Himalayan Expedition • October 2023</p>
                            <div class="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>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "As a solo female traveler, safety was my top concern. WildTrails exceeded all expectations. The small group size, expert female guides, and thorough preparation made me feel empowered and secure throughout."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-img">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Rodriguez">
                        </div>
                        <div class="author-info">
                            <h4>Sarah Rodriguez</h4>
                            <p>Patagonian Trek • August 2023</p>
                            <div class="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>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "The rock climbing and white-water rafting combo pushed me to new limits. The equipment was top-notch, and the guides' expertise gave me the confidence to tackle challenges I never thought I could."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-img">
                            <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Thomas Kim">
                        </div>
                        <div class="author-info">
                            <h4>Thomas Kim</h4>
                            <p>Extreme Adventure Week • June 2023</p>
                            <div class="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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="booking" class="booking-form-section">
        <div class="container">
            <div class="section-title">
                <h2 class="fade-in">Ready For Your Adventure?</h2>
                <p class="fade-in">Complete the form below and our adventure specialists will contact you within 24 hours to craft your perfect expedition.</p>
            </div>
            
            <div class="form-container fade-in">
                <form id="bookingForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="fullName">Full Name *</label>
                            <input type="text" id="fullName" name="fullName" required placeholder="Your full name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" name="email" required placeholder="you@example.com">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567">
                        </div>
                        <div class="form-group">
                            <label for="participants">Number of Adventurers *</label>
                            <select id="participants" name="participants" required>
                                <option value="" disabled selected>Select group size</option>
                                <option value="1">Solo (1)</option>
                                <option value="2">Duo (2)</option>
                                <option value="3-5">Small Group (3-5)</option>
                                <option value="6-8">Medium Group (6-8)</option>
                                <option value="9+">Large Group (9+)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="adventureType">Adventure Type *</label>
                            <select id="adventureType" name="adventureType" required>
                                <option value="" disabled selected>Choose your adventure</option>
                                <option value="trekking">Mountain Trekking</option>
                                <option value="camping">Wilderness Camping</option>
                                <option value="extreme">Extreme Adventures</option>
                                <option value="custom">Custom Expedition</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="date">Preferred Start Date *</label>
                            <input type="date" id="date" name="date" required>
                        </div>
                    </div>
                    
                    <div class="form-group full-width">
                        <label for="experience">Experience Level *</label>
                        <select id="experience" name="experience" required>
                            <option value="" disabled selected>Select your experience level</option>
                            <option value="beginner">Beginner (First time adventurer)</option>
                            <option value="intermediate">Intermediate (Some outdoor experience)</option>
                            <option value="advanced">Advanced (Regular outdoor enthusiast)</option>
                            <option value="expert">Expert (Technical skills training)</option>
                        </select>
                    </div>
                    
                    <div class="form-group full-width">
                        <label for="message">Tell Us About Your Adventure Goals</label>
                        <textarea id="message" name="message" placeholder="What are you hoping to experience? Any specific destinations or challenges you're interested in? Special requirements or concerns..."></textarea>
                    </div>
                    
                    <button type="submit" class="submit-btn"><i class="fas fa-paper-plane"></i> Send Adventure Request</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>WildTrails Adventure Co.</h3>
                    <p>Creating life-changing outdoor experiences since 2012. We're committed to sustainable adventure travel that respects nature and empowers explorers.</p>
                    <div class="social-icons">
                        <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>
                        <a href="#"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
                
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#trips"><i class="fas fa-chevron-right"></i> Adventure Destinations</a></li>
                        <li><a href="#safety"><i class="fas fa-chevron-right"></i> Safety & Training</a></li>
                        <li><a href="#itinerary"><i class="fas fa-chevron-right"></i> Expedition Itineraries</a></li>
                        <li><a href="#testimonials"><i class="fas fa-chevron-right"></i> Adventure Stories</a></li>
                        <li><a href="#booking"><i class="fas fa-chevron-right"></i> Plan Your Adventure</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-map-marker-alt"></i> 123 Adventure Way, Boulder, CO 80301</a></li>
                        <li><a href="tel:+18001234567"><i class="fas fa-phone"></i> +1 (800) 123-4567</a></li>
                        <li><a href="mailto:adventure@wildtrails.com"><i class="fas fa-envelope"></i> adventure@wildtrails.com</a></li>
                        <li><a href="#"><i class="fas fa-clock"></i> Mon-Fri: 8am-8pm MST</a></li>
                        <li><a href="#"><i class="fas fa-clock"></i> Sat-Sun: 9am-5pm MST</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Subscribe for exclusive adventure offers, tips, and stories from the trail.</p>
                    <div class="form-group" style="margin-top: 20px;">
                        <input type="email" placeholder="Your email address" style="width: 100%;">
                        <button class="submit-btn" style="margin-top: 15px; padding: 12px 25px; font-size: 16px;">Subscribe</button>
                    </div>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 WildTrails Adventure Co. All rights reserved. | <a href="#" style="color: rgba(255,255,255,0.7);">Privacy Policy</a> | <a href="#" style="color: rgba(255,255,255,0.7);">Terms of Service</a></p>
                <p style="margin-top: 10px; font-size: 14px;">Designed with <i class="fas fa-heart" style="color: var(--accent-orange);"></i> for adventurers worldwide.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

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

:root {
            --dark-green: #0c3526;
            --deep-green: #1a4731;
            --medium-green: #2d7a5e;
            --light-green: #4da47c;
            --accent-orange: #ff6b35;
            --light-orange: #ff9e6d;
            --gold: #ffb347;
            --dark-text: #1a1a1a;
            --light-text: #f8f9fa;
            --light-bg: #f8fafc;
            --section-padding: 100px 0;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            --shadow: 0 20px 40px rgba(10, 41, 31, 0.1);
            --shadow-hover: 0 30px 60px rgba(10, 41, 31, 0.15);
            --border-radius: 16px;
        }

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

h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

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

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

.header-scrolled {
            padding: 10px 0;
            background-color: rgba(12, 53, 38, 0.98);
        }

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

.header-scrolled .navbar {
            padding: 10px 0;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            font-size: 28px;
            font-weight: 900;
            color: var(--light-text);
        }

.logo-icon {
            color: var(--accent-orange);
            font-size: 32px;
        }

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

.logo-text span:first-child {
            color: var(--light-text);
            font-size: 26px;
        }

.logo-text span:last-child {
            color: var(--light-orange);
            font-size: 12px;
            letter-spacing: 2px;
            font-weight: 600;
        }

.nav-links {
            display: flex;
            gap: 40px;
            align-items: center;
        }

.nav-links a {
            color: var(--light-text);
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            position: relative;
            padding: 8px 0;
            transition: var(--transition);
        }

.nav-links a:hover {
            color: var(--accent-orange);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            background: var(--accent-orange);
            bottom: 0;
            left: 0;
            border-radius: 3px;
            transition: var(--transition);
        }

.nav-links a:hover::after {
            width: 100%;
        }

.book-now-btn {
            background: linear-gradient(135deg, var(--accent-orange), var(--gold));
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            transition: var(--transition);
            box-shadow: 0 10px 20px rgba(255, 107, 53, 0.2);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

.book-now-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255, 107, 53, 0.3);
        }

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

/* Hero Section */
        .hero {
            position: relative;
            padding: 220px 0 150px;
            background: linear-gradient(rgba(12, 53, 38, 0.9), rgba(12, 53, 38, 0.7)), url('https://images.unsplash.com/photo-1501555088652-021faa106b9b?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: var(--light-text);
            overflow: hidden;
        }

.hero-content {
            max-width: 800px;
            text-align: center;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

.hero-title {
            font-size: 60px;
            margin-bottom: 25px;
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: -0.5px;
        }

.hero-title span {
            color: var(--accent-orange);
            position: relative;
            display: inline-block;
        }

.hero-title span::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 8px;
            background: rgba(255, 107, 53, 0.2);
            bottom: 5px;
            left: 0;
            z-index: -1;
        }

.hero-subtitle {
            font-size: 22px;
            margin-bottom: 40px;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 300;
        }

.cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }

.primary-btn, .secondary-btn {
            padding: 18px 40px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 18px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.primary-btn {
            background: linear-gradient(135deg, var(--accent-orange), var(--gold));
            color: white;
            box-shadow: 0 15px 30px rgba(255, 107, 53, 0.25);
        }

.primary-btn:hover {
            transform: translateY(-8px) scale(1.05);
            box-shadow: 0 25px 40px rgba(255, 107, 53, 0.35);
        }

.secondary-btn {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px);
        }

.secondary-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: white;
            transform: translateY(-8px);
        }

.floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

.floating-element {
            position: absolute;
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.1;
        }

.fe1 { width: 120px; height: 120px; background-image: url('https://cdn-icons-png.flaticon.com/512/2972/2972543.png'); top: 15%; left: 5%; animation: float 20s infinite linear; }
        .fe2 { width: 80px; height: 80px; background-image: url('https://cdn-icons-png.flaticon.com/512/814/814514.png'); top: 25%; right: 8%; animation: float 25s infinite linear reverse; }
        .fe3 { width: 100px; height: 100px; background-image: url('https://cdn-icons-png.flaticon.com/512/814/814513.png'); bottom: 20%; left: 10%; animation: float 30s infinite linear; }

@keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
            100% { transform: translateY(0) rotate(360deg); }
        }

/* Trip Categories */
        .section-title {
            text-align: center;
            margin-bottom: 70px;
        }

.section-title h2 {
            font-size: 48px;
            color: var(--dark-green);
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            width: 70px;
            height: 5px;
            background: var(--accent-orange);
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 5px;
        }

.section-title p {
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
            font-size: 18px;
        }

section {
            padding: var(--section-padding);
        }

.trip-categories {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            margin-top: 30px;
        }

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

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

.category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--accent-orange), var(--gold));
            z-index: 1;
        }

.category-img {
            height: 250px;
            background-size: cover;
            background-position: center;
            position: relative;
            transition: var(--transition);
        }

.category-card:hover .category-img {
            transform: scale(1.05);
        }

.category-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(12, 53, 38, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            padding: 25px;
        }

.category-overlay h3 {
            color: white;
            font-size: 28px;
            margin-bottom: 0;
        }

.category-content {
            padding: 30px;
        }

.difficulty {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

.difficulty-label {
            font-weight: 700;
            color: var(--dark-green);
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.difficulty-level {
            color: var(--accent-orange);
            font-weight: 700;
        }

.category-content p {
            color: #64748b;
            margin-bottom: 25px;
            line-height: 1.8;
        }

.category-features {
            list-style: none;
            margin-bottom: 30px;
        }

.category-features li {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #475569;
        }

.category-features li i {
            color: var(--light-green);
        }

.category-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--accent-orange);
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 14px;
            padding: 12px 25px;
            border: 2px solid var(--accent-orange);
            border-radius: 50px;
            transition: var(--transition);
        }

.category-link:hover {
            background-color: var(--accent-orange);
            color: white;
            gap: 15px;
        }

/* Safety Highlights */
        .safety {
            background-color: var(--dark-green);
            position: relative;
            overflow: hidden;
        }

.safety::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 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='%231a4731' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.1;
            top: 0;
            left: 0;
        }

.safety .section-title h2,
        .safety .section-title p {
            color: var(--light-text);
        }

.safety-highlights {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 40px;
        }

.safety-item {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 40px 30px;
            border-radius: var(--border-radius);
            text-align: center;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

.safety-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-15px);
            border-color: rgba(255, 107, 53, 0.3);
        }

.safety-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--accent-orange), var(--gold));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 32px;
            color: white;
        }

.safety-item h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: white;
        }

.safety-item p {
            color: rgba(255, 255, 255, 0.7);
        }

/* Itinerary Timeline */
        .timeline {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }

.timeline::before {
            content: '';
            position: absolute;
            width: 6px;
            background: linear-gradient(to bottom, var(--light-green), var(--accent-orange));
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
        }

.timeline-item {
            padding: 0 50px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
            margin-bottom: 80px;
        }

.timeline-item:nth-child(odd) {
            left: 0;
        }

.timeline-item:nth-child(even) {
            left: 50%;
        }

.timeline-content {
            padding: 35px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            position: relative;
            transition: var(--transition);
        }

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

.timeline-content::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: white;
            top: 30px;
            transform: rotate(45deg);
        }

.timeline-item:nth-child(odd) .timeline-content::after {
            right: -12px;
        }

.timeline-item:nth-child(even) .timeline-content::after {
            left: -12px;
        }

.timeline-dot {
            position: absolute;
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, var(--accent-orange), var(--gold));
            border-radius: 50%;
            top: 30px;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
        }

.timeline-item:nth-child(odd) .timeline-dot {
            right: -15px;
        }

.timeline-item:nth-child(even) .timeline-dot {
            left: -15px;
        }

.timeline-day {
            font-size: 16px;
            font-weight: 700;
            color: var(--accent-orange);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.timeline-activity {
            font-size: 24px;
            font-weight: 700;
            color: var(--dark-green);
            margin-bottom: 15px;
        }

.timeline-details {
            color: #64748b;
            margin-bottom: 20px;
        }

.timeline-features {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

.timeline-feature {
            background: rgba(45, 122, 94, 0.1);
            color: var(--medium-green);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
        }

/* Testimonials */
        .testimonials {
            background-color: var(--light-bg);
        }

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

.testimonial-card {
            background-color: white;
            padding: 40px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            position: relative;
            transition: var(--transition);
        }

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

.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 30px;
            font-size: 80px;
            color: rgba(255, 107, 53, 0.1);
            font-family: Georgia, serif;
            line-height: 1;
        }

.testimonial-text {
            font-style: italic;
            margin-bottom: 30px;
            color: #475569;
            font-size: 18px;
            line-height: 1.8;
            position: relative;
            z-index: 1;
        }

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

.author-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--accent-orange);
        }

.author-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

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

.author-info p {
            color: #64748b;
            font-size: 15px;
            margin-bottom: 8px;
        }

.rating {
            color: var(--accent-orange);
            font-size: 16px;
        }

/* Booking Form */
        .booking-form-section {
            background-color: var(--dark-green);
            position: relative;
            overflow: hidden;
        }

.booking-form-section::before {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
            top: -200px;
            right: -200px;
            border-radius: 50%;
        }

.booking-form-section::after {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(77, 164, 124, 0.1) 0%, transparent 70%);
            bottom: -150px;
            left: -150px;
            border-radius: 50%;
        }

.booking-form-section .section-title h2,
        .booking-form-section .section-title p {
            color: var(--light-text);
        }

.form-container {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 50px;
            border-radius: var(--border-radius);
            max-width: 900px;
            margin: 0 auto;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 1;
        }

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

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

.form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
        }

.form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 18px 25px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.07);
            font-size: 16px;
            color: white;
            transition: var(--transition);
        }

.form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent-orange);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
        }

.form-group textarea {
            height: 140px;
            resize: vertical;
        }

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

.submit-btn {
            background: linear-gradient(135deg, var(--accent-orange), var(--gold));
            color: white;
            border: none;
            padding: 20px 45px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            display: block;
            width: 100%;
            margin-top: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 15px 30px rgba(255, 107, 53, 0.25);
        }

.submit-btn:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 40px rgba(255, 107, 53, 0.35);
        }

/* Footer */
        footer {
            background-color: #081a14;
            color: var(--light-text);
            padding: 80px 0 30px;
            position: relative;
        }

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

.footer-column h3 {
            font-size: 22px;
            margin-bottom: 25px;
            color: var(--accent-orange);
            position: relative;
            padding-bottom: 15px;
        }

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

.footer-column p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 25px;
            line-height: 1.8;
        }

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

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

.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(--accent-orange);
            padding-left: 5px;
        }

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

.social-icons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }

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

.social-icons a:hover {
            background: var(--accent-orange);
            transform: translateY(-5px);
        }

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

/* Stats Section */
        .stats {
            background: linear-gradient(135deg, var(--deep-green), var(--dark-green));
            padding: 80px 0;
            color: white;
        }

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

.stat-item h3 {
            font-size: 56px;
            color: var(--accent-orange);
            margin-bottom: 10px;
            font-weight: 900;
        }

.stat-item p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            font-weight: 500;
        }

/* Responsive Design */
        @media (max-width: 1100px) {
            .hero-title {
                font-size: 56px;
            }
            
            .timeline::before {
                left: 30px;
            }
            
            .timeline-item {
                width: 100%;
                padding-left: 80px;
                padding-right: 0;
            }
            
            .timeline-item:nth-child(even) {
                left: 0;
            }
            
            .timeline-item:nth-child(odd) .timeline-dot,
            .timeline-item:nth-child(even) .timeline-dot {
                left: 25px;
            }
            
            .timeline-item:nth-child(odd) .timeline-content::after,
            .timeline-item:nth-child(even) .timeline-content::after {
                left: -12px;
            }
            
            .timeline-item:nth-child(even) .timeline-content::after {
                right: auto;
                left: -12px;
            }
        }

@media (max-width: 900px) {
            .hero-title {
                font-size: 46px;
            }
            
            .hero-subtitle {
                font-size: 20px;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            
            .primary-btn, .secondary-btn {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .nav-links {
                position: fixed;
                top: 80px;
                left: 0;
                width: 100%;
                background-color: var(--dark-green);
                flex-direction: column;
                padding: 30px;
                gap: 20px;
                transform: translateY(-100%);
                opacity: 0;
                visibility: hidden;
                transition: var(--transition);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }
            
            .nav-links.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
            
            .section-title h2 {
                font-size: 38px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 600px) {
            .hero {
                padding: 180px 0 100px;
            }
            
            .hero-title {
                font-size: 36px;
            }
            
            .hero-subtitle {
                font-size: 18px;
            }
            
            .section-title h2 {
                font-size: 32px;
            }
            
            .trip-categories {
                grid-template-columns: 1fr;
            }
            
            .testimonial-cards {
                grid-template-columns: 1fr;
            }
            
            .form-container {
                padding: 30px 20px;
            }
            
            .category-content, .timeline-content, .testimonial-card {
                padding: 25px;
            }
        }

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

.fade-in.appear {
            opacity: 1;
            transform: translateY(0);
        }

JavaScript

// Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const navLinks = document.getElementById('navLinks');
        
        mobileMenuBtn.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            mobileMenuBtn.innerHTML = navLinks.classList.contains('active') 
                ? '<i class="fas fa-times"></i>' 
                : '<i class="fas fa-bars"></i>';
        });
        
        // Header scroll effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('header-scrolled');
            } else {
                header.classList.remove('header-scrolled');
            }
        });
        
        // Form submission
        document.getElementById('bookingForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('fullName').value;
            const email = document.getElementById('email').value;
            
            // Show success message
            const submitBtn = this.querySelector('.submit-btn');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<i class="fas fa-check"></i> Request Sent!';
            submitBtn.style.background = 'linear-gradient(135deg, #4da47c, #2d7a5e)';
            
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.style.background = 'linear-gradient(135deg, var(--accent-orange), var(--gold))';
                
                // In a real app, you would submit the form data here
                alert(`Thanks ${name}! Your adventure request has been received. We'll contact you at ${email} within 24 hours to plan your expedition.`);
                
                // Reset form
                this.reset();
            }, 2000);
        });
        
        // Set minimum date to today for the date picker
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').setAttribute('min', today);
        
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if(targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if(targetElement) {
                    // Close mobile menu if open
                    navLinks.classList.remove('active');
                    mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
                    
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Scroll animations
        const fadeElements = document.querySelectorAll('.fade-in');
        
        const appearOnScroll = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('appear');
                    appearOnScroll.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });
        
        fadeElements.forEach(element => {
            appearOnScroll.observe(element);
        });
        
        // Add floating animation to safety items on hover
        const safetyItems = document.querySelectorAll('.safety-item');
        safetyItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                item.style.transform = 'translateY(-15px)';
            });
            
            item.addEventListener('mouseleave', () => {
                item.style.transform = 'translateY(0)';
            });
        });
        
        // Animate stats counter
        const statItems = document.querySelectorAll('.stat-item h3');
        const statsSection = document.getElementById('stats');
        
        const statsObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    statItems.forEach(stat => {
                        const target = parseInt(stat.textContent);
                        let current = 0;
                        const increment = target / 50;
                        
                        const timer = setInterval(() => {
                            current += increment;
                            if (current >= target) {
                                stat.textContent = target + (stat.textContent.includes('+') ? '+' : '');
                                clearInterval(timer);
                            } else {
                                stat.textContent = Math.floor(current) + (stat.textContent.includes('+') ? '+' : '');
                            }
                        }, 30);
                    });
                    
                    statsObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });
        
        statsObserver.observe(statsSection);

Premium Adventure Travel Template Preview

Download Options