FAQ fixed

about.html

@@ -121,6 +121,154 @@
           culpa qui officia deserunt mollit anim id est laborum.
         </p>
       </section>
+
+      <!-- FAQ Section -->
+      <section class="faq-section" aria-labelledby="faq-heading">
+        <h2 id="faq-heading">Frequently Asked Questions</h2>
+
+        <div class="faq-item">
+          <div
+            class="faq-question"
+            role="button"
+            aria-expanded="false"
+            aria-controls="faq-answer-1"
+          >
+            <h4>What makes your teas different from supermarket teas?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-1" class="faq-answer">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div
+            class="faq-question"
+            role="button"
+            aria-expanded="false"
+            aria-controls="faq-answer-2"
+          >
+            <h4>How should I store my tea to maintain freshness?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-2" class="faq-answer">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div
+            class="faq-question"
+            role="button"
+            aria-expanded="false"
+            aria-controls="faq-answer-3"
+          >
+            <h4>
+              What is the best water temperature for brewing different types of
+              tea?
+            </h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-3" class="faq-answer">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div
+            class="faq-question"
+            role="button"
+            aria-expanded="false"
+            aria-controls="faq-answer-4"
+          >
+            <h4>Do you offer organic teas?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-4" class="faq-answer">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div
+            class="faq-question"
+            role="button"
+            aria-expanded="false"
+            aria-controls="faq-answer-5"
+          >
+            <h4>
+              How long does shipping take, and do you ship internationally?
+            </h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-5" class="faq-answer">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div
+            class="faq-question"
+            role="button"
+            aria-expanded="false"
+            aria-controls="faq-answer-6"
+          >
+            <h4>Can I return or exchange tea if I'm not satisfied?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-6" class="faq-answer">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+      </section>
     </main>
 
     <footer>
@@ -130,5 +278,7 @@
         tea experts.
       </p>
     </footer>
+
+    <script src="script.js"></script>
   </body>
 </html>

contact.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <title>Contact Us - Global Tea Emporium</title>
     <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
   </head>
   <body>
     <header>

index.html

@@ -4,15 +4,19 @@
     <meta charset="UTF-8" />
     <title>Global Tea Emporium - Premium Authentic Teas Worldwide</title>
     <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
   </head>
   <body>
-    <header>
+    <!-- Skip to main content link for screen readers -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+    
+    <header role="banner">
       <div class="logo-container">
-        <img src="images/1757630393.png" class="logo" alt="Global Tea Emporium Logo" />
+        <img src="images/1757630393.png" class="logo" alt="Global Tea Emporium Logo - Premium Authentic Teas Worldwide" />
       </div>
-      <nav class="main-nav">
+      <nav class="main-nav" role="navigation" aria-label="Main navigation">
         <ul>
-          <li><a href="index.html">Home</a></li>
+          <li><a href="index.html" aria-current="page">Home</a></li>
           <li><a href="about.html">Our Story</a></li>
           <li><a href="teas.html">Our Teas</a></li>
           <li><a href="contact.html">Contact</a></li>
@@ -20,20 +24,20 @@
       </nav>
     </header>
 
-    <main>
-      <section class="banner">
-        <h1>Global Tea Emporium</h1>
+    <main id="main-content" role="main">
+      <section class="banner" aria-labelledby="hero-heading">
+        <h1 id="hero-heading">Global Tea Emporium</h1>
         <p class="tagline">Authentic Teas from Around the World</p>
       </section>
 
-      <section class="introduction">
-        <h2>About Our Tea Journey</h2>
+      <section class="introduction" aria-labelledby="intro-heading">
+        <h2 id="intro-heading">About Our Tea Journey</h2>
         <p>Welcome to <strong>Global Tea Emporium</strong>, your premier destination for <em>authentic, premium teas</em> sourced directly from traditional tea gardens across the globe. With over <strong>15 years of experience</strong> in the tea industry, we have built relationships with <em>artisan farmers</em> and <em>tea masters</em> in the world's most renowned tea-growing regions.</p>
         <p>Our mission is to bring you the <strong>finest quality teas</strong> while supporting sustainable farming practices and preserving traditional tea-making techniques that have been passed down through <strong>generations</strong>.</p>
       </section>
 
-      <section class="services">
-        <h2>Our Premium Tea Collections</h2>
+      <section class="services" aria-labelledby="services-heading">
+        <h2 id="services-heading">Our Premium Tea Collections</h2>
         <ul class="services-list">
           <li><strong>Asian Green Teas:</strong> Delicate sencha from Japan, dragon well from China, and matcha varieties</li>
           <li><strong>Indian Black Teas:</strong> Authentic Assam, Darjeeling, and Nilgiri teas from renowned estates</li>
@@ -42,10 +46,30 @@
           <li><strong>White Tea Collection:</strong> Rare silver needle and white peony from China's Fujian province</li>
           <li><strong>Pu-erh & Fermented Teas:</strong> Aged teas from Yunnan with unique earthy characteristics</li>
         </ul>
+        
+        <!-- Dynamic Image Gallery -->
+        <div class="tea-gallery" role="region" aria-label="Tea collection gallery">
+          <h3>Explore Our Tea Selection</h3>
+          <div class="gallery-container">
+            <div class="gallery-main">
+              <img id="gallery-image" src="images/green-tea-leaves.webp" alt="Premium Green Tea Leaves" />
+              <div class="gallery-controls">
+                <button id="prev-btn" class="gallery-btn" aria-label="Previous image">‹</button>
+                <button id="next-btn" class="gallery-btn" aria-label="Next image">›</button>
+              </div>
+            </div>
+            <div class="gallery-thumbnails">
+              <img src="images/green-tea-leaves.webp" alt="Premium Green Tea Leaves" class="thumbnail active" data-index="0">
+              <img src="images/Indian Black Teas.webp" alt="Indian Black Tea Selection" class="thumbnail" data-index="1">
+              <img src="images/Oolong Selections.jpg" alt="Oolong Tea Collection" class="thumbnail" data-index="2">
+            </div>
+          </div>
+          <p id="gallery-caption" class="gallery-caption">Premium Green Tea Leaves - Hand-picked from our finest gardens</p>
+        </div>
       </section>
     </main>
 
-    <footer>
+    <footer role="contentinfo">
       <p>&copy; 2024 Global Tea Emporium. All rights reserved.</p>
       <p>Visit our <a href="about.html">Our Story page</a> to learn more about our tea journey.</p>
     </footer>

script.js

@@ -1,83 +1,197 @@
-// Global Tea Emporium - JavaScript Functionality
+// Global Tea Emporium - Optimized JavaScript
 
-// Contact Form Handling
-document.addEventListener('DOMContentLoaded', function() {
-    const contactForm = document.querySelector('.contact-form');
+document.addEventListener("DOMContentLoaded", function () {
+  // ===== FAQ ACCORDION =====
+  const faqQuestions = document.querySelectorAll(".faq-question");
 
-    if (contactForm) {
-        contactForm.addEventListener('submit', function(e) {
-            e.preventDefault();
+  faqQuestions.forEach((question) => {
+    question.addEventListener("click", function () {
+      const answer = this.nextElementSibling;
+      const toggle = this.querySelector(".faq-toggle");
+      const isExpanded = this.getAttribute("aria-expanded") === "true";
 
-            // Get form data
-            const formData = new FormData(contactForm);
-            const data = Object.fromEntries(formData);
+      // Close all other FAQ items
+      faqQuestions.forEach((otherQuestion) => {
+        if (otherQuestion !== this) {
+          const otherAnswer = otherQuestion.nextElementSibling;
+          const otherToggle = otherQuestion.querySelector(".faq-toggle");
 
-            // Simple form validation
-            if (!data.name || !data.email || !data.subject || !data.message) {
-                alert('Please fill in all required fields.');
-                return;
-            }
-            
-            // Email validation
-            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-            if (!emailRegex.test(data.email)) {
-                alert('Please enter a valid email address.');
-                return;
-            }
-            
-            // Simulate form submission
-            alert(`Thank you for your message, ${data.name}! We'll get back to you soon at ${data.email}.`);
-            
-            // Reset form
-            contactForm.reset();
-        });
-    }
-});
-
-// Smooth scrolling for navigation links
-document.addEventListener('DOMContentLoaded', function() {
-    const navLinks = document.querySelectorAll('.main-nav a');
-    
-    navLinks.forEach(link => {
-        link.addEventListener('click', function(e) {
-            // Check if it's an internal link
-            if (this.hostname === window.location.hostname) {
-                // Add a subtle animation effect
-                this.style.transform = 'scale(0.95)';
-                setTimeout(() => {
-                    this.style.transform = 'scale(1)';
-                }, 150);
-            }
-        });
-    });
-});
-
-// Add hover effects to service items
-document.addEventListener('DOMContentLoaded', function() {
-    const serviceItems = document.querySelectorAll('.services-list li, .value-item, .timeline-item');
-    
-    serviceItems.forEach(item => {
-        item.addEventListener('mouseenter', function() {
-            this.style.transform = 'translateY(-2px)';
-            this.style.transition = 'transform 0.3s ease';
-        });
-        
-        item.addEventListener('mouseleave', function() {
-            this.style.transform = 'translateY(0)';
-        });
-    });
-});
-
-// Active navigation highlighting
-document.addEventListener('DOMContentLoaded', function() {
-    const currentPage = window.location.pathname.split('/').pop();
-    const navLinks = document.querySelectorAll('.main-nav a');
-    
-    navLinks.forEach(link => {
-        const linkPage = link.getAttribute('href');
-        if (linkPage === currentPage || (currentPage === '' && linkPage === 'index.html')) {
-            link.style.backgroundColor = '#daa520';
-            link.style.color = '#5d4037';
+          otherQuestion.setAttribute("aria-expanded", "false");
+          otherAnswer.classList.remove("active");
+          otherToggle.classList.remove("active");
         }
+      });
+
+      // Toggle current FAQ item
+      this.setAttribute("aria-expanded", !isExpanded);
+      answer.classList.toggle("active");
+      toggle.classList.toggle("active");
     });
+
+    // Add keyboard navigation
+    question.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.click();
+      }
+    });
+  });
+
+  // ===== IMAGE GALLERY =====
+  const galleryImages = [
+    {
+      src: "images/green-tea-leaves.webp",
+      alt: "Premium Green Tea Leaves",
+      caption: "Premium Green Tea Leaves - Hand-picked from our finest gardens",
+    },
+    {
+      src: "images/Indian Black Teas.webp",
+      alt: "Indian Black Tea Selection",
+      caption:
+        "Authentic Indian Black Teas - Rich and robust flavors from Assam and Darjeeling",
+    },
+    {
+      src: "images/Oolong Selections.jpg",
+      alt: "Oolong Tea Collection",
+      caption:
+        "Traditional Oolong Selections - Complex flavors from Taiwan and China",
+    },
+  ];
+
+  const galleryImage = document.getElementById("gallery-image");
+  const galleryCaption = document.getElementById("gallery-caption");
+  const thumbnails = document.querySelectorAll(".thumbnail");
+  let currentIndex = 0;
+
+  if (!galleryImage || !galleryCaption) return;
+
+  // Update gallery display
+  function updateGallery(index) {
+    currentIndex = index;
+    const image = galleryImages[index];
+    galleryImage.src = image.src;
+    galleryImage.alt = image.alt;
+    galleryCaption.textContent = image.caption;
+
+    thumbnails.forEach((thumb, i) => {
+      thumb.classList.toggle("active", i === index);
+    });
+  }
+
+  // Navigation functions
+  const nextImage = () =>
+    updateGallery((currentIndex + 1) % galleryImages.length);
+  const prevImage = () =>
+    updateGallery(
+      (currentIndex - 1 + galleryImages.length) % galleryImages.length
+    );
+
+  // Event listeners
+  document.getElementById("next-btn")?.addEventListener("click", nextImage);
+  document.getElementById("prev-btn")?.addEventListener("click", prevImage);
+
+  thumbnails.forEach((thumb, index) => {
+    thumb.addEventListener("click", () => updateGallery(index));
+  });
+
+  // Auto-advance every 10 seconds
+  setInterval(nextImage, 10000);
+
+  // ===== CONTACT FORM =====
+  const contactForm = document.querySelector(".contact-form");
+  if (contactForm) {
+    const validateField = (field) => {
+      const group = field.closest(".form-group");
+      const error = group?.querySelector(".error-message");
+      let isValid = true;
+      let message = "";
+
+      group?.classList.remove("error", "success");
+
+      if (field.required && !field.value.trim()) {
+        isValid = false;
+        message = "This field is required.";
+      } else if (
+        field.type === "email" &&
+        field.value &&
+        !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value)
+      ) {
+        isValid = false;
+        message = "Please enter a valid email address.";
+      } else if (
+        field.type === "tel" &&
+        field.value &&
+        !/^[\d\s\-\+\(\)]+$/.test(field.value)
+      ) {
+        isValid = false;
+        message = "Please enter a valid phone number.";
+      }
+
+      if (error) error.textContent = message;
+      group?.classList.add(
+        isValid && field.value.trim() ? "success" : isValid ? "" : "error"
+      );
+      return isValid;
+    };
+
+    contactForm.querySelectorAll("input, textarea").forEach((field) => {
+      field.addEventListener("blur", () => validateField(field));
+      field.addEventListener("input", () => {
+        if (field.closest(".form-group")?.classList.contains("error")) {
+          validateField(field);
+        }
+      });
+    });
+
+    contactForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const fields = contactForm.querySelectorAll("input, textarea");
+      const isValid = Array.from(fields).every(validateField);
+
+      if (isValid) {
+        const submitBtn = contactForm.querySelector(".submit-btn");
+        const originalText = submitBtn.textContent;
+        submitBtn.textContent = "Sending...";
+        submitBtn.disabled = true;
+
+        setTimeout(() => {
+          const formData = new FormData(contactForm);
+          const data = Object.fromEntries(formData);
+          alert(`Thank you, ${data.name}! We'll contact you at ${data.email}.`);
+          contactForm.reset();
+          fields.forEach((f) =>
+            f.closest(".form-group")?.classList.remove("error", "success")
+          );
+          submitBtn.textContent = originalText;
+          submitBtn.disabled = false;
+        }, 2000);
+      }
+    });
+  }
+
+  // ===== HOVER EFFECTS =====
+  document
+    .querySelectorAll(".services-list li, .value-item, .timeline-item")
+    .forEach((item) => {
+      item.addEventListener("mouseenter", () => {
+        item.style.transform = "translateY(-2px)";
+        item.style.transition = "transform 0.3s ease";
+      });
+      item.addEventListener("mouseleave", () => {
+        item.style.transform = "translateY(0)";
+      });
+    });
+
+  // ===== ACTIVE NAVIGATION =====
+  const currentPage = location.pathname.split("/").pop();
+  document.querySelectorAll(".main-nav a").forEach((link) => {
+    const linkPage = link.getAttribute("href");
+    if (
+      linkPage === currentPage ||
+      (currentPage === "" && linkPage === "index.html")
+    ) {
+      link.style.backgroundColor = "#daa520";
+      link.style.color = "#5d4037";
+    }
+  });
 });

styles.css

@@ -1,4 +1,3 @@
-/* Global Styles */
 * {
     margin: 0;
     padding: 0;
@@ -13,7 +12,6 @@ body {
     background-image: linear-gradient(to bottom, #faf0e6 0%, #f5e1c4 100%);
 }
 
-/* Header Styles */
 header {
     background-color: #8b4513;
     color: white;
@@ -40,7 +38,6 @@ header {
     opacity: 0.7;
 }
 
-/* Navigation Styles */
 .main-nav ul {
     list-style: none;
     display: flex;
@@ -61,7 +58,6 @@ header {
     background-color: #daa520;
 }
 
-/* Main Content Styles */
 main {
     max-width: 1000px;
     margin: 0 auto;
@@ -76,7 +72,6 @@ section {
     box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1);
 }
 
-/* Hero Section */
 .banner {
     text-align: center;
     background-color: #daa520;
@@ -94,7 +89,6 @@ section {
     font-style: italic;
 }
 
-/* Introduction Section */
 .introduction h2 {
     color: #8b4513;
     font-size: 32px;
@@ -109,7 +103,6 @@ section {
     line-height: 1.8;
 }
 
-/* Services Section */
 .services h2 {
     color: #8b4513;
     font-size: 32px;
@@ -136,7 +129,6 @@ section {
     color: #8b4513;
 }
 
-/* Footer Styles */
 footer {
     background-color: #8b4513;
     color: white;
@@ -157,7 +149,6 @@ footer a:hover {
     text-decoration: underline;
 }
 
-/* Contact Page Styles */
 .contact-details {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -234,7 +225,6 @@ footer a:hover {
     background-color: #daa520;
 }
 
-/* About Page Styles */
 .story-origins,
 .story-mission,
 .story-team {
@@ -261,7 +251,203 @@ footer a:hover {
     margin-bottom: 15px;
 }
 
-/* Responsive Design */
+/* Image Gallery Styles */
+.tea-gallery {
+    margin-top: 40px;
+    text-align: center;
+}
+
+.tea-gallery h3 {
+    color: #8b4513;
+    font-size: 28px;
+    margin-bottom: 25px;
+}
+
+.gallery-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.gallery-main {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+#gallery-image {
+    width: 100%;
+    max-height: 400px;
+    object-fit: cover;
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
+}
+
+.gallery-controls {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    pointer-events: none;
+}
+
+.gallery-btn {
+    background-color: rgba(139, 69, 19, 0.9);
+    color: white;
+    border: 2px solid #daa520;
+    font-size: 24px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    pointer-events: all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+}
+
+.gallery-btn:hover {
+    background-color: #daa520;
+    color: #5d4037;
+    transform: scale(1.1);
+}
+
+.gallery-btn:active {
+    transform: scale(0.95);
+}
+
+.gallery-thumbnails {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.thumbnail {
+    width: 80px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 5px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.3s, transform 0.3s;
+    border: 2px solid transparent;
+}
+
+.thumbnail:hover,
+.thumbnail.active {
+    opacity: 1;
+    transform: scale(1.1);
+    border-color: #daa520;
+}
+
+.gallery-caption {
+    font-style: italic;
+    color: #8b4513;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+/* FAQ Section Styles */
+.faq-section {
+    margin-top: 40px;
+}
+
+.faq-section h3 {
+    color: #8b4513;
+    font-size: 28px;
+    margin-bottom: 25px;
+    text-align: center;
+}
+
+.faq-item {
+    background-color: #f5e1c4;
+    margin-bottom: 15px;
+    border-radius: 8px;
+    overflow: hidden;
+    border-left: 5px solid #daa520;
+}
+
+.faq-question {
+    background-color: #8b4513;
+    color: white;
+    padding: 15px 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.3s;
+}
+
+.faq-question:hover {
+    background-color: #daa520;
+}
+
+.faq-question h4 {
+    margin: 0;
+    font-size: 18px;
+}
+
+.faq-toggle {
+    font-size: 20px;
+    transition: transform 0.3s;
+}
+
+.faq-answer {
+    padding: 0 20px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    background-color: #fffaf0;
+}
+
+.faq-answer.active {
+    padding: 20px;
+    max-height: 200px;
+}
+
+.faq-toggle.active {
+    transform: rotate(45deg);
+}
+
+/* Form Validation Styles */
+.error-message {
+    color: #d32f2f;
+    font-size: 14px;
+    margin-top: 5px;
+    display: block;
+}
+
+.form-group.error input,
+.form-group.error textarea {
+    border-color: #d32f2f;
+}
+
+.form-group.success input,
+.form-group.success textarea {
+    border-color: #4caf50;
+}
+
+/* Skip link for accessibility */
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: #8b4513;
+    color: white;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 0 0 5px 0;
+    transition: top 0.3s;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
 @media (max-width: 768px) {
     .main-nav ul {
         flex-direction: column;
@@ -284,4 +470,13 @@ footer a:hover {
     .values-list {
         grid-template-columns: 1fr;
     }
+    
+    .gallery-thumbnails {
+        flex-wrap: wrap;
+    }
+    
+    .thumbnail {
+        width: 60px;
+        height: 45px;
+    }
 }