ok

src/components/Carousel.jsx

@@ -71,7 +71,7 @@ const MultiCardCarousel = () => {
   return (
     <div className="flex items-center justify-center min-h-screen py-6 bg-transparent">
       <div className="w-full max-w-7xl">
-        <div className="text-left mx-auto max-w-7xl px-4 lg:px-6">
+        <div className="text-left mx-auto max-w-7xl px-6 lg:px-8">
           <h2 className="font-display text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
             Activities
           </h2>
@@ -98,7 +98,7 @@ const MultiCardCarousel = () => {
               </div>
             ))}
           </div>
-          <div className="absolute inset-x-0 bottom-1/2 flex justify-between px-4 transform -translate-y-1/2">
+          <div className="absolute inset-x-0 bottom-1/2 flex justify-between px-6 transform -translate-y-1/2">
             <button
               className="w-10 h-10 rounded-full text-white font-semibold bg-gold-600"
               onClick={handlePrev}

src/components/Community.jsx

@@ -177,7 +177,7 @@ export function Community() {
             </TabGroup>
 
             {/* Product info */}
-            <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
               <div className="mt-3">

src/components/Daha2.jsx

@@ -34,7 +34,7 @@ const categories = [
 export default function Example() {
   return (
     <div className="bg-creme-600">
-      <div className="mx-auto max-w-xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <h2 className="text-2xl font-bold tracking-tight text-gray-900">DAHABIYAS</h2>
         <p className="mt-4 text-base text-gray-500">
         Choose from our selection of four dahabiyas, each designed to provide a unique and soulful journey.

src/components/Events.jsx

@@ -177,7 +177,7 @@ export function Events() {
             </TabGroup>
 
             {/* Product info */}
-            <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
               <div className="mt-3">

src/components/Exp.jsx

@@ -10,7 +10,7 @@ const features = [
   export default function Example() {
     return (
       <div className="bg-creme-600">
-        <div className="mt-24 relative mx-auto  max-w-7xl px-4 pb-16 sm:px-6 sm:pb-24 lg:px-8">
+        <div className="mt-24 relative mx-auto  max-w-7xl px-6 pb-16 sm:px-6 sm:pb-24 lg:px-8">
           <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA EXPERIENCES</h2>
             <p className="mt-4 text-gray-900">

src/components/Exp2.jsx

@@ -11,7 +11,7 @@
           />
           <div className="absolute inset-0 bg-gradient-to-t from-creme-600" />
         </div>
-        <div className="relative mx-auto -mt-12 max-w-7xl px-4 pb-16 sm:px-6 sm:pb-24 lg:px-8">
+        <div className="relative mx-auto -mt-12 max-w-7xl px-6 pb-16 sm:px-6 sm:pb-24 lg:px-8">
           <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA Programs</h2>
             <p className="mt-4 text-gray-900">

src/components/Experiences.jsx

@@ -1,7 +1,7 @@
 export function Experiences() {
   return (
     <div className="pt-16 sm:pt-24 pb-12">
-      <div className="mx-auto max-w-2xl px-4  lg:max-w-7xl lg:px-6">
+      <div className="mx-auto max-w-2xl px-6  lg:max-w-7xl lg:px-8">
         <p className="mt-2 max-w-lg text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
         Programs
         </p>

src/components/Hero.jsx

@@ -20,7 +20,7 @@ export function Hero() {
       
       {/* Welcome Content Overlay */}
       <div className="bg-transparent py-6 mt-0 absolute top-16 sm:top-32 left-0 right-0 z-10">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-4">
+        <div className="mx-auto max-w-7xl px-6 sm:px-6 lg:px-6">
           <div className="flex items-start justify-start mb-4">
             <Image src="/images/logos/veda_logo_dark.svg" alt="VEDA" width={200} height={60} className="h-8 sm:h-12 w-auto" unoptimized />
           </div>

src/components/HeroCopy.jsx

@@ -20,7 +20,7 @@ export function Hero() {
       
       {/* Welcome Content Overlay */}
       <div className="bg-[#FEFFF6] py-6 mt-0 absolute -bottom-16 left-0 right-0 z-10">
-        <div className="mx-auto max-w-7xl px-6 lg:px-4">
+        <div className="mx-auto max-w-7xl px-6 lg:px-6">
           <div className="mx-auto max-w-5xl lg:mx-0">
             <h2 className="mt-2 text-2xl font-medium tracking-[-0.05em] text-darkgr lg:text-3xl">Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
 Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.

src/components/NewFeatures.jsx

@@ -24,7 +24,7 @@ const features = [
 export default function NewFeatures() {
   return (
     <div className="overflow-hidden bg-transparent pb-0 pt-16 pb:12">
-      <div className="mx-auto max-w-7xl px-6 lg:px-6">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xllg:max-w-7xl  pb-16">
         <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
         Experiences

src/components/Nomads.jsx

@@ -103,7 +103,7 @@ export function Nomads() {
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
             {/* Product info */}
-            <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
               <div className="mt-3">

src/components/PrimaryFeatures.jsx

@@ -77,12 +77,12 @@ export function PrimaryFeatures() {
           {({ selectedIndex }) => (
             <>
               <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
-                <TabList className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
+                <TabList className="relative z-10 flex gap-x-4 whitespace-nowrap px-6 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
                   {features.map((feature, featureIndex) => (
                     <div
                       key={feature.title}
                       className={clsx(
-                        'group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
+                        'group relative rounded-full px-6 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
                         selectedIndex === featureIndex
                           ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10'
                           : 'hover:bg-white/10 lg:hover:bg-white/5',

src/components/Retreats.jsx

@@ -101,7 +101,7 @@ export function Retreats() {
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
             {/* Product info */}
-            <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
               <div className="mt-3">

src/components/Route.jsx

@@ -12,7 +12,7 @@ import { Container } from '@/components/Container'
 export default function Route() {
   return (
     <div className="overflow-hidden bg-transparent pt-6 pb-24">
-      <div className="mx-auto max-w-7xl px-4 lg:px-6">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="grid grid-cols-1 gap-x-8 gap-y-4 lg:gap-y-16 lg:grid-cols-2 lg:items-start">
           <div className="px-6 lg:px-0 lg:pr-4 lg:pt-4">
             <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">

src/components/SecondaryFeatures.jsx

@@ -171,7 +171,7 @@ function Feature({ feature, isActive, className, ...props }) {
 
 function FeaturesMobile() {
   return (
-    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
+    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-6 sm:-mx-6 sm:px-6 lg:hidden">
       {features.map((feature) => (
         <div key={feature.summary} className="relative mx-auto max-w-full">
           <div className="relative overflow-hidden rounded-xl bg-creme-900">

src/components/Veda1.jsx

@@ -102,7 +102,7 @@ export default function Example() {
 
   return (
     <div className="bg-creme-600">
-      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="flex flex-col-reverse">
@@ -141,7 +141,7 @@ export default function Example() {
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+          <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
             <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
             <div className="mt-3">

src/components/Veda2.jsx

@@ -97,7 +97,7 @@ export default function Example() {
 
   return (
     <div className="bg-creme-600">
-      <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="lg:order-last">
@@ -141,7 +141,7 @@ export default function Example() {
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+          <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
             <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
             <div className="mt-3">

src/components/Veda3.jsx

@@ -99,7 +99,7 @@ export default function Example() {
 
   return (
     <div className="bg-creme-600">
-      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="flex flex-col-reverse">
@@ -138,7 +138,7 @@ export default function Example() {
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+          <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
             <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
             <div className="mt-3">

src/components/Veda4.jsx

@@ -97,7 +97,7 @@ export default function Example() {
 
   return (
     <div className="bg-creme-600">
-      <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="lg:order-last">
@@ -141,7 +141,7 @@ export default function Example() {
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+          <div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
             <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
 
             <div className="mt-3">