contact page mobile view overflow fixed

src/app/about-us/about.module.css

@@ -106,7 +106,7 @@
 .text {
   font-size: 1.1rem;
   line-height: 1.8;
-  color: #5d4037;
+  /* color: #5d4037; */
   margin-bottom: 1.5rem;
   opacity: 0.9;
   font-family: var(--font-lato);
@@ -186,7 +186,7 @@
 .featureDesc {
   font-family: var(--font-lato);
   font-size: 1rem;
-  color: #5d4037;
+  /* color: #5d4037; */
   line-height: 1.6;
 }
 
@@ -235,7 +235,7 @@
 .testimonialText {
   font-family: var(--font-lato);
   font-size: 1.3rem;
-  color: #5d4037;
+  /* color: #5d4037; */
   line-height: 1.8;
   font-style: italic;
   text-align: center;
@@ -278,7 +278,7 @@
 .authorRole {
   font-family: var(--font-lato);
   font-size: 0.95rem;
-  color: #836839;
+  /* color: #836839; */
 }
 
 .sliderDots {
@@ -485,7 +485,7 @@
 .faqSubtitle {
   font-family: var(--font-lato);
   font-size: 1.1rem;
-  color: #836839;
+  /* color: #836839; */
   line-height: 1.6;
   margin-bottom: 1rem;
 }
@@ -520,7 +520,7 @@
   font-family: var(--font-lato);
   font-size: 1.1rem;
   font-weight: 600;
-  color: #5d4037;
+  /* color: #5d4037; */
   text-align: left;
   transition: all 0.3s ease;
 }
@@ -557,7 +557,7 @@
 .faqAnswer p {
   font-family: var(--font-lato);
   font-size: 1rem;
-  color: #5d4037;
+  color: #c49c5c;
   line-height: 1.8;
   margin: 0;
 }

src/app/about/about.module.css

@@ -186,7 +186,7 @@
 .featureDesc {
   font-family: var(--font-lato);
   font-size: 1rem;
-  color: #5d4037;
+  /* color: #5d4037; */
   line-height: 1.6;
 }
 
@@ -235,7 +235,7 @@
 .testimonialText {
   font-family: var(--font-lato);
   font-size: 1.3rem;
-  color: #5d4037;
+  /* color: #5d4037; */
   line-height: 1.8;
   font-style: italic;
   text-align: center;
@@ -278,7 +278,7 @@
 .authorRole {
   font-family: var(--font-lato);
   font-size: 0.95rem;
-  color: #836839;
+  /* color: #836839; */
 }
 
 .sliderDots {
@@ -503,7 +503,7 @@
 .faqSubtitle {
   font-family: var(--font-lato);
   font-size: 1.1rem;
-  color: #836839;
+  /* color: #836839; */
   line-height: 1.6;
   margin-bottom: 1rem;
 }
@@ -538,7 +538,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;
 }
@@ -575,7 +575,7 @@
 .faqAnswer p {
   font-family: var(--font-lato);
   font-size: 1rem;
-  color: #5d4037;
+  /* color: #5d4037; */
   line-height: 1.8;
   margin: 0;
 }

src/app/blog/[id]/blogDetail.module.css

@@ -74,7 +74,7 @@
 
 .date,
 .comments {
-    color: #836839;
+    /* color: #836839; */
     font-size: 0.95rem;
 }
 
@@ -102,7 +102,7 @@
     font-family: var(--font-lato);
     font-size: 1.1rem;
     line-height: 1.8;
-    color: #5d4037;
+    /* color: #5d4037; */
 }
 
 .content h2 {
@@ -139,7 +139,7 @@
 
 .content li {
     margin-bottom: 0.8rem;
-    color: #5d4037;
+    color: #c49c5c;
 }
 
 .content strong {
@@ -201,7 +201,7 @@
     font-family: var(--font-playfair);
     font-size: 1.4rem;
     font-style: italic;
-    color: #5d4037;
+    /* color: #5d4037; */
     line-height: 1.8;
     margin: 0;
     position: relative;

src/app/blog/blog.module.css

@@ -98,7 +98,7 @@
 
 .date {
     font-size: 0.9rem;
-    color: #836839;
+    /* color: #836839; */
     margin-bottom: 1rem;
     font-family: var(--font-lato);
     font-weight: 600;
@@ -106,7 +106,7 @@
 
 .excerpt {
     font-size: 1rem;
-    color: #5d4037;
+    /* color: #5d4037; */
     line-height: 1.6;
     margin-bottom: 1.5rem;
     flex-grow: 1;

src/app/contact/contact.module.css

@@ -77,7 +77,7 @@
 
 .subtitle {
     font-size: 1rem;
-    color: #5d4037;
+    /* color: #5d4037; */
     line-height: 1.6;
     margin-bottom: 2rem;
     font-family: var(--font-lato);
@@ -259,7 +259,7 @@
 .locationAddress,
 .locationPhone {
     font-size: 1rem;
-    color: #5d4037;
+    /* color: #5d4037; */
     line-height: 1.6;
     font-family: var(--font-lato);
 }
@@ -319,4 +319,181 @@
     .container {
         grid-template-columns: repeat(1, 1fr);
     }
-}
+}/* Mobile responsive fixes for 320px */
+@media (max-width: 480px) {
+    .contactSection {
+        padding: 40px 8px;
+    }
+
+    .container {
+        gap: 2rem;
+    }
+
+    .formBlock,
+    .locationCard {
+        padding: 1.5rem 1rem;
+    }
+
+    .title {
+        font-size: 1.8rem;
+    }
+}
+
+@media (max-width: 350px) {
+    .main {
+        overflow-x: hidden;
+    }
+
+    .contactSection {
+        padding: 30px 5px;
+    }
+
+    .container {
+        gap: 1rem;
+        padding: 0;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .formBlock,
+    .locationCard {
+        padding: 1rem 0.6rem;
+        box-sizing: border-box;
+    }
+
+    .recaptchaWrapper {
+        transform: scale(0.85);
+        transform-origin: 0 0;
+        margin-bottom: -10px;
+        overflow: hidden;
+    }
+
+    .heroTitle {
+        font-size: 2.5rem;
+    }
+
+    .title {
+        font-size: 1.5rem;
+    }
+
+    .formRow {
+        gap: 0.8rem;
+    }
+
+    .input,
+    .textarea {
+        padding: 0.7rem;
+        font-size: 0.9rem;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .locationCard {
+        gap: 1rem;
+    }
+
+    .iconWrapper {
+        width: 40px;
+        height: 40px;
+    }
+
+    .icon {
+        width: 20px;
+        height: 20px;
+    }
+}
+/* Critical 320px fix - ensure all boxes include padding and border in width */
+@media (max-width: 320px) {
+    .contactSection {
+        padding: 30px 8px !important;
+    }
+
+    .container {
+        gap: 0.8rem;
+        padding: 0 !important;
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box !important;
+    }
+
+    .formBlock,
+    .locationCard {
+        padding: 2px;
+        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;
+    }
+
+    .input,
+    .textarea,
+    .formGroup,
+    .recaptchaWrapper {
+        box-sizing: border-box !important;
+        width: 100% !important;
+        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;
+        flex-shrink: 0;
+    }
+
+    .icon {
+        width: 18px !important;
+        height: 18px !important;
+    }
+
+    .recaptchaWrapper {
+        transform: scale(0.83) !important;
+        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;
+    }
+}

src/components/Blogs/Blogs.module.css

@@ -70,7 +70,7 @@
 .excerpt {
     font-family: var(--font-cinzel), serif;
     font-size: 0.95rem;
-    color: #5d4037;
+    /* color: #5d4037; */
     margin-bottom: 25px;
     line-height: 1.6;
     max-width: 90%;

src/components/FAQ/FAQ.module.css

@@ -84,7 +84,7 @@
 .faqContent {
     font-family: var(--font-lato);
     font-size: 1rem;
-    color: #5d4037;
+    color: #c49c5c;
     line-height: 1.8;
 }
 

src/components/Footer/Footer.module.css

@@ -232,6 +232,7 @@
         width: 100%;
         align-items: center;
         text-align: center;
+        padding: 10px;
     }
 
     .linkList {
@@ -241,4 +242,15 @@
     .contactRow {
         justify-content: center;
     }
+
+    .copyright {
+    text-align: center;
+    margin-top: 3rem;
+    padding-top: 1.5rem;
+    /* border-top: 1px solid rgba(197, 160, 89, 0.3); */
+    font-size: 0.9rem;
+    color: #c49c5c;
+    opacity: 0.8;
+    padding: 10px;
+}
 }

src/components/PopularDishes/PopularDishes.module.css

@@ -64,7 +64,7 @@
     font-family: var(--font-cinzel), serif;
     /* Using serif as per image look */
     font-size: 1rem;
-    color: #836839;
+    /* color: #836839; */
     margin-bottom: 30px;
     line-height: 1.6;
     max-width: 90%;