edit

public/images/components/Daha2.jsx

@@ -40,7 +40,7 @@ export default function Example() {
         Choose from our selection of four dahabiyas, each designed to provide a unique and soulful journey.
         </p>
 
-        <div className="mt-10 space-y-12 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-y-0">
+        <div className="mt-10 space-y-8  lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-y-0">
           {categories.map((category) => (
             <a key={category.name} href={category.href} className="group block">
               <div
@@ -54,7 +54,7 @@ export default function Example() {
                 />
               </div>
               <h3 className="mt-4 text-base font-semibold text-gray-900">{category.name}</h3>
-              <p className="mt-2 text-sm text-gray-500">{category.description}</p>
+              <p className="lg:mt-2 mt-0 text-sm text-gray-500">{category.description}</p>
             </a>
           ))}
         </div>

src/app/dahabiyas/page.jsx

@@ -36,6 +36,8 @@ export default function Dahabiyas() {
       <main>
         <Daha1 />
         <Daha2 onVedaSelect={setSelectedVeda} selectedVeda={selectedVeda} />
+        {/* Thin brown line separator */}
+        <div className="w-full border-t border-bg-darkbrown/30 mx-auto max-w-7xl"></div>
         {renderSelectedVeda()}
         <Testimonials />
       </main>

src/app/experiences/page.jsx

@@ -39,6 +39,8 @@ export default function ExperiencesPage() {
       <Header />
       <main>
         <Experiences onExperienceSelect={setSelectedExperience} />
+        {/* Thin brown line separator */}
+        <div className="w-full border-t border-bg-darkbrown/30 mx-auto max-w-7xl"></div>
         {renderSelectedComponent()}
         <Carousel />
         <FFVid />

src/components/Experiences.jsx

@@ -4,7 +4,7 @@ import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text";
 export function Experiences({ onExperienceSelect }) {
   return (           
     <div className="bg-transparent">    
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 lg:pt-12 pt-6 lg:pb-6 pb-12">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 lg:pt-12 pt-6 lg:pb-12 pb-12">
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
           {/* Photo 1 - Left large image */}
           <div className="flex lg:col-span-2 lg:row-span-2">

src/components/Itinerary.jsx

@@ -109,27 +109,27 @@ export function Itinerary() {
   }
 
   return (
-    <div className="relative bg-transparent mb-0">
+    <div className="relative bg-transparent mb-0 px-4 sm:px-6 lg:px-0 pt-0">
       <div className="relative mx-auto max-w-8xl lg:grid lg:grid-cols-2 lg:items-stretch">
         {/* Left column with changeable day content */}
-        <div className="relative min-h-80">
+        <div className="relative lg:min-h-80 min-h-[80vh]">
           <img
             alt={`Journey Image ${currentDay}`}
             src={dayData.image}
-            className="w-full h-full object-cover"
+            className="w-full lg:h-full h-[80vh] object-cover"
           />
           {/* Black overlay */}
           <div className="absolute inset-0 bg-black opacity-60"></div>
           {/* paragraphs */}
-          <div className="absolute inset-0 flex items-start justify-center mx-auto max-w-lg flex-col text-start px-10">
+          <div className="absolute inset-0 flex items-start justify-center mx-auto max-w-lg flex-col lg:text-start text-center px-4 sm:px-6 lg:px-10 pt-20 lg:pt-0">
-            <H2 className="">{dayData.title}</H2>
+            <H2 className="text-white">{dayData.title}</H2>
             {dayData.content.map((paragraph, index) => (
-              <PS key={index} className="mt-2">{paragraph}</PS>
+              <PS key={index} className="mt-2 text-gray-50">{paragraph}</PS>
             ))}
             <div className="mt-6 flex justify-center items-center ">
               <ChevronDownIcon 
                 onClick={handleManualAdvance}
-                className="h-8 w-8 text-white animate-bounce cursor-pointer hover:text-gray-300 transition-colors duration-200 animate-pulse"
+                className="h-8 w-8 text-white cursor-pointer hover:text-gray-300 transition-colors duration-200 animate-pulse"
               />
             </div>
           </div>

src/components/Testimonials.jsx

@@ -121,7 +121,7 @@ export function Testimonials() {
     <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-transparent py-2 mt-24 mb-0"
+      className="bg-transparent py-2 lg:mt-12 mt-12 mb-0"
       style={{
         backgroundImage: `url("/images/cta_bg.jpg")`,
         backgroundSize: 'cover',

src/components/Veda1.jsx

@@ -129,7 +129,7 @@ export default function Example() {
 
   return (
     <div className="bg-transparent">
-      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-0">
+      <div className="mx-auto max-w-2xl px-6 py-12  lg:max-w-7xl lg:px-0">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="flex flex-col-reverse">
@@ -168,7 +168,7 @@ export default function Example() {
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-6 sm:px-0 lg:mt-0">
+          <div className="mt-10  sm:px-0 lg:mt-0">
             <H2 className="">{product.name}</H2>
 
             <div className="mt-2">