diff --git a/public/images/cloche-icon.png b/public/images/cloche-icon.png
new file mode 100644
index 0000000..f0365cf
Binary files /dev/null and b/public/images/cloche-icon.png differ
diff --git a/public/images/dinner.png b/public/images/dinner.png
new file mode 100644
index 0000000..fa76c21
Binary files /dev/null and b/public/images/dinner.png differ
diff --git a/public/images/dish.png b/public/images/dish.png
new file mode 100644
index 0000000..693063f
Binary files /dev/null and b/public/images/dish.png differ
diff --git a/public/images/eat.png b/public/images/eat.png
new file mode 100644
index 0000000..fbfa5eb
Binary files /dev/null and b/public/images/eat.png differ
diff --git a/public/images/email.png b/public/images/email.png
new file mode 100644
index 0000000..f3c1d57
Binary files /dev/null and b/public/images/email.png differ
diff --git a/public/images/fork-icon.png b/public/images/fork-icon.png
new file mode 100644
index 0000000..0968c6f
Binary files /dev/null and b/public/images/fork-icon.png differ
diff --git a/public/images/phone-call.png b/public/images/phone-call.png
new file mode 100644
index 0000000..1cb0250
Binary files /dev/null and b/public/images/phone-call.png differ
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 5b4d207..1817d39 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/</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>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
diff --git a/scripts/generate-sitemap.cjs b/scripts/generate-sitemap.cjs
index afd8673..c7aa71c 100644
--- a/scripts/generate-sitemap.cjs
+++ b/scripts/generate-sitemap.cjs
@@ -27,7 +27,7 @@ const formatUrl = (url) => {
 // ✅ Static pages
 const staticLinks = [
     { url: '/', changefreq: 'daily', priority: 1.0 },
-    { url: '/about/', changefreq: 'monthly', priority: 0.5 },
+    { url: '/about-us/', changefreq: 'monthly', priority: 0.5 },
     { url: '/menu/', changefreq: 'weekly', priority: 0.6 },
     { url: '/gallery/', changefreq: 'weekly', priority: 0.6 },
     { url: '/contact/', changefreq: 'weekly', priority: 0.6 },
diff --git a/src/app/about-us/about.module.css b/src/app/about-us/about.module.css
index eadb269..1437207 100644
--- a/src/app/about-us/about.module.css
+++ b/src/app/about-us/about.module.css
@@ -140,6 +140,14 @@
   color: #000;
 }
 
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
 /* Features Section */
 .featuresGrid {
   display: grid;
@@ -154,7 +162,7 @@
   padding: 2.5rem 2rem;
   text-align: center;
   border: 2px solid #b07c4b;
-   transition: transform 0.3s ease;
+  transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
@@ -195,10 +203,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 2rem;
   max-width: 900px;
   margin: 0 auto;
   position: relative;
+  padding: 0 70px;
 }
 
 .sliderBtn {
@@ -214,6 +222,18 @@
   cursor: pointer;
   transition: all 0.3s;
   flex-shrink: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.sliderBtn:first-child {
+  left: 10px;
+}
+
+.sliderBtn:last-child {
+  right: 10px;
 }
 
 .sliderBtn:hover {
@@ -221,11 +241,12 @@
   color: #000;
 }
 
+
 .testimonialCard {
   background-color: #F5E6D3;
   padding: 3rem 2.5rem;
   border: 2px solid #b07c4b;
-   display: flex;
+  display: flex;
   flex-direction: column;
   gap: 2rem;
   flex: 1;
@@ -235,7 +256,6 @@
 .testimonialText {
   font-family: var(--font-lato);
   font-size: 1.3rem;
-  /* color: #5d4037; */
   line-height: 1.8;
   font-style: italic;
   text-align: center;
@@ -262,6 +282,7 @@
   object-fit: cover;
 }
 
+
 .authorInfo {
   display: flex;
   flex-direction: column;
@@ -278,9 +299,7 @@
 .authorRole {
   font-family: var(--font-lato);
   font-size: 0.95rem;
-  /* color: #836839; */
 }
-
 .sliderDots {
   display: flex;
   justify-content: center;
@@ -403,8 +422,12 @@
     font-size: 2rem;
   }
 
+  .ctaSubtitle {
+    font-size: 14px;
+  }
+
   .ctaTitle {
-    font-size: 2rem;
+    font-size: 22px;
   }
 
   .sliderBtn {
@@ -437,6 +460,20 @@
   .faqImageBlock {
     min-height: 300px;
   }
+
+  .ctaButton {
+    display: inline-block;
+    padding: 12px 20px;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-size: 12px;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    letter-spacing: 1px;
+  }
 }
 
 /* FAQ Section Styles */
@@ -472,7 +509,7 @@
 .faqContentBlock {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  /* gap: 2rem; */
 }
 
 .faqTitle {
@@ -520,7 +557,7 @@
   font-family: var(--font-lato);
   font-size: 1.1rem;
   font-weight: 600;
-  /* color: #5d4037; */
+  color: #c49c5c;
   text-align: left;
   transition: all 0.3s ease;
 }
@@ -557,7 +594,7 @@
 .faqAnswer p {
   font-family: var(--font-lato);
   font-size: 1rem;
-  color: #c49c5c;
+  /* color: #5d4037; */
   line-height: 1.8;
   margin: 0;
 }
@@ -572,4 +609,57 @@
     opacity: 1;
     transform: translateY(0);
   }
+}
+
+@media (max-width: 500px) {
+
+  .faqContainer {
+    display: flex;
+    flex-direction: column !important;
+    align-items: center;
+    width: 100%;
+    gap: 1.5rem;
+  }
+
+  /* Image should come to top */
+  .faqImageBlock {
+    width: 100% !important;
+    order: -1;
+    /* ⬅⬅ THIS moves image to the top */
+  }
+
+  .faqImage {
+    width: 100% !important;
+    height: auto !important;
+    object-fit: cover !important;
+    border-radius: 12px;
+    border: 2px solid #b07c4b
+  }
+
+  .ctaButton {
+    display: inline-block;
+    padding: 12px 20px;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-size: 12px;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    letter-spacing: 1px;
+  }
+
+  /* FAQ Text */
+  .faqContent {
+    width: 100% !important;
+    padding: 0 1rem;
+    text-align: left;
+  }
+
+  /* Accordion full width */
+  .accordionWrapper {
+    width: 100% !important;
+    padding: 0 1rem;
+  }
 }
\ No newline at end of file
diff --git a/src/app/about-us/about_temp.css b/src/app/about-us/about_temp.css
index 1ed0327..2bfbff3 100644
--- a/src/app/about-us/about_temp.css
+++ b/src/app/about-us/about_temp.css
@@ -150,7 +150,7 @@
   padding: 2.5rem 2rem;
   text-align: center;
   border: 2px solid #b07c4b;
-   transition: transform 0.3s ease;
+  transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx
index f56560f..3a7dcd4 100644
--- a/src/app/about-us/page.tsx
+++ b/src/app/about-us/page.tsx
@@ -97,7 +97,7 @@ export default function AboutPage() {
                 <div className={styles.heroContent}>
                     <h1 className={styles.heroTitle}>About Us</h1>
                     <p className={styles.breadcrumb}>
-                        <Link href="/">Home</Link> / About Us
+                        <Link href="/">Home</Link> / About
                     </p>
                 </div>
             </motion.section>
@@ -112,6 +112,11 @@ export default function AboutPage() {
                     variants={staggerContainer}
                 >
                     <motion.div className={styles.textBlock} variants={slideInLeft}>
+                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                        </div>
                         <h2 className={styles.sectionTitle}>Our Story</h2>
                         <p className={styles.text}>
                             Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community.
@@ -132,6 +137,11 @@ export default function AboutPage() {
 
             {/* Features Section - With real images */}
             <section className={`${styles.section} ${styles.featuresSection}`}>
+                <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
                 <motion.h2
                     className={styles.sectionTitleCenter}
                     initial="hidden"
@@ -178,6 +188,11 @@ export default function AboutPage() {
                         <Image src="/images/hero-2.png" alt="Why Choose Us" width={500} height={350} className={styles.image} />
                     </motion.div>
                     <motion.div className={styles.textBlock} variants={slideInRight}>
+                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                        </div>
                         <h2 className={styles.sectionTitle}>Why Choose Us</h2>
                         <p className={styles.text}>
                             At Antalya Restaurant, we don't just serve food – we create experiences. Our commitment to authenticity means every spice, every ingredient, and every cooking method stays true to Turkish culinary traditions.
@@ -191,6 +206,11 @@ export default function AboutPage() {
 
             {/* Testimonials Section - Auto Slider */}
             <section className={`${styles.section} ${styles.testimonialsSection}`}>
+                <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
                 <motion.h2
                     className={styles.sectionTitleCenter}
                     initial="hidden"
@@ -270,6 +290,11 @@ export default function AboutPage() {
                         />
                     </motion.div>
                     <motion.div className={styles.faqContentBlock} variants={slideInRight}>
+                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                        </div>
                         <h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
                         <p className={styles.faqSubtitle}>
                             Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
@@ -293,6 +318,11 @@ export default function AboutPage() {
                 variants={fadeIn}
             >
                 <div className={styles.ctaOverlay}>
+                    <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                        <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                        <span>ANTALYA</span>
+                        <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                    </div>
                     <motion.h2
                         className={styles.ctaTitle}
                         initial={{ opacity: 0, y: 20 }}
diff --git a/src/app/about/about.module.css b/src/app/about/about.module.css
deleted file mode 100644
index 9b480e9..0000000
--- a/src/app/about/about.module.css
+++ /dev/null
@@ -1,667 +0,0 @@
-.main {
-  background-color: var(--color-dark);
-  color: var(--color-text-light);
-  min-height: 100vh;
-}
-
-.hero {
-  padding: 10rem 2rem;
-  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png');
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.heroContent {
-  max-width: 800px;
-}
-
-.heroTitle {
-  font-family: var(--font-playfair);
-  font-size: 4rem;
-  color: var(--color-gold);
-  margin-bottom: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.breadcrumb {
-  font-size: 1.1rem;
-  color: #c49c5c;
-  font-family: var(--font-lato);
-}
-
-.breadcrumb a {
-  color: #fff;
-  transition: color 0.3s;
-}
-
-.breadcrumb a:hover {
-  color: var(--color-gold);
-}
-
-.section {
-  padding: 80px 20px;
-  background-color: #f5e6d3;
-}
-
-.featuresSection {
-  background-color: #3a0c08;
-  background-image: url('/images/section-bg.jpg');
-  background-size: cover;
-  background-position: center;
-}
-
-.testimonialsSection {
-  background-color: #3a0c08;
-  background-image: url('/images/about-testimonial-bg.jpg');
-  background-size: cover;
-  background-position: center;
-  background-repeat: repeat;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 4rem;
-  flex-wrap: wrap;
-}
-
-.textBlock {
-  flex: 1;
-  min-width: 300px;
-}
-
-.imageBlock {
-  flex: 1;
-  min-width: 300px;
-  display: flex;
-  justify-content: center;
-}
-
-.sectionTitle {
-  font-family: var(--font-playfair);
-  font-size: 3rem;
-  color: #5d4037;
-  margin-bottom: 1.5rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.sectionTitleCenter {
-  font-family: var(--font-playfair);
-  font-size: 3.5rem;
-  color: #c49c5c;
-  margin-bottom: 3rem;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.text {
-  font-size: 1.1rem;
-  line-height: 1.8;
-  /* color: #5d4037; */
-  margin-bottom: 1.5rem;
-  opacity: 0.9;
-  font-family: var(--font-lato);
-}
-
-.image {
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  max-width: 100%;
-  height: auto;
-  border: 2px solid #b07c4b
-}
-
-.menuButton {
-  display: inline-block;
-  padding: 15px 40px;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  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;
-}
-
-.menuButton:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-/* Features Section */
-.featuresGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 3rem;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.featureCard {
-  background-color: #F5E6D3;
-  padding: 2.5rem 2rem;
-  text-align: center;
-  border: 2px solid #b07c4b;
-  transition: transform 0.3s ease;
-}
-
-.featureCard:hover {
-  transform: translateY(-10px);
-}
-
-.featureImageWrapper {
-  position: relative;
-  width: 100%;
-  height: 200px;
-  margin-bottom: 1.5rem;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 2px solid #b07c4b;
-}
-
-.featureImage {
-  object-fit: cover;
-}
-
-.featureTitle {
-  font-family: var(--font-playfair);
-  font-size: 1.8rem;
-  color: #3e2723;
-  margin-bottom: 1rem;
-  font-weight: 600;
-}
-
-.featureDesc {
-  font-family: var(--font-lato);
-  font-size: 1rem;
-  /* color: #5d4037; */
-  line-height: 1.6;
-}
-
-/* Testimonials Slider */
-.testimonialSlider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* gap: 2rem; */
-  max-width: 900px;
-  margin: 0 auto;
-  position: relative;
-  padding: 0 70px;
-}
-
-.sliderBtn {
-  background: transparent;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  font-size: 2.5rem;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s;
-  flex-shrink: 0;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-}
-
-.sliderBtn:first-child {
-  left: 10px;
-}
-
-.sliderBtn:last-child {
-  right: 10px;
-}
-
-.sliderBtn:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-.testimonialCard {
-  background-color: #F5E6D3;
-  padding: 3rem 2.5rem;
-  border: 2px solid #b07c4b;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  flex: 1;
-  min-height: 300px;
-}
-
-.testimonialText {
-  font-family: var(--font-lato);
-  font-size: 1.3rem;
-  /* color: #5d4037; */
-  line-height: 1.8;
-  font-style: italic;
-  text-align: center;
-}
-
-.testimonialAuthor {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-}
-
-.authorImageWrapper {
-  position: relative;
-  width: 70px;
-  height: 70px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid #c49c5c;
-  flex-shrink: 0;
-}
-
-.authorImage {
-  object-fit: cover;
-}
-
-.authorInfo {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-}
-
-.authorName {
-  font-family: var(--font-playfair);
-  font-size: 1.2rem;
-  color: #3e2723;
-  font-weight: 600;
-}
-
-.authorRole {
-  font-family: var(--font-lato);
-  font-size: 0.95rem;
-  /* color: #836839; */
-}
-
-.sliderDots {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-.dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: transparent;
-  border: 2px solid #b07c4b;
-  cursor: pointer;
-  transition: all 0.3s;
-  padding: 0;
-}
-
-.dot:hover,
-.activeDot {
-  background-color: #c49c5c;
-}
-
-/* Call to Action Section */
-.ctaSection {
-  padding: 5rem 2rem;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  text-align: center;
-}
-
-.ctaOverlay {
-  position: relative;
-  z-index: 2;
-  background: rgba(58, 12, 8, 0.9);
-  padding: 4rem 2rem;
-  max-width: 800px;
-  margin: 0 auto;
-  border: 2px solid #b07c4b
-}
-
-.ctaTitle {
-  font-family: var(--font-playfair);
-  font-size: 3rem;
-  color: #c49c5c;
-  margin-bottom: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.ctaSubtitle {
-  font-family: var(--font-lato);
-  font-size: 1.3rem;
-  color: #F5E6D3;
-  margin-bottom: 2rem;
-}
-
-.ctaButton {
-  display: inline-block;
-  padding: 15px 40px;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  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;
-}
-
-.ctaButton:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-@media (max-width: 1024px) {
-  .featuresGrid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  /* .featuresGrid {
-    grid-template-columns: 1fr;
-  } */
-
-  .faqContainer {
-    grid-template-columns: 1fr;
-    gap: 3rem;
-  }
-
-  .faqImageBlock {
-    min-height: 400px;
-  }
-}
-
-@media (max-width: 768px) {
-  .heroTitle {
-    font-size: 3rem;
-  }
-
-  .container {
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .section {
-    padding: 60px 10px;
-  }
-
-  .sectionTitleCenter {
-    font-size: 2rem;
-  }
-
-  .ctaSubtitle {
-    font-size: 14px;
-  }
-
-  .ctaTitle {
-    font-size: 22px;
-  }
-
-  .sliderBtn {
-    width: 40px;
-    height: 40px;
-    font-size: 2rem;
-  }
-
-  .testimonialSlider {
-    padding: 0 40px;
-  }
-
-  .sliderBtn:first-child {
-    left: 0;
-  }
-
-  .sliderBtn:last-child {
-    right: 0;
-  }
-
-  .faqSection {
-    padding: 60px 20px;
-  }
-
-  .faqTitle {
-    font-size: 2rem;
-  }
-
-  .faqSubtitle {
-    font-size: 1rem;
-  }
-
-  .faqQuestion {
-    padding: 1.2rem 1.5rem;
-    font-size: 1rem;
-  }
-
-  .faqAnswer {
-    padding: 1.2rem 1.5rem;
-  }
-
-  .faqImageBlock {
-    min-height: 300px;
-  }
-
-  .ctaButton {
-    display: inline-block;
-    padding: 12px 20px;
-    border: 2px solid #b07c4b;
-    color: #c49c5c;
-    font-family: var(--font-lato);
-    font-size: 12px;
-    text-transform: uppercase;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    background: transparent;
-    letter-spacing: 1px;
-  }
-}
-
-/* FAQ Section Styles */
-.faqSection {
-  padding: 80px 20px;
-  background-color: #F5E6D3;
-}
-
-.faqContainer {
-  max-width: 1400px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 4rem;
-  align-items: start;
-}
-
-.faqImageBlock {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  /* min-height: 600px; */
-}
-
-.faqImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-}
-
-.faqContentBlock {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.faqTitle {
-  font-family: var(--font-playfair);
-  font-size: 2.5rem;
-  color: #5d4037;
-  margin-bottom: 0.5rem;
-}
-
-.faqSubtitle {
-  font-family: var(--font-lato);
-  font-size: 1.1rem;
-  /* color: #836839; */
-  line-height: 1.6;
-  margin-bottom: 1rem;
-}
-
-.faqAccordion {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.faqItem {
-  background: #fff;
-  border: 2px solid #b07c4b;
-  border-radius: 8px;
-  overflow: hidden;
-  transition: all 0.3s ease;
-}
-
-.faqItem:hover {
-  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
-}
-
-.faqQuestion {
-  width: 100%;
-  padding: 1.5rem 2rem;
-  background: transparent;
-  border: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  font-family: var(--font-lato);
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #c49c5c;
-  text-align: left;
-  transition: all 0.3s ease;
-}
-
-.faqQuestion:hover {
-  background-color: #c49c5c;
-}
-
-.faqQuestionActive {
-  background-color: #c49c5c;
-  color: #fff;
-}
-
-.faqIcon {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #c49c5c;
-  transition: transform 0.3s ease;
-  flex-shrink: 0;
-  margin-left: 1rem;
-}
-
-.faqQuestionActive .faqIcon {
-  color: #fff;
-  transform: rotate(180deg);
-}
-
-.faqAnswer {
-  padding: 1.5rem 2rem;
-  border-top: 1px solid #e0d5c7;
-  animation: slideDown 0.3s ease;
-}
-
-.faqAnswer p {
-  font-family: var(--font-lato);
-  font-size: 1rem;
-  /* color: #5d4037; */
-  line-height: 1.8;
-  margin: 0;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 500px) {
-
-  .faqContainer {
-    display: flex;
-    flex-direction: column !important;
-    align-items: center;
-    width: 100%;
-    gap: 1.5rem;
-  }
-
-  .featuresGrid {
-    grid-template-columns: 1fr;
-  }
-
-  /* Image should come to top */
-  .faqImageBlock {
-    width: 100% !important;
-    order: -1;
-    /* ⬅⬅ THIS moves image to the top */
-  }
-
-  .faqImage {
-    width: 100% !important;
-    height: auto !important;
-    object-fit: cover !important;
-    border-radius: 12px;
-    border: 2px solid #b07c4b
-  }
-
-  .ctaButton {
-    display: inline-block;
-    padding: 12px 20px;
-    border: 2px solid #b07c4b;
-    color: #c49c5c;
-    font-family: var(--font-lato);
-    font-size: 12px;
-    text-transform: uppercase;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    background: transparent;
-    letter-spacing: 1px;
-  }
-
-  /* FAQ Text */
-  .faqContent {
-    width: 100% !important;
-    padding: 0 1rem;
-    text-align: left;
-  }
-
-  /* Accordion full width */
-  .accordionWrapper {
-    width: 100% !important;
-    padding: 0 1rem;
-  }
-}
\ No newline at end of file
diff --git a/src/app/about/about.module.css.backup b/src/app/about/about.module.css.backup
deleted file mode 100644
index 43ed6ce..0000000
--- a/src/app/about/about.module.css.backup
+++ /dev/null
@@ -1,770 +0,0 @@
-.main {
-  background-color: var(--color-dark);
-  color: var(--color-text-light);
-  min-height: 100vh;
-}
-
-.hero {
-  padding: 10rem 2rem;
-  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png');
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.heroContent {
-  max-width: 800px;
-}
-
-.heroTitle {
-  font-family: var(--font-playfair);
-  font-size: 4rem;
-  color: var(--color-gold);
-  margin-bottom: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.breadcrumb {
-  font-size: 1.1rem;
-  color: #c49c5c;
-  font-family: var(--font-lato);
-}
-
-.breadcrumb a {
-  color: #fff;
-  transition: color 0.3s;
-}
-
-.breadcrumb a:hover {
-  color: var(--color-gold);
-}
-
-.section {
-  padding: 80px 20px;
-  background-color: #0a0a0a;
-}
-
-.featuresSection {
-  background-color: #3a0c08;
-  background-image: url('/images/section-bg.jpg');
-  background-size: cover;
-  background-position: center;
-}
-
-.testimonialsSection {
-  background-color: #0a0a0a;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 4rem;
-  flex-wrap: wrap;
-}
-
-.textBlock {
-  flex: 1;
-  min-width: 300px;
-}
-
-.imageBlock {
-  flex: 1;
-  min-width: 300px;
-  display: flex;
-  justify-content: center;
-}
-
-.sectionTitle {
-  font-family: var(--font-playfair);
-  font-size: 3rem;
-  color: #c49c5c;
-  margin-bottom: 1.5rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.sectionTitleCenter {
-  font-family: var(--font-playfair);
-  font-size: 3.5rem;
-  color: #c49c5c;
-  margin-bottom: 3rem;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.text {
-  font-size: 1.1rem;
-  line-height: 1.8;
-  color: #c49c5c;
-  margin-bottom: 1.5rem;
-  opacity: 0.9;
-  font-family: var(--font-lato);
-}
-
-.image {
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  max-width: 100%;
-  height: auto;
-  border: 2px solid #b07c4b
-}
-
-.menuButton {
-  display: inline-block;
-  padding: 15px 40px;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  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;
-}
-
-.menuButton:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-/* Features Section */
-.featuresGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 3rem;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.featureCard {
-  background-color: #F5E6D3;
-  padding: 2.5rem 2rem;
-  text-align: center;
-  border: 2px solid #b07c4b
-  transition: transform 0.3s ease;
-}
-
-.featureCard:hover {
-  transform: translateY(-10px);
-}
-
-.featureImageWrapper {
-  position: relative;
-  width: 100%;
-  height: 200px;
-  margin-bottom: 1.5rem;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 2px solid #b07c4b;
-}
-
-.featureImage {
-  object-fit: cover;
-}
-
-.featureTitle {
-  font-family: var(--font-playfair);
-  font-size: 1.8rem;
-  color: #3e2723;
-  margin-bottom: 1rem;
-  font-weight: 600;
-}
-
-.featureDesc {
-  font-family: var(--font-lato);
-  font-size: 1rem;
-  color: #5d4037;
-  line-height: 1.6;
-}
-
-/* Testimonials Slider */
-.testimonialSlider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-  max-width: 900px;
-  margin: 0 auto;
-  position: relative;
-}
-
-.sliderBtn {
-  background: transparent;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  font-size: 2.5rem;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s;
-  flex-shrink: 0;
-}
-
-.sliderBtn:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-.testimonialCard {
-  background-color: #F5E6D3;
-  padding: 3rem 2.5rem;
-  border: 2px solid #b07c4b
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  flex: 1;
-  min-height: 300px;
-}
-
-.testimonialText {
-  font-family: var(--font-lato);
-  font-size: 1.3rem;
-  color: #5d4037;
-  line-height: 1.8;
-  font-style: italic;
-  text-align: center;
-}
-
-.testimonialAuthor {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-}
-
-.authorImageWrapper {
-  position: relative;
-  width: 70px;
-  height: 70px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid #c49c5c;
-  flex-shrink: 0;
-}
-
-.authorImage {
-  object-fit: cover;
-}
-
-.authorInfo {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-}
-
-.authorName {
-  font-family: var(--font-playfair);
-  font-size: 1.2rem;
-  color: #3e2723;
-  font-weight: 600;
-}
-
-.authorRole {
-  font-family: var(--font-lato);
-  font-size: 0.95rem;
-  color: #836839;
-}
-
-.sliderDots {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-.dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: transparent;
-  border: 2px solid #b07c4b;
-  cursor: pointer;
-  transition: all 0.3s;
-  padding: 0;
-}
-
-.dot:hover,
-.activeDot {
-  background-color: #c49c5c;
-}
-
-/* Call to Action Section */
-.ctaSection {
-  padding: 5rem 2rem;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  text-align: center;
-}
-
-.ctaOverlay {
-  position: relative;
-  z-index: 2;
-  background: rgba(58, 12, 8, 0.9);
-  padding: 4rem 2rem;
-  max-width: 800px;
-  margin: 0 auto;
-  border: 2px solid #b07c4b
-}
-
-.ctaTitle {
-  font-family: var(--font-playfair);
-  font-size: 3rem;
-  color: #c49c5c;
-  margin-bottom: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.ctaSubtitle {
-  font-family: var(--font-lato);
-  font-size: 1.3rem;
-  color: #F5E6D3;
-  margin-bottom: 2rem;
-}
-
-.ctaButton {
-  display: inline-block;
-  padding: 15px 40px;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  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;
-}
-
-.ctaButton:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-@media (max-width: 1024px) {
-  .featuresGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .testimonialSlider {
-    flex-direction: column;
-  }
-
-  .sliderBtn {
-    order: 2;
-  }
-
-  font-family: var(--font-playfair);
-  font-size: 1.8rem;
-  color: #3e2723;
-  margin-bottom: 1rem;
-  font-weight: 600;
-}
-
-.featureDesc {
-  font-family: var(--font-lato);
-  font-size: 1rem;
-  color: #5d4037;
-  line-height: 1.6;
-}
-
-/* Testimonials Slider */
-.testimonialSlider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-  max-width: 900px;
-  margin: 0 auto;
-  position: relative;
-}
-
-.sliderBtn {
-  background: transparent;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  font-size: 2.5rem;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s;
-  flex-shrink: 0;
-}
-
-.sliderBtn:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-.testimonialCard {
-  background-color: #F5E6D3;
-  padding: 3rem 2.5rem;
-  border: 2px solid #b07c4b
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  flex: 1;
-  min-height: 300px;
-}
-
-.testimonialText {
-  font-family: var(--font-lato);
-  font-size: 1.3rem;
-  color: #5d4037;
-  line-height: 1.8;
-  font-style: italic;
-  text-align: center;
-}
-
-.testimonialAuthor {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-}
-
-.authorImageWrapper {
-  position: relative;
-  width: 70px;
-  height: 70px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid #c49c5c;
-  flex-shrink: 0;
-}
-
-.authorImage {
-  object-fit: cover;
-}
-
-.authorInfo {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-}
-
-.authorName {
-  font-family: var(--font-playfair);
-  font-size: 1.2rem;
-  color: #3e2723;
-  font-weight: 600;
-}
-
-.authorRole {
-  font-family: var(--font-lato);
-  font-size: 0.95rem;
-  color: #836839;
-}
-
-.sliderDots {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-.dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: transparent;
-  border: 2px solid #b07c4b;
-  cursor: pointer;
-  transition: all 0.3s;
-  padding: 0;
-}
-
-.dot:hover,
-.activeDot {
-  background-color: #c49c5c;
-}
-
-/* Call to Action Section */
-.ctaSection {
-  padding: 5rem 2rem;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  text-align: center;
-}
-
-.ctaOverlay {
-  position: relative;
-  z-index: 2;
-  background: rgba(58, 12, 8, 0.9);
-  padding: 4rem 2rem;
-  max-width: 800px;
-  margin: 0 auto;
-  border: 2px solid #b07c4b
-}
-
-.ctaTitle {
-  font-family: var(--font-playfair);
-  font-size: 3rem;
-  color: #c49c5c;
-  margin-bottom: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.ctaSubtitle {
-  font-family: var(--font-lato);
-  font-size: 1.3rem;
-  color: #F5E6D3;
-  margin-bottom: 2rem;
-}
-
-.ctaButton {
-  display: inline-block;
-  padding: 15px 40px;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  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;
-}
-
-.ctaButton:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-@media (max-width: 1024px) {
-  .featuresGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .testimonialSlider {
-    flex-direction: column;
-  }
-
-  .sliderBtn {
-    order: 2;
-  }
-
-  .testimonialCard {
-    order: 1;
-  }
-}
-
-@media (max-width: 768px) {
-  .heroTitle {
-    font-size: 3rem;
-  }
-
-  .container {
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .section {
-    padding: 60px 20px;
-  }
-
-  .sectionTitleCenter {
-    font-size: 2rem;
-  }
-
-  .ctaTitle {
-    font-size: 2rem;
-  }
-
-  .sliderBtn {
-    width: 40px;
-    height: 40px;
-    font-size: 2rem;
-  }
-}
-
-/* FAQ Section Styles */
-.faqSection {
-  padding: 80px 20px;
-  background-color: #F5E6D3;
-}
-
-.faqContainer {
-  max-width: 1400px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 4rem;
-  align-items: start;
-}
-
-.faqImageBlock {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-height: 600px;
-}
-
-.faqImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-}
-
-.faqContentBlock {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.faqTitle {
-  font-family: var(--font-playfair);
-  font-size: 2.5rem;
-  color: #5d4037;
-  margin-bottom: 0.5rem;
-}
-
-.faqSubtitle {
-  font-family: var(--font-lato);
-  font-size: 1.1rem;
-  color: #836839;
-  line-height: 1.6;
-  margin-bottom: 1rem;
-}
-
-.faqAccordion {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.faqItem {
-  background: #fff;
-  border: 2px solid #b07c4b;
-  border-radius: 8px;
-  overflow: hidden;
-  transition: all 0.3s ease;
-}
-
-.faqItem:hover {
-  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
-}
-
-.faqQuestion {
-  width: 100%;
-  padding: 1.5rem 2rem;
-  background: transparent;
-  border: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  font-family: var(--font-lato);
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #5d4037;
-  text-align: left;
-  transition: all 0.3s ease;
-}
-
-.faqQuestion:hover {
-  background-color: #c49c5c;
-}
-
-.faqQuestionActive {
-  background-color: #c49c5c;
-  color: #fff;
-}
-
-.faqIcon {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #c49c5c;
-  transition: transform 0.3s ease;
-  flex-shrink: 0;
-  margin-left: 1rem;
-}
-
-.faqQuestionActive .faqIcon {
-  color: #fff;
-  transform: rotate(180deg);
-}
-
-.faqAnswer {
-  padding: 1.5rem 2rem;
-  border-top: 1px solid #e0d5c7;
-  animation: slideDown 0.3s ease;
-}
-
-.faqAnswer p {
-  font-family: var(--font-lato);
-  font-size: 1rem;
-  color: #5d4037;
-  line-height: 1.8;
-  margin: 0;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 1024px) {
-  .faqContainer {
-    grid-template-columns: 1fr;
-    gap: 3rem;
-  }
-
-  .faqImageBlock {
-    min-height: 400px;
-  }
-}
-
-@media (max-width: 768px) {
-  .faqSection {
-    padding: 60px 20px;
-  }
-
-  .faqTitle {
-    font-size: 2rem;
-  }
-
-  .faqSubtitle {
-    font-size: 1rem;
-  }
-
-  .faqQuestion {
-    padding: 1.2rem 1.5rem;
-    font-size: 1rem;
-  }
-
-  .faqAnswer {
-    padding: 1.2rem 1.5rem;
-  }
-
-  .faqImageBlock {
-    min-height: 300px;
-  }
-}
\ No newline at end of file
diff --git a/src/app/about/about_temp.css b/src/app/about/about_temp.css
deleted file mode 100644
index 2bfbff3..0000000
--- a/src/app/about/about_temp.css
+++ /dev/null
@@ -1,168 +0,0 @@
-.main {
-  background-color: var(--color-dark);
-  color: var(--color-text-light);
-  min-height: 100vh;
-}
-
-.hero {
-  padding: 10rem 2rem;
-  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png');
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.heroContent {
-  max-width: 800px;
-}
-
-.heroTitle {
-  font-family: var(--font-playfair);
-  font-size: 4rem;
-  color: var(--color-gold);
-  margin-bottom: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.breadcrumb {
-  font-size: 1.1rem;
-  color: #c49c5c;
-  font-family: var(--font-lato);
-}
-
-.breadcrumb a {
-  color: #fff;
-  transition: color 0.3s;
-}
-
-.breadcrumb a:hover {
-  color: var(--color-gold);
-}
-
-.section {
-  padding: 80px 10px;
-  background-color: #f5e6d3;
-}
-
-.featuresSection {
-  background-color: #3a0c08;
-  background-image: url('/images/section-bg.jpg');
-  background-size: cover;
-  background-position: center;
-}
-
-.testimonialsSection {
-  background-color: #0a0a0a;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 4rem;
-  flex-wrap: wrap;
-}
-
-.textBlock {
-  flex: 1;
-  min-width: 300px;
-}
-
-.imageBlock {
-  flex: 1;
-  min-width: 300px;
-  display: flex;
-  justify-content: center;
-}
-
-.sectionTitle {
-  font-family: var(--font-playfair);
-  font-size: 3rem;
-  color: #c49c5c;
-  margin-bottom: 1.5rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.sectionTitleCenter {
-  font-family: var(--font-playfair);
-  font-size: 3.5rem;
-  color: #c49c5c;
-  margin-bottom: 3rem;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.text {
-  font-size: 1.1rem;
-  line-height: 1.8;
-  color: #c49c5c;
-  margin-bottom: 1.5rem;
-  opacity: 0.9;
-  font-family: var(--font-lato);
-}
-
-.image {
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  max-width: 100%;
-  height: auto;
-  border: 2px solid #b07c4b
-}
-
-.menuButton {
-  display: inline-block;
-  padding: 15px 40px;
-  border: 2px solid #b07c4b;
-  color: #c49c5c;
-  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;
-}
-
-.menuButton:hover {
-  background-color: #c49c5c;
-  color: #000;
-}
-
-/* Features Section */
-.featuresGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 3rem;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.featureCard {
-  background-color: #F5E6D3;
-  padding: 2.5rem 2rem;
-  text-align: center;
-  border: 2px solid #b07c4b;
-  transition: transform 0.3s ease;
-}
-
-.featureCard:hover {
-  transform: translateY(-10px);
-}
-
-.featureImageWrapper {
-  position: relative;
-  width: 100%;
-  height: 200px;
-  margin-bottom: 1.5rem;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 2px solid #b07c4b;
-}
\ No newline at end of file
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
deleted file mode 100644
index 4032397..0000000
--- a/src/app/about/page.tsx
+++ /dev/null
@@ -1,352 +0,0 @@
-'use client'
-
-import Navbar from "@/components/Navbar/Navbar";
-import Footer from "@/components/Footer/Footer";
-import FAQ from "@/components/FAQ/FAQ";
-import Image from "next/image";
-import Link from "next/link";
-import styles from "./about.module.css";
-import { featuresData, testimonialData, ctaData, aboutFaqData } from "@/utils/constant";
-import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-
-export default function AboutPage() {
-    const [currentTestimonial, setCurrentTestimonial] = useState(0);
-
-    // 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
-            }
-        }
-    };
-
-    // Auto-slide testimonials
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
-        }, 5000); // Change every 5 seconds
-
-        return () => clearInterval(interval);
-    }, []);
-
-    const nextTestimonial = () => {
-        setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
-    };
-
-    const prevTestimonial = () => {
-        setCurrentTestimonial((prev) => (prev - 1 + testimonialData.length) % testimonialData.length);
-    };
-
-    return (
-        <main className={styles.main}>
-            <Navbar />
-
-            {/* Hero Banner */}
-            <motion.section
-                className={styles.hero}
-                initial="hidden"
-                animate="visible"
-                variants={fadeIn}
-            >
-                <div className={styles.heroContent}>
-                    <h1 className={styles.heroTitle}>About Us</h1>
-                    <p className={styles.breadcrumb}>
-                        <Link href="/">Home</Link> / About
-                    </p>
-                </div>
-            </motion.section>
-
-            {/* About Section - No boxed structure */}
-            <section className={styles.section}>
-                <motion.div
-                    className={styles.container}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={{ once: true, margin: "-100px" }}
-                    variants={staggerContainer}
-                >
-                    <motion.div className={styles.textBlock} variants={slideInLeft}>
-                        <h2 className={styles.sectionTitle}>Our Story</h2>
-                        <p className={styles.text}>
-                            Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community.
-                            What started as a small family-run kitchen has grown into a beloved dining destination, known for its warm hospitality and traditional recipes passed down through generations.
-                        </p>
-                        <p className={styles.text}>
-                            Every dish we serve tells a story of tradition, passion, and dedication to the culinary arts. Our chefs use time-honored techniques combined with the freshest ingredients to create an unforgettable dining experience.
-                        </p>
-                        <Link href="/menu" className={styles.menuButton}>
-                            View Our Menu
-                        </Link>
-                    </motion.div>
-                    <motion.div className={styles.imageBlock} variants={slideInRight}>
-                        <Image src="/images/restaurant-interior.png" alt="Our Story" width={500} height={350} className={styles.image} />
-                    </motion.div>
-                </motion.div>
-            </section>
-
-            {/* Features Section - With real images */}
-            <section className={`${styles.section} ${styles.featuresSection}`}>
-                <motion.h2
-                    className={styles.sectionTitleCenter}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={{ once: true }}
-                    variants={fadeInUp}
-                >
-                    What Makes Us Special
-                </motion.h2>
-                <motion.div
-                    className={styles.featuresGrid}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={{ once: true, margin: "-100px" }}
-                    variants={staggerContainer}
-                >
-                    {featuresData.map((feature) => (
-                        <motion.div
-                            key={feature.id}
-                            className={styles.featureCard}
-                            variants={fadeInUp}
-                            whileHover={{ y: -5, transition: { duration: 0.3 } }}
-                        >
-                            <div className={styles.featureImageWrapper}>
-                                <Image src={feature.image} alt={feature.title} fill className={styles.featureImage} />
-                            </div>
-                            <h3 className={styles.featureTitle}>{feature.title}</h3>
-                            <p className={styles.featureDesc}>{feature.description}</p>
-                        </motion.div>
-                    ))}
-                </motion.div>
-            </section>
-
-            {/* Why Choose Us Section */}
-            <section className={styles.section}>
-                <motion.div
-                    className={styles.container}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={{ once: true, margin: "-100px" }}
-                    variants={staggerContainer}
-                >
-                    <motion.div className={styles.imageBlock} variants={slideInLeft}>
-                        <Image src="/images/hero-2.png" alt="Why Choose Us" width={500} height={350} className={styles.image} />
-                    </motion.div>
-                    <motion.div className={styles.textBlock} variants={slideInRight}>
-                        <h2 className={styles.sectionTitle}>Why Choose Us</h2>
-                        <p className={styles.text}>
-                            At Antalya Restaurant, we don't just serve food – we create experiences. Our commitment to authenticity means every spice, every ingredient, and every cooking method stays true to Turkish culinary traditions.
-                        </p>
-                        <p className={styles.text}>
-                            From our charcoal-grilled kebabs to our handmade baklava, we take pride in delivering dishes that transport you straight to the streets of Istanbul and the coasts of Antalya.
-                        </p>
-                    </motion.div>
-                </motion.div>
-            </section>
-
-            {/* Testimonials Section - Auto Slider */}
-            <section className={`${styles.section} ${styles.testimonialsSection}`}>
-                <motion.h2
-                    className={styles.sectionTitleCenter}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={{ once: true }}
-                    variants={fadeInUp}
-                >
-                    What Our Guests Say
-                </motion.h2>
-                <motion.div
-                    className={styles.testimonialSlider}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={{ once: true }}
-                    variants={fadeIn}
-                >
-                    <button className={styles.sliderBtn} onClick={prevTestimonial}>‹</button>
-
-                    <AnimatePresence mode="wait">
-                        <motion.div
-                            key={currentTestimonial}
-                            className={styles.testimonialCard}
-                            initial={{ opacity: 0, x: 50 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            exit={{ opacity: 0, x: -50 }}
-                            transition={{ duration: 0.5 }}
-                        >
-                            <p className={styles.testimonialText}>"{testimonialData[currentTestimonial].text}"</p>
-                            <div className={styles.testimonialAuthor}>
-                                <div className={styles.authorImageWrapper}>
-                                    <Image
-                                        src={testimonialData[currentTestimonial].image}
-                                        alt={testimonialData[currentTestimonial].name}
-                                        fill
-                                        className={styles.authorImage}
-                                    />
-                                </div>
-                                <div className={styles.authorInfo}>
-                                    <p className={styles.authorName}>{testimonialData[currentTestimonial].name}</p>
-                                    <p className={styles.authorRole}>{testimonialData[currentTestimonial].role}</p>
-                                </div>
-                            </div>
-                        </motion.div>
-                    </AnimatePresence>
-
-                    <button className={styles.sliderBtn} onClick={nextTestimonial}>›</button>
-                </motion.div>
-
-                {/* Slider dots */}
-                <div className={styles.sliderDots}>
-                    {testimonialData.map((_, index) => (
-                        <button
-                            key={index}
-                            className={`${styles.dot} ${index === currentTestimonial ? styles.activeDot : ''}`}
-                            onClick={() => setCurrentTestimonial(index)}
-                        />
-                    ))}
-                </div>
-            </section>
-
-            {/* FAQ Section - Image Left, FAQ Right */}
-            <section className={styles.faqSection}>
-                <motion.div
-                    className={styles.faqContainer}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={{ once: true, margin: "-100px" }}
-                    variants={staggerContainer}
-                >
-                    <motion.div className={styles.faqImageBlock} variants={slideInLeft}>
-                        <Image
-                            src="/images/restaurant-interior.png"
-                            alt="Frequently Asked Questions"
-                            width={600}
-                            height={700}
-                            className={styles.faqImage}
-                        />
-                    </motion.div>
-                    <motion.div className={styles.faqContentBlock} variants={slideInRight}>
-                        <h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
-                        <p className={styles.faqSubtitle}>
-                            Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
-                        </p>
-                        <div className={styles.faqAccordion}>
-                            {aboutFaqData.map((faq, index) => (
-                                <FaqItem key={index} question={faq.q} answer={faq.a} />
-                            ))}
-                        </div>
-                    </motion.div>
-                </motion.div>
-            </section>
-
-            {/* Call to Action */}
-            <motion.section
-                className={styles.ctaSection}
-                style={{ backgroundImage: `url(${ctaData.backgroundImage})` }}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true }}
-                variants={fadeIn}
-            >
-                <div className={styles.ctaOverlay}>
-                    <motion.h2
-                        className={styles.ctaTitle}
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ duration: 0.6, delay: 0.2 }}
-                    >
-                        {ctaData.title}
-                    </motion.h2>
-                    <motion.p
-                        className={styles.ctaSubtitle}
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ duration: 0.6, delay: 0.4 }}
-                    >
-                        {ctaData.subtitle}
-                    </motion.p>
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ duration: 0.6, delay: 0.6 }}
-                    >
-                        <Link href={ctaData.buttonLink} className={styles.ctaButton}>
-                            {ctaData.buttonText}
-                        </Link>
-                    </motion.div>
-                </div>
-            </motion.section>
-
-            <Footer />
-        </main>
-    );
-}
-
-// FAQ Item Component
-function FaqItem({ question, answer }: { question: string; answer: string }) {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <div className={styles.faqItem}>
-            <button
-                className={`${styles.faqQuestion} ${isOpen ? styles.faqQuestionActive : ''}`}
-                onClick={() => setIsOpen(!isOpen)}
-            >
-                <span>{question}</span>
-                <span className={styles.faqIcon}>{isOpen ? '−' : '+'}</span>
-            </button>
-            {isOpen && (
-                <div className={styles.faqAnswer}>
-                    <p>{answer}</p>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css
index 458ece5..6ac1516 100644
--- a/src/app/blog/blog.module.css
+++ b/src/app/blog/blog.module.css
@@ -20,7 +20,7 @@
 
 .heroTitle {
     font-family: var(--font-playfair);
-    font-size: 4rem;
+    font-size: var(--hero-title-size);
     color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
@@ -28,7 +28,7 @@
 }
 
 .breadcrumb {
-    font-size: 1.1rem;
+    font-size: var(--body-size);
     color: #c49c5c;
     font-family: var(--font-lato);
 }
@@ -51,7 +51,7 @@
 }
 
 .smallHeading {
-    font-size: 0.9rem;
+    font-size: var(--small-text-size);
     color: #c49c5c;
     font-family: var(--font-lato);
     font-weight: 600;
@@ -61,7 +61,7 @@
 
 .mainHeading {
     font-family: var(--font-playfair);
-    font-size: 2.5rem;
+    font-size: var(--main-heading-size);
     color: #5d4037;
     line-height: 1.3;
     font-weight: 700;
@@ -69,7 +69,7 @@
 }
 
 .description {
-    font-size: 1rem;
+    font-size: var(--body-size);
     color: #c49c5c;
     line-height: 1.8;
     font-family: var(--font-lato);
@@ -118,7 +118,7 @@
 
 .blogTitle {
     font-family: var(--font-playfair);
-    font-size: 1.6rem;
+    font-size: var(--subheading-size);
     margin-bottom: 0.5rem;
 }
 
@@ -132,14 +132,14 @@
 }
 
 .date {
-    font-size: 0.9rem;
+    font-size: var(--small-text-size);
     margin-bottom: 1rem;
     font-family: var(--font-lato);
     font-weight: 600;
 }
 
 .excerpt {
-    font-size: 1rem;
+    font-size: var(--body-size);
     line-height: 1.6;
     margin-bottom: 1.5rem;
     flex-grow: 1;
@@ -156,7 +156,7 @@
     align-self: flex-start;
     font-family: var(--font-lato);
     text-transform: uppercase;
-    font-size: 0.85rem;
+    font-size: var(--small-text-size);
     font-weight: 600;
 }
 
@@ -166,15 +166,11 @@
 }
 
 @media (max-width: 768px) {
-    .heroTitle {
-        font-size: 3rem;
-    }
-
-    .mainHeading {
-        font-size: 2rem;
+    .hero {
+        padding: 6rem 1rem 4rem;
     }
 
     .blogSection {
-        padding: 60px 10px;
+        padding: 20px 10px 60px;
     }
 }
\ No newline at end of file
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 143c69c..834211a 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -65,8 +65,12 @@ export default function BlogPage() {
             </motion.section>
 
             <section className={styles.sectionHeading}>
-                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
-                <h2 className={styles.mainHeading}>Stories From Our Kitchen, Turkish Culture, And Culinary Traditions</h2>
+                <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
+                <h2 className={styles.mainHeading}>Stories From Our Kitchen, And Traditions</h2>
                 <p className={styles.description}>
                     Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
                 </p>
diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css
index e61c15b..fc30665 100644
--- a/src/app/contact/contact.module.css
+++ b/src/app/contact/contact.module.css
@@ -19,7 +19,7 @@
 
 .heroTitle {
     font-family: var(--font-playfair);
-    font-size: 4rem;
+    font-size: var(--hero-title-size);
     color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
@@ -27,7 +27,7 @@
 }
 
 .breadcrumb {
-    font-size: 1.1rem;
+    font-size: var(--body-size);
     color: #c49c5c;
     font-family: var(--font-lato);
 }
@@ -44,11 +44,19 @@
 .contactSection {
     padding: 80px 10px;
     background-color: #F5E6D3;
-    /* background-image: url('/images/section-bg.jpg'); */
     background-size: cover;
     background-position: center;
 }
 
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
 .container {
     max-width: 1400px;
     margin: 0 auto;
@@ -61,12 +69,12 @@
 .formBlock {
     background-color: #F5E6D3;
     padding: 2.5rem;
-    border: 2px solid #b07c4b
+    border: 2px solid #b07c4b;
 }
 
 .title {
     font-family: var(--font-cinzel), serif;
-    font-size: 2.5rem;
+    font-size: var(--main-heading-size);
     color: #5d4037;
     margin-bottom: 1rem;
     font-weight: 600;
@@ -76,8 +84,7 @@
 }
 
 .subtitle {
-    font-size: 1rem;
-    /* color: #5d4037; */
+    font-size: var(--body-size);
     line-height: 1.6;
     margin-bottom: 2rem;
     font-family: var(--font-lato);
@@ -104,7 +111,7 @@
 .formLabel {
     font-family: var(--font-lato);
     color: #c49c5c;
-    font-size: 0.95rem;
+    font-size: var(--small-text-size);
     font-weight: 600;
 }
 
@@ -115,7 +122,7 @@
     padding: 0.9rem;
     color: #c49c5c;
     font-family: var(--font-lato);
-    font-size: 0.95rem;
+    font-size: var(--small-text-size);
     transition: border-color 0.3s;
     border-radius: 4px;
 }
@@ -137,7 +144,7 @@
 }
 
 .charCount {
-    font-size: 0.85rem;
+    font-size: var(--small-text-size);
     color: #836839;
     text-align: right;
     font-family: var(--font-lato);
@@ -148,7 +155,7 @@
     border: none;
     color: #fff;
     padding: 15px 40px;
-    font-size: 1rem;
+    font-size: var(--body-size);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s;
@@ -165,14 +172,13 @@
     box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
 }
 
-
 /* Alert Messages */
 .alert {
     padding: 1rem 1.5rem;
     border-radius: 8px;
     margin-bottom: 1.5rem;
     font-family: var(--font-lato);
-    font-size: 0.95rem;
+    font-size: var(--small-text-size);
 }
 
 .alertSuccess {
@@ -189,7 +195,7 @@
 
 .errorText {
     color: #dc3545;
-    font-size: 0.85rem;
+    font-size: var(--small-text-size);
     margin-top: 0.25rem;
     display: block;
     font-family: var(--font-lato);
@@ -210,7 +216,7 @@
     background: #F5E6D3;
     padding: 1.5rem;
     border: 2px solid #b07c4b;
-     display: flex;
+    display: flex;
     align-items: flex-start;
     gap: 1.5rem;
     transition: transform 0.3s;
@@ -243,14 +249,14 @@
 
 .locationTitle {
     font-family: var(--font-cinzel), serif;
-    font-size: 1.3rem;
+    font-size: var(--subheading-size);
     color: #5d4037;
     margin-bottom: 0.3rem;
     font-weight: 600;
 }
 
 .locationSubtitle {
-    font-size: 0.9rem;
+    font-size: var(--small-text-size);
     color: #836839;
     margin-bottom: 0.5rem;
     font-family: var(--font-lato);
@@ -258,21 +264,20 @@
 
 .locationAddress,
 .locationPhone {
-    font-size: 1rem;
-    /* color: #5d4037; */
+    font-size: var(--body-size);
     line-height: 1.6;
     font-family: var(--font-lato);
 }
 
 .locationPhone {
-    font-size: 1.2rem;
+    font-size: var(--subheading-size);
     font-weight: 600;
     color: #c49c5c;
 }
 
 .mapContainer {
     border: 2px solid #b07c4b;
-     overflow: hidden;
+    overflow: hidden;
     margin-top: 0.5rem;
 }
 
@@ -288,7 +293,7 @@
     gap: 5px;
 }
 
-
+/* Responsive Media Queries */
 @media (max-width: 1024px) {
     .container {
         grid-template-columns: repeat(2, 1fr);
@@ -301,18 +306,10 @@
 }
 
 @media (max-width: 768px) {
-    .heroTitle {
-        font-size: 3rem;
-    }
-
     .contactSection {
         padding: 60px 10px;
     }
 
-    .title {
-        font-size: 2rem;
-    }
-
     .formRow {
         grid-template-columns: 1fr;
     }
@@ -320,13 +317,12 @@
     .formBlock {
         padding: 2rem 1.5rem;
     }
-}
 
-@media (max-width: 768px) and (min-width: 200px) {
     .container {
         grid-template-columns: repeat(1, 1fr);
     }
-}/* Mobile responsive fixes for 320px */
+}
+
 @media (max-width: 480px) {
     .contactSection {
         padding: 40px 8px;
@@ -340,10 +336,6 @@
     .locationCard {
         padding: 1.5rem 1rem;
     }
-
-    .title {
-        font-size: 1.8rem;
-    }
 }
 
 @media (max-width: 350px) {
@@ -375,14 +367,6 @@
         overflow: hidden;
     }
 
-    .heroTitle {
-        font-size: 2.5rem;
-    }
-
-    .title {
-        font-size: 1.5rem;
-    }
-
     .formRow {
         gap: 0.8rem;
     }
@@ -390,7 +374,6 @@
     .input,
     .textarea {
         padding: 0.7rem;
-        font-size: 0.9rem;
         width: 100%;
         box-sizing: border-box;
     }
@@ -409,7 +392,8 @@
         height: 20px;
     }
 }
-/* Critical 320px fix - ensure all boxes include padding and border in width */
+
+/* Critical 320px fix */
 @media (max-width: 320px) {
     .contactSection {
         padding: 30px 8px !important;
@@ -425,22 +409,13 @@
 
     .formBlock,
     .locationCard {
-        padding: 2px;
+        padding: 12px;
         border: 2px solid #b07c4b;
         box-sizing: border-box !important;
         width: 100%;
         max-width: 100%;
     }
 
-    .title {
-        font-size: 1.4rem !important;
-        word-wrap: break-word;
-    }
-
-    .subtitle {
-        font-size: 0.9rem;
-    }
-
     .formRow {
         gap: 0.6rem !important;
     }
@@ -454,26 +429,10 @@
         max-width: 100% !important;
     }
 
-    .input,
-    .textarea {
-        padding: 0.6rem !important;
-        font-size: 0.85rem !important;
-    }
-
     .locationCard {
         gap: 0.8rem !important;
     }
 
-    .locationTitle {
-        font-size: 1.1rem;
-    }
-
-    .locationSubtitle,
-    .locationAddress,
-    .locationPhone {
-        font-size: 0.85rem;
-    }
-
     .iconWrapper {
         width: 35px !important;
         height: 35px !important;
@@ -490,17 +449,4 @@
         transform-origin: 0 0 !important;
         margin-bottom: -12px !important;
     }
-
-    .submitButton {
-        padding: 12px 30px !important;
-        font-size: 0.9rem !important;
-    }
-
-    .heroTitle {
-        font-size: 2.2rem !important;
-    }
-
-    .breadcrumb {
-        font-size: 0.95rem;
-    }
-}
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 66f0d7e..72b4436 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -5,6 +5,7 @@ import ReCAPTCHA from "react-google-recaptcha";
 import axios from "axios";
 import Navbar from "@/components/Navbar/Navbar";
 import Footer from "@/components/Footer/Footer";
+import Image from "next/image";
 import Link from "next/link";
 import styles from "./contact.module.css";
 import { motion } from "framer-motion";
@@ -167,7 +168,13 @@ export default function ContactPage() {
                         viewport={{ once: true }}
                         transition={{ duration: 0.8 }}
                     >
+                        <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
+                            <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                            <span>ANTALYA</span>
+                            <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                        </div>
                         <h2 className={styles.title}>Book a Table</h2>
+                        
                         <p className={styles.subtitle}>
                             Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine.
                         </p>
@@ -319,19 +326,19 @@ export default function ContactPage() {
                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                 </svg>
                             </div>
-                       <div className={styles.locationInfo}>
-    <h3 className={styles.locationTitle}>Call Us</h3>
+                            <div className={styles.locationInfo}>
+                                <h3 className={styles.locationTitle}>Call Us</h3>
 
-    <div className={styles.phoneFlex}>
-        <a href="tel:5195816363" className={styles.locationSubtitle}>
-            Kitchener : 519-581-6363
-        </a>
+                                <div className={styles.phoneFlex}>
+                                    <a href="tel:5195816363" className={styles.locationSubtitle}>
+                                        Kitchener : 519-581-6363
+                                    </a>
 
-        <a href="tel:2893139838" className={styles.locationSubtitle}>
-            Burlington : 289-313-9838
-        </a>
-    </div>
-</div>
+                                    <a href="tel:2893139838" className={styles.locationSubtitle}>
+                                        Burlington : 289-313-9838
+                                    </a>
+                                </div>
+                            </div>
 
 
                         </div>
diff --git a/src/app/gallery/gallery.module.css b/src/app/gallery/gallery.module.css
index 3261ff5..541eecd 100644
--- a/src/app/gallery/gallery.module.css
+++ b/src/app/gallery/gallery.module.css
@@ -20,7 +20,7 @@
 
 .heroTitle {
     font-family: var(--font-playfair);
-    font-size: 4rem;
+    font-size: var(--hero-title-size);
     color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
@@ -28,7 +28,7 @@
 }
 
 .breadcrumb {
-    font-size: 1.1rem;
+    font-size: var(--body-size);
     color: #c49c5c;
     font-family: var(--font-lato);
 }
@@ -51,7 +51,7 @@
 }
 
 .smallHeading {
-    font-size: 0.9rem;
+    font-size: var(--small-text-size);
     color: #c49c5c;
     font-family: var(--font-lato);
     font-weight: 600;
@@ -61,7 +61,7 @@
 
 .mainHeading {
     font-family: var(--font-playfair);
-    font-size: 2.5rem;
+    font-size: var(--main-heading-size);
     color: #5d4037;
     line-height: 1.3;
     font-weight: 700;
@@ -69,7 +69,7 @@
 }
 
 .description {
-    font-size: 1rem;
+    font-size: var(--body-size);
     color: #c49c5c;
     line-height: 1.8;
     font-family: var(--font-lato);
@@ -96,7 +96,7 @@
     border: 2px solid #b07c4b;
     color: #c49c5c;
     padding: 12px 30px;
-    font-size: 1rem;
+    font-size: var(--body-size);
     cursor: pointer;
     transition: all 0.3s ease;
     font-family: var(--font-lato);
@@ -154,7 +154,7 @@
 
 .viewText {
     color: #c49c5c;
-    font-size: 1.2rem;
+    font-size: var(--body-size);
     border: 2px solid #b07c4b;
     padding: 0.5rem 1.5rem;
     font-family: var(--font-lato);
@@ -199,7 +199,7 @@
     background: none;
     border: none;
     color: #c49c5c;
-    font-size: 2.5rem;
+    font-size: calc(var(--hero-title-size) * 0.7);
     cursor: pointer;
     transition: color 0.3s;
 }
@@ -215,7 +215,7 @@
     background: rgba(197, 160, 89, 0.2);
     border: 2px solid #b07c4b;
     color: #c49c5c;
-    font-size: 2rem;
+    font-size: calc(var(--main-heading-size) * 0.9);
     padding: 1rem;
     cursor: pointer;
     z-index: 10;
@@ -236,12 +236,8 @@
 }
 
 @media (max-width: 768px) {
-    .heroTitle {
-        font-size: 3rem;
-    }
-
-    .mainHeading {
-        font-size: 2rem;
+    .hero {
+        padding: 6rem 1rem 4rem;
     }
 
     .prevBtn {
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index da2daba..c913d6c 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -109,8 +109,12 @@ export default function GalleryPage() {
             </motion.section>
 
             <section className={styles.sectionHeading}>
-                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
-                <h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish Cuisine</h2>
+                <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
+                <h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish</h2>
                 <p className={styles.description}>
                     Explore our gallery showcasing the authentic flavors and elegant atmosphere of Antalya. From charcoal-grilled kebabs to handcrafted baklava, each image tells a story of culinary excellence and Turkish hospitality.
                 </p>
diff --git a/src/app/globals.css b/src/app/globals.css
index 5e9eeb2..e0cd8e1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,7 +10,6 @@
 
   /* Legacy color support (mapped to new colors) */
   --color-gold: #d28839;
-  /* Updated to button color */
 
   /* Font Family Variables */
   --font-menu: 'Canva Sans', sans-serif;
@@ -21,6 +20,14 @@
   --font-playfair: 'Playfair Display', serif;
   --font-lato: 'Canva Sans', sans;
   --font-cormorant: 'Canva Sans', sans-serif;
+
+  /* Responsive Font Size Variables - Desktop Optimized */
+  --hero-title-size: 64px;
+  --section-heading-size: 42px;
+  --main-heading-size: 36px;
+  --subheading-size: 22px;
+  --body-size: 18px;
+  --small-text-size: 16px;
 }
 
 * {
@@ -37,7 +44,6 @@ body {
   color: var(--color-text-light);
   font-family: var(--font-paragraph);
   font-weight: 300;
-  /* Ensure default font is applied */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -73,4 +79,168 @@ button {
 /* Global Border Utility */
 .border-standard {
   border-color: var(--color-border);
+}
+
+/* ===== RESPONSIVE TYPOGRAPHY ===== */
+
+/* ===== DESKTOP SIZES (1200px and above) ===== */
+
+/* Extra Large Desktop: 1920px+ */
+@media (min-width: 1920px) {
+  :root {
+    --hero-title-size: 68px;
+    --section-heading-size: 44px;
+    --main-heading-size: 38px;
+    --subheading-size: 24px;
+    --body-size: 19px;
+    --small-text-size: 17px;
+  }
+}
+
+/* Large Desktop: 1600px */
+@media (max-width: 1919px) and (min-width: 1600px) {
+  :root {
+    --hero-title-size: 64px;
+    --section-heading-size: 42px;
+    --main-heading-size: 36px;
+    --subheading-size: 22px;
+    --body-size: 18px;
+    --small-text-size: 16px;
+  }
+}
+
+/* Desktop: 1540px */
+@media (max-width: 1599px) and (min-width: 1540px) {
+  :root {
+    --hero-title-size: 62px;
+    --section-heading-size: 40px;
+    --main-heading-size: 35px;
+    --subheading-size: 22px;
+    --body-size: 18px;
+    --small-text-size: 16px;
+  }
+}
+
+/* Desktop: 1440px */
+@media (max-width: 1539px) and (min-width: 1440px) {
+  :root {
+    --hero-title-size: 60px;
+    --section-heading-size: 39px;
+    --main-heading-size: 34px;
+    --subheading-size: 21px;
+    --body-size: 18px;
+    --small-text-size: 16px;
+  }
+}
+
+/* Desktop: 1360px */
+@media (max-width: 1439px) and (min-width: 1360px) {
+  :root {
+    --hero-title-size: 58px;
+    --section-heading-size: 38px;
+    --main-heading-size: 33px;
+    --subheading-size: 21px;
+    --body-size: 17px;
+    --small-text-size: 15px;
+  }
+}
+
+/* Desktop/Laptop: 1200px */
+@media (max-width: 1359px) and (min-width: 1200px) {
+  :root {
+    --hero-title-size: 56px;
+    --section-heading-size: 36px;
+    --main-heading-size: 32px;
+    --subheading-size: 20px;
+    --body-size: 17px;
+    --small-text-size: 15px;
+  }
+}
+
+/* ===== TABLET SIZES (768px - 1199px) ===== */
+
+/* Laptop: 1024px */
+@media (max-width: 1199px) and (min-width: 1024px) {
+  :root {
+    --hero-title-size: 48px;
+    --section-heading-size: 32px;
+    --main-heading-size: 28px;
+    --subheading-size: 19px;
+    --body-size: 16px;
+    --small-text-size: 15px;
+  }
+}
+
+/* Tablet Large: 992px */
+@media (max-width: 1023px) and (min-width: 992px) {
+  :root {
+    --hero-title-size: 46px;
+    --section-heading-size: 30px;
+    --main-heading-size: 26px;
+    --subheading-size: 18px;
+    --body-size: 16px;
+    --small-text-size: 15px;
+  }
+}
+
+/* Tablet: 768px */
+@media (max-width: 991px) and (min-width: 768px) {
+  :root {
+    --hero-title-size: 42px;
+    --section-heading-size: 28px;
+    --main-heading-size: 24px;
+    --subheading-size: 17px;
+    --body-size: 15px;
+    --small-text-size: 14px;
+  }
+}
+
+/* ===== MOBILE SIZES (below 768px) ===== */
+
+/* Mobile Large: 500px */
+@media (max-width: 767px) and (min-width: 500px) {
+  :root {
+    --hero-title-size: 36px;
+    --section-heading-size: 26px;
+    --main-heading-size: 22px;
+    --subheading-size: 16px;
+    --body-size: 15px;
+    --small-text-size: 14px;
+  }
+}
+
+/* Mobile: 475px */
+@media (max-width: 499px) and (min-width: 475px) {
+  :root {
+    --hero-title-size: 34px;
+    --section-heading-size: 24px;
+    --main-heading-size: 21px;
+    --subheading-size: 16px;
+    --body-size: 15px;
+    --small-text-size: 14px;
+  }
+}
+
+/* Mobile: 424px */
+@media (max-width: 474px) and (min-width: 424px) {
+  :root {
+    --hero-title-size: 32px;
+    --section-heading-size: 23px;
+    --main-heading-size: 20px;
+    --subheading-size: 15px;
+    --body-size: 14px;
+    --small-text-size: 13px;
+  }
+}
+
+/* Mobile Small: 320px */
+@media (max-width: 423px) {
+  :root {
+    --hero-title-size: 28px;
+    --section-heading-size: 21px;
+    --main-heading-size: 20px;
+    --subheading-size: 15px;
+    --body-size: 14px;
+    --small-text-size: 13px;
+  }
 }
\ No newline at end of file
diff --git a/src/app/menu/menu.module.css b/src/app/menu/menu.module.css
index 12b768f..d111f13 100644
--- a/src/app/menu/menu.module.css
+++ b/src/app/menu/menu.module.css
@@ -20,7 +20,7 @@
 
 .heroTitle {
     font-family: var(--font-playfair);
-    font-size: 4rem;
+    font-size: var(--hero-title-size);
     color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
@@ -28,7 +28,7 @@
 }
 
 .breadcrumb {
-    font-size: 1.1rem;
+    font-size: var(--body-size);
     color: #c49c5c;
     font-family: var(--font-lato);
 }
@@ -51,7 +51,7 @@
 }
 
 .smallHeading {
-    font-size: 0.9rem;
+    font-size: var(--small-text-size);
     color: #c49c5c;
     font-family: var(--font-lato);
     font-weight: 600;
@@ -61,7 +61,7 @@
 
 .mainHeading {
     font-family: var(--font-playfair);
-    font-size: 2.5rem;
+    font-size: var(--main-heading-size);
     color: #5d4037;
     line-height: 1.3;
     font-weight: 700;
@@ -69,7 +69,7 @@
 }
 
 .description {
-    font-size: 1rem;
+    font-size: var(--body-size);
     color: #c49c5c;
     line-height: 1.8;
     font-family: var(--font-lato);
@@ -97,7 +97,7 @@
     border: 2px solid #b07c4b;
     color: #c49c5c;
     padding: 12px 30px;
-    font-size: 1rem;
+    font-size: var(--body-size);
     cursor: pointer;
     transition: all 0.3s ease;
     font-family: var(--font-lato);
@@ -157,11 +157,12 @@
     left: -10px;
     right: -10px;
     bottom: -10px;
-    border: 2px dashed #ff6b6b;
+    border: 4px dotted #c49c5c;
     border-radius: 50%;
     animation: spin 10s linear infinite;
 }
 
+
 @keyframes spin {
     from {
         transform: rotate(0deg);
@@ -203,23 +204,23 @@
 
 .dishName {
     font-family: var(--font-playfair);
-    font-size: 1.25rem;
-    color: #333;
+    font-size: var(--subheading-size);
+    color: #5d4037;
     font-weight: 700;
     margin-bottom: 0.5rem;
 }
 
 .price {
     display: block;
-    font-size: 1.1rem;
-    color: #ffb300;
+    font-size: var(--body-size);
+    color: #c49c5c;
     font-weight: 700;
     font-family: var(--font-lato);
     margin-bottom: 0.5rem;
 }
 
-.description {
-    font-size: 0.9rem;
+.cardContent .description {
+    font-size: var(--small-text-size);
     color: #c49c5c;
     line-height: 1.6;
     font-family: var(--font-lato);
@@ -237,21 +238,12 @@
         padding: 6rem 1rem 4rem;
     }
 
-    .heroTitle {
-        font-size: 2.5rem;
-    }
-
-    .mainHeading {
-        font-size: 2rem;
-    }
-
     .tabs {
         gap: 0.5rem;
     }
 
     .tab {
         padding: 10px 15px;
-        font-size: 0.85rem;
     }
 
     .menuCard {
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 856d2a4..558c12e 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -82,8 +82,12 @@ export default function MenuPage() {
             </motion.section>
 
             <section className={styles.sectionHeading}>
-                <p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
-                <h2 className={styles.mainHeading}>Delicious Turkish Dishes, Including Kebabs, Mezze, And More</h2>
+                <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
+                <h2 className={styles.mainHeading}>Delicious Turkish, Mezze, And More</h2>
                 <p className={styles.description}>
                     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>
diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
index 3d505ed..5170fdd 100644
--- a/src/components/About/About.tsx
+++ b/src/components/About/About.tsx
@@ -49,7 +49,7 @@ export default function About() {
                         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.
                     </p>
 
-                    <Link href="/about" className={styles.button}>
+                    <Link href="/about-us" className={styles.button}>
                         Learn More
                     </Link>
                 </motion.div>
diff --git a/src/components/Blogs/Blogs.module.css b/src/components/Blogs/Blogs.module.css
index e6f9c4e..7bcf802 100644
--- a/src/components/Blogs/Blogs.module.css
+++ b/src/components/Blogs/Blogs.module.css
@@ -67,6 +67,15 @@
     line-height: 1.3;
 }
 
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
 .excerpt {
     font-family: var(--font-cinzel), serif;
     font-size: 0.95rem;
diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx
index 95e11b0..41bf10d 100644
--- a/src/components/Blogs/Blogs.tsx
+++ b/src/components/Blogs/Blogs.tsx
@@ -40,6 +40,11 @@ export default function Blogs() {
 
     return (
         <section className={styles.section} id="blog">
+            <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
             <h2 className={styles.title}>OUR BLOGS</h2>
 
             <div className={styles.sliderContainer}>
diff --git a/src/components/BookTable/BookTable.module.css b/src/components/BookTable/BookTable.module.css
index e2fccaf..8a856de 100644
--- a/src/components/BookTable/BookTable.module.css
+++ b/src/components/BookTable/BookTable.module.css
@@ -11,6 +11,15 @@
     display: none;
 }
 
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
 .formContainer {
     flex: 1;
     display: flex;
@@ -45,7 +54,7 @@
 
 .title {
     font-family: var(--font-playfair);
-    color: var(--color-gold);
+    color: #c49c5c;
     font-size: 3rem;
     text-align: center;
     margin-bottom: 3rem;
@@ -68,7 +77,7 @@
 
 .label {
     font-family: var(--font-playfair);
-    color: var(--color-gold);
+    color: #c49c5c;
     font-size: 1.1rem;
 }
 
@@ -98,7 +107,7 @@
 
 .submitButton {
     background: transparent;
-    border: 1px solid var(--color-gold);
+    border: 1px solid #c49c5c;
     color: var(--color-text-light);
     padding: 0.8rem 2rem;
     font-family: var(--font-lato);
@@ -111,8 +120,8 @@
 }
 
 .submitButton:hover {
-    background-color: var(--color-gold);
-    color: var(--color-dark);
+    background-color: #c49c5c;
+    color: #fff;
 }
 
 .successMessage {
@@ -154,7 +163,7 @@
 
 /* Character count */
 .charCount {
-    color: var(--color-gold);
+    color: #c49c5c;
     font-size: 0.875rem;
     margin-top: 0.25rem;
     display: block;
diff --git a/src/components/BookTable/BookTable.tsx b/src/components/BookTable/BookTable.tsx
index a36ac21..3db3bb8 100644
--- a/src/components/BookTable/BookTable.tsx
+++ b/src/components/BookTable/BookTable.tsx
@@ -131,6 +131,11 @@ export default function BookTable() {
 
             <div className={styles.formContainer}>
                 <div className={styles.content}>
+                    <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                        <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                        <span>ANTALYA</span>
+                        <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                    </div>
                     <h2 className={styles.title}>Book A Table</h2>
 
                     {alert.show && (
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index 63091b9..0000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import styles from '@/app/about/about.module.css'; // reuse styles or define minimal inline
-
-export default function Footer() {
-    return (
-        <footer className={styles.footer || ''} style={{
-            backgroundColor: 'var(--color-dark)',
-            color: '#fff',
-            textAlign: 'center',
-            padding: '2rem 0',
-            marginTop: '4rem',
-        }}>
-            <p>© 2025 Antalya Restaurant. All rights reserved.</p>
-        </footer>
-    );
-}
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index 8452c1c..874146e 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -144,7 +144,7 @@
 .contactRow {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 5px;
     margin-bottom: 0.8rem;
 }
 
@@ -154,6 +154,15 @@
     transition: color 0.3s;
 }
 
+.iconImage {
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
+    object-fit: contain;
+    display: inline-block;
+}
+
+
 .contactRow a:hover {
     color: #fff;
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index f22c1b5..0fed244 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -90,17 +90,29 @@ export default function Footer() {
                             </p>
 
                             <div className={styles.contactRow}>
-                                <span className={styles.phoneIcon}>📞</span>
+                                <img
+                                    src="/images/phone-call.png"
+                                    alt="Phone"
+                                    className={styles.iconImage}
+                                />
                                 <a href="tel:5195816363">Kitchener: 519-581-6363</a>
                             </div>
 
                             <div className={styles.contactRow}>
-                                <span className={styles.phoneIcon}>📞</span>
+                                <img
+                                    src="/images/phone-call.png"
+                                    alt="Phone"
+                                    className={styles.iconImage}
+                                />
                                 <a href="tel:2893139838">Burlington: 289-313-9838</a>
                             </div>
 
                             <div className={styles.contactRow}>
-                                <span className={styles.emailIcon}>✉️</span>
+                                <img
+                                    src="/images/email.png"
+                                    alt="Email"
+                                    className={styles.iconImage}
+                                />
                                 <a href="mailto:hello@antalyarestaurant.ca">hello@antalyarestaurant.ca</a>
                             </div>
 
@@ -111,6 +123,7 @@ export default function Footer() {
                             </p>
                         </div>
                     </div>
+
                 </div>
 
                 <div className={styles.copyright}>
diff --git a/src/components/Gallery/Gallery.module.css b/src/components/Gallery/Gallery.module.css
index 851c874..747fa03 100644
--- a/src/components/Gallery/Gallery.module.css
+++ b/src/components/Gallery/Gallery.module.css
@@ -17,6 +17,15 @@
     line-height: 1.2;
 }
 
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index 4d9bd82..70d7d6b 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -39,6 +39,11 @@ export default function Gallery() {
 
     return (
         <section className={styles.section}>
+              <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
             <h2 className={styles.title}>Gallery</h2>
             <div className={styles.grid}>
                 {images.map((src, index) => (
diff --git a/src/components/Menu/Menu.module.css b/src/components/Menu/Menu.module.css
index 692da9f..7e7870d 100644
--- a/src/components/Menu/Menu.module.css
+++ b/src/components/Menu/Menu.module.css
@@ -177,6 +177,15 @@
     border-top: none;
 }
 
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
 .cardContent {
     flex: 1;
     display: flex;
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 6edcd66..20f85bf 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -54,6 +54,11 @@ export default function Menu() {
 
     return (
         <section className={styles.menuSection}>
+              <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
             {/* Section Title */}
             <motion.h2
                 className={styles.title}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
deleted file mode 100644
index 1244963..0000000
--- a/src/components/Navbar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/app/about/about.module.css'; // reuse existing styles if needed
-
-export default function Navbar() {
-    return (
-        <nav className={styles.navbar || ''} style={{
-            backgroundColor: 'var(--color-dark)',
-            padding: '1rem 2rem',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            color: '#fff',
-        }}>
-            <div style={{ fontFamily: 'var(--font-playfair)', fontSize: '1.5rem' }}>
-                Antalya Restaurant
-            </div>
-            <ul style={{ listStyle: 'none', display: 'flex', gap: '1.5rem', margin: 0 }}>
-                <li><Link href="/" style={{ color: '#fff', textDecoration: 'none' }}>Home</Link></li>
-                <li><Link href="/about" style={{ color: '#fff', textDecoration: 'none' }}>About</Link></li>
-                <li><Link href="/menu" style={{ color: '#fff', textDecoration: 'none' }}>Menu</Link></li>
-                <li><Link href="/contact" style={{ color: '#fff', textDecoration: 'none' }}>Contact</Link></li>
-            </ul>
-        </nav>
-    );
-}
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index e502427..0ada30a 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -7,7 +7,7 @@ import styles from './Navbar.module.css'
 
 const navLinks = [
     { name: 'Home', href: '/' },
-    { name: 'About', href: '/about' },
+    { name: 'About', href: '/about-us' },
     { name: 'Gallery', href: '/gallery' },
     { name: 'Menu', href: '/menu' },
     { name: 'Blog', href: '/blog' },
diff --git a/src/components/PopularDishes/PopularDishes.module.css b/src/components/PopularDishes/PopularDishes.module.css
index 3b12091..4b8a9b8 100644
--- a/src/components/PopularDishes/PopularDishes.module.css
+++ b/src/components/PopularDishes/PopularDishes.module.css
@@ -42,6 +42,16 @@
     transform: translateY(-10px);
 }
 
+
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
 .imageContainer {
     position: relative;
     width: 100%;
diff --git a/src/components/PopularDishes/PopularDishes.tsx b/src/components/PopularDishes/PopularDishes.tsx
index 5440564..c370a24 100644
--- a/src/components/PopularDishes/PopularDishes.tsx
+++ b/src/components/PopularDishes/PopularDishes.tsx
@@ -50,6 +50,11 @@ export default function PopularDishes() {
 
     return (
         <section className={styles.section} id="menu">
+            <motion.div className={styles.smallHeading}>
+                <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                <span>ANTALYA</span>
+                <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+            </motion.div>
             <motion.h2
                 className={styles.title}
                 initial={{ opacity: 0, y: 30 }}
diff --git a/src/components/Testimonials/Testimonials.module.css b/src/components/Testimonials/Testimonials.module.css
index 984dc7a..5c5f0b6 100644
--- a/src/components/Testimonials/Testimonials.module.css
+++ b/src/components/Testimonials/Testimonials.module.css
@@ -16,6 +16,15 @@
     justify-content: center;
 }
 
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
 .title {
     font-family: var(--font-cinzel), serif;
     /* Assuming Cinzel is available or similar serif */
diff --git a/src/components/Testimonials/Testimonials.tsx b/src/components/Testimonials/Testimonials.tsx
index 9898041..3f60b18 100644
--- a/src/components/Testimonials/Testimonials.tsx
+++ b/src/components/Testimonials/Testimonials.tsx
@@ -83,6 +83,11 @@ export default function Testimonials() {
 
     return (
         <section className={styles.section}>
+            <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
+                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
+                    <span>ANTALYA</span>
+                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
+                </div>
             <h2 className={styles.title}>TESTIMONIALS</h2>
 
             <div className={styles.sliderContainer}>