ok

src/components/Header.jsx

@@ -80,7 +80,7 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-transparent backdrop-blur-sm">
       <Container>
         <nav className="relative z-50 flex items-center justify-between py-3 lg:py-4">
           <div className="flex items-center md:gap-x-8 lg:gap-x-12">

src/components/Hero.jsx

@@ -7,7 +7,7 @@ import Image from 'next/image'
 
 export function Hero() {
   return (
-    <div className=" max-w-8xl px-6 lg:px-8 -z-10 -mt-5 mx-0 bg-transparent pb-12">
+    <div className=" max-w-8xl px-6 lg:px-8 -z-10 mt-0 mx-0 bg-transparent pb-12">
       {/* Background Image with opacity to show sand background i changed the src for now bc its not uploaded to server*/}
       <div className="relative overflow-hidden">
         <div className="mx-auto max-w-7xl">

src/components/Testimonials.jsx

@@ -107,8 +107,8 @@ 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-white py-6 px-8 shadow-xl shadow-slate-900/10">
-                      <QuoteIcon className="absolute left-6 top-6 fill-slate-100" />
+                    <figure className="relative rounded-lg bg-bg-sand py-6 px-8 shadow-xl shadow-slate-900/10">
+                      <QuoteIcon className="absolute left-6 top-6 fill-creme-600" />
                       <blockquote className="relative">
                         <PXXS  >
                           {testimonial.content}