ZenYoga Yoga Studio 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>ZenYoga | Premium Yoga Studio</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;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
</head>
<body>
    
    <div id="preloader">
        <div class="loader"></div>
    </div>

<header id="header">
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-spa"></i>
                    </div>
                    ZenYoga
                </a>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#classes">Classes</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="nav-actions">
                    <a href="#" class="btn btn-primary">Book Class</a>
                    <div class="mobile-toggle">
                        <i class="fas fa-bars"></i>
                    </div>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-bg">
            <div class="hero-bg-pattern"></div>
            <div class="floating-elements">
                <div class="floating-element"></div>
                <div class="floating-element"></div>
                <div class="floating-element"></div>
                <div class="floating-element"></div>
            </div>
        </div>
        <div class="container">
            <div class="hero-content">
                <span class="section-subtitle">Find Your Inner Balance</span>
                <h1>Transform Your Body & Mind With Yoga</h1>
                <p>Join our community of mindful practitioners and discover the transformative power of yoga. Our expert instructors will guide you on a journey to physical strength, mental clarity, and spiritual growth.</p>
                <div class="hero-btns">
                    <a href="#classes" class="btn btn-primary">Start Your Journey</a>
                    <a href="#about" class="btn btn-secondary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="hero-image">
            <div class="hero-slider">
                <div class="hero-slide active">
                    <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Yoga Pose 1">
                </div>
                <div class="hero-slide">
                    <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Yoga Pose 2">
                </div>
                <div class="hero-slide">
                    <img src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Yoga Pose 3">
                </div>
            </div>
            <div class="hero-slider-nav">
                <div class="slider-dot active"></div>
                <div class="slider-dot"></div>
                <div class="slider-dot"></div>
            </div>
        </div>
    </section>

