diff --git a/public/images/components/Boats.jsx b/public/images/components/Boats.jsx
index 91d0cb4..df3d100 100644
--- a/public/images/components/Boats.jsx
+++ b/public/images/components/Boats.jsx
@@ -58,7 +58,7 @@ const people = [
 
 export default function Boats() {
     return (
-        <div className="bg-bg-sand py-24">
+        <div className="bg-transparent py-24">
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>
diff --git a/public/images/components/Daha1.jsx b/public/images/components/Daha1.jsx
index c2dd16a..b6a546b 100644
--- a/public/images/components/Daha1.jsx
+++ b/public/images/components/Daha1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/public/images/components/Daha2.jsx b/public/images/components/Daha2.jsx
index bef53c8..65e6504 100644
--- a/public/images/components/Daha2.jsx
+++ b/public/images/components/Daha2.jsx
@@ -33,7 +33,7 @@ const categories = [
 
 export default function Example() {
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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">
diff --git a/public/images/components/Exp.jsx b/public/images/components/Exp.jsx
index a58226c..bff3729 100644
--- a/public/images/components/Exp.jsx
+++ b/public/images/components/Exp.jsx
@@ -9,7 +9,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-bg-sand">
+      <div className="bg-transparent">
         <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>
diff --git a/public/images/components/Exp1.jsx b/public/images/components/Exp1.jsx
index 21ffe44..ca09462 100644
--- a/public/images/components/Exp1.jsx
+++ b/public/images/components/Exp1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/public/images/components/Exp2.jsx b/public/images/components/Exp2.jsx
index e660566..d3b6f48 100644
--- a/public/images/components/Exp2.jsx
+++ b/public/images/components/Exp2.jsx
@@ -2,7 +2,7 @@
   
   export  function Experience() {
     return (
-      <div className="bg-bg-sand">
+      <div className="bg-transparent">
         <div aria-hidden="true" className="relative">
           <img
             alt=""
diff --git a/public/images/components/FreeflowVideo.jsx b/public/images/components/FreeflowVideo.jsx
index d2172bb..1b2a94c 100644
--- a/public/images/components/FreeflowVideo.jsx
+++ b/public/images/components/FreeflowVideo.jsx
@@ -8,7 +8,7 @@ const FFVid = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-bg-sand pt-6 pb-24"
+      className="bg-transparent pt-6 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">
diff --git a/public/images/components/Hero.jsx b/public/images/components/Hero.jsx
index 73f3ebc..11dadbe 100644
--- a/public/images/components/Hero.jsx
+++ b/public/images/components/Hero.jsx
@@ -7,7 +7,7 @@ export function Hero() {
   return (
     <section className="relative w-full lg:h-screen bg-transparent h-[550px] lg:mt-0 mt-0">
       {/* Background Image */}
-      <div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-bg-sand opacity-30">
+      <div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-transparent opacity-30">
         <img
           src="/images/hero.jpg"
           alt="Nile River"
diff --git a/public/images/components/Iti1.jsx b/public/images/components/Iti1.jsx
index b76d327..13bd193 100644
--- a/public/images/components/Iti1.jsx
+++ b/public/images/components/Iti1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
         <img
           alt=""
           src="/images/iti.jpg"
diff --git a/public/images/components/Story.jsx b/public/images/components/Story.jsx
index 3e037fd..7eb77e8 100644
--- a/public/images/components/Story.jsx
+++ b/public/images/components/Story.jsx
@@ -7,7 +7,7 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-bg-sand pb-0 pt-12 lg:pt-12">
+    <div className="overflow-hidden bg-transparent pb-0 pt-12 lg:pt-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
         <div className="flex items-start justify-end lg:justify-start lg:order-first">
diff --git a/public/images/components/Story2.jsx b/public/images/components/Story2.jsx
index bdaa9fc..fe6f859 100644
--- a/public/images/components/Story2.jsx
+++ b/public/images/components/Story2.jsx
@@ -5,7 +5,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-bg-sand pb-10 pt-0 lg:pt-10 lg:pb-24">
+    <div className="overflow-hidden bg-transparent pb-10 pt-0 lg:pt-10 lg:pb-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
diff --git a/public/images/components/Team.jsx b/public/images/components/Team.jsx
index 7ce872e..21b6b68 100644
--- a/public/images/components/Team.jsx
+++ b/public/images/components/Team.jsx
@@ -28,7 +28,7 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="bg-bg-sand py-12 md:py-32 lg:py-12">
+      <div className="bg-transparent py-12 md:py-32 lg:py-12">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</h2>
diff --git a/public/images/components/Testimonials.jsx b/public/images/components/Testimonials.jsx
index e073668..1ea02b5 100644
--- a/public/images/components/Testimonials.jsx
+++ b/public/images/components/Testimonials.jsx
@@ -122,7 +122,7 @@ export function Testimonials() {
                             {testimonial.author.role}
                           </div>
                         </div>
-                        <div className="overflow-hidden rounded-full bg-bg-sand">
+                        <div className="overflow-hidden rounded-full bg-transparent">
                           <img
                             className="h-14 w-14 object-cover"
                             src={testimonial.author.image}
diff --git a/public/images/components/Timeline.jsx b/public/images/components/Timeline.jsx
index b00edcf..ddd0fae 100644
--- a/public/images/components/Timeline.jsx
+++ b/public/images/components/Timeline.jsx
@@ -92,7 +92,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-bg-sand">
+      <div className="bg-transparent">
         <div className="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA ITINERARY SAMPLE</h2>
diff --git a/public/images/components/Veda1.jsx b/public/images/components/Veda1.jsx
index c4e3cff..a6bf88a 100644
--- a/public/images/components/Veda1.jsx
+++ b/public/images/components/Veda1.jsx
@@ -101,7 +101,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}
diff --git a/public/images/components/Veda2.jsx b/public/images/components/Veda2.jsx
index f0924c4..79acf69 100644
--- a/public/images/components/Veda2.jsx
+++ b/public/images/components/Veda2.jsx
@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}
diff --git a/public/images/components/Veda3.jsx b/public/images/components/Veda3.jsx
index 74126e9..76d837c 100644
--- a/public/images/components/Veda3.jsx
+++ b/public/images/components/Veda3.jsx
@@ -98,7 +98,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}
diff --git a/public/images/components/Veda4.jsx b/public/images/components/Veda4.jsx
index 1426631..71a91a4 100644
--- a/public/images/components/Veda4.jsx
+++ b/public/images/components/Veda4.jsx
@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}
diff --git a/src/components/Boats.jsx b/src/components/Boats.jsx
index 91d0cb4..df3d100 100644
--- a/src/components/Boats.jsx
+++ b/src/components/Boats.jsx
@@ -58,7 +58,7 @@ const people = [
 
 export default function Boats() {
     return (
-        <div className="bg-bg-sand py-24">
+        <div className="bg-transparent py-24">
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>
diff --git a/src/components/CallToAction2.jsx b/src/components/CallToAction2.jsx
index 594f3c8..006e79e 100644
--- a/src/components/CallToAction2.jsx
+++ b/src/components/CallToAction2.jsx
@@ -7,7 +7,7 @@ export function CallToAction2() {
   return (
     <section
       id="get-started-today"
-      className="relative overflow-hidden bg-bg-sand py-40 mt-4 mb-2"
+      className="relative overflow-hidden bg-transparent py-40 mt-4 mb-2"
     >
       <img
         className="absolute  left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
diff --git a/src/components/CallToAction3.jsx b/src/components/CallToAction3.jsx
index 3e04b11..5943fe3 100644
--- a/src/components/CallToAction3.jsx
+++ b/src/components/CallToAction3.jsx
@@ -7,7 +7,7 @@ export function CallToAction3() {
   return (
     <section
       id="get-started-today"
-      className="relative overflow-hidden bg-bg-sand py-48 mt-4"
+      className="relative overflow-hidden bg-transparent py-48 mt-4"
     >
       <img
         className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
diff --git a/src/components/Daha1.jsx b/src/components/Daha1.jsx
index c2dd16a..b6a546b 100644
--- a/src/components/Daha1.jsx
+++ b/src/components/Daha1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/src/components/Daha2.jsx b/src/components/Daha2.jsx
index bef53c8..65e6504 100644
--- a/src/components/Daha2.jsx
+++ b/src/components/Daha2.jsx
@@ -33,7 +33,7 @@ const categories = [
 
 export default function Example() {
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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">
diff --git a/src/components/Exp.jsx b/src/components/Exp.jsx
index a58226c..bff3729 100644
--- a/src/components/Exp.jsx
+++ b/src/components/Exp.jsx
@@ -9,7 +9,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-bg-sand">
+      <div className="bg-transparent">
         <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>
diff --git a/src/components/Exp1.jsx b/src/components/Exp1.jsx
index 21ffe44..ca09462 100644
--- a/src/components/Exp1.jsx
+++ b/src/components/Exp1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"
diff --git a/src/components/Exp2.jsx b/src/components/Exp2.jsx
index e660566..d3b6f48 100644
--- a/src/components/Exp2.jsx
+++ b/src/components/Exp2.jsx
@@ -2,7 +2,7 @@
   
   export  function Experience() {
     return (
-      <div className="bg-bg-sand">
+      <div className="bg-transparent">
         <div aria-hidden="true" className="relative">
           <img
             alt=""
diff --git a/src/components/FreeflowVideo.jsx b/src/components/FreeflowVideo.jsx
index d2172bb..1b2a94c 100644
--- a/src/components/FreeflowVideo.jsx
+++ b/src/components/FreeflowVideo.jsx
@@ -8,7 +8,7 @@ const FFVid = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-bg-sand pt-6 pb-24"
+      className="bg-transparent pt-6 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">
diff --git a/src/components/Iti1.jsx b/src/components/Iti1.jsx
index b76d327..13bd193 100644
--- a/src/components/Iti1.jsx
+++ b/src/components/Iti1.jsx
@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
         <img
           alt=""
           src="/images/iti.jpg"
diff --git a/src/components/NewFeatures.jsx b/src/components/NewFeatures.jsx
index ef2430e..5e04496 100644
--- a/src/components/NewFeatures.jsx
+++ b/src/components/NewFeatures.jsx
@@ -23,7 +23,7 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-bg-sand pb-0 pt-4 lg:pt-24 pb:12">
+    <div className="overflow-hidden bg-transparent pb-0 pt-4 lg:pt-24 pb:12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xllg:max-w-7xl pb-10 lg:pb-16">
         <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
diff --git a/src/components/NewFeatures2.jsx b/src/components/NewFeatures2.jsx
index 8a17751..be9bad9 100644
--- a/src/components/NewFeatures2.jsx
+++ b/src/components/NewFeatures2.jsx
@@ -23,7 +23,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-bg-sand pt-0 lg:pt-12 lg:pb-24 pb-12">
+    <div className="overflow-hidden bg-transparent pt-0 lg:pt-12 lg:pb-24 pb-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
diff --git a/src/components/Story.jsx b/src/components/Story.jsx
index e9e834b..8a7382b 100644
--- a/src/components/Story.jsx
+++ b/src/components/Story.jsx
@@ -3,7 +3,7 @@ import { P, H2, H3, PS, PXS } from '@/components/text'
 
 export default function Story() {
   return (
-    <div className="overflow-hidden bg-bg-sand pb-0 pt-12 lg:pt-12">
+    <div className="overflow-hidden bg-transparent pb-0 pt-12 lg:pt-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
         <div className="flex items-start justify-end lg:justify-start lg:order-first">
diff --git a/src/components/Story2.jsx b/src/components/Story2.jsx
index d896f00..a9d56b9 100644
--- a/src/components/Story2.jsx
+++ b/src/components/Story2.jsx
@@ -4,7 +4,7 @@ import { H2, H3, P, PXS, PS } from './text'
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-bg-sand pb-10 pt-0 lg:pt-10 lg:pb-24">
+    <div className="overflow-hidden bg-transparent pb-10 pt-0 lg:pt-10 lg:pb-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index dbe7d10..57cff4b 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -29,7 +29,7 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="bg-bg-sand py-12 md:py-32 lg:py-12">
+      <div className="bg-transparent py-12 md:py-32 lg:py-12">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <H2 className="">Our People</H2>
diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx
index 70bd37d..3a8f621 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -107,7 +107,7 @@ export function Testimonials() {
               <ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
                 {column.map((testimonial, testimonialIndex) => (
                   <li key={testimonialIndex}>
-                    <figure className="relative rounded-lg bg-bg-sand py-6 px-8 shadow-xl shadow-slate-900/10">
+                    <figure className="relative rounded-lg bg-transparent py-6 px-8 shadow-xl shadow-slate-900/10">
                       <QuoteIcon className="absolute left-6 top-6 fill-creme-600" />
                       <blockquote className="relative">
                         <PXXS  >
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index b00edcf..ddd0fae 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -92,7 +92,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-bg-sand">
+      <div className="bg-transparent">
         <div className="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA ITINERARY SAMPLE</h2>
diff --git a/src/components/Veda1.jsx b/src/components/Veda1.jsx
index e72fe04..b716bd9 100644
--- a/src/components/Veda1.jsx
+++ b/src/components/Veda1.jsx
@@ -124,7 +124,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}
diff --git a/src/components/Veda2.jsx b/src/components/Veda2.jsx
index 34d0b3d..734d835 100644
--- a/src/components/Veda2.jsx
+++ b/src/components/Veda2.jsx
@@ -126,7 +126,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}
diff --git a/src/components/Veda3.jsx b/src/components/Veda3.jsx
index f1b2e27..66f4981 100644
--- a/src/components/Veda3.jsx
+++ b/src/components/Veda3.jsx
@@ -115,7 +115,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}
diff --git a/src/components/Veda4.jsx b/src/components/Veda4.jsx
index 7010d0f..7ea129d 100644
--- a/src/components/Veda4.jsx
+++ b/src/components/Veda4.jsx
@@ -120,7 +120,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-bg-sand">
+    <div className="bg-transparent">
       <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 */}