Customize: Luxury cafe websites

Modify layout text, edit custom code blocks, configure custom domains, or regenerate using AI.

Modify Page Content & Code

HTML Structure (Body Content Only)

<header class="sticky-nav">
  <div class="container">
    <div class="logo-container">
      <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=100&q=80" alt="Chai Sutta OP Logo" class="logo-horizontal">
    </div>
    <nav class="nav-links">
      <a href="#home" class="nav-link">Home</a>
      <a href="#teas" class="nav-link">Our Teas</a>
      <a href="#snacks" class="nav-link">Snacks</a>
      <a href="#about" class="nav-link">About</a>
      <a href="#contact" class="nav-link">Contact</a>
    </nav>
    <div class="nav-actions">
      <button class="btn btn-outline">Order Now</button>
      <button class="btn btn-primary">Visit Store</button>
    </div>
    <button class="mobile-menu-toggle"><i class="fa-solid fa-bars"></i></button>
  </div>
</header>

<section id="home" class="hero-section">
  <div class="hero-bg">
    <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=1920&q=80" alt="Premium Indian tea shop" class="hero-image">
    <div class="steam-animation"></div>
  </div>
  <div class="hero-overlay"></div>
  <div class="container">
    <div class="hero-content">
      <span class="badge">Freshly Brewed Every Day</span>
      <h1>Every Sip Feels Like Home</h1>
      <p class="hero-subtitle">Freshly Brewed Premium Tea • Handmade Snacks • Perfect Moments</p>
      <div class="hero-actions">
        <button class="btn btn-primary">Order Now</button>
        <button class="btn btn-outline">Visit Store</button>
      </div>
      <div class="hero-rating">
        <div class="stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <span>Loved by 5,000+ Tea Lovers</span>
      </div>
    </div>
  </div>
</section>

<section class="features-section">
  <div class="container">
    <div class="features-grid">
      <div class="feature-card">
        <div class="icon-wrapper"><i class="fa-solid fa-leaf"></i></div>
        <h3>Fresh Ingredients</h3>
        <p>We use only the freshest ingredients sourced daily for authentic taste.</p>
      </div>
      <div class="feature-card">
        <div class="icon-wrapper"><i class="fa-solid fa-heart"></i></div>
        <h3>Authentic Indian Taste</h3>
        <p>Experience the true flavors of India with our traditional recipes.</p>
      </div>
      <div class="feature-card">
        <div class="icon-wrapper"><i class="fa-solid fa-clock"></i></div>
        <h3>Quick Service</h3>
        <p>Enjoy your tea in minutes with our efficient and friendly service.</p>
      </div>
      <div class="feature-card">
        <div class="icon-wrapper"><i class="fa-solid fa-tag"></i></div>
        <h3>Affordable Pricing</h3>
        <p>Premium quality tea at prices that won't break the bank.</p>
      </div>
    </div>
  </div>
</section>

<section id="teas" class="products-section">
  <div class="container">
    <h2 class="section-title">Our Special Teas</h2>
    <p class="section-subtitle">Handcrafted with love and premium ingredients</p>
    <div class="products-grid">
      <div class="product-card">
        <div class="product-image-container">
          <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=400&q=80" alt="Masala Chai" class="product-image">
          <div class="steam-animation"></div>
        </div>
        <div class="product-info">
          <h3>Masala Chai</h3>
          <p>Rich milk tea with authentic Indian spices.</p>
          <div class="product-rating">
            <div class="stars">
              <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            </div>
            <span>4.9 (120)</span>
          </div>
          <div class="product-price">
            <span class="current-price">₹25</span>
          </div>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image-container">
          <img src="https://images.unsplash.com/photo-1571934811356-5cc061b6821f?auto=format&fit=crop&w=400&q=80" alt="Ginger Tea" class="product-image">
          <div class="steam-animation"></div>
        </div>
        <div class="product-info">
          <h3>Ginger Tea</h3>
          <p>Fresh ginger infused tea with strong aroma.</p>
          <div class="product-rating">
            <div class="stars">
              <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            </div>
            <span>4.8 (95)</span>
          </div>
          <div class="product-price">
            <span class="current-price">₹30</span>
          </div>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image-container">
          <img src="https://images.unsplash.com/photo-1597318281675-d4b814a4a4a4?auto=format&fit=crop&w=400&q=80" alt="Elaichi Tea" class="product-image">
          <div class="steam-animation"></div>
        </div>
        <div class="product-info">
          <h3>Elaichi Tea</h3>
          <p>Smooth tea blended with premium cardamom.</p>
          <div class="product-rating">
            <div class="stars">
              <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            </div>
            <span>4.9 (110)</span>
          </div>
          <div class="product-price">
            <span class="current-price">₹30</span>
          </div>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image-container">
          <img src="https://images.unsplash.com/photo-1556679343-c7306c1976bc?auto=format&fit=crop&w=400&q=80" alt="Lemon Tea" class="product-image">
          <div class="steam-animation"></div>
        </div>
        <div class="product-info">
          <h3>Lemon Tea</h3>
          <p>Refreshing black tea with fresh lemon.</p>
          <div class="product-rating">
            <div class="stars">
              <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            </div>
            <span>4.7 (85)</span>
          </div>
          <div class="product-price">
            <span class="current-price">₹35</span>
          </div>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image-container">
          <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=400&q=80" alt="Kashmiri Kahwa" class="product-image">
          <div class="steam-animation"></div>
        </div>
        <div class="product-info">
          <h3>Kashmiri Kahwa</h3>
          <p>Saffron, almonds, cinnamon and green tea.</p>
          <div class="product-rating">
            <div class="stars">
              <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            </div>
            <span>5.0 (150)</span>
          </div>
          <div class="product-price">
            <span class="current-price">₹60</span>
          </div>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="snacks" class="snacks-section">
  <div class="container">
    <h2 class="section-title">Breads & Snacks</h2>
    <p class="section-subtitle">Freshly baked and made with love</p>
    <div class="snacks-grid">
      <div class="snack-card">
        <div class="snack-image-container">
          <img src="https://images.unsplash.com/photo-1586190848861-99aa4a171e90?auto=format&fit=crop&w=400&q=80" alt="Butter Bread Toast" class="snack-image">
        </div>
        <div class="snack-info">
          <h3>Butter Bread Toast</h3>
          <p>Crispy toast with generous butter spread.</p>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="snack-card">
        <div class="snack-image-container">
          <img src="https://images.unsplash.com/photo-1598866594240-a924bb7505b0?auto=format&fit=crop&w=400&q=80" alt="Cheese Garlic Bread" class="snack-image">
        </div>
        <div class="snack-info">
          <h3>Cheese Garlic Bread</h3>
          <p>Melted cheese with garlic butter on fresh bread.</p>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="snack-card">
        <div class="snack-image-container">
          <img src="https://images.unsplash.com/photo-1553979459-d2229ba7433b?auto=format&fit=crop&w=400&q=80" alt="Veg Sandwich" class="snack-image">
        </div>
        <div class="snack-info">
          <h3>Veg Sandwich</h3>
          <p>Fresh vegetables with mint chutney in soft bread.</p>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="snack-card">
        <div class="snack-image-container">
          <img src="https://images.unsplash.com/photo-1586444248902-2f64eddc13df?auto=format&fit=crop&w=400&q=80" alt="Bun Maska" class="snack-image">
        </div>
        <div class="snack-info">
          <h3>Bun Maska</h3>
          <p>Soft bun with butter and sugar - a classic combo.</p>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
      <div class="snack-card">
        <div class="snack-image-container">
          <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&w=400&q=80" alt="Chocolate Bread" class="snack-image">
        </div>
        <div class="snack-info">
          <h3>Chocolate Bread</h3>
          <p>Sweet bread with chocolate filling - perfect with tea.</p>
          <button class="btn btn-primary btn-block">Order Now</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="why-love-section">
  <div class="container">
    <h2 class="section-title">Why People Love Us</h2>
    <div class="love-grid">
      <div class="love-item">
        <div class="icon-wrapper"><i class="fa-solid fa-glass-water"></i></div>
        <h3>100% Fresh Milk</h3>
      </div>
      <div class="love-item">
        <div class="icon-wrapper"><i class="fa-solid fa-leaf"></i></div>
        <h3>Premium Tea Leaves</h3>
      </div>
      <div class="love-item">
        <div class="icon-wrapper"><i class="fa-solid fa-kitchen-set"></i></div>
        <h3>Hygienic Kitchen</h3>
      </div>
      <div class="love-item">
        <div class="icon-wrapper"><i class="fa-solid fa-bolt"></i></div>
        <h3>Fast Service</h3>
      </div>
      <div class="love-item">
        <div class="icon-wrapper"><i class="fa-solid fa-indian-rupee-sign"></i></div>
        <h3>Pocket Friendly</h3>
      </div>
      <div class="love-item">
        <div class="icon-wrapper"><i class="fa-solid fa-mug-hot"></i></div>
        <h3>Warm Ambience</h3>
      </div>
    </div>
  </div>
</section>

<section class="gallery-section">
  <div class="container">
    <h2 class="section-title">Our Gallery</h2>
    <div class="gallery-grid">
      <div class="gallery-item large">
        <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=600&q=80" alt="Tea pouring">
      </div>
      <div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1571934811356-5cc061b6821f?auto=format&fit=crop&w=300&q=80" alt="Steaming tea">
      </div>
      <div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1597318281675-d4b814a4a4a4?auto=format&fit=crop&w=300&q=80" alt="Kulhad tea">
      </div>
      <div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1556679343-c7306c1976bc?auto=format&fit=crop&w=300&q=80" alt="Friends enjoying tea">
      </div>
      <div class="gallery-item large">
        <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=600&q=80" alt="Cafe interior">
      </div>
      <div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1586190848861-99aa4a171e90?auto=format&fit=crop&w=300&q=80" alt="Bread toast">
      </div>
      <div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1598866594240-a924bb7505b0?auto=format&fit=crop&w=300&q=80" alt="Fresh ingredients">
      </div>
    </div>
  </div>
</section>

<section class="testimonials-section">
  <div class="container">
    <h2 class="section-title">Customer Reviews</h2>
    <div class="testimonials-slider">
      <div class="testimonial-card active">
        <div class="stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <p>"Best tea in the city! The aroma itself makes me happy every time I visit."</p>
        <div class="user-info">
          <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80" alt="Rahul Sharma" class="avatar">
          <div>
            <h4>Rahul Sharma</h4>
            <span>College Student</span>
          </div>
        </div>
      </div>
      <div class="testimonial-card">
        <div class="stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <p>"Perfect evening place to relax after work. The ambience is just amazing."</p>
        <div class="user-info">
          <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?auto=format&fit=crop&w=100&q=80" alt="Priya Mehta" class="avatar">
          <div>
            <h4>Priya Mehta</h4>
            <span>Office Employee</span>
          </div>
        </div>
      </div>
      <div class="testimonial-card">
        <div class="stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <p>"The masala chai is just like my grandmother used to make. Authentic and delicious!"</p>
        <div class="user-info">
          <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100&q=80" alt="Anita Desai" class="avatar">
          <div>
            <h4>Anita Desai</h4>
            <span>Tea Lover</span>
          </div>
        </div>
      </div>
    </div>
    <div class="slider-controls">
      <button class="slider-prev"><i class="fa-solid fa-chevron-left"></i></button>
      <button class="slider-next"><i class="fa-solid fa-chevron-right"></i></button>
    </div>
  </div>
</section>

<section class="offer-section">
  <div class="container">
    <div class="offer-content">
      <h2>Special Offer</h2>
      <h3>Buy 2 Teas & Get Bread Toast at 50% OFF</h3>
      <p>Limited time offer. Don't miss out on this amazing deal!</p>
      <button class="btn btn-primary btn-large">Claim Offer Now</button>
    </div>
    <div class="offer-image">
      <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=500&q=80" alt="Special Offer">
      <div class="offer-badge">50% OFF</div>
    </div>
  </div>
</section>

<section id="about" class="about-section">
  <div class="container">
    <div class="about-content">
      <h2 class="section-title">About Chai Sutta OP</h2>
      <p>At Chai Sutta OP, every cup is brewed with love using premium tea leaves, fresh milk, and authentic Indian spices. We believe tea isn't just a drink—it's a moment to relax, connect, and create memories.</p>
      <p>Our journey began with a simple idea: to bring the authentic taste of Indian chai to everyone. From the bustling streets of Mumbai to the quiet corners of Delhi, we've perfected our recipes to give you that perfect cup every time.</p>
      <button class="btn btn-outline">Learn More</button>
    </div>
    <div class="about-image">
      <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=600&q=80" alt="About Chai Sutta OP">
    </div>
  </div>
</section>

<section class="location-section">
  <div class="container">
    <h2 class="section-title">Visit Us</h2>
    <div class="location-content">
      <div class="map-container">
        <div class="map-placeholder">
          <i class="fa-solid fa-map-marker-alt"></i>
          <p>Google Maps</p>
        </div>
      </div>
      <div class="location-info">
        <h3>Working Hours</h3>
        <p><strong>Mon-Sun</strong></p>
        <p>8 AM – 11 PM</p>
        <div class="location-actions">
          <button class="btn btn-primary"><i class="fa-solid fa-directions"></i> Get Directions</button>
          <button class="btn btn-outline"><i class="fa-solid fa-phone"></i> Call Now</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="contact" class="contact-section">
  <div class="container">
    <h2 class="section-title">Contact Us</h2>
    <div class="contact-grid">
      <div class="contact-card">
        <div class="icon-wrapper"><i class="fa-solid fa-phone"></i></div>
        <h3>Phone</h3>
        <p>+91 98765 43210</p>
        <button class="btn btn-outline btn-small">Call Now</button>
      </div>
      <div class="contact-card">
        <div class="icon-wrapper"><i class="fa-solid fa-whatsapp"></i></div>
        <h3>WhatsApp</h3>
        <p>+91 98765 43210</p>
        <button class="btn btn-outline btn-small">Message</button>
      </div>
      <div class="contact-card">
        <div class="icon-wrapper"><i class="fa-solid fa-envelope"></i></div>
        <h3>Email</h3>
        <p>hello@chaisuttaop.com</p>
        <button class="btn btn-outline btn-small">Email Us</button>
      </div>
      <div class="contact-card">
        <div class="icon-wrapper"><i class="fa-solid fa-instagram"></i></div>
        <h3>Instagram</h3>
        <p>@chaisuttaop</p>
        <button class="btn btn-outline btn-small">Follow</button>
      </div>
    </div>
  </div>
</section>

<section class="newsletter-section">
  <div class="container">
    <div class="newsletter-content">
      <h2>Stay Updated</h2>
      <p>Subscribe to our newsletter for special offers and updates.</p>
      <form id="newsletterForm" class="newsletter-form">
        <input type="email" placeholder="Your email address" required>
        <button type="submit" class="btn btn-primary">Subscribe</button>
      </form>
    </div>
  </div>
</section>

<footer class="footer-section">
  <div class="container">
    <div class="footer-content">
      <div class="footer-logo">
        <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=100&q=80" alt="Chai Sutta OP Logo" class="logo-circular">
        <h3>Chai Sutta OP</h3>
        <p>Premium Indian Tea Experience</p>
      </div>
      <div class="footer-links">
        <div class="footer-column">
          <h4>Quick Links</h4>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#teas">Our Teas</a></li>
            <li><a href="#snacks">Snacks</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h4>Opening Hours</h4>
          <p>Mon-Sun: 8 AM – 11 PM</p>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="social-icons">
        <a href="#"><i class="fa-brands fa-instagram"></i></a>
        <a href="#"><i class="fa-brands fa-facebook"></i></a>
        <a href="#"><i class="fa-brands fa-whatsapp"></i></a>
      </div>
      <p class="copyright">© 2023 Chai Sutta OP. All Rights Reserved.</p>
    </div>
  </div>
</footer>

<div class="floating-actions">
  <button class="floating-btn whatsapp-btn"><i class="fa-brands fa-whatsapp"></i></button>
  <button class="floating-btn order-btn"><i class="fa-solid fa-shopping-cart"></i> Order Now</button>
</div>

Custom CSS Stylesheet

:root {
  --primary-color: #7B3F00;
  --secondary-color: #C58B39;
  --accent-color: #F6E7C1;
  --background-color: #FFF9F2;
  --text-color: #2D2D2D;
  --text-light: #6B6B6B;
  --white: #FFFFFF;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --glass: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.2);
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

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

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

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

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

h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

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

.section-title {
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--secondary-color);
  border-radius: 3px;
}

.section-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-size: 0.9rem;
}

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

.btn-primary:hover {
  background-color: #6a3500;
  transform: translateY(-2px);
}

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

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

.btn-block {
  width: 100%;
  padding: 0.75rem;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

.sticky-nav {
  position: sticky;
  top: 0;
  background-color: var(--white);
  box-shadow: var(--shadow);
  z-index: 1000;
  padding: 1rem 0;
}

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

.logo-container {
  display: flex;
  align-items: center;
}

.logo-horizontal {
  height: 40px;
  width: auto;
}

.logo-circular {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s ease;
}

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

.nav-actions {
  display: flex;
  gap: 1rem;
}

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

.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

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

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

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.hero-content {
  max-width: 600px;
  color: var(--white);
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hero-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stars {
  color: var(--secondary-color);
}

.badge {
  display: inline-block;
  background-color: var(--secondary-color);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.features-section {
  padding: 5rem 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--primary-color);
  font-size: 1.5rem;
}

.products-section, .snacks-section {
  padding: 5rem 0;
}

.products-grid, .snacks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.product-card, .snack-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}

.product-card:hover, .snack-card:hover {
  transform: translateY(-10px);
}

.product-image-container, .snack-image-container {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.product-image, .snack-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info, .snack-info {
  padding: 1.5rem;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.product-price {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.why-love-section {
  padding: 5rem 0;
  background-color: var(--accent-color);
}

.love-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  text-align: center;
}

.love-item {
  padding: 1.5rem;
}

.gallery-section {
  padding: 5rem 0;
}

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

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

.gallery-item.large {
  grid-column: span 2;
  height: 350px;
}

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

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

.testimonials-section {
  padding: 5rem 0;
  background-color: var(--accent-color);
}

.testimonials-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--shadow);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  position: absolute;
  width: 100%;
}

.testimonial-card.active {
  opacity: 1;
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.slider-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.slider-prev, .slider-next {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-prev:hover, .slider-next:hover {
  background-color: #6a3500;
}

.offer-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--white);
}

.offer-content {
  max-width: 600px;
}

.offer-image {
  position: relative;
  margin-top: 2rem;
}

.offer-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: var(--secondary-color);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.2rem;
}

.about-section {
  padding: 5rem 0;
}

.about-content {
  max-width: 600px;
}

.about-image {
  margin-top: 2rem;
}

.about-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.location-section {
  padding: 5rem 0;
}

.location-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.map-container {
  height: 400px;
  background-color: var(--accent-color);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.map-placeholder {
  text-align: center;
  color: var(--text-light);
}

.map-placeholder i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.location-info {
  padding: 2rem;
}

.contact-section {
  padding: 5rem 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.contact-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-10px);
}

.newsletter-section {
  padding: 3rem 0;
  background-color: var(--accent-color);
}

.newsletter-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.newsletter-form {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.newsletter-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-size: 1rem;
}

.footer-section {
  padding: 3rem 0 0;
  background-color: var(--primary-color);
  color: var(--white);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

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

.footer-logo h3 {
  margin-top: 1rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column ul li a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-column ul li a:hover {
  color: var(--secondary-color);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  color: var(--white);
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--secondary-color);
}

.copyright {
  font-size: 0.9rem;
}

.floating-actions {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.floating-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.whatsapp-btn {
  background-color: #25D366;
  color: var(--white);
}

.whatsapp-btn:hover {
  background-color: #128C7E;
  transform: translateY(-3px);
}

.order-btn {
  background-color: var(--primary-color);
  color: var(--white);
  width: auto;
  padding: 0 1rem;
  border-radius: 50px;
}

.order-btn:hover {
  background-color: #6a3500;
  transform: translateY(-3px);
}

.steam-animation {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20 80 Q30 60 40 80 Q50 60 60 80 Q70 60 80 80" fill="none" stroke="white" stroke-width="2" opacity="0.7"/></svg>') no-repeat;
  background-size: contain;
  animation: steam 3s ease-in-out infinite;
}

@keyframes steam {
  0% { transform: translate(-50%, 0) scale(0.8); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translate(-50%, -50px) scale(1.2); opacity: 0; }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

h2 {
    font-size: 2rem;
  }

.nav-links, .nav-actions {
    display: none;
  }

.mobile-menu-toggle {
    display: block;
  }

.hero-actions {
    flex-direction: column;
  }

.location-content {
    grid-template-columns: 1fr;
  }

.footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

.footer-bottom {
    flex-direction: column;
    gap: 1rem;
  }

.floating-actions {
    bottom: 1rem;
    right: 1rem;
  }

.order-btn {
    display: none;
  }
}

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

.products-grid, .snacks-grid, .contact-grid {
    grid-template-columns: 1fr;
  }

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

.gallery-item.large {
    grid-column: span 1;
    height: 250px;
  }
}

Custom JS Logic

// Form submission functions
function submitLead(event, formData) {
  const data = {
    name: formData.get('name'),
    email: formData.get('email'),
    phone: formData.get('phone'),
    timestamp: new Date().toISOString()
  };
  
  console.log('Lead submitted:', data);
  // Here you would typically send the data to your backend
  // Example: fetch('/api/leads', { method: 'POST', body: JSON.stringify(data) })
}

function submitNewsletter(formData) {
  const data = {
    email: formData.get('email'),
    timestamp: new Date().toISOString()
  };
  
  console.log('Newsletter subscription:', data);
  // Here you would typically send the data to your backend
  // Example: fetch('/api/newsletter', { method: 'POST', body: JSON.stringify(data) })
}

function initiatePayment(amount, productName) {
  console.log(`Initiating payment of ₹${amount} for ${productName}`);
  // Here you would typically integrate with a payment gateway
  // Example: redirect to payment page or open payment modal
}