diff --git a/public/images/catering-categories.png b/public/images/catering-categories.png
new file mode 100644
index 0000000..8f23c40
Binary files /dev/null and b/public/images/catering-categories.png differ
diff --git a/public/images/catering-delivery.png b/public/images/catering-delivery.png
new file mode 100644
index 0000000..0250018
Binary files /dev/null and b/public/images/catering-delivery.png differ
diff --git a/public/images/catering-orbital.png b/public/images/catering-orbital.png
new file mode 100644
index 0000000..547c85e
Binary files /dev/null and b/public/images/catering-orbital.png differ
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 1817d39..89dae3b 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>http://localhost:3000/</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>http://localhost:3000/about-us/</loc><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://localhost:3000/menu/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/gallery/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/contact/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/the-art-of-turkish-tea/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/secrets-of-charcoal-grilling/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/a-taste-of-sweet-legacy/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://antalya.metatronnest.com/</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://antalya.metatronnest.com/about-us/</loc><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>https://antalya.metatronnest.com/menu/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>https://antalya.metatronnest.com/gallery/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>https://antalya.metatronnest.com/catering/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>https://antalya.metatronnest.com/contact/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>https://antalya.metatronnest.com/blog/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>https://antalya.metatronnest.com/blog/the-art-of-turkish-tea/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>https://antalya.metatronnest.com/blog/secrets-of-charcoal-grilling/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>https://antalya.metatronnest.com/blog/a-taste-of-sweet-legacy/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url></urlset>
\ No newline at end of file
diff --git a/scripts/generate-sitemap.cjs b/scripts/generate-sitemap.cjs
index 8df9558..afc45bb 100644
--- a/scripts/generate-sitemap.cjs
+++ b/scripts/generate-sitemap.cjs
@@ -30,6 +30,7 @@ const staticLinks = [
     { url: '/about-us/', changefreq: 'monthly', priority: 0.5 },
     { url: '/menu/', changefreq: 'weekly', priority: 0.6 },
     { url: '/gallery/', changefreq: 'weekly', priority: 0.6 },
+    { url: '/catering/', changefreq: 'weekly', priority: 0.6 },
     { url: '/contact/', changefreq: 'weekly', priority: 0.6 },
     { url: '/blog/', changefreq: 'weekly', priority: 0.6 },
 ];
diff --git a/src/app/about-us/AboutContent.tsx b/src/app/about-us/AboutContent.tsx
index 084ed03..3b0ce20 100644
--- a/src/app/about-us/AboutContent.tsx
+++ b/src/app/about-us/AboutContent.tsx
@@ -257,6 +257,7 @@ export default function AboutContent() {
                     </AnimatePresence>
 
                     <button className={styles.sliderBtn} onClick={nextTestimonial}>›</button>
+                    
                 </motion.div>
 
                 {/* Slider dots */}
@@ -269,6 +270,17 @@ export default function AboutContent() {
                         />
                     ))}
                 </div>
+
+                <div className={styles.buttonContainer}>
+                <a
+                    href="https://www.google.com/search?q=antalya+restaurant"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.button}
+                >
+                    Review Us on Google
+                </a>
+            </div>
             </section>
 
             {/* FAQ Section - Image Left, FAQ Right */}
diff --git a/src/app/about-us/about.module.css b/src/app/about-us/about.module.css
index ae10687..d0fbd65 100644
--- a/src/app/about-us/about.module.css
+++ b/src/app/about-us/about.module.css
@@ -35,7 +35,7 @@
 }
 
 .breadcrumb a {
-  color: #fff;
+  color: #d3cab3;
   transition: color 0.3s;
 }
 
@@ -323,6 +323,30 @@
   background-color: #c49c5c;
 }
 
+.buttonContainer {
+    display: flex;
+    justify-content: center;
+}
+
+.button {
+    display: inline-block;
+    margin-top: 3rem;
+    padding: 0.8rem 2rem;
+    border: 1px solid var(--color-gold);
+    color: #d3cab3;
+    font-family: var(--font-lato);
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: var(--color-gold);
+    color: #d3cab3;
+}
+
 /* Call to Action Section */
 .ctaSection {
   padding: 80px 20px;
diff --git a/src/app/about-us/about_temp.css b/src/app/about-us/about_temp.css
index 900a481..9a168e5 100644
--- a/src/app/about-us/about_temp.css
+++ b/src/app/about-us/about_temp.css
@@ -35,7 +35,7 @@
 }
 
 .breadcrumb a {
-  color: #fff;
+  color: #d3cab3;
   transition: color 0.3s;
 }
 
diff --git a/src/app/blog/[id]/blogDetail.module.css b/src/app/blog/[id]/blogDetail.module.css
index e2dd1ff..e31bcc7 100644
--- a/src/app/blog/[id]/blogDetail.module.css
+++ b/src/app/blog/[id]/blogDetail.module.css
@@ -32,7 +32,7 @@
 }
 
 .breadcrumb a {
-    color: #fff;
+    color: #d3cab3;
     transition: color 0.3s;
 }
 
@@ -245,7 +245,7 @@
 
 .backButton:hover {
     background: #c49c5c;
-    color: #fff;
+    color: #d3cab3;
 }
 
 .errorContainer {
diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css
index e73ed4a..62ca377 100644
--- a/src/app/blog/blog.module.css
+++ b/src/app/blog/blog.module.css
@@ -34,7 +34,7 @@
 }
 
 .breadcrumb a {
-    color: #fff;
+    color: #d3cab3;
     transition: color 0.3s;
 }
 
