| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>ELMA | FAQ</title> |
| | <meta name="description" content="Frequently asked questions about ELMA's authentic Greek mastic gum from Chios."> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap'); |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | } |
| | .font-serif { |
| | font-family: 'Playfair Display', serif; |
| | } |
| | .faq-item { |
| | transition: all 0.3s ease; |
| | } |
| | .faq-item.active .faq-answer { |
| | max-height: 500px; |
| | opacity: 1; |
| | padding-top: 1rem; |
| | } |
| | .faq-item.active .faq-question i { |
| | transform: rotate(180deg); |
| | } |
| | .faq-answer { |
| | max-height: 0; |
| | opacity: 0; |
| | overflow: hidden; |
| | transition: all 0.3s ease; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-white text-slate-700"> |
| | |
| | <nav class="bg-white border-b border-gray-100 fixed w-full z-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex justify-between h-16"> |
| | <div class="flex items-center"> |
| | <a href="index.html" class="flex items-center"> |
| | <span class="font-serif text-xl font-bold text-dark">Callia</span> |
| | </a> |
| | </div> |
| | <div class="hidden md:flex items-center space-x-8"> |
| | <a href="index.html" class="text-dark hover:text-primary transition">Home</a> |
| | <a href="product.html" class="text-dark hover:text-primary transition">Product</a> |
| | <a href="about.html" class="text-dark hover:text-primary transition">About</a> |
| | <a href="faq.html" class="text-dark hover:text-primary transition">FAQ</a> |
| | <a href="product.html" class="bg-primary text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition">Shop Now</a> |
| | </div> |
| | <div class="md:hidden flex items-center"> |
| | <button id="mobile-menu-button" class="text-dark"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 py-4 px-4"> |
| | <a href="index.html" class="block py-2 text-dark hover:text-primary transition">Home</a> |
| | <a href="product.html" class="block py-2 text-dark hover:text-primary transition">Product</a> |
| | <a href="about.html" class="block py-2 text-dark hover:text-primary transition">About</a> |
| | <a href="faq.html" class="block py-2 text-dark hover:text-primary transition">FAQ</a> |
| | <a href="product.html" class="mt-2 inline-block bg-primary text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition">Shop Now</a> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| | <h1 class="font-serif text-4xl md:text-5xl font-bold text-dark mb-6" data-aos="fade-up">Frequently Asked Questions</h1> |
| | <p class="text-lg text-slate-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">Everything you need to know about ELMA authentic Greek mastic gum</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-white"> |
| | <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="space-y-4"> |
| | |
| | <div class="faq-item border-b border-gray-100 pb-4" data-aos="fade-up"> |
| | <div class="faq-question flex justify-between items-center cursor-pointer py-4"> |
| | <h3 class="font-medium text-lg">What is mastic gum?</h3> |
| | <i data-feather="chevron-down" class="text-primary transition-transform"></i> |
| | </div> |
| | <div class="faq-answer text-slate-600"> |
| | <p>Mastic gum is a natural resin obtained from the mastic tree (Pistacia lentiscus), which grows exclusively on the Greek island of Chios. Unlike conventional chewing gum, mastic gum is completely natural, with no artificial ingredients. It has been used for centuries for its health benefits and unique texture.</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="faq-item border-b border-gray-100 pb-4" data-aos="fade-up" data-aos-delay="100"> |
| | <div class="faq-question flex justify-between items-center cursor-pointer py-4"> |
| | <h3 class="font-medium text-lg">How is ELMA mastic gum different?</h3> |
| | <i data-feather="chevron-down" class="text-primary transition-transform"></i> |
| | </div> |
| | <div class="faq-answer text-slate-600"> |
| | <p class="mb-2">ELMA mastic gum differs from regular chewing gum in several ways:</p> |
| | <ul class="space-y-2 pl-5 list-disc"> |
| | <li>100% natural with no artificial sweeteners, flavors, or preservatives</li> |
| | <li>Lasts much longer (typically 2-3 hours per piece)</li> |
| | <li>Offers digestive and oral health benefits</li> |
| | <li>Has a unique, slightly pine-like flavor that develops as you chew</li> |
| | <li>Becomes softer and more pliable with chewing, unlike conventional gum</li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="faq-item border-b border-gray-100 pb-4" data-aos="fade-up" data-aos-delay="200"> |
| | <div class="faq-question flex justify-between items-center cursor-pointer py-4"> |
| | <h3 class="font-medium text-lg">What |
| | </body> |
| | </html> |