<section class="section section-light" id="about">
        <div class="container">
            <div class="about-content">
                <div class="about-image animate-on-scroll">
                    <img src="https://images.unsplash.com/photo-1593810450967-f9c42742e326?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="About Yoga">
                </div>
                <div class="about-text animate-on-scroll">
                    <span class="section-subtitle">Our Story</span>
                    <h2>Welcome to ZenYoga Studio</h2>
                    <p>Founded in 2010, ZenYoga has been a sanctuary for those seeking balance, peace, and transformation through the ancient practice of yoga. Our mission is to make the profound benefits of yoga accessible to everyone, regardless of age, fitness level, or experience.</p>
                    <p>Our team of certified instructors brings decades of combined experience, offering a diverse range of classes from gentle restorative yoga to powerful vinyasa flows. We believe in creating a supportive, non-competitive environment where every student can thrive.</p>
                    <div class="about-stats">
                        <div class="stat">
                            <span class="stat-number">12+</span>
                            <span class="stat-text">Years Experience</span>
                        </div>
                        <div class="stat">
                            <span class="stat-number">500+</span>
                            <span class="stat-text">Happy Students</span>
                        </div>
                        <div class="stat">
                            <span class="stat-number">15+</span>
                            <span class="stat-text">Expert Instructors</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="classes">
        <div class="container">
            <div class="section-header text-center">
                <span class="section-subtitle">Our Offerings</span>
                <h2>Yoga Classes For Everyone</h2>
                <p>Explore our diverse range of yoga classes designed for all levels and needs.</p>
            </div>
            <div class="classes-filter">
                <button class="filter-btn active" data-filter="all">All Classes</button>
                <button class="filter-btn" data-filter="beginner">Beginner</button>
                <button class="filter-btn" data-filter="intermediate">Intermediate</button>
                <button class="filter-btn" data-filter="advanced">Advanced</button>
                <button class="filter-btn" data-filter="therapy">Therapy</button>
            </div>
            <div class="classes-grid">
                <div class="class-card animate-on-scroll" data-category="beginner">
                    <div class="class-image">
                        <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Hatha Yoga">
                        <div class="class-level">Beginner</div>
                    </div>
                    <div class="class-content">
                        <div class="class-meta">
                            <span><i class="far fa-clock"></i> 60 min</span>
                            <span><i class="fas fa-user-friends"></i> Small Group</span>
                        </div>
                        <h3 class="class-title">Hatha Yoga</h3>
                        <p class="class-desc">A gentle introduction to the most basic yoga postures. Perfect for beginners looking to build foundation.</p>
                        <a href="#" class="class-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="class-card animate-on-scroll" data-category="intermediate">
                    <div class="class-image">
                        <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Vinyasa Flow">
                        <div class="class-level">Intermediate</div>
                    </div>
                    <div class="class-content">
                        <div class="class-meta">
                            <span><i class="far fa-clock"></i> 75 min</span>
                            <span><i class="fas fa-user-friends"></i> Medium Group</span>
                        </div>
                        <h3 class="class-title">Vinyasa Flow</h3>
                        <p class="class-desc">A dynamic practice that links breath and movement in a continuous flow. Build strength and flexibility.</p>
                        <a href="#" class="class-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="class-card animate-on-scroll" data-category="advanced">
                    <div class="class-image">
                        <img src="https://images.unsplash.com/photo-1593810450967-f9c42742e326?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Ashtanga Yoga">
                        <div class="class-level">Advanced</div>
                    </div>
                    <div class="class-content">
                        <div class="class-meta">
                            <span><i class="far fa-clock"></i> 90 min</span>
                            <span><i class="fas fa-user-friends"></i> Small Group</span>
                        </div>
                        <h3 class="class-title">Ashtanga Yoga</h3>
                        <p class="class-desc">A rigorous style of yoga that follows a specific sequence of postures. Challenge your body and mind.</p>
                        <a href="#" class="class-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section section-light" id="instructors">
        <div class="container">
            <div class="section-header text-center">
                <span class="section-subtitle">Meet Our Team</span>
                <h2>Expert Yoga Instructors</h2>
                <p>Learn from our certified and experienced yoga instructors.</p>
            </div>
            <div class="instructors-slider">
                <div class="instructors-track">
                    <div class="instructor-card">
                        <div class="instructor-inner animate-on-scroll">
                            <div class="instructor-image">
                                <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Instructor 1">
                            </div>
                            <div class="instructor-info">
                                <h3 class="instructor-name">Sarah Johnson</h3>
                                <p class="instructor-role">Hatha & Vinyasa Specialist</p>
                                <p>With over 10 years of teaching experience, Sarah brings mindfulness and alignment to every class.</p>
                                <div class="instructor-social">
                                    <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>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="instructor-card">
                        <div class="instructor-inner animate-on-scroll">
                            <div class="instructor-image">
                                <img src="https://images.unsplash.com/photo-1584466977773-e625c37cdd50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Instructor 2">
                            </div>
                            <div class="instructor-info">
                                <h3 class="instructor-name">Michael Chen</h3>
                                <p class="instructor-role">Ashtanga & Power Yoga</p>
                                <p>Michael's dynamic teaching style challenges students to explore their edge with compassion.</p>
                                <div class="instructor-social">
                                    <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>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="instructor-card">
                        <div class="instructor-inner animate-on-scroll">
                            <div class="instructor-image">
                                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Instructor 3">
                            </div>
                            <div class="instructor-info">
                                <h3 class="instructor-name">Elena Rodriguez</h3>
                                <p class="instructor-role">Yin & Restorative Yoga</p>
                                <p>Elena's gentle approach helps students release tension and find deep relaxation.</p>
                                <div class="instructor-social">
                                    <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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-controls">
                <div class="slider-btn prev-btn">
                    <i class="fas fa-chevron-left"></i>
                </div>
                <div class="slider-btn next-btn">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </div>
    </section>

<section class="video-section" id="video">
        <div class="video-container">
            <video loop muted poster="https://images.unsplash.com/photo-1545389336-cf090694435e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80">
                <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-doing-yoga-4425-large.mp4" type="video/mp4">
            </video>
        </div>
        <div class="video-overlay">
            <span class="section-subtitle">Experience Transformation</span>
            <h2>Find Your Flow</h2>
            <p>Watch how yoga can transform your body, mind, and spirit. Join our community today and start your journey to wellness, balance, and inner peace.</p>
            <button class="play-btn">
                <i class="fas fa-play"></i>
            </button>
        </div>
    </section>

