Coffee Cafe 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>Nebula Café | Futuristic Coffee Experience</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://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    
</head>
<body>
    
    <header id="header">
        <a href="#" class="logo"><i class="fas fa-mug-hot"></i>Nebula Café</a>
        <nav class="navbar">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#menu">Menu</a>
            <a href="#testimonials">Testimonials</a>
            <a href="#gallery">Gallery</a>
            <a href="#team">Team</a>
            <a href="#contact">Contact</a>
        </nav>
        <div class="header-btn">
            <a href="#" class="btn btn-outline">Login</a>
            <a href="#" class="btn btn-primary">Sign Up</a>
        </div>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1 class="slide-reveal">Experience the <span class="velvet-caption">Future</span> of Coffee</h1>
            <p>Discover our artisan blends crafted with precision and passion. Nebula Café brings you an out-of-this-world coffee experience with sustainably sourced beans and innovative brewing techniques.</p>
            <div class="hero-btns">
                <a href="#menu" class="btn btn-primary">Explore Menu</a>
                <a href="#contact" class="btn btn-outline">Book a Table</a>
            </div>
        </div>
        <div class="hero-image"></div>
        <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Futuristic Coffee" class="hero-coffee">
    </section>

<section class="section" id="about">
        <h2 class="section-title">Our Story</h2>
        <div class="about-content">
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Café Interior">
            </div>
            <div class="about-text">
                <h3>Crafting Cosmic Coffee Experiences Since 2020</h3>
                <p>Founded by a team of coffee enthusiasts and space lovers, Nebula Café combines cutting-edge technology with traditional brewing methods to create unique flavor profiles that transport you to another dimension.</p>
                <p>Our beans are ethically sourced from micro-lots around the world, then roasted in small batches using our proprietary zero-gravity roasting technique that ensures perfect consistency and unlocks hidden flavor notes.</p>
                <div class="about-stats">
                    <div class="stat-item glass">
                        <i class="fas fa-globe"></i>
                        <h4>12</h4>
                        <p>Countries Sourced</p>
                    </div>
                    <div class="stat-item glass">
                        <i class="fas fa-coffee"></i>
                        <h4>50+</h4>
                        <p>Unique Blends</p>
                    </div>
                    <div class="stat-item glass">
                        <i class="fas fa-users"></i>
                        <h4>10K+</h4>
                        <p>Happy Customers</p>
                    </div>
                    <div class="stat-item glass">
                        <i class="fas fa-award"></i>
                        <h4>8</h4>
                        <p>Awards Won</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section menu" id="menu">
        <h2 class="section-title">Our Cosmic Menu</h2>
        <div class="menu-container">
            <div class="menu-item glass">
                <div class="menu-item-img">
                    <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Black Hole Brew">
                    <span class="menu-item-tag">Bestseller</span>
                </div>
                <div class="menu-item-content">
                    <h3>Black Hole Brew</h3>
                    <p>Our signature dark roast with hints of dark chocolate and cherry, pulled through our patented vacuum extraction system.</p>
                </div>
                <div class="menu-item-footer">
                    <span class="menu-item-price">$6.99</span>
                    <div class="menu-item-btn">
                        <i class="fas fa-plus"></i>
                    </div>
                </div>
            </div>
            <div class="menu-item glass">
                <div class="menu-item-img">
                    <img src="https://images.unsplash.com/photo-1541167760496-1628856ab772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1637&q=80" alt="Nebula Latte">
                    <span class="menu-item-tag">New</span>
                </div>
                <div class="menu-item-content">
                    <h3>Nebula Latte</h3>
                    <p>A swirling galaxy of espresso, steamed milk, and our special blue algae foam that changes color as you drink.</p>
                </div>
                <div class="menu-item-footer">
                    <span class="menu-item-price">$7.49</span>
                    <div class="menu-item-btn">
                        <i class="fas fa-plus"></i>
                    </div>
                </div>
            </div>
            <div class="menu-item glass">
                <div class="menu-item-img">
                    <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80" alt="Quantum Cold Brew">
                </div>
                <div class="menu-item-content">
                    <h3>Quantum Cold Brew</h3>
                    <p>Slow-steeped for 24 hours in zero-gravity conditions, resulting in an incredibly smooth and complex flavor profile.</p>
                </div>
                <div class="menu-item-footer">
                    <span class="menu-item-price">$5.99</span>
                    <div class="menu-item-btn">
                        <i class="fas fa-plus"></i>
                    </div>
                </div>
            </div>
            <div class="menu-item glass">
                <div class="menu-item-img">
                    <img src="https://images.unsplash.com/photo-1572442388796-11668a67e53d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1635&q=80" alt="Solar Flare Macchiato">
                </div>
                <div class="menu-item-content">
                    <h3>Solar Flare Macchiato</h3>
                    <p>A layered espresso drink with caramelized orange syrup and edible gold leaf that creates a sunrise effect.</p>
                </div>
                <div class="menu-item-footer">
                    <span class="menu-item-price">$8.99</span>
                    <div class="menu-item-btn">
                        <i class="fas fa-plus"></i>
                    </div>
                </div>
            </div>
            <div class="menu-item glass">
                <div class="menu-item-img">
                    <img src="https://images.unsplash.com/photo-1596079890744-c1a0462d4d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1631&q=80" alt="Milky Way Mocha">
                </div>
                <div class="menu-item-content">
                    <h3>Milky Way Mocha</h3>
                    <p>White and dark chocolate ganache swirled with espresso and topped with star-shaped marshmallows.</p>
                </div>
                <div class="menu-item-footer">
                    <span class="menu-item-price">$7.99</span>
                    <div class="menu-item-btn">
                        <i class="fas fa-plus"></i>
                    </div>
                </div>
            </div>
            <div class="menu-item glass">
                <div class="menu-item-img">
                    <img src="https://images.unsplash.com/photo-1600271886742-f049cd5b8a3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Astro Americano">
                </div>
                <div class="menu-item-content">
                    <h3>Astro Americano</h3>
                    <p>Pure espresso shots diluted with our proprietary mineral water blend harvested from volcanic springs.</p>
                </div>
                <div class="menu-item-footer">
                    <span class="menu-item-price">$4.99</span>
                    <div class="menu-item-btn">
                        <i class="fas fa-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials" id="testimonials">
        <h2 class="section-title">Cosmic Feedback</h2>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide glass">
                    <div class="testimonial-header">
                        <div class="testimonial-img">
                            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J.">
                        </div>
                        <div class="testimonial-user">
                            <h4>Sarah J.</h4>
                            <p>Food Blogger</p>
                        </div>
                    </div>
                    <div class="testimonial-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>
                    <p class="testimonial-text">"The Black Hole Brew is literally out of this world! I've never tasted coffee with such depth and complexity. The futuristic ambiance of the café makes the experience even more special."</p>
                </div>
                <div class="swiper-slide glass">
                    <div class="testimonial-header">
                        <div class="testimonial-img">
                            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T.">
                        </div>
                        <div class="testimonial-user">
                            <h4>Michael T.</h4>
                            <p>Tech Entrepreneur</p>
                        </div>
                    </div>
                    <div class="testimonial-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>
                    <p class="testimonial-text">"As someone who's always looking for innovation, Nebula Café delivers. The Quantum Cold Brew's smoothness is unmatched, and I love how they incorporate technology into the brewing process."</p>
                </div>
                <div class="swiper-slide glass">
                    <div class="testimonial-header">
                        <div class="testimonial-img">
                            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R.">
                        </div>
                        <div class="testimonial-user">
                            <h4>Emily R.</h4>
                            <p>Interior Designer</p>
                        </div>
                    </div>
                    <div class="testimonial-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>
                    <p class="testimonial-text">"The visual experience is as incredible as the coffee! The Nebula Latte's color-changing foam is mesmerizing, and the space-themed decor is perfectly executed. My new favorite spot in town!"</p>
                </div>
                <div class="swiper-slide glass">
                    <div class="testimonial-header">
                        <div class="testimonial-img">
                            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="David K.">
                        </div>
                        <div class="testimonial-user">
                            <h4>David K.</h4>
                            <p>Coffee Connoisseur</p>
                        </div>
                    </div>
                    <div class="testimonial-rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                    <p class="testimonial-text">"I was skeptical about the 'zero-gravity roasting' claim, but after tasting their Solar Flare Macchiato, I'm a believer. The flavor notes are incredibly clear and distinct. Impressive craftsmanship!"</p>
                </div>
                <div class="swiper-slide glass">
                    <div class="testimonial-header">
                        <div class="testimonial-img">
                            <img src="https://randomuser.me/api/portraits/women/54.jpg" alt="Jessica L.">
                        </div>
                        <div class="testimonial-user">
                            <h4>Jessica L.</h4>
                            <p>Social Media Influencer</p>
                        </div>
                    </div>
                    <div class="testimonial-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>
                    <p class="testimonial-text">"Not only is the Milky Way Mocha delicious, but it's also the most Instagrammable drink I've ever had! The staff is knowledgeable and the service is stellar (pun intended)."</p>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

