fix hero

src/components/Callto.jsx

@@ -36,7 +36,7 @@ export function Callto() {
           Discover a cruise like no other with us on the Nile.
           </H3>
           <br/>
-          <Button className="mt-4" href="/story" variant="outline" color="white">
+          <Button className="mt-4" href="/story" variant="outline" color="slate">
            Read Our Story
           </Button>
         </div>

src/components/Header.jsx

@@ -65,7 +65,7 @@ function MobileNavigation() {
       />
       <PopoverPanel
         transition
-        className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-transparent border border-slate-200/20 p-4 text-lg tracking-tight text-white shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
+        className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-transparent border border-slate-200/20 p-4 text-lg tracking-tight text-bg-darkbrown shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
       >
         <MobileNavLink href="/">HOME</MobileNavLink>
         <MobileNavLink href="/story">STORY</MobileNavLink>

src/components/Hero2.jsx

@@ -12,10 +12,10 @@ export function Hero2() {
     })
   }
   return (
-    <div className="relative w-full overflow-hidden mt-0">
-      {/* Background Video - Extended to cover header */}
+    <div className="relative w-full overflow-hidden h-[80vh] sm:h-[85vh] lg:min-h-screen lg:mt-0 lg:py-0 py-16 lg:px-0 px-4">
+      {/* Background Video - Full coverage */}
       <video
-        className="w-full h-auto object-cover block relative z-0"
+        className="absolute inset-0 w-full h-full object-cover z-0"
         autoPlay
         loop
         muted
@@ -25,14 +25,14 @@ export function Hero2() {
       </video>
       
       {/* Black Overlay */}
-      <div className="absolute inset-0 bg-black opacity-40"></div>
+      <div className="absolute inset-0 bg-black opacity-40 z-10"></div>
       
       {/* Content */}
-      <div className="absolute inset-0 flex items-center justify-center text-center px-4 sm:px-6 z-20">
-        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
-          <H1 className="text-creme-200 text-3xl sm:text-4xl md:text-5xl lg:text-6xl">
+      <div className="absolute inset-0 flex items-center justify-center text-center px-6 sm:px-8 md:px-12 lg:px-6 z-20">
+        <div className="max-w-sm sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
+          <H1 className="text-creme-200 text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl leading-none">
             Nile Cruises,{' '}
-            <span className="relative whitespace-nowrap text-gold-500">
+            <span className="relative whitespace-nowrap text-gold-500 -mt-1 inline-block">
               <svg
                 aria-hidden="true"
                 viewBox="0 0 418 42"
@@ -42,15 +42,15 @@ export function Hero2() {
                 <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
               </svg>
               <span className="relative">Reimagined</span>
-            </span>{' '}
+            </span>
           </H1>
-          <P className="mt-6 sm:mt-8 md:mt-10 leading-normal font-medium text-white text-sm sm:text-base md:text-lg">
+          <P className="mt-3 sm:mt-4 md:mt-6 lg:mt-8 leading-relaxed font-medium text-white text-sm sm:text-base md:text-lg px-1 sm:px-2 md:px-0 max-w-xs sm:max-w-sm md:max-w-2xl mx-auto">
             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.
           </P>
           
           {/* Chevron Down Button */}
-          <div className="mt-10 flex justify-center">
+          <div className="mt-6 sm:mt-8 md:mt-10 flex justify-center">
             <ChevronDownIcon 
               onClick={scrollDown}
               className="h-12 w-12 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"

src/components/Journey.jsx

@@ -19,7 +19,7 @@ export  function Journey() {
           <div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
             <H2 className=" text-white text-3xl font-semibold">Experiences</H2>
             <PS className=" mt-4 text-white text-center ">From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile.</PS>
-            <Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
+            <Button className="mt-6" href="/experiences" variant="outline" color="slate">Learn More</Button>
           </div>
         </div>
         
@@ -36,7 +36,7 @@ export  function Journey() {
           <div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
             <H2 className=" text-white text-3xl font-semibold">Activities</H2>
             <PS className=" mt-4 text-white text-center ">Explore a diverse range of activities designed to elevate your mind, body, and soul.</PS>
-            <Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
+            <Button className="mt-6" href="/experiences" variant="outline" color="slate">Learn More</Button>
           </div>
         </div>
       </div>