<section class="section" id="testimonials">
        <div class="container">
            <div class="section-header text-center">
                <span class="section-subtitle">Testimonials</span>
                <h2>What Our Students Say</h2>
                <p>Hear from our community of yoga practitioners.</p>
            </div>
            <div class="testimonials-slider">
                <div class="testimonials-track">
                    <div class="testimonial-card">
                        <div class="testimonial-inner animate-on-scroll">
                            <div class="testimonial-quote">"</div>
                            <p class="testimonial-text">ZenYoga has completely transformed my life. I came in with back pain and stress, and after just a few months, I feel stronger, more flexible, and at peace. The instructors are amazing!</p>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Student 1">
                                </div>
                                <div class="author-info">
                                    <h4>Jessica Miller</h4>
                                    <p>Student for 2 years</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-inner animate-on-scroll">
                            <div class="testimonial-quote">"</div>
                            <p class="testimonial-text">As a beginner, I was nervous about starting yoga, but the welcoming environment and skilled instructors at ZenYoga made me feel comfortable from day one. I'm now hooked!</p>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Student 2">
                                </div>
                                <div class="author-info">
                                    <h4>David Wilson</h4>
                                    <p>Student for 6 months</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-inner animate-on-scroll">
                            <div class="testimonial-quote">"</div>
                            <p class="testimonial-text">The variety of classes at ZenYoga means there's always something new to try. I've grown so much in my practice and made wonderful friends along the way. Highly recommend!</p>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Student 3">
                                </div>
                                <div class="author-info">
                                    <h4>Maria Garcia</h4>
                                    <p>Student for 1 year</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-controls">
                <div class="slider-btn testimonial-prev">
                    <i class="fas fa-chevron-left"></i>
                </div>
                <div class="slider-btn testimonial-next">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </div>
    </section>

<section class="section section-light" id="pricing">
        <div class="container">
            <div class="section-header text-center">
                <span class="section-subtitle">Pricing Plans</span>
                <h2>Membership Options</h2>
                <p>Choose the plan that works best for your yoga journey.</p>
            </div>
            <div class="pricing-grid">
                <div class="pricing-card animate-on-scroll">
                    <div class="pricing-name">Basic</div>
                    <div class="pricing-price">$49<span>/month</span></div>
                    <ul class="pricing-features">
                        <li><i class="fas fa-check"></i> 4 Classes per Month</li>
                        <li><i class="fas fa-check"></i> Access to Basic Workshops</li>
                        <li><i class="fas fa-check"></i> Locker Room Access</li>
                        <li><i class="fas fa-check"></i> No Contract</li>
                        <li><i class="fas fa-times"></i> No Guest Passes</li>
                    </ul>
                    <a href="#" class="btn btn-secondary">Get Started</a>
                </div>
                <div class="pricing-card popular animate-on-scroll">
                    <div class="popular-badge">Most Popular</div>
                    <div class="pricing-name">Standard</div>
                    <div class="pricing-price">$79<span>/month</span></div>
                    <ul class="pricing-features">
                        <li><i class="fas fa-check"></i> Unlimited Classes</li>
                        <li><i class="fas fa-check"></i> Access to All Workshops</li>
                        <li><i class="fas fa-check"></i> Locker Room & Shower</li>
                        <li><i class="fas fa-check"></i> 10% Off Retail</li>
                        <li><i class="fas fa-check"></i> 2 Guest Passes/Month</li>
                        <li><i class="fas fa-check"></i> 3-Month Minimum</li>
                    </ul>
                    <a href="#" class="btn btn-primary">Get Started</a>
                </div>
                <div class="pricing-card animate-on-scroll">
                    <div class="pricing-name">Premium</div>
                    <div class="pricing-price">$129<span>/month</span></div>
                    <ul class="pricing-features">
                        <li><i class="fas fa-check"></i> Unlimited Classes</li>
                        <li><i class="fas fa-check"></i> All Workshops Included</li>
                        <li><i class="fas fa-check"></i> Priority Booking</li>
                        <li><i class="fas fa-check"></i> 20% Off Retail</li>
                        <li><i class="fas fa-check"></i> 4 Guest Passes/Month</li>
                        <li><i class="fas fa-check"></i> 2 Private Sessions/Month</li>
                        <li><i class="fas fa-check"></i> 6-Month Minimum</li>
                    </ul>
                    <a href="#" class="btn btn-secondary">Get Started</a>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="contact">
        <div class="container">
            <div class="section-header text-center">
                <span class="section-subtitle">Get In Touch</span>
                <h2>Connect With Us</h2>
                <p>We'd love to hear from you. Reach out with any questions or to schedule your first class.</p>
            </div>
            <div class="contact-content">
                <div class="contact-info">
                    <div class="contact-item animate-on-scroll">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Our Location</h4>
                            <p>123 Yoga Street, Wellness City, WC 10001</p>
                        </div>
                    </div>
                    <div class="contact-item animate-on-scroll">
                        <div class="contact-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Phone Number</h4>
                            <p>+1 (555) 123-4567</p>
                        </div>
                    </div>
                    <div class="contact-item animate-on-scroll">
                        <div class="contact-icon">
                            <i class="far fa-envelope"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Email Address</h4>
                            <p>info@zenyoga.com</p>
                        </div>
                    </div>
                    <div class="contact-item animate-on-scroll">
                        <div class="contact-icon">
                            <i class="far fa-clock"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Opening Hours</h4>
                            <p>Monday - Friday: 6:00 AM - 9:00 PM</p>
                            <p>Saturday - Sunday: 7:00 AM - 8:00 PM</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form animate-on-scroll">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Subject">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Your Message" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <h3>ZenYoga</h3>
                    <p>Find your inner peace through the practice of yoga. Join our community and transform your body, mind, and spirit.</p>
                    <div class="footer-social">
                        <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-col">
                    <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="#about"><i class="fas fa-chevron-right"></i> About Us</a></li>
                        <li><a href="#classes"><i class="fas fa-chevron-right"></i> Classes</a></li>
                        <li><a href="#instructors"><i class="fas fa-chevron-right"></i> Instructors</a></li>
                        <li><a href="#pricing"><i class="fas fa-chevron-right"></i> Pricing</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Classes</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Hatha Yoga</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Vinyasa Flow</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Ashtanga Yoga</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Yin Yoga</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Restorative Yoga</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contact Info</h3>
                    <ul class="footer-links">
                        <li><i class="fas fa-map-marker-alt"></i> 123 Yoga Street, Wellness City</li>
                        <li><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</li>
                        <li><i class="far fa-envelope"></i> info@zenyoga.com</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 ZenYoga. All Rights Reserved. | Designed with <i class="fas fa-heart"></i> for mindful living</p>
            </div>
        </div>
    </footer>

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

