updated

src/Components/Advertising.jsx

@@ -8,7 +8,7 @@ import playButton from "../assets/PlayBtn.png";
 
 const Advertising = () => {
   return (
-    <Box position={"relative"} h={"90vh"}>
+    <Box position={"relative"} h={"100%"}>
       <Container
         display={"flex"}
         flexDirection={"column"}

src/Components/Hero.jsx

@@ -10,11 +10,12 @@ import { OPACITY_ON_LOAD } from "../Layout/animations";
 
 const Hero = () => {
   return (
-    <Box {...OPACITY_ON_LOAD} h={"100vh"}>
+    <Box {...OPACITY_ON_LOAD} h={"100%"} pt={10} pb={20}>
       <Container
         display={"flex"}
         maxW="container.xl"
         h={"100%"}
+        alignItems={'center'}
         
       >
         <Box w={"50%"} display={'flex'} flexDirection={'column'} gap={6} justifyContent={'center'} p={10} h={"100%"}>

src/Components/HowItWorks.jsx

@@ -28,7 +28,7 @@ const HowItWorks = () => {
 
 
   return (
-    <Box id="how-it-works" position={"relative"} backgroundColor={"#ffffff"} h={"120vh"} mt={28} mb={10}>
+    <Box id="how-it-works" position={"relative"} backgroundColor={"#ffffff"} h={"100%"} mt={28} mb={10}>
       <Image src={patter1} position={"absolute"} top={0} left={0} w={100} />
       <Container
         display={"flex"}
@@ -194,7 +194,7 @@ const HowItWorks = () => {
                 left={1}
                 src={browse}
                 w={"100%"}
-                h={"80%"}
+                h={"100%"}
                 zIndex={-1}
                 // transform={spanHeight === 75 ? "translateX(0px)": "translateY(-100%)"}
                 opacity={spanHeight === 75 ? 1: 0}