diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
index 26ddaee..960a45e 100644
--- a/src/components/Carousel.jsx
+++ b/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}
diff --git a/src/components/Community.jsx b/src/components/Community.jsx
index 08970d3..76f7339 100644
--- a/src/components/Community.jsx
+++ b/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">
diff --git a/src/components/Daha2.jsx b/src/components/Daha2.jsx
index c4df409..4a53c0f 100644
--- a/src/components/Daha2.jsx
+++ b/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.
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index 3874c05..3435b52 100644
--- a/src/components/Events.jsx
+++ b/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">
diff --git a/src/components/Exp.jsx b/src/components/Exp.jsx
index 10229ed..f3b872c 100644
--- a/src/components/Exp.jsx
+++ b/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">
diff --git a/src/components/Exp2.jsx b/src/components/Exp2.jsx
index 8fda4fd..bc0edbd 100644
--- a/src/components/Exp2.jsx
+++ b/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">
diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index 5c141e7..9d854ad 100644
--- a/src/components/Experiences.jsx
+++ b/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>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index bf99182..5709403 100644
--- a/src/components/Hero.jsx
+++ b/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>
diff --git a/src/components/HeroCopy.jsx b/src/components/HeroCopy.jsx
index df5f20b..8299206 100644
--- a/src/components/HeroCopy.jsx
+++ b/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.
diff --git a/src/components/NewFeatures.jsx b/src/components/NewFeatures.jsx
index 2369b6d..935d1d2 100644
--- a/src/components/NewFeatures.jsx
+++ b/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
diff --git a/src/components/Nomads.jsx b/src/components/Nomads.jsx
index 9e958e4..5c31f68 100644
--- a/src/components/Nomads.jsx
+++ b/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">
diff --git a/src/components/PrimaryFeatures.jsx b/src/components/PrimaryFeatures.jsx
index 61afa53..d92cb4d 100644
--- a/src/components/PrimaryFeatures.jsx
+++ b/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',
diff --git a/src/components/Retreats.jsx b/src/components/Retreats.jsx
index 08f3771..fbbe946 100644
--- a/src/components/Retreats.jsx
+++ b/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">
diff --git a/src/components/Route.jsx b/src/components/Route.jsx
index e59a470..d2b239b 100644
--- a/src/components/Route.jsx
+++ b/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">
diff --git a/src/components/SecondaryFeatures.jsx b/src/components/SecondaryFeatures.jsx
index 29a2611..bd6596c 100644
--- a/src/components/SecondaryFeatures.jsx
+++ b/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">
diff --git a/src/components/Veda1.jsx b/src/components/Veda1.jsx
index 32fd366..447ca55 100644
--- a/src/components/Veda1.jsx
+++ b/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">
diff --git a/src/components/Veda2.jsx b/src/components/Veda2.jsx
index d18d511..82d77a8 100644
--- a/src/components/Veda2.jsx
+++ b/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">
diff --git a/src/components/Veda3.jsx b/src/components/Veda3.jsx
index 08b2d75..2589b98 100644
--- a/src/components/Veda3.jsx
+++ b/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">
diff --git a/src/components/Veda4.jsx b/src/components/Veda4.jsx
index d97efe0..9172606 100644
--- a/src/components/Veda4.jsx
+++ b/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">