</body>
</html>

CSS

/* CSS Reset and Variables */
        :root {
            --primary: #8fb3a3;
            --primary-dark: #6d8f7f;
            --primary-light: #c2d5cb;
            --secondary: #f5e8d5;
            --accent: #e6a472;
            --accent-dark: #d18a5a;
            --text-dark: #2d3748;
            --text-light: #718096;
            --white: #ffffff;
            --light-bg: #f9f7f4;
            --dark-bg: #1a202c;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.15);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --transition-slow: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            --border-radius: 12px;
            --border-radius-lg: 20px;
        }

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

html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

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

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

h1 {
            font-size: 4rem;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

h2 {
            font-size: 3rem;
            position: relative;
            display: inline-block;
            margin-bottom: 3rem;
        }

h2:after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 0;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 2px;
        }

h3 {
            font-size: 1.8rem;
        }

p {
            margin-bottom: 1.5rem;
            color: var(--text-light);
            font-size: 1.1rem;
        }

a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }

ul {
            list-style: none;
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

.container {
            width: 90%;
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 20px;
        }

.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 36px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            font-size: 1rem;
            text-align: center;
            gap: 10px;
            position: relative;
            overflow: hidden;
        }

.btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }

.btn:hover:before {
            left: 100%;
        }

.btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            box-shadow: 0 10px 20px rgba(143, 179, 163, 0.3);
        }

.btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(143, 179, 163, 0.4);
        }

.btn-secondary {
            background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }

.btn-secondary:hover {
            background-color: var(--primary);
            color: var(--white);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

.btn-accent {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: var(--white);
            box-shadow: 0 10px 20px rgba(230, 164, 114, 0.3);
        }

.btn-accent:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(230, 164, 114, 0.4);
        }

.section {
            padding: 120px 0;
            position: relative;
        }

.section-light {
            background-color: var(--light-bg);
        }

.section-dark {
            background-color: var(--dark-bg);
            color: var(--white);
        }

.section-dark h2, .section-dark h3, .section-dark p {
            color: var(--white);
        }

.text-center {
            text-align: center;
        }

.text-center h2:after {
            left: 50%;
            transform: translateX(-50%);
        }

.section-header {
            margin-bottom: 70px;
        }

.section-subtitle {
            font-size: 1.2rem;
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 15px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

/* Preloader */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.loader {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, var(--primary), var(--accent), var(--primary));
            position: relative;
            animation: rotate 1.5s linear infinite;
        }

.loader:before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            background: var(--white);
            border-radius: 50%;
        }

@keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

header.scrolled {
            padding: 5px 0;
            background-color: rgba(255, 255, 255, 0.98);
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
        }

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

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

.logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }

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

.nav-links a {
            font-weight: 500;
            position: relative;
            padding: 5px 0;
        }

.nav-links a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transition: var(--transition);
        }

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

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

.nav-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

.mobile-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--light-bg);
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

.mobile-toggle:hover {
            background: var(--primary-light);
            color: var(--primary);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(143, 179, 163, 0.05) 0%, rgba(245, 232, 213, 0.05) 100%);
        }

.hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
        }

.hero-bg-pattern {
            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='%238fb3a3' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
        }

.hero-content {
            width: 50%;
            z-index: 2;
            animation: fadeInUp 1s ease 0.5s both;
        }

.hero-content h1 {
            font-size: 4.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            background: linear-gradient(135deg, var(--text-dark), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.hero-content p {
            font-size: 1.3rem;
            margin-bottom: 2.5rem;
            max-width: 90%;
        }

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

.hero-image {
            position: absolute;
            right: 0;
            top: 0;
            width: 60%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

.hero-slider {
            width: 100%;
            height: 100%;
            position: relative;
        }

.hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

.hero-slide.active {
            opacity: 1;
        }

.hero-slide img {
            width: 80%;
            height: 90%;
            object-fit: cover;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-lg);
            transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
            transition: var(--transition-slow);
        }

.hero-slide.active img {
            transform: perspective(1000px) rotateY(0) rotateX(0);
        }

.hero-slider-nav {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

.slider-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.slider-dot:after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--white);
            transition: var(--transition);
        }

.slider-dot.active {
            background-color: rgba(255, 255, 255, 0.2);
        }

.slider-dot.active:after {
            left: 0;
        }

/* About Section */
        .about-content {
            display: flex;
            align-items: center;
            gap: 80px;
        }

.about-image {
            flex: 1;
            position: relative;
        }

.about-image img {
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-lg);
            transform: perspective(1000px) rotateY(-5deg);
            transition: var(--transition-slow);
        }

.about-image:hover img {
            transform: perspective(1000px) rotateY(0);
        }

.about-image:before {
            content: '';
            position: absolute;
            width: 80%;
            height: 80%;
            border: 5px solid var(--primary);
            border-radius: var(--border-radius-lg);
            bottom: -30px;
            right: -30px;
            z-index: -1;
            opacity: 0.7;
        }

.about-text {
            flex: 1;
        }

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

.stat {
            text-align: center;
            position: relative;
        }

.stat:not(:last-child):after {
            content: '';
            position: absolute;
            top: 0;
            right: -20px;
            width: 1px;
            height: 100%;
            background: var(--primary-light);
        }

.stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary);
            display: block;
            line-height: 1;
        }

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

/* Classes Section */
        .classes-filter {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

.filter-btn {
            padding: 12px 28px;
            background-color: transparent;
            border: 2px solid var(--primary);
            border-radius: 50px;
            color: var(--primary);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.filter-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(143, 179, 163, 0.2), transparent);
            transition: 0.5s;
        }

.filter-btn:hover:before {
            left: 100%;
        }

.filter-btn.active, .filter-btn:hover {
            background-color: var(--primary);
            color: var(--white);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(143, 179, 163, 0.3);
        }

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

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

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

.class-image {
            height: 240px;
            overflow: hidden;
            position: relative;
        }

.class-image:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 100%);
        }

.class-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-slow);
        }

.class-card:hover .class-image img {
            transform: scale(1.1);
        }

.class-level {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--primary);
            color: white;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
            z-index: 2;
        }

.class-content {
            padding: 30px;
        }

.class-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: var(--text-light);
        }

.class-meta span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

.class-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

.class-desc {
            font-size: 1rem;
            margin-bottom: 25px;
        }

.class-link {
            color: var(--primary);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
        }

.class-link:hover {
            gap: 12px;
            color: var(--primary-dark);
        }

/* Instructors Section */
        .instructors-slider {
            position: relative;
            overflow: hidden;
            margin: 0 -20px;
            padding: 20px 0;
        }

.instructors-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1);
        }

.instructor-card {
            min-width: 33.33%;
            padding: 0 20px;
        }

.instructor-inner {
            background-color: var(--white);
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
        }

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

.instructor-image {
            height: 350px;
            overflow: hidden;
            position: relative;
        }

.instructor-image:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 100%);
        }

.instructor-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-slow);
        }

.instructor-inner:hover .instructor-image img {
            transform: scale(1.05);
        }

.instructor-info {
            padding: 30px;
        }

.instructor-name {
            font-size: 1.6rem;
            margin-bottom: 5px;
        }

.instructor-role {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 1.1rem;
        }

.instructor-social {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

.instructor-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

.instructor-social a:hover {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            transform: translateY(-5px);
        }

.slider-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 50px;
        }

.slider-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--white);
            border: 2px solid var(--primary);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1.3rem;
            box-shadow: var(--shadow);
        }

.slider-btn:hover {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

/* Video Section */
        .video-section {
            position: relative;
            height: 700px;
            overflow: hidden;
        }

.video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

.video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(45, 55, 72, 0.7) 0%, rgba(109, 143, 127, 0.5) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: var(--white);
            text-align: center;
            padding: 0 20px;
        }

.video-overlay h2 {
            color: var(--white);
            margin-bottom: 25px;
        }

.video-overlay h2:after {
            background: var(--white);
        }

.video-overlay p {
            color: rgba(255, 255, 255, 0.9);
            max-width: 700px;
            margin-bottom: 40px;
            font-size: 1.2rem;
        }

.play-btn {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

.play-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            transform: scale(0);
            border-radius: 50%;
            transition: var(--transition);
        }

.play-btn:hover:before {
            transform: scale(1);
        }

.play-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

/* Testimonials Section */
        .testimonials-slider {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
            overflow: hidden;
        }

.testimonials-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1);
        }

.testimonial-card {
            min-width: 100%;
            padding: 0 20px;
        }

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

.testimonial-quote {
            position: absolute;
            top: 30px;
            left: 40px;
            font-size: 5rem;
            color: var(--primary-light);
            opacity: 0.3;
            line-height: 1;
        }

.testimonial-text {
            font-size: 1.3rem;
            font-style: italic;
            margin-bottom: 40px;
            position: relative;
        }

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

.author-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--primary-light);
        }

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

.author-info h4 {
            margin-bottom: 5px;
            font-size: 1.4rem;
        }

.author-info p {
            margin-bottom: 0;
            font-size: 1rem;
            color: var(--primary);
            font-weight: 500;
        }

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

/* Pricing Section */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

.pricing-card {
            background-color: var(--white);
            border-radius: var(--border-radius-lg);
            padding: 50px 40px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

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

.pricing-card.popular {
            border: 3px solid var(--primary);
            transform: scale(1.05);
        }

.pricing-card.popular:hover {
            transform: scale(1.05) translateY(-15px);
        }

.popular-badge {
            position: absolute;
            top: 25px;
            right: -35px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 5px 15px rgba(143, 179, 163, 0.3);
        }

.pricing-name {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

.pricing-price {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 25px;
            line-height: 1;
        }

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

.pricing-features {
            margin-bottom: 40px;
        }

.pricing-features li {
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

.pricing-features li:last-child {
            border-bottom: none;
        }

.pricing-features li i {
            color: var(--primary);
        }

/* Contact Section */
        .contact-content {
            display: flex;
            gap: 80px;
        }

.contact-info {
            flex: 1;
        }

.contact-item {
            display: flex;
            gap: 25px;
            margin-bottom: 40px;
            align-items: flex-start;
        }

.contact-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            flex-shrink: 0;
            box-shadow: 0 10px 20px rgba(143, 179, 163, 0.3);
        }

.contact-text h4 {
            margin-bottom: 10px;
            font-size: 1.4rem;
        }

.contact-text p {
            margin-bottom: 0;
        }

.contact-form {
            flex: 1;
            background-color: var(--white);
            padding: 50px;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow);
        }

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

.form-control {
            width: 100%;
            padding: 18px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-family: 'Poppins', sans-serif;
            transition: var(--transition);
            font-size: 1rem;
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(143, 179, 163, 0.2);
        }

textarea.form-control {
            min-height: 180px;
            resize: vertical;
        }

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

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

.footer-col h3 {
            color: var(--white);
            margin-bottom: 30px;
            font-size: 1.5rem;
            position: relative;
        }

.footer-col h3:after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 2px;
        }

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

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

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

.footer-links a i {
            font-size: 0.8rem;
        }

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

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

.footer-social a:hover {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            transform: translateY(-5px);
        }

.footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

.animate-on-scroll {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

.animate-on-scroll.animated {
            opacity: 1;
            transform: translateY(0);
        }

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

.floating-element {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
            opacity: 0.1;
            animation: float 20s infinite linear;
        }

.floating-element:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

.floating-element:nth-child(2) {
            width: 150px;
            height: 150px;
            top: 60%;
            left: 80%;
            animation-delay: -5s;
        }

.floating-element:nth-child(3) {
            width: 70px;
            height: 70px;
            top: 80%;
            left: 10%;
            animation-delay: -10s;
        }

.floating-element:nth-child(4) {
            width: 120px;
            height: 120px;
            top: 30%;
            left: 90%;
            animation-delay: -15s;
        }

@keyframes float {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }
            25% {
                transform: translate(20px, 20px) rotate(90deg);
            }
            50% {
                transform: translate(0, 40px) rotate(180deg);
            }
            75% {
                transform: translate(-20px, 20px) rotate(270deg);
            }
            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }

/* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
            opacity: 0;
            visibility: hidden;
            z-index: 999;
            box-shadow: 0 5px 15px rgba(143, 179, 163, 0.4);
        }

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

.back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(143, 179, 163, 0.5);
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            h1 {
                font-size: 3.5rem;
            }
            
            h2 {
                font-size: 2.5rem;
            }
            
            .hero-content {
                width: 55%;
            }
            
            .hero-image {
                width: 55%;
            }
            
            .instructor-card {
                min-width: 50%;
            }
        }

@media (max-width: 992px) {
            h1 {
                font-size: 3rem;
            }
            
            h2 {
                font-size: 2.2rem;
            }
            
            .hero-content {
                width: 100%;
                text-align: center;
            }
            
            .hero-content p {
                max-width: 100%;
            }
            
            .hero-btns {
                justify-content: center;
            }
            
            .hero-image {
                display: none;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .about-image:before {
                display: none;
            }
            
            .instructor-card {
                min-width: 100%;
            }
            
            .contact-content {
                flex-direction: column;
            }
            
            .pricing-card.popular {
                transform: scale(1);
            }
            
            .pricing-card.popular:hover {
                transform: translateY(-15px);
            }
        }

@media (max-width: 768px) {
            .navbar {
                padding: 15px 0;
            }
            
            .nav-links, .nav-actions .btn {
                display: none;
            }
            
            .mobile-toggle {
                display: flex;
            }
            
            .hero-content h1 {
                font-size: 2.5rem;
            }
            
            .section {
                padding: 100px 0;
            }
            
            .about-stats {
                flex-wrap: wrap;
                justify-content: center;
                gap: 30px;
            }
            
            .stat:not(:last-child):after {
                display: none;
            }
            
            .classes-grid {
                grid-template-columns: 1fr;
            }
            
            .contact-form {
                padding: 40px 30px;
            }
            
            .testimonial-inner {
                padding: 40px 30px;
            }
        }

@media (max-width: 576px) {
            h1 {
                font-size: 2.5rem;
            }
            
            h2 {
                font-size: 2rem;
            }
            
            .btn {
                padding: 14px 30px;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            
            .section {
                padding: 80px 0;
            }
            
            .pricing-grid {
                grid-template-columns: 1fr;
            }
            
            .contact-form {
                padding: 30px 20px;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }

JavaScript

// Preloader
        window.addEventListener('load', function() {
            const preloader = document.getElementById('preloader');
            setTimeout(() => {
                preloader.style.opacity = '0';
                preloader.style.visibility = 'hidden';
            }, 1000);
        });

// Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            const backToTop = document.querySelector('.back-to-top');
            
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
                backToTop.classList.add('active');
            } else {
                header.classList.remove('scrolled');
                backToTop.classList.remove('active');
            }
        });

// Back to top button
        document.querySelector('.back-to-top').addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Hero slider
        const heroSlides = document.querySelectorAll('.hero-slide');
        const heroDots = document.querySelectorAll('.slider-dot');
        let currentSlide = 0;
        let slideInterval;

function showSlide(n) {
            heroSlides.forEach(slide => slide.classList.remove('active'));
            heroDots.forEach(dot => dot.classList.remove('active'));
            
            currentSlide = (n + heroSlides.length) % heroSlides.length;
            
            heroSlides[currentSlide].classList.add('active');
            heroDots[currentSlide].classList.add('active');
        }

function nextSlide() {
            showSlide(currentSlide + 1);
        }

function startSlideShow() {
            slideInterval = setInterval(nextSlide, 5000);
        }

function pauseSlideShow() {
            clearInterval(slideInterval);
        }

// Start slideshow
        startSlideShow();

// Pause on hover
        const heroSlider = document.querySelector('.hero-slider');
        heroSlider.addEventListener('mouseenter', pauseSlideShow);
        heroSlider.addEventListener('mouseleave', startSlideShow);

// Dot click events
        heroDots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                pauseSlideShow();
                showSlide(index);
                startSlideShow();
            });
        });

// Instructors slider
        const instructorsTrack = document.querySelector('.instructors-track');
        const instructorCards = document.querySelectorAll('.instructor-card');
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');
        let currentInstructor = 0;
        const cardWidth = instructorCards[0].offsetWidth + 40; // including padding
        let cardsToShow = window.innerWidth < 768 ? 1 : window.innerWidth < 992 ? 2 : 3;

function updateInstructorSlider() {
            const translateX = -currentInstructor * cardWidth;
            instructorsTrack.style.transform = `translateX(${translateX}px)`;
        }

function updateCardsToShow() {
            cardsToShow = window.innerWidth < 768 ? 1 : window.innerWidth < 992 ? 2 : 3;
        }

nextBtn.addEventListener('click', () => {
            if (currentInstructor < instructorCards.length - cardsToShow) {
                currentInstructor++;
                updateInstructorSlider();
            }
        });

prevBtn.addEventListener('click', () => {
            if (currentInstructor > 0) {
                currentInstructor--;
                updateInstructorSlider();
            }
        });

window.addEventListener('resize', () => {
            updateCardsToShow();
            updateInstructorSlider();
        });

// Testimonials slider
        const testimonialsTrack = document.querySelector('.testimonials-track');
        const testimonialCards = document.querySelectorAll('.testimonial-card');
        const testimonialPrev = document.querySelector('.testimonial-prev');
        const testimonialNext = document.querySelector('.testimonial-next');
        let currentTestimonial = 0;

function updateTestimonialSlider() {
            const translateX = -currentTestimonial * 100;
            testimonialsTrack.style.transform = `translateX(${translateX}%)`;
        }

testimonialNext.addEventListener('click', () => {
            if (currentTestimonial < testimonialCards.length - 1) {
                currentTestimonial++;
                updateTestimonialSlider();
            }
        });

testimonialPrev.addEventListener('click', () => {
            if (currentTestimonial > 0) {
                currentTestimonial--;
                updateTestimonialSlider();
            }
        });

// Video play/pause
        const video = document.querySelector('.video-container video');
        const playBtn = document.querySelector('.play-btn');

playBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playBtn.innerHTML = '<i class="fas fa-pause"></i>';
            } else {
                video.pause();
                playBtn.innerHTML = '<i class="fas fa-play"></i>';
            }
        });

// Class filtering
        const filterBtns = document.querySelectorAll('.filter-btn');
        const classCards = document.querySelectorAll('.class-card');

filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class from all buttons
                filterBtns.forEach(b => b.classList.remove('active'));
                // Add active class to clicked button
                btn.classList.add('active');
                
                const filter = btn.getAttribute('data-filter');
                
                classCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 100);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });

// Scroll animations
        const animateElements = document.querySelectorAll('.animate-on-scroll');

window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll);

// Mobile menu toggle
        const mobileToggle = document.querySelector('.mobile-toggle');
        const navLinks = document.querySelector('.nav-links');

mobileToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            mobileToggle.classList.toggle('active');
            
            if (mobileToggle.classList.contains('active')) {
                mobileToggle.innerHTML = '<i class="fas fa-times"></i>';
            } else {
                mobileToggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });

// Smooth scrolling for anchor 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) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    if (navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                        mobileToggle.classList.remove('active');
                        mobileToggle.innerHTML = '<i class="fas fa-bars"></i>';
                    }
                }
            });
        });

ZenYoga Yoga Studio Template Preview

Download Options