<section class="section" id="gallery">
        <h2 class="section-title">Cosmic Moments</h2>
        <div class="gallery-container">
            <div class="gallery-item glass">
                <img src="https://images.unsplash.com/photo-1453614512568-cd6026d1b5d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Café Interior">
                <div class="gallery-item-content">
                    <h3>Our Space</h3>
                    <p>Futuristic design meets cozy atmosphere</p>
                </div>
            </div>
            <div class="gallery-item glass">
                <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Coffee Preparation">
                <div class="gallery-item-content">
                    <h3>Brewing Process</h3>
                    <p>Precision and technology combined</p>
                </div>
            </div>
            <div class="gallery-item glass">
                <img src="https://images.unsplash.com/photo-1541167760496-1628856ab772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1637&q=80" alt="Specialty Drinks">
                <div class="gallery-item-content">
                    <h3>Signature Creations</h3>
                    <p>Art meets science in every cup</p>
                </div>
            </div>
            <div class="gallery-item glass">
                <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80" alt="Coffee Beans">
                <div class="gallery-item-content">
                    <h3>Premium Selection</h3>
                    <p>Only the finest beans make the cut</p>
                </div>
            </div>
            <div class="gallery-item glass">
                <img src="https://images.unsplash.com/photo-1572442388796-11668a67e53d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1635&q=80" alt="Barista at Work">
                <div class="gallery-item-content">
                    <h3>Expert Craftsmanship</h3>
                    <p>Our baristas are true coffee artists</p>
                </div>
            </div>
            <div class="gallery-item glass">
                <img src="https://images.unsplash.com/photo-1596079890744-c1a0462d4d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1631&q=80" alt="Customers Enjoying">
                <div class="gallery-item-content">
                    <h3>Happy Customers</h3>
                    <p>The reason we do what we do</p>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="team">
        <h2 class="section-title">Meet Our Cosmic Team</h2>
        <div class="team-container">
            <div class="team-member">
                <div class="team-member-img">
                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Emma Johnson">
                    <div class="team-member-social">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <h3>Emma Johnson</h3>
                <p>Founder & CEO</p>
            </div>
            <div class="team-member">
                <div class="team-member-img">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Carlos Mendez">
                    <div class="team-member-social">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <h3>Carlos Mendez</h3>
                <p>Head Roaster</p>
            </div>
            <div class="team-member">
                <div class="team-member-img">
                    <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Aisha Patel">
                    <div class="team-member-social">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <h3>Aisha Patel</h3>
                <p>Master Barista</p>
            </div>
            <div class="team-member">
                <div class="team-member-img">
                    <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Kim">
                    <div class="team-member-social">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <h3>David Kim</h3>
                <p>Beverage Innovator</p>
            </div>
        </div>
    </section>

<section class="section contact" id="contact">
        <h2 class="section-title">Contact Us</h2>
        <div class="contact-container">
            <div class="contact-info">
                <div class="contact-info-item">
                    <div class="contact-info-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="contact-info-content">
                        <h3>Location</h3>
                        <p>123 Cosmic Lane, Galaxy District<br>New York, NY 10001</p>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-info-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="contact-info-content">
                        <h3>Phone</h3>
                        <p>+1 (555) 123-4567<br>+1 (555) 765-4321</p>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-info-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="contact-info-content">
                        <h3>Email</h3>
                        <p>info@nebulacafe.com<br>reservations@nebulacafe.com</p>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-info-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="contact-info-content">
                        <h3>Opening Hours</h3>
                        <p>Monday - Friday: 7:00 AM - 10:00 PM<br>Saturday - Sunday: 8:00 AM - 11:00 PM</p>
                    </div>
                </div>
            </div>
            <div class="contact-form glass">
                <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="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h3>About Us</h3>
                <p>Nebula Café is redefining the coffee experience through innovation, sustainability, and cosmic inspiration. We're on a mission to take your taste buds to another galaxy.</p>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></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">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#menu">Our Menu</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#team">Our Team</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Menu</h3>
                <ul class="footer-links">
                    <li><a href="#">Black Hole Brew</a></li>
                    <li><a href="#">Nebula Latte</a></li>
                    <li><a href="#">Quantum Cold Brew</a></li>
                    <li><a href="#">Solar Flare Macchiato</a></li>
                    <li><a href="#">Milky Way Mocha</a></li>
                    <li><a href="#">Astro Americano</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Newsletter</h3>
                <p>Subscribe to our cosmic newsletter for the latest updates, special offers, and interstellar coffee knowledge.</p>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="Your Email" required>
                    <button type="submit" class="newsletter-btn">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Nebula Café. All Rights Reserved. Designed by <a href="#">Cosmic Creatives</a></p>
        </div>
    </footer>

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

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

</body>
</html>

CSS

:root {
            --primary: #FFD700;
            --primary-light: #FFF59D;
            --primary-dark: #FFC107;
            --dark: #121212;
            --light: #f8f9fa;
            --glass: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            background-color: var(--dark);
            color: var(--light);
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(255, 215, 0, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(255, 215, 0, 0.05) 0%, transparent 20%);
        }

/* Glassmorphism Effect */
        .glass {
            background: var(--glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            border-radius: 16px;
        }

/* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

::-webkit-scrollbar-track {
            background: var(--dark);
        }

::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }

/* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            transition: all 0.3s ease;
        }

header.scrolled {
            background: rgba(18, 18, 18, 0.9);
            backdrop-filter: blur(10px);
            padding: 15px 10%;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

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

.logo i {
            margin-right: 10px;
            font-size: 32px;
        }

.navbar {
            display: flex;
            gap: 35px;
        }

.navbar a {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            position: relative;
            transition: all 0.3s ease;
        }

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

.navbar a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: width 0.3s ease;
        }

.navbar a:hover::after {
            width: 100%;
        }

.header-btn {
            display: flex;
            gap: 20px;
        }

.btn {
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

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

.btn-primary:hover {
            background: transparent;
            color: var(--primary);
        }

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

.btn-outline:hover {
            background: var(--primary);
            color: var(--dark);
        }

.menu-toggle {
            display: none;
            font-size: 24px;
            color: var(--light);
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 10%;
            position: relative;
            overflow: hidden;
        }

.hero-content {
            max-width: 600px;
            z-index: 10;
        }

.hero-content h1 {
            font-size: 56px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease forwards;
        }

.hero-content p {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 30px;
            line-height: 1.6;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease 0.3s forwards;
        }

.hero-btns {
            display: flex;
            gap: 20px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease 0.6s forwards;
        }

.hero-image {
            position: absolute;
            right: 10%;
            top: 50%;
            transform: translateY(-50%);
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
            opacity: 0.2;
            z-index: 1;
        }

.hero-coffee {
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            width: 600px;
            z-index: 5;
            opacity: 0;
            animation: fadeIn 1s ease 0.9s forwards;
        }

/* About Section */
        .section {
            padding: 100px 10%;
            position: relative;
        }

.section-title {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 60px;
            text-align: center;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
            color: var(--primary);
        }

.section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.about-image {
            flex: 1;
            position: relative;
            min-height: 400px;
            border-radius: 20px;
            overflow: hidden;
        }

.about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

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

.about-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 215, 0, 0.3), transparent);
            z-index: 1;
        }

.about-text {
            flex: 1;
        }

.about-text h3 {
            font-size: 28px;
            margin-bottom: 20px;
            color: var(--primary);
        }

.about-text p {
            font-size: 16px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
        }

.about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

.stat-item {
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }

.stat-item:hover {
            transform: translateY(-5px);
        }

.stat-item i {
            font-size: 36px;
            color: var(--primary);
            margin-bottom: 15px;
        }

.stat-item h4 {
            font-size: 36px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 5px;
        }

.stat-item p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

/* Menu Section */
        .menu {
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.03) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.03) 0%, transparent 30%);
        }

.menu-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.menu-item {
            padding: 30px;
            border-radius: 20px;
            transition: all 0.5s ease;
            opacity: 0;
            transform: translateY(50px);
        }

.menu-item.in-view {
            opacity: 1;
            transform: translateY(0);
        }

.menu-item:nth-child(1) {
            transition-delay: 0.1s;
        }
        .menu-item:nth-child(2) {
            transition-delay: 0.2s;
        }
        .menu-item:nth-child(3) {
            transition-delay: 0.3s;
        }
        .menu-item:nth-child(4) {
            transition-delay: 0.4s;
        }
        .menu-item:nth-child(5) {
            transition-delay: 0.5s;
        }
        .menu-item:nth-child(6) {
            transition-delay: 0.6s;
        }

.menu-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(255, 215, 0, 0.1);
        }

.menu-item-img {
            width: 100%;
            height: 200px;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 20px;
            position: relative;
        }

.menu-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.menu-item:hover .menu-item-img img {
            transform: scale(1.1);
        }

.menu-item-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--primary);
            color: var(--dark);
            padding: 5px 15px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
        }

.menu-item-content h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: var(--light);
        }

.menu-item-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 15px;
            line-height: 1.6;
        }

.menu-item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

.menu-item-price {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
        }

.menu-item-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--dark);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.menu-item-btn:hover {
            transform: rotate(90deg);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
        }

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

.testimonials::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 215, 0, 0.03), transparent);
            z-index: -1;
        }

.swiper {
            width: 100%;
            padding: 50px 0;
        }

.swiper-slide {
            width: 300px;
            padding: 30px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

.swiper-slide:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(255, 215, 0, 0.1);
        }

.testimonial-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

.testimonial-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            border: 2px solid var(--primary);
        }

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

.testimonial-user h4 {
            font-size: 18px;
            color: var(--light);
            margin-bottom: 5px;
        }

.testimonial-user p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }

.testimonial-rating {
            color: var(--primary);
            margin-bottom: 15px;
        }

.testimonial-text {
            font-size: 14px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.7);
        }

.swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.3);
            opacity: 1;
        }

.swiper-pagination-bullet-active {
            background: var(--primary);
        }

/* Gallery Section */
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 50px;
        }

.gallery-item {
            height: 250px;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.gallery-item:hover img {
            transform: scale(1.1);
        }

.gallery-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.gallery-item:hover::after {
            opacity: 1;
        }

.gallery-item-content {
            position: absolute;
            bottom: -50px;
            left: 0;
            width: 100%;
            padding: 20px;
            z-index: 2;
            transition: all 0.3s ease;
        }

.gallery-item:hover .gallery-item-content {
            bottom: 0;
        }

.gallery-item-content h3 {
            font-size: 18px;
            color: var(--light);
            margin-bottom: 5px;
        }

.gallery-item-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

/* Team Section */
        .team-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.team-member {
            text-align: center;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.5s ease;
        }

.team-member.in-view {
            opacity: 1;
            transform: translateY(0);
        }

.team-member:nth-child(1) {
            transition-delay: 0.1s;
        }
        .team-member:nth-child(2) {
            transition-delay: 0.2s;
        }
        .team-member:nth-child(3) {
            transition-delay: 0.3s;
        }
        .team-member:nth-child(4) {
            transition-delay: 0.4s;
        }

.team-member-img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 20px;
            border: 5px solid var(--primary);
            position: relative;
            transition: all 0.3s ease;
        }

.team-member:hover .team-member-img {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        }

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

.team-member-social {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 0;
            display: flex;
            justify-content: center;
            gap: 15px;
            transform: translateY(100%);
            transition: all 0.3s ease;
        }

.team-member:hover .team-member-social {
            transform: translateY(0);
        }

.team-member-social a {
            color: var(--light);
            font-size: 16px;
            transition: all 0.3s ease;
        }

.team-member-social a:hover {
            color: var(--primary);
            transform: translateY(-3px);
        }

.team-member h3 {
            font-size: 20px;
            color: var(--light);
            margin-bottom: 5px;
        }

.team-member p {
            font-size: 14px;
            color: var(--primary);
        }

/* Contact Section */
        .contact {
            background-image: 
                radial-gradient(circle at 30% 70%, rgba(255, 215, 0, 0.03) 0%, transparent 30%),
                radial-gradient(circle at 70% 30%, rgba(255, 215, 0, 0.03) 0%, transparent 30%);
        }

.contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
            margin-top: 50px;
        }

.contact-info {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

.contact-info-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }

.contact-info-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }

.contact-info-content h3 {
            font-size: 20px;
            color: var(--light);
            margin-bottom: 10px;
        }

.contact-info-content p {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

.contact-form {
            padding: 30px;
            border-radius: 20px;
        }

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

.form-control {
            width: 100%;
            padding: 15px 20px;
            border-radius: 10px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: var(--light);
            font-size: 16px;
            transition: all 0.3s ease;
        }

.form-control:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
        }

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

.submit-btn {
            width: 100%;
            padding: 15px;
            border-radius: 10px;
            background: var(--primary);
            color: var(--dark);
            font-size: 16px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.submit-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
        }

/* Footer */
        footer {
            background: rgba(0, 0, 0, 0.5);
            padding: 70px 10% 30px;
            position: relative;
        }

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

.footer-col h3 {
            font-size: 20px;
            color: var(--primary);
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background: var(--primary);
        }

.footer-col p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
            margin-bottom: 15px;
        }

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

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

.footer-links a {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }

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

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

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

.footer-social a:hover {
            background: var(--primary);
            color: var(--dark);
            transform: translateY(-5px);
        }

.footer-newsletter p {
            margin-bottom: 20px;
        }

.newsletter-form {
            display: flex;
        }

.newsletter-input {
            flex: 1;
            padding: 12px 15px;
            border-radius: 30px 0 0 30px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: var(--light);
            font-size: 14px;
        }

.newsletter-input:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.15);
        }

.newsletter-btn {
            padding: 0 20px;
            border-radius: 0 30px 30px 0;
            border: none;
            background: var(--primary);
            color: var(--dark);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.newsletter-btn:hover {
            background: var(--primary-dark);
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

.footer-bottom p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
        }

.footer-bottom a {
            color: var(--primary);
            text-decoration: none;
        }

/* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
        }

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

.back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
        }

/* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

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

/* Velvet Caption Reveal */
        .velvet-caption {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

.velvet-caption::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
            z-index: -1;
        }

.velvet-caption:hover::after {
            transform: translateX(0);
        }

/* Elegant Slide Reveal */
        .slide-reveal {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

.slide-reveal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
            mix-blend-mode: multiply;
        }

.slide-reveal:hover::after {
            transform: translateX(0);
        }

/* Responsive */
        @media (max-width: 1200px) {
            .hero-content h1 {
                font-size: 48px;
            }
            
            .hero-image {
                width: 400px;
                height: 400px;
            }
            
            .hero-coffee {
                width: 500px;
            }
        }

@media (max-width: 992px) {
            .hero {
                flex-direction: column;
                justify-content: center;
                text-align: center;
                padding-top: 120px;
                padding-bottom: 80px;
            }
            
            .hero-content {
                max-width: 100%;
                margin-bottom: 50px;
            }
            
            .hero-btns {
                justify-content: center;
            }
            
            .hero-image {
                position: relative;
                top: auto;
                right: auto;
                transform: none;
                margin: 0 auto;
            }
            
            .hero-coffee {
                position: relative;
                top: auto;
                right: auto;
                transform: none;
                margin: 0 auto;
                width: 100%;
                max-width: 500px;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .about-image {
                width: 100%;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            .navbar {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: rgba(18, 18, 18, 0.95);
                backdrop-filter: blur(10px);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                transition: all 0.5s ease;
                z-index: 999;
            }
            
            .navbar.active {
                left: 0;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .header-btn {
                display: none;
            }
            
            .hero-content h1 {
                font-size: 36px;
            }
            
            .section-title {
                font-size: 30px;
            }
            
            .about-stats {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: 1fr;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .newsletter-input {
                border-radius: 30px;
                margin-bottom: 10px;
            }
            
            .newsletter-btn {
                border-radius: 30px;
                padding: 12px;
            }
        }

@media (max-width: 576px) {
            .hero-content h1 {
                font-size: 32px;
            }
            
            .hero-btns {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn {
                width: 100%;
                text-align: center;
            }
            
            .section {
                padding: 70px 5%;
            }
            
            .menu-container {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navbar = document.querySelector('.navbar');
        
        menuToggle.addEventListener('click', () => {
            navbar.classList.toggle('active');
            menuToggle.classList.toggle('fa-times');
        });

// Close mobile menu when clicking on a link
        document.querySelectorAll('.navbar a').forEach(link => {
            link.addEventListener('click', () => {
                navbar.classList.remove('active');
                menuToggle.classList.remove('fa-times');
            });
        });

// Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('#header');
            header.classList.toggle('scrolled', window.scrollY > 100);
            
            // Back to top button
            const backToTop = document.querySelector('.back-to-top');
            backToTop.classList.toggle('active', window.scrollY > 300);
        });

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

// Initialize Swiper
        const swiper = new Swiper('.mySwiper', {
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                768: {
                    slidesPerView: 2,
                },
                992: {
                    slidesPerView: 3,
                }
            }
        });

// Scroll reveal animation
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.menu-item, .team-member');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if(elementPosition < screenPosition) {
                    element.classList.add('in-view');
                }
            });
        };

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

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

Coffee Cafe Template Preview

Download Options