images updated

src/app/about/page.tsx

@@ -87,7 +87,7 @@ export default function AboutPage() {
         {/* ══════════════════════════════════════════
           SECTION 1 — Welcome & Features (Image match)
       ══════════════════════════════════════════ */}
-      <div className="relative w-full bg-[#fdfaf4] overflow-hidden pt-16 pb-24">
+        <div className="relative w-full bg-[#fdfaf4] overflow-hidden pt-24 pb-24">
           {/* Faint temple sketch background */}
           <div className="absolute inset-0 z-0 pointer-events-none select-none">
             <Image src="/images/story_bg.png" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
@@ -101,7 +101,7 @@ export default function AboutPage() {
               <AnimatedSection variant="fadeLeft" delay={0.1}>
                 <div className="w-full lg:w-[400px] select-text z-20 relative">
                   <div className="flex items-center gap-2 mb-2">
-                  <svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
+                    <svg className="w-8 h-8 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                       <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                     </svg>
                     <p className="font-sans text-[11px] tracking-[0.2em] text-[#bc9e65] uppercase font-bold">
@@ -193,7 +193,7 @@ export default function AboutPage() {
                     </AnimatedSection>
 
                     {/* Right Card — only at lg+ where two-column layout provides horizontal space */}
-                  <AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-10 -right-35 lg:-right-20 z-20 hidden md:block">
+                    <AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-25 -right-35 lg:-right-20 z-20 hidden md:block">
                       <div className="bg-[#fdfaf4] border border-[#bc9e65] rounded-3xl p-8 w-[260px] shadow-2xl relative">
                         <div className="absolute inset-1.5 border border-[#bc9e65]/30 rounded-[20px] pointer-events-none" />
 
@@ -214,15 +214,15 @@ export default function AboutPage() {
 
                           <ul className="w-full flex flex-col gap-4 text-left">
                             <li className="flex items-center gap-4">
-                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
+                              <svg className="w-8 h-8 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
                               <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every meal.</span>
                             </li>
                             <li className="flex items-center gap-4">
-                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
+                              <svg className="w-8 h-8 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                               <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every guest.</span>
                             </li>
                             <li className="flex items-center gap-4">
-                            <svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
+                              <svg className="w-8 h-8 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                               <span className="font-sans text-sm text-[#0a4a2b] font-medium">Every time.</span>
                             </li>
                           </ul>
@@ -480,17 +480,17 @@ export default function AboutPage() {
         {/* ══════════════════════════════════════════
           SECTION 3 — FAQ  (dark green & gold ornate split layout)
       ══════════════════════════════════════════ */}
-      <div className="relative w-full bg-[#04120a] overflow-hidden pt-10 pb-40">
+        <div className="relative w-full bg-[#04120a] overflow-hidden pt-24 pb-24">
 
           {/* Background texture for the whole section */}
-        <div className="absolute inset-0 pointer-events-none opacity-30">
-          <Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
+          <div className="absolute inset-0 pointer-events-none">
+            <Image src="/images/faq-bg.png" alt="" fill className="object-cover object-center" />
           </div>
 
           <div className="relative max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">
 
             {/* ── LEFT: Ornate dark green panel ── */}
-          <div className="relative flex-[1.2] lg:flex-none lg:w-[60%] bg-[#062013] z-20 p-6 sm:p-10 lg:p-16 flex flex-col justify-center">
+            <div className="relative flex-[1.2] lg:flex-none lg:w-[60%] z-20 flex flex-col justify-center">
 
               {/* The Inset Gold Ornate Border */}
               <div className="absolute inset-4 lg:inset-6 border-[1.5px] border-[#bc9e65] rounded-xl lg:rounded-tr-[100px] lg:rounded-br-[100px] pointer-events-none" />
@@ -641,21 +641,19 @@ export default function AboutPage() {
             </div>
 
             {/* ── RIGHT: photo full height ── */}
-          <div className="relative w-full lg:w-[40%] min-h-[400px] lg:min-h-0 z-0 bg-[#062013]">
+            {/* <div className="relative w-full lg:w-[40%] min-h-[400px] lg:min-h-0 z-0 bg-[#062013]">
               <Image
                 src="/images/my_dosa_place_interior.png"
                 alt="My Dosa Place interior"
                 fill
                 className="object-cover object-center"
               />
-            {/* Dark gradient overlay matching reference */}
               <div className="absolute inset-0 bg-gradient-to-l from-transparent via-[#062013]/20 to-[#062013] opacity-90" />
 
-            {/* Hanging lights accents in the photo side */}
               <div className="absolute top-10 right-10 flex items-center justify-center w-8 h-8 rounded-full border border-[#bc9e65] text-[#bc9e65]">
                 <div className="w-2 h-2 rounded-full bg-[#bc9e65]" />
               </div>
-          </div>
+            </div> */}
 
           </div>
 

src/app/blog/[slug]/page.tsx

@@ -20,10 +20,21 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
     notFound();
   }
 
-  // Split content into paragraphs for custom structural rendering
-  const paragraphs = post.content.split('\n\n').filter(p => p.trim() !== '');
-  const firstParagraph = paragraphs[0] || "";
-  const remainingParagraphs = paragraphs.slice(1) || [];
+  // Replace the 2-image grid in content with the actual small images for this post
+  let processedContent = post.content;
+  if (post.smallImages && post.smallImages.length >= 2) {
+    // Replace first and second <img src="..." in the grid div
+    let count = 0;
+    processedContent = processedContent.replace(
+      /<img src=\"([^\"]+)\"/g,
+      (_match: string, _src: string) => {
+        count++;
+        if (count === 1) return `<img src="${post.smallImages![0]}"`;
+        if (count === 2) return `<img src="${post.smallImages![1]}"`;
+        return _match;
+      }
+    );
+  }
 
   return (
     <SubpageLayout>
@@ -40,7 +51,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
           <AnimatedSection variant="scaleUp" delay={0}>
           <div className="relative w-full h-[500px] rounded-2xl overflow-hidden shadow-lg mb-10 border border-[#e8e0ce]">
             <Image
-              src={post.image}
+              src={post.bigImage || post.image}
               alt={post.title}
               fill
               priority
@@ -67,7 +78,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
           <AnimatedSection variant="fadeUp" delay={0.25}>
           <div 
             className="prose prose-stone max-w-none prose-p:font-sans prose-p:text-stone-700 prose-p:leading-[1.8] prose-p:text-[15px] prose-p:mb-6"
-            dangerouslySetInnerHTML={{ __html: post.content }}
+            dangerouslySetInnerHTML={{ __html: processedContent }}
           />
           
           <AnimatedSection variant="fadeUp" delay={0.35}>
@@ -98,7 +109,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
                 <Link key={related.id} href={`/blog/${related.slug}`} className="group flex flex-col gap-3">
                   <div className="relative w-full aspect-video rounded-xl overflow-hidden shadow-sm">
                     <Image
-                      src={related.image}
+                      src={related.cardImage || related.image}
                       alt={related.title}
                       fill
                       className="object-cover group-hover:scale-105 transition-transform duration-700"

src/app/blog/page.tsx

@@ -44,7 +44,7 @@ export default function BlogPage() {
               {/* Image Container with fade out */}
               <div className="relative w-full aspect-[4/3] overflow-hidden border-b-1 border-[#0a4a2b]">
                 <Image
-                  src={post.image}
+                  src={post.cardImage || post.image}
                   alt={post.title}
                   fill
                   sizes="(max-width: 768px) 100vw, 30vw"

src/app/contact/page.tsx

@@ -135,11 +135,19 @@ export default function ContactPage() {
 
             {/* Right Column: Form — Dark green theme card */}
             <AnimatedSection variant="fadeRight" delay={0.2}>
-              <div className="relative bg-[#0a2e1f] p-8 sm:p-12 shadow-[0_20px_50px_rgba(0,0,0,0.5)] rounded-xl border-[4px] border-[#082418]">
+              <div className="relative p-8 sm:p-12 overflow-hidden">
+                {/* Background Image */}
+                <div className="absolute inset-0 z-0 pointer-events-none select-none">
+                  <Image
+                    src="/images/contact/contact.webp"
+                    alt=""
+                    fill
+                    className="object-cover object-center"
+                  />
+                </div>
                 {/* Ornate Gold Border inside */}
-                <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
+                {/* <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
 
-                {/* Corner Ornaments */}
                 <div className="absolute top-2 left-2 w-12 h-12 pointer-events-none">
                   <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                     <path d="M0,0 L40,0 Q40,40 0,40 Z" />
@@ -165,7 +173,6 @@ export default function ContactPage() {
                   </svg>
                 </div>
 
-                {/* Faint mandala watermark at bottom */}
                 <div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-64 h-40 overflow-hidden pointer-events-none opacity-5">
                   <svg viewBox="0 0 100 50" fill="currentColor" className="w-full h-full text-[#bc9e65]">
                     <path d="M50 50 C50 20 20 0 0 0 L100 0 C80 0 50 20 50 50 Z" />
@@ -173,7 +180,7 @@ export default function ContactPage() {
                     <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="2" />
                     <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" strokeWidth="2" />
                   </svg>
-                </div>
+                </div> */}
 
                 <div className="relative z-10 flex flex-col items-center">
                   <svg className="w-10 h-10 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">

src/app/reservation/page.tsx

@@ -34,19 +34,18 @@ export default function ReservationPage() {
       <div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
         
         {/* Full Page Background with Pots and Temple */}
-        <div className="absolute inset-0 z-0 pointer-events-none select-none">
+        {/* <div className="absolute inset-0 z-0 pointer-events-none select-none">
           <Image
-            src="/images/story_bg.png"
+            src="/images/about/bg/reservation-bg.webp"
             alt="Royal Background"
             fill
             priority
             className="object-cover object-bottom opacity-90 mix-blend-multiply"
           />
-        </div>
+        </div> */}
 
         {/* Ornate Page Border */}
-        <div className="absolute inset-4 sm:inset-8 border-[1.5px] border-[#bc9e65] pointer-events-none z-10 hidden md:block">
-          {/* Corner Ornaments */}
+        {/* <div className="absolute inset-4 sm:inset-8 border-[1.5px] border-[#bc9e65] pointer-events-none z-10 hidden md:block">
           <div className="absolute top-0 left-0 w-16 h-16 transform">
              <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                <path d="M0,0 L50,0 Q50,50 0,50 Z" />
@@ -71,18 +70,25 @@ export default function ReservationPage() {
                <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
              </svg>
           </div>
-        </div>
+        </div> */}
 
         <div className="relative z-20 max-w-2xl mx-auto w-full px-4 sm:px-8">
           
           {/* Form Card */}
           <div className="w-full">
             <AnimatedSection variant="fadeUp" delay={0.1}>
-              <div className="relative bg-[#0a2e1f] p-8 sm:p-12 shadow-[0_30px_60px_rgba(0,0,0,0.6)] rounded-xl border-[4px] border-[#082418]">
-                {/* Ornate Gold Border inside */}
-                <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
+              <div className="relative p-8 sm:p-14  overflow-hidden">
+                {/* Background Image */}
+                <div className="absolute inset-0 z-0 pointer-events-none select-none">
+                  <Image
+                    src="/images/contact/contact.webp"
+                    alt=""
+                    fill
+                    className="object-cover object-center"
+                  />
+                </div>
+                {/* <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
                 
-                {/* Corner Ornaments */}
                 <div className="absolute top-2 left-2 w-12 h-12 pointer-events-none">
                    <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                      <path d="M0,0 L40,0 Q40,40 0,40 Z" />
@@ -106,7 +112,7 @@ export default function ReservationPage() {
                      <path d="M0,0 L40,0 Q40,40 0,40 Z" />
                      <path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
                    </svg>
-                </div>
+                </div> */}
 
                 <div className="relative z-10 flex flex-col items-center">
                   <svg className="w-10 h-10 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">

src/components/ChefShowcase.tsx

@@ -205,7 +205,7 @@ export default function ChefShowcase() {
           >
 
             {/* 30+ Years Experience Badge Overlay */}
-            <div className="absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
+            <div className="hidden lg:flex absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
               <div className="absolute inset-1.5 border border-[#bc9e65]/35 rounded-full pointer-events-none" />
               {/* Gold Flower Icon */}
               <svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
@@ -217,17 +217,17 @@ export default function ChefShowcase() {
             </div>
 
             {/* Seamless Image Wrapper */}
-            <div className="relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">
+            <div className="hidden lg:block relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">
 
               {/* Portrait Image */}
-              <Image
+              {/* <Image
                 src="/images/home/chef/chef-right-img.webp"
                 alt="Chef Mendia Juxef Cooking with Fire"
                 fill
                 priority
                 sizes="(max-width: 768px) 100vw, 35vw"
                 className="object-cover group-hover:scale-103 transition-transform duration-[2s] brightness-[0.9] contrast-[1.03]"
-              />
+              /> */}
 
               {/* Sparks/Embers Canvas Overlay */}
               <canvas

src/components/EntranceExperience.tsx

@@ -68,9 +68,9 @@ function LoaderNotifier({ onLoad }: { onLoad: () => void }) {
 
 // 3D Cinematic flight renderer
 function CinematicFlight({ progress }: { progress: number }) {
-  const exteriorTex = useTexture("/images/my_dosa_place_exterior_webgl.jpg");
-  const interiorTex = useTexture("/images/my_dosa_place_interior_webgl.jpg");
-  const foodTex = useTexture("/images/my_dosa_place_food_webgl.jpg");
+  const exteriorTex = useTexture("/images/home/hero/banner-1.png");
+  const interiorTex = useTexture("/images/home/hero/banner-2.png");
+  const foodTex = useTexture("/images/home/hero/banner-3.png");
 
   const leftDoorRef = useRef<THREE.Group>(null);
   const rightDoorRef = useRef<THREE.Group>(null);

src/components/EventsAccordion.tsx

@@ -182,7 +182,7 @@ export default function EventsAccordion() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
-          className="flex flex-col lg:flex-row gap-5 h-[680px] lg:h-[460px] w-full items-stretch relative z-20"
+          className="flex flex-col lg:flex-row gap-5 h-[800px] lg:h-[460px] w-full items-stretch relative z-20"
         >
           {events.map((event, idx) => {
             const isActive = idx === activeIdx;
@@ -266,10 +266,10 @@ export default function EventsAccordion() {
                     </div>
 
                     {/* Details content section */}
-                    <div className="flex flex-col items-start gap-3 lg:gap-4 h-full justify-center overflow-y-auto custom-scrollbar pr-2">
+                    <div className="flex flex-col items-start justify-between h-full lg:justify-center overflow-hidden pr-2">
                       
                       {/* Double gold-rim circle icon container */}
-                      <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0">
+                      <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0 mt-4 lg:mt-0">
                         <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
                           <CategoryIcon />
                         </div>
@@ -294,7 +294,7 @@ export default function EventsAccordion() {
                       </p>
                       
                       {/* Notched Enquire CTA Button */}
-                      <div className="mt-2 lg:mt-4 select-none">
+                      <div className="mt-4 lg:mt-4 mb-4 lg:mb-0 select-none flex-shrink-0">
                         <button 
                           className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-5 py-2 lg:px-6 lg:py-2.5 uppercase font-sans font-bold text-sm lg:text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
                           style={{

src/components/Footer.tsx

@@ -25,7 +25,7 @@ export default function Footer() {
           alt="Footer Backdrop"
           fill
           priority
-          className="object-fill"
+          className="object-cover object-center"
         />
       </div>
 

src/components/SpatialSanctuary.tsx

@@ -93,7 +93,7 @@ export default function SpatialSanctuary() {
       >
 
         {/* ==================== SLIDE 1: THE CULINARY HERITAGE MAIN COVER ==================== */}
-        <div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-center px-6 sm:px-12 md:px-16 pt-12 pb-20 overflow-hidden bg-[#fdfcf7]">
+        <div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-start lg:justify-center px-4 sm:px-12 md:px-16 pt-20 lg:pt-12 pb-24 lg:pb-20 overflow-y-auto lg:overflow-hidden bg-[#fdfcf7] custom-scrollbar">
           {/* Parchment background image for Slide 1 */}
           <Image
             src="/images/home/culinary-heritage/our-culinary-heritage-bg-1.webp"
@@ -110,7 +110,7 @@ export default function SpatialSanctuary() {
           <div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 relative z-10">
 
             {/* Left Side details */}
-            <div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text">
+            <div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-start lg:justify-center select-text">
 
               {/* Pre-title with Gold star crest */}
               <div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
@@ -123,7 +123,7 @@ export default function SpatialSanctuary() {
               </div>
 
               {/* Main Headline */}
-              <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-4">
+              <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-2 lg:mb-4">
                 Our Culinary<br />
                 <span className="text-[#bc9e65] font-extrabold block mt-1">Heritage</span>
               </h2>
@@ -138,12 +138,12 @@ export default function SpatialSanctuary() {
               </div>
 
               {/* Description narrative */}
-              <p className="font-sans text-sm sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-lg mb-6">
+              <p className="font-sans text-xs sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-lg mb-4 lg:mb-6">
                 Swipe or scroll to explore the rich, traditional recipes of My Dosa Place, bringing stone-ground batters, fresh local spices, and traditional techniques to life.
               </p>
 
               {/* Scroll Down Slide Indicator */}
-              <div className="flex items-center gap-2 mb-6 pointer-events-none select-none text-[#bc9e65]">
+              <div className="flex items-center gap-2 mb-4 lg:mb-6 pointer-events-none select-none text-[#bc9e65]">
                 <span className="font-sans text-sm tracking-[0.2em] font-bold uppercase">
                   Scroll down to slide right
                 </span>
@@ -157,45 +157,45 @@ export default function SpatialSanctuary() {
               <div className="grid grid-cols-2 gap-4 w-full max-w-lg">
 
                 {/* Card 1: Recipes */}
-                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
-                  <Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-2" />
-                  <h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Heritage Recipes
                   </h5>
-                  <p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
+                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                     Timeless recipes rooted in tradition.
                   </p>
                 </div>
 
                 {/* Card 2: Ghee */}
-                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
-                  <Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-2" />
-                  <h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Pure A2 Ghee
                   </h5>
-                  <p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
+                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                     Traditional ghee that enriches the flavor.
                   </p>
                 </div>
 
                 {/* Card 3: Dosa */}
-                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
-                  <Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-2" />
-                  <h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Artisanal Dosa
                   </h5>
-                  <p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
+                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                     Stone-ground batter fermented to perfection.
                   </p>
                 </div>
 
                 {/* Card 4: Feasts */}
-                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
-                  <Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-2" />
-                  <h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Imperial Feasts
                   </h5>
-                  <p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
+                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                     Grand platters reflecting royal tastes.
                   </p>
                 </div>
@@ -205,8 +205,8 @@ export default function SpatialSanctuary() {
             </div>
 
             {/* Right Side: Thali Archway photo overlap */}
-            <div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative select-none pointer-events-none">
-              <div className="w-[320px] h-[320px] sm:w-[460px] sm:h-[460px] md:w-[480px] md:h-[480px] relative">
+            <div className="hidden lg:flex w-full lg:w-[46%] justify-center lg:justify-end relative select-none pointer-events-none mt-6 lg:mt-0">
+              <div className="w-[180px] h-[180px] sm:w-[320px] sm:h-[320px] md:w-[400px] md:h-[400px] lg:w-[480px] lg:h-[480px] relative">
                 <Image
                   src="/images/home/culinary-heritage/our-culinary-heritage-right.webp"
                   alt="My Dosa Place Spatial Dining Sanctuary"
@@ -494,10 +494,10 @@ export default function SpatialSanctuary() {
       </div>
 
       {/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */}
-      <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-4 pointer-events-none select-none">
-        <span className="font-serif text-sm text-[#bc9e65] font-semibold italic">My Dosa Place</span>
-        <span className="h-4 w-[1px] bg-[#bc9e65]/40" />
-        <span className="font-sans text-sm sm:text-sm tracking-[0.25em] text-[#bc9e65] font-bold uppercase">
+      <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-2 sm:gap-4 pointer-events-none select-none">
+        <span className="font-serif text-sm text-[#bc9e65] font-semibold italic hidden sm:block">My Dosa Place</span>
+        <span className="h-4 w-[1px] bg-[#bc9e65]/40 hidden sm:block" />
+        <span className="font-sans text-[9px] sm:text-sm tracking-[0.1em] sm:tracking-[0.25em] text-[#bc9e65] font-bold uppercase text-center px-2">
           ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
         </span>
       </div>