@@ -162,7 +162,7 @@
 
 .button:hover {
     background-color: #c49c5c;
-    color: #fff;
+    color: #d3cab3;
 }
 
 @media (max-width: 768px) {
diff --git a/src/app/catering/CateringContent.tsx b/src/app/catering/CateringContent.tsx
new file mode 100644
index 0000000..012d335
--- /dev/null
+++ b/src/app/catering/CateringContent.tsx
@@ -0,0 +1,398 @@
+'use client'
+
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import Navbar from '@/components/Navbar/Navbar'
+import Footer from '@/components/Footer/Footer'
+import Link from 'next/link'
+import Image from 'next/image'
+import styles from './catering.module.css'
+
+export default function CateringContent() {
+    // Animation variants
+    const fadeInUp = {
+        hidden: { opacity: 0, y: 30 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                duration: 0.6
+            }
+        }
+    };
+
+    const fadeIn = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { duration: 0.8 }
+        }
+    };
+
+    const slideInLeft = {
+        hidden: { opacity: 0, x: -50 },
+        visible: {
+            opacity: 1,
+            x: 0,
+            transition: {
+                duration: 0.7
+            }
+        }
+    };
+
+    const slideInRight = {
+        hidden: { opacity: 0, x: 50 },
+        visible: {
+            opacity: 1,
+            x: 0,
+            transition: {
+                duration: 0.7
+            }
+        }
+    };
+
+    const staggerContainer = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.2,
+                delayChildren: 0.1
+            }
+        }
+    };
+
+    const scaleIn = {
+        hidden: { opacity: 0, scale: 0.8 },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            transition: {
+                duration: 0.6
+            }
+        }
+    };
+
+    return (
+        <main className={styles.main}>
+            <Navbar />
+
+            {/* Page Hero */}
+            <section className={styles.hero}>
+                <div className={styles.heroContent}>
+                    <h1 className={styles.heroTitle}>Catering Services</h1>
+                    <p className={styles.breadcrumb}>
+                        <Link href="/">Home</Link> / Catering
+                    </p>
+                </div>
+            </section>
+
+            {/* Section 1: Top 3 Cards - Events, Food & Drinks, Venues */}
+            <section className={styles.topSection}>
+                <motion.div
+                    className={styles.topContainer}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: "-100px" }}
+                    variants={staggerContainer}
+                >
+                    <section className={styles.sectionHeading1}>
+                        <div className={styles.smallHeading1} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
+                        </div>
+                        <h2 className={styles.mainHeading1}>Delicious Turkish, Mezze, And More</h2>
+                        <p className={styles.description1}>
+                            Looking for authentic Turkish dining? At Antalya, we offer a wide variety of traditional dishes, from crispy appetizers to charcoal-grilled kebabs. Whether you're craving mezze platters or hearty main courses, our menu has something for everyone.
+                        </p>
+                    </section>
+
+                    <div className={styles.topCardsGrid}>
+                        {/* Card 1: Events */}
+                        <motion.div className={styles.topCard} variants={scaleIn}>
+                            <div className={styles.topCardImage}>
+                                <Image
+                                    src="/images/hero-1.png"
+                                    alt="Events"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                                <div className={styles.topCardOverlay}></div>
+                            </div>
+                            <div className={styles.topCardContent}>
+                                <h3 className={styles.topCardTitle}>Events</h3>
+                                {/* <button className={styles.topCardButton}>
+                                    <span>→</span>
+                                </button> */}
+                            </div>
+                        </motion.div>
+
+                        {/* Card 2: Food & Drinks */}
+                        <motion.div className={styles.topCard} variants={scaleIn}>
+                            <div className={styles.topCardImage}>
+                                <Image
+                                    src="/images/dish-1.png"
+                                    alt="Food & Drinks"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                                <div className={styles.topCardOverlay}></div>
+                            </div>
+                            <div className={styles.topCardContent}>
+                                <h3 className={styles.topCardTitle}>Food &<br />Drinks</h3>
+                                {/* <button className={styles.topCardButton}>
+                                    <span>→</span>
+                                </button> */}
+                            </div>
+                        </motion.div>
+
+                        {/* Card 3: Venues */}
+                        <motion.div className={styles.topCard} variants={scaleIn}>
+                            <div className={styles.topCardImage}>
+                                <Image
+                                    src="/images/dish-2.png"
+                                    alt="Venues"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                                <div className={styles.topCardOverlay}></div>
+                            </div>
+                            <div className={styles.topCardContent}>
+                                <h3 className={styles.topCardTitle}>Venues</h3>
+                                {/* <button className={styles.topCardButton}>
+                                    <span>→</span>
+                                </button> */}
+                            </div>
+                        </motion.div>
+                    </div>
+                </motion.div>
+            </section>
+
+            {/* Section 2: Welcome To SeaBreeze */}
+            <section className={styles.welcomeSection}>
+                <motion.div
+                    className={styles.welcomeContainer}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: "-100px" }}
+                    variants={staggerContainer}
+                >
+                    {/* Left Side: Images */}
+                    <motion.div className={styles.welcomeImagesWrapper} variants={slideInLeft}>
+                        <div className={styles.welcomeImagesStack}>
+                            <div className={styles.welcomeImageTop}>
+                                <Image
+                                    src="/images/hero-1.png"
+                                    alt="Gourmet dish"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                            <div className={styles.welcomeImageBottom}>
+                                <Image
+                                    src="/images/dish-1.png"
+                                    alt="Delicious burger"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                        </div>
+                    </motion.div>
+
+                    {/* Right Side: Content */}
+                    <motion.div className={styles.welcomeContent} variants={slideInRight}>
+                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
+                        </div>
+                        <h2 className={styles.mainHeadingSection}>A Visual Journey Through</h2>
+                        <div className={styles.welcomeDivider}>
+                            <svg width="120" height="20" viewBox="0 0 120 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <line x1="0" y1="10" x2="45" y2="10" stroke="#d3cab3" strokeWidth="2" />
+                                <path d="M52 5 Q60 10 52 15 M55 5 Q63 10 55 15 M58 5 Q66 10 58 15" stroke="#d3cab3" strokeWidth="1.5" fill="none" />
+                                <line x1="75" y1="10" x2="120" y2="10" stroke="#d3cab3" strokeWidth="2" />
+                            </svg>
+                        </div>
+                        <p className={styles.welcomeDescription}>
+                            Seabreeze was the first restaurant to open in Egypt, the restaurant was designed with the history in mind of it. We have created a soft industrial dining room, combined with an open  kitchen, coffee take out bar and a lovely on site coffee  roastery.
+                        </p>
+                    </motion.div>
+                </motion.div>
+            </section>
+
+            {/* Section 3: Serving Great-Tasting Food Since 1991 */}
+            <section className={styles.servingSection}>
+                <motion.div
+                    className={styles.servingContainer}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: "-100px" }}
+                    variants={staggerContainer}
+                >
+                    {/* Left Side: Content */}
+                    <motion.div className={styles.servingContent} variants={slideInLeft}>
+                        <section className={styles.sectionHeading3}>
+                            <div className={styles.smallHeading3} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                                <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
+                                <span>ANTALYA</span>
+                                <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
+                            </div>
+                        </section>
+                        <h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish</h2>
+                        <p className={styles.servingDescription}>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit auctor. Facilisi praesent inceptos turpibur erat cubilia himenaeos nascetur. Habitant tempus elementum pharetra rutrum gravida. Nunc sapien mi libero ultrices sem ultrices egestas diam semean. Tempor pellentesque lobortis mi cuam dignissibus preium.
+                        </p>
+                        <p className={styles.servingDescription}>
+                            Cras ultrices ligula sed magna dictum porta. Sed portitor lecta nibh. Donec rutrum congue leo eget malesuada.
+                        </p>
+                    </motion.div>
+
+                    {/* Right Side: Images */}
+                    <motion.div className={styles.servingImagesWrapper} variants={slideInRight}>
+                        <div className={styles.servingImagesGrid}>
+                            <div className={styles.servingImageLarge}>
+                                <Image
+                                    src="/images/hero-2.png"
+                                    alt="Restaurant interior"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                            <div className={styles.servingImageSmallTop}>
+                                <Image
+                                    src="/images/dish-1.png"
+                                    alt="Grilled steak"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                            <div className={styles.servingImageSmallBottom}>
+                                <Image
+                                    src="/images/dish-1.png"
+                                    alt="Delicious dish"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                        </div>
+                    </motion.div>
+                </motion.div>
+            </section>
+
+            {/* Section 4: Our Story of Success */}
+            <section className={styles.storySection}>
+                <motion.div
+                    className={styles.storyContent}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: "-100px" }}
+                    variants={fadeIn}
+                >
+                    <motion.span className={styles.storyLabel} variants={fadeInUp}>
+                        <div className={styles.smallHeading3} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
+                        </div>
+                    </motion.span>
+                    <motion.h2 className={styles.storyTitle} variants={fadeInUp}>
+                        Click now to make your event unforgettable and place your order.
+                    </motion.h2>
+                    <motion.a
+                        href="tel:+15195882037"
+                        className={styles.storydesc}
+                        variants={fadeInUp}
+                        style={{ display: "inline-block" }}
+                    >
+                        +1 519 588 2037
+                    </motion.a>
+
+                    {/* <motion.button className={styles.storyButton} variants={fadeInUp}>
+                        <span className={styles.storyButtonIcon}>↗</span>
+                        <span>Visit site</span>
+                    </motion.button> */}
+                </motion.div>
+            </section>
+
+            {/* Section 4: About Us - Restika One Of The Best Food Service */}
+            <section className={styles.aboutSection}>
+                <motion.div
+                    className={styles.aboutContainer}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: "-100px" }}
+                    variants={staggerContainer}
+                >
+                    {/* Left Side: Images */}
+                    <motion.div className={styles.aboutImagesWrapper} variants={slideInLeft}>
+                        <div className={styles.aboutImagesGrid}>
+                            <div className={styles.aboutImageLarge}>
+                                <Image
+                                    src="/images/hero-1.png"
+                                    alt="Food service"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                            <div className={styles.aboutImageSmallTop}>
+                                <Image
+                                    src="/images/dish-2.png"
+                                    alt="Dining experience"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                            <div className={styles.aboutImageSmallBottom}>
+                                <Image
+                                    src="/images/dish-1.png"
+                                    alt="Special dishes"
+                                    fill
+                                    style={{ objectFit: 'cover' }}
+                                />
+                            </div>
+                        </div>
+                    </motion.div>
+
+                    {/* Right Side: Content */}
+                    <motion.div className={styles.aboutContent} variants={slideInRight}>
+                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
+                        </div>
+                        <h2 className={styles.mainHeading}>
+                            Restika One Of The Best<br />
+                            Food Service
+                        </h2>
+                        <p className={styles.servingDescription}>
+                            There are many majority have suffered alteration in have suffered alteration majority have in some form, humour or randomised words.
+                        </p>
+                        <div className={styles.aboutSpecials}>
+                            <ul className={styles.aboutSpecialsList}>
+                                <li className={styles.aboutSpecialsItem}>
+                                    <span className={styles.aboutSpecialsIcon}>✓</span>
+                                    <span>Turmeric coconut rice, chicken sate with peanut sauce</span>
+                                </li>
+                                <li className={styles.aboutSpecialsItem}>
+                                    <span className={styles.aboutSpecialsIcon}>✓</span>
+                                    <span>Indonesian Fried Rice. Choice of Chicken, Beef Steak</span>
+                                </li>
+                                <li className={styles.aboutSpecialsItem}>
+                                    <span className={styles.aboutSpecialsIcon}>✓</span>
+                                    <span>Wok-fry thin rice noodle. Rice noodle, chicken</span>
+                                </li>
+                            </ul>
+                        </div>
+                         <Link href="/menu" className={styles.lastButton}>
+                            View Our Menu
+                        </Link>
+                    </motion.div>
+                </motion.div>
+            </section>
+
+            <Footer />
+        </main>
+    )
+}
diff --git a/src/app/catering/catering.module.css b/src/app/catering/catering.module.css
new file mode 100644
index 0000000..021bc05
--- /dev/null
+++ b/src/app/catering/catering.module.css
@@ -0,0 +1,1286 @@
+.main {
+    background-color: #f5e6d3;
+    color: var(--color-text-light);
+    min-height: 100vh;
+}
+
+.hero {
+    padding: 200px 0px;
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-3.png');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    text-align: center;
+}
+
+.heroContent {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.heroTitle {
+    font-family: var(--font-playfair);
+    font-size: var(--hero-title-size);
+    color: #d3cab3;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.breadcrumb {
+    font-size: 1.2rem;
+    color: var(--color-paragraph);
+    font-family: var(--font-lato);
+    letter-spacing: 1px;
+}
+
+.breadcrumb a {
+    color: #d3cab3;
+    transition: color 0.3s;
+    text-decoration: none;
+}
+
+.breadcrumb a:hover {
+    color: var(--color-gold);
+}
+
+@media (max-width: 768px) {
+    .heroTitle {
+        font-size: 48px;
+    }
+
+    .hero {
+        padding: 150px 20px;
+    }
+}
+
+/* ============================================
+   TOP SECTION - 3 CARDS
+   ============================================ */
+
+.topSection {
+    padding: 0px 20px 80px;
+    background-color: #f5e6d3;
+}
+
+.topContainer {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.topHeading {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.topLabel {
+    display: block;
+    font-size: 14px;
+    color: #8b7355;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    margin-bottom: 15px;
+    font-weight: 600;
+    font-family: var(--font-lato);
+}
+
+.sectionHeading1 {
+    padding: 80px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading1 {
+    font-size: var(--small-text-size);
+    color: var(--color-paragraph);
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading1 {
+    font-family: var(--font-playfair);
+    font-size: var(--main-heading-size);
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description1 {
+    font-size: var(--body-size);
+    color: var(--color-paragraph);
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.sectionHeading3 {
+    /* padding: 80px 20px 40px; */
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading3 {
+    font-size: var(--small-text-size);
+    color: var(--color-paragraph);
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading3 {
+    font-family: var(--font-playfair);
+    font-size: var(--main-heading-size);
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description3 {
+    font-size: var(--body-size);
+    color: var(--color-paragraph);
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.topCardsGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 30px;
+}
+
+.topCard {
+    position: relative;
+    height: 450px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.topCard:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.topCardImage {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s ease;
+}
+
+.topCard:hover .topCardImage {
+    transform: scale(1.1);
+}
+
+.topCardOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
+    z-index: 1;
+}
+
+.topCardContent {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 40px;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.topCardTitle {
+    font-family: var(--font-playfair);
+    font-size: 36px;
+    color: #d3cab3;
+    font-weight: 700;
+    margin-bottom: 30px;
+    text-transform: capitalize;
+    font-style: italic;
+    line-height: 1.2;
+}
+
+.topCardButton {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 24px;
+    color: #2d2d2d;
+}
+
+.topCardButton:hover {
+    background-color: #d3cab3;
+    transform: scale(1.1);
+}
+
+@media (max-width: 991px) {
+    .topCardsGrid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .topTitle {
+        font-size: 40px;
+    }
+}
+
+@media (max-width: 767px) {
+    /* .topSection {
+        padding: 80px 15px;
+    } */
+
+    .topCardsGrid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+
+    .topCard {
+        height: 400px;
+    }
+
+    .topTitle {
+        font-size: 32px;
+    }
+
+    .topCardTitle {
+        font-size: 28px;
+    }
+}
+
+
+
+/* ============================================
+   WELCOME SECTION
+   ============================================ */
+
+.welcomeSection {
+    padding: 80px 20px;
+    background-color: #ffffff;
+    background-image: url('/images/section-bg.jpg');
+}
+
+.welcomeContainer {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: center;
+}
+
+.welcomeImagesWrapper {
+    position: relative;
+    height: 550px;
+}
+
+.welcomeImagesStack {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.welcomeImageTop {
+    position: absolute;
+    width: 280px;
+    height: 370px;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    z-index: 2;
+    background-color: #000;
+}
+
+.welcomeImageBottom {
+    position: absolute;
+    width: 400px;
+    height: 500px;
+    left: 200px;
+    top: 50px;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    background-color: #000;
+}
+
+.welcomeImageTop img,
+.welcomeImageBottom img {
+    transition: transform 0.6s ease;
+}
+
+.welcomeImagesWrapper:hover .welcomeImageTop img,
+.welcomeImagesWrapper:hover .welcomeImageBottom img {
+    transform: scale(1.05);
+}
+
+.welcomeContent {
+    padding: 40px;
+}
+
+.welcomeLabel {
+    display: block;
+    font-size: 13px;
+    color: #8b7355;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    margin-bottom: 20px;
+    font-weight: 600;
+    font-family: var(--font-lato);
+}
+
+.welcomeTitle {
+    font-family: var(--font-playfair);
+    font-size: 52px;
+    color: #2d2d2d;
+    font-weight: 400;
+    line-height: 1.3;
+    margin-bottom: 30px;
+}
+
+.welcomeDivider {
+    margin-bottom: 35px;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.welcomeDescription {
+    font-size: var(--body-size);
+    color: var(--color-paragraph);
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: var(--main-heading-size);
+    color: #5d4037;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: var(--color-paragraph);
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeadingSection {
+    font-family: var(--font-cinzel), serif;
+    color: var(--color-paragraph);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 20px;
+    /* font-size: 2.5rem; */
+}
+
+
+.welcomeSignature {
+    text-align: left;
+}
+
+.welcomeSignatureLabel {
+    display: block;
+    font-size: 11px;
+    color: #8b7355;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 10px;
+    font-weight: 600;
+    font-family: var(--font-lato);
+}
+
+.welcomeSignatureName {
+    font-family: 'Dancing Script', cursive;
+    font-size: 48px;
+    color: #2d2d2d;
+    font-weight: 400;
+}
+
+@media (max-width: 991px) {
+    .welcomeContainer {
+        grid-template-columns: 1fr;
+        gap: 60px;
+    }
+
+    .welcomeImagesWrapper {
+        height: 450px;
+        max-width: 600px;
+        margin: 0 auto;
+    }
+
+    .welcomeImageTop {
+        width: 240px;
+        height: 320px;
+    }
+
+    .welcomeImageBottom {
+        width: 340px;
+        height: 420px;
+        left: 180px;
+    }
+
+    .welcomeTitle {
+        font-size: 44px;
+    }
+
+    .welcomeContent {
+        padding: 20px 0;
+    }
+}
+
+@media (max-width: 767px) {
+    .welcomeSection {
+        padding: 80px 15px;
+    }
+
+    .welcomeContainer {
+        gap: 40px;
+    }
+
+    .welcomeImagesWrapper {
+        height: 400px;
+    }
+
+    .welcomeImageTop {
+        width: 200px;
+        height: 280px;
+    }
+
+    .welcomeImageBottom {
+        width: 280px;
+        height: 360px;
+        left: 140px;
+        top: 40px;
+    }
+
+    .welcomeTitle {
+        font-size: 36px;
+    }
+
+    .welcomeSignatureName {
+        font-size: 40px;
+    }
+}
+
+@media (max-width: 480px) {
+    .welcomeImagesWrapper {
+        height: 350px;
+    }
+
+    .welcomeImageTop {
+        width: 160px;
+        height: 240px;
+    }
+
+    .welcomeImageBottom {
+        width: 240px;
+        height: 310px;
+        left: 100px;
+        top: 40px;
+    }
+
+    .welcomeTitle {
+        font-size: 32px;
+    }
+
+    .welcomeDescription {
+        font-size: 15px;
+    }
+
+    .welcomeSignatureName {
+        font-size: 36px;
+    }
+}
+
+/* ============================================
+   SERVING SECTION
+   ============================================ */
+
+.servingSection {
+    padding: 80px 20px;
+    background-color: #f5e6d3;
+}
+
+.servingContainer {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: center;
+}
+
+.servingContent {
+    padding: 40px;
+}
+
+.servingLabel {
+    display: block;
+    font-size: 12px;
+    color: #b8a88a;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    margin-bottom: 20px;
+    font-weight: 600;
+    font-family: var(--font-lato);
+}
+
+.servingTitle {
+    font-family: var(--font-playfair);
+    font-size: 52px;
+    color: #ffffff;
+    font-weight: 400;
+    line-height: 1.3;
+    margin-bottom: 30px;
+}
+
+.servingDescription {
+    font-size: var(--body-size);
+    color: var(--color-paragraph);
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.servingSignature {
+    margin-top: 40px;
+}
+
+.servingSignatureName {
+    font-family: 'Dancing Script', cursive;
+    font-size: 56px;
+    color: #d3cab3;
+    font-weight: 400;
+    margin-bottom: 5px;
+}
+
+.servingSignatureTitle {
+    font-size: 15px;
+    color: #ffffff;
+    font-family: var(--font-lato);
+}
+
+.servingImagesWrapper {
+    position: relative;
+}
+
+.servingImagesGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 20px;
+    height: 600px;
+}
+
+.servingImageLarge {
+    grid-column: 2;
+    grid-row: 1;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.servingImageSmallTop {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.servingImageSmallBottom {
+    grid-column: 2;
+    grid-row: 2;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.servingImageLarge img,
+.servingImageSmallTop img,
+.servingImageSmallBottom img {
+    transition: transform 0.6s ease;
+}
+
+.servingImagesGrid:hover .servingImageLarge img,
+.servingImagesGrid:hover .servingImageSmallTop img,
+.servingImagesGrid:hover .servingImageSmallBottom img {
+    transform: scale(1.05);
+}
+
+@media (max-width: 991px) {
+    .servingContainer {
+        grid-template-columns: 1fr;
+        gap: 60px;
+    }
+
+    .servingImagesGrid {
+        height: 500px;
+    }
+
+    .servingTitle {
+        font-size: 44px;
+    }
+
+    .servingContent {
+        padding: 20px 0;
+    }
+
+    .servingSignatureName {
+        font-size: 48px;
+    }
+}
+
+@media (max-width: 767px) {
+    .servingSection {
+        padding: 80px 15px;
+    }
+
+    .servingContainer {
+        gap: 40px;
+    }
+
+    .servingImagesGrid {
+        height: 400px;
+        gap: 15px;
+    }
+
+    .servingTitle {
+        font-size: 36px;
+    }
+
+    .servingDescription {
+        font-size: 15px;
+    }
+
+    .servingSignatureName {
+        font-size: 40px;
+    }
+
+    .servingSignatureTitle {
+        font-size: 13px;
+    }
+}
+
+@media (max-width: 480px) {
+    .servingImagesGrid {
+        height: 350px;
+        gap: 10px;
+    }
+
+    .servingTitle {
+        font-size: 32px;
+    }
+
+    .servingDescription {
+        font-size: 14px;
+        margin-bottom: 20px;
+    }
+
+    .servingSignatureName {
+        font-size: 36px;
+    }
+
+    .servingSignatureTitle {
+        font-size: 12px;
+    }
+}
+
+/* ============================================
+   STORY SECTION
+   ============================================ */
+
+.storySection {
+    padding: 200px 20px;
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/dish-2.png');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+}
+
+.storyContent {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.storyLabel {
+    display: block;
+    font-size: 14px;
+    color: #d3cab3;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    margin-bottom: 20px;
+    font-weight: 600;
+    font-family: var(--font-lato);
+}
+
+.storyTitle {
+    font-family: var(--font-playfair);
+    font-size: 64px;
+    color: #d3cab3;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 50px;
+    text-transform: capitalize;
+}
+
+.storydesc {
+    font-family: var(--font-playfair);
+    font-size: 32px;
+    color: #d3cab3;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 50px;
+    text-transform: capitalize;
+}
+
+.storyButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 15px;
+    padding: 18px 40px;
+    background-color: #fff;
+    color: #2d2d2d;
+    border: none;
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.4s ease;
+    font-family: var(--font-lato);
+}
+
+.storyButton:hover {
+    background-color: #d3cab3;
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.storyButtonIcon {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #2d2d2d;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    transition: all 0.3s ease;
+}
+
+.storyButton:hover .storyButtonIcon {
+    background-color: #fff;
+    color: #2d2d2d;
+    transform: rotate(45deg);
+}
+
+@media (max-width: 768px) {
+    .storySection {
+        padding: 150px 20px;
+    }
+
+    .storyTitle {
+        font-size: 42px;
+    }
+
+    .storyButton {
+        padding: 15px 30px;
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    .storyTitle {
+        font-size: 32px;
+    }
+}
+
+/* ============================================
+   SERVICES SECTION
+   ============================================ */
+
+.servicesSection {
+    padding: 80px 20px;
+    background-color: #f5e6d3;
+}
+
+.servicesContainer {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.serviceItem {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: center;
+    margin-bottom: 120px;
+    position: relative;
+}
+
+.serviceItem:last-child {
+    margin-bottom: 0;
+}
+
+.serviceItemReverse {
+    direction: rtl;
+}
+
+.serviceItemReverse>* {
+    direction: ltr;
+}
+
+.serviceImageWrapper {
+    position: relative;
+}
+
+.serviceImageContainer {
+    position: relative;
+    width: 100%;
+    height: 500px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.serviceItem:hover .serviceImageContainer {
+    transform: translateY(-10px);
+    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
+}
+
+.serviceImageContainer img {
+    transition: transform 0.6s ease;
+}
+
+.serviceItem:hover .serviceImageContainer img {
+    transform: scale(1.1);
+}
+
+.serviceContent {
+    padding: 40px;
+    position: relative;
+}
+
+.serviceNumber {
+    font-family: var(--font-playfair);
+    font-size: 120px;
+    color: rgba(139, 115, 85, 0.15);
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: -40px;
+    position: relative;
+    z-index: 0;
+}
+
+.serviceDecorLine {
+    width: 80px;
+    height: 3px;
+    background: linear-gradient(to right, #d3cab3, transparent);
+    margin-bottom: 30px;
+    position: relative;
+    z-index: 1;
+}
+
+.serviceTitle {
+    font-family: var(--font-playfair);
+    font-size: 36px;
+    color: #2d2d2d;
+    font-weight: 700;
+    margin-bottom: 25px;
+    letter-spacing: 1px;
+    position: relative;
+    z-index: 1;
+}
+
+.serviceDescription {
+    font-size: 18px;
+    color: #666;
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    position: relative;
+    z-index: 1;
+}
+
+@media (max-width: 991px) {
+    .serviceItem {
+        grid-template-columns: 1fr;
+        gap: 40px;
+        margin-bottom: 80px;
+    }
+
+    .serviceItemReverse {
+        direction: ltr;
+    }
+
+    .serviceImageContainer {
+        height: 400px;
+    }
+
+    .serviceNumber {
+        font-size: 90px;
+        margin-bottom: -30px;
+    }
+
+    .serviceTitle {
+        font-size: 30px;
+    }
+
+    .serviceDescription {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 767px) {
+    .servicesSection {
+        padding: 80px 15px;
+    }
+
+    .serviceItem {
+        margin-bottom: 60px;
+        gap: 30px;
+    }
+
+    .serviceImageContainer {
+        height: 350px;
+    }
+
+    .serviceContent {
+        padding: 20px 0;
+    }
+
+    .serviceNumber {
+        font-size: 70px;
+        margin-bottom: -20px;
+    }
+
+    .serviceTitle {
+        font-size: 24px;
+    }
+
+    .serviceDescription {
+        font-size: 15px;
+    }
+
+    .serviceDecorLine {
+        width: 60px;
+        margin-bottom: 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .serviceImageContainer {
+        height: 280px;
+    }
+
+    .serviceNumber {
+        font-size: 60px;
+    }
+
+    .serviceTitle {
+        font-size: 22px;
+    }
+}
+
+/* ============================================
+   ABOUT SECTION
+   ============================================ */
+
+.aboutSection {
+    padding: 80px 20px;
+    background-color: #f5e6d3;
+}
+
+.aboutContainer {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: center;
+}
+
+.aboutImagesWrapper {
+    position: relative;
+}
+
+.aboutImagesGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 20px;
+    height: 600px;
+}
+
+.aboutImageLarge {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+}
+
+.aboutImageSmallTop {
+    grid-column: 2;
+    grid-row: 1;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+}
+
+.aboutImageSmallBottom {
+    grid-column: 2;
+    grid-row: 2;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+}
+
+.aboutImageLarge img,
+.aboutImageSmallTop img,
+.aboutImageSmallBottom img {
+    transition: transform 0.6s ease;
+}
+
+.aboutImagesGrid:hover .aboutImageLarge img,
+.aboutImagesGrid:hover .aboutImageSmallTop img,
+.aboutImagesGrid:hover .aboutImageSmallBottom img {
+    transform: scale(1.05);
+}
+
+.aboutContent {
+    padding: 40px;
+}
+
+.aboutLabel {
+    display: block;
+    font-size: 14px;
+    color: #5d4037;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    margin-bottom: 20px;
+    font-weight: 600;
+    font-family: var(--font-lato);
+}
+
+.aboutTitle {
+    font-family: var(--font-playfair);
+    font-size: 48px;
+    color: #2d2d2d;
+    font-weight: 700;
+    line-height: 1.3;
+    margin-bottom: 25px;
+    text-transform: capitalize;
+}
+
+.aboutDescription {
+    font-size: 16px;
+    color: #666;
+    line-height: 1.8;
+    margin-bottom: 40px;
+    font-family: var(--font-lato);
+}
+
+.aboutSpecials {
+    margin-bottom: 40px;
+    margin-top: 20px;
+}
+
+.lastButton {
+    display: inline-block;
+    padding: 15px 40px;
+    border: 2px solid #b07c4b;
+    color: var(--color-paragraph);
+    font-family: var(--font-lato);
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    letter-spacing: 1px;
+    margin-top: 1rem;
+}
+
+.lastButton:hover {
+    background-color: #c49c5c;
+    color: #000;
+}
+
+.aboutSpecialsTitle {
+    font-family: var(--font-playfair);
+    font-size: 24px;
+    color: #2d2d2d;
+    font-weight: 600;
+    margin-bottom: 20px;
+    font-style: italic;
+}
+
+.aboutSpecialsList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.aboutSpecialsItem {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    margin-bottom: 15px;
+    font-family: var(--font-lato);
+    color: var(--color-paragraph);
+    line-height: 1.6;
+}
+
+.aboutSpecialsIcon {
+    color: #5d4037;
+    font-weight: bold;
+    font-size: 18px;
+    flex-shrink: 0;
+}
+
+.aboutButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 15px;
+    padding: 18px 40px;
+    background-color: #5d4037;
+    color: #fff;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    cursor: pointer;
+    transition: all 0.4s ease;
+    font-family: var(--font-lato);
+}
+
+.aboutButton:hover {
+    background-color: #ff5722;
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
+}
+
+.aboutButtonIcon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+.aboutButton:hover .aboutButtonIcon {
+    background-color: #fff;
+    color: #5d4037;
+    transform: rotate(90deg);
+}
+
+@media (max-width: 991px) {
+    .aboutContainer {
+        grid-template-columns: 1fr;
+        gap: 60px;
+    }
+
+    .aboutImagesGrid {
+        height: 500px;
+    }
+
+    .aboutTitle {
+        font-size: 40px;
+    }
+
+    .aboutContent {
+        padding: 20px 0;
+    }
+}
+
+@media (max-width: 767px) {
+    .aboutSection {
+        padding: 80px 15px;
+    }
+
+    .aboutContainer {
+        gap: 40px;
+    }
+
+    .aboutImagesGrid {
+        height: 400px;
+        gap: 15px;
+    }
+
+    .aboutTitle {
+        font-size: 32px;
+    }
+
+    .aboutSpecialsTitle {
+        font-size: 20px;
+    }
+
+    .aboutButton {
+        padding: 15px 30px;
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .aboutImagesGrid {
+        height: 350px;
+        gap: 10px;
+    }
+
+    .aboutTitle {
+        font-size: 28px;
+    }
+
+    .aboutSpecialsTitle {
+        font-size: 18px;
+    }
+
+    .aboutDescription {
+        font-size: 15px;
+    }
+
+    .aboutSpecialsItem {
+        font-size: 14px;
+        gap: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/app/catering/page.tsx b/src/app/catering/page.tsx
new file mode 100644
index 0000000..5ad1af6
--- /dev/null
+++ b/src/app/catering/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+import CateringContent from "./CateringContent";
+
+export const metadata: Metadata = {
+    title: "Catering Services | Antalya Restaurant",
+    description: "Discover our exceptional catering services featuring authentic Turkish cuisine. Perfect for events, parties, and special occasions.",
+};
+
+export default function CateringPage() {
+    return <CateringContent />;
+}
diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css
index 2965841..2a87691 100644
--- a/src/app/contact/contact.module.css
+++ b/src/app/contact/contact.module.css
@@ -33,7 +33,7 @@
 }
 
 .breadcrumb a {
-    color: #fff;
+    color: #d3cab3;
     transition: color 0.3s;
 }
 
@@ -153,7 +153,7 @@
 .submitButton {
     background: #c49c5c;
     border: none;
-    color: #fff;
+    color: #d3cab3;
     padding: 15px 40px;
     font-size: var(--body-size);
     font-weight: 600;
diff --git a/src/app/gallery/gallery.module.css b/src/app/gallery/gallery.module.css
index 323b0c6..857ce32 100644
--- a/src/app/gallery/gallery.module.css
+++ b/src/app/gallery/gallery.module.css
@@ -34,7 +34,7 @@
 }
 
 .breadcrumb a {
-    color: #fff;
+    color: #d3cab3;
     transition: color 0.3s;
 }
 
@@ -206,7 +206,7 @@
 }
 
 .closeBtn:hover {
-    color: #fff;
+    color: #d3cab3;
 }
 
 .navBtn {
@@ -225,7 +225,7 @@
 
 .navBtn:hover {
     background: rgba(197, 160, 89, 0.5);
-    color: #fff;
+    color: #d3cab3;
 }
 
 .prevBtn {
diff --git a/src/app/menu/menu.module.css b/src/app/menu/menu.module.css
index 124ee28..e85acfd 100644
--- a/src/app/menu/menu.module.css
+++ b/src/app/menu/menu.module.css
@@ -35,7 +35,7 @@
 }
 
 .breadcrumb a {
-    color: #fff;
+    color: #d3cab3;
     transition: color 0.3s;
     text-decoration: none;
 }
diff --git a/src/components/Blogs/Blogs.module.css b/src/components/Blogs/Blogs.module.css
index eab17b7..14a8b2c 100644
--- a/src/components/Blogs/Blogs.module.css
+++ b/src/components/Blogs/Blogs.module.css
@@ -103,7 +103,7 @@
 
 .button:hover {
     background-color: #c49c5c;
-    color: #fff;
+    color: #d3cab3;
 }
 
 .arrow {
@@ -139,7 +139,7 @@
     display: inline-block;
     padding: 15px 40px;
     border: 1px solid #c49c5c;
-    color: #fff;
+    color: #d3cab3;
     font-family: var(--font-inter), sans-serif;
     text-transform: uppercase;
     font-size: 1rem;
diff --git a/src/components/BookTable/BookTable.module.css b/src/components/BookTable/BookTable.module.css
index 4558344..c751ab2 100644
--- a/src/components/BookTable/BookTable.module.css
+++ b/src/components/BookTable/BookTable.module.css
@@ -108,7 +108,7 @@
 .submitButton {
     background: transparent;
     border: 1px solid #c49c5c;
-    color: var(--color-text-light);
+    color: #d3cab3;
     padding: 0.8rem 2rem;
     font-family: var(--font-lato);
     font-size: 1rem;
@@ -121,7 +121,7 @@
 
 .submitButton:hover {
     background-color: #c49c5c;
-    color: #fff;
+    color: #d3cab3;
 }
 
 .successMessage {
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index 3c836ca..23e395d 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -84,7 +84,7 @@
 }
 
 .icon:hover {
-    background-color: #fff;
+    background-color: #d3cab3;
     transform: translateY(-3px);
 }
 
@@ -122,7 +122,7 @@
 }
 
 .link:hover {
-    color: #fff;
+    color: #d3cab3;
 }
 
 /* Location Column */
@@ -164,7 +164,7 @@
 
 
 .contactRow a:hover {
-    color: #fff;
+    color: #d3cab3;
 }
 
 .phoneIcon,
diff --git a/src/components/Gallery/Gallery.module.css b/src/components/Gallery/Gallery.module.css
index dd56c92..2812eff 100644
--- a/src/components/Gallery/Gallery.module.css
+++ b/src/components/Gallery/Gallery.module.css
@@ -72,7 +72,7 @@
     margin-top: 3rem;
     padding: 0.8rem 2rem;
     border: 1px solid var(--color-gold);
-    color: #fff;
+    color: #d3cab3;
     font-family: var(--font-lato);
     text-transform: uppercase;
     text-decoration: none;
@@ -83,7 +83,7 @@
 
 .button:hover {
     background-color: var(--color-gold);
-    color: #fff;
+    color: #d3cab3;
 }
 
 /* Lightbox */
@@ -113,7 +113,7 @@
     right: 0;
     background: none;
     border: none;
-    color: #fff;
+    color: #d3cab3;
     font-size: 2rem;
     cursor: pointer;
 }
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index d2c53ba..da24ca3 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -29,7 +29,7 @@
 .logoText {
     font-family: var(--font-playfair);
     font-size: 1.5rem;
-    color: #fff;
+    color: #d3cab3;
     letter-spacing: 1px;
 }
 
diff --git a/src/components/Hero/Hero.module.css b/src/components/Hero/Hero.module.css
index 943a60e..d897338 100644
--- a/src/components/Hero/Hero.module.css
+++ b/src/components/Hero/Hero.module.css
@@ -90,7 +90,7 @@
 
 .btnPrimary {
     background-color: var(--color-gold);
-    color: #fff;
+    color: #d3cab3;
     border: 1px solid var(--color-gold);
     border-radius: 10px;
 }
@@ -102,14 +102,14 @@
 
 .btnSecondary {
     background-color: transparent;
-    color: #fff;
+    color: #d3cab3;
     border: 3px solid #b28839;
     border-radius: 10px;
 }
 
 .btnSecondary:hover {
     background-color: var(--color-gold);
-    color: #fff;
+    color: #d3cab3;
 }
 
 .dots {
diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css
index 92c9644..103d4ce 100644
--- a/src/components/Menu/Menu.module.css
+++ b/src/components/Menu/Menu.module.css
@@ -51,7 +51,7 @@
 .tab {
     background: transparent;
     border: 2px solid #b07c4b;
-    color: #fff;
+    color: #d3cab3;
     padding: 12px 25px;
     font-size: 1rem;
     cursor: pointer;
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 0ada30a..d039335 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -10,6 +10,7 @@ const navLinks = [
     { name: 'About', href: '/about-us' },
     { name: 'Gallery', href: '/gallery' },
     { name: 'Menu', href: '/menu' },
+    { name: 'Catering', href: '/catering' },
     { name: 'Blog', href: '/blog' },
     { name: 'Contact', href: '/contact' },
 ]
diff --git a/src/components/PopularDishes/PopularDishes.module.css b/src/components/PopularDishes/PopularDishes.module.css
index c60cef0..16f276f 100644
--- a/src/components/PopularDishes/PopularDishes.module.css
+++ b/src/components/PopularDishes/PopularDishes.module.css
@@ -97,7 +97,7 @@
 
 .button:hover {
     background-color: #c49c5c;
-    color: #fff;
+    color: #d3cab3;
 }
 
 .viewMoreContainer {
@@ -108,7 +108,7 @@
     display: inline-block;
     padding: 15px 40px;
     border: 1px solid #c49c5c;
-    color: #fff;
+    color: #d3cab3;
     font-family: var(--font-inter), sans-serif;
     text-transform: uppercase;
     font-size: 1rem;
diff --git a/src/components/Testimonials/Testimonials.module.css b/src/components/Testimonials/Testimonials.module.css
index 4d62212..71714c3 100644
--- a/src/components/Testimonials/Testimonials.module.css
+++ b/src/components/Testimonials/Testimonials.module.css
@@ -168,6 +168,25 @@
     z-index: 5;
 }
 
+.button {
+    display: inline-block;
+    margin-top: 3rem;
+    padding: 0.8rem 2rem;
+    border: 1px solid var(--color-gold);
+    color: #d3cab3;
+    font-family: var(--font-lato);
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: var(--color-gold);
+    color: #d3cab3;
+}
+
 /* Responsive adjustments for different viewport sizes */
 @media (max-width: 1400px) {
     .sliderContainer {
diff --git a/src/components/Testimonials/Testimonials.tsx b/src/components/Testimonials/Testimonials.tsx
index d540955..bbdee1e 100644
--- a/src/components/Testimonials/Testimonials.tsx
+++ b/src/components/Testimonials/Testimonials.tsx
@@ -117,6 +117,17 @@ export default function Testimonials() {
 
                 <button className={`${styles.arrow} ${styles.nextArrow}`} onClick={nextSlide}>→</button>
             </div>
+
+            <div className={styles.buttonContainer}>
+                <a
+                    href="https://www.google.com/search?q=antalya+restaurant"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.button}
+                >
+                    Review Us on Google
+                </a>
+            </div>
         </section>
     )
 }