alignment set

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"}