mobile view 5 sections

src/components/Hero.jsx

@@ -20,14 +20,14 @@ const Hero = () => {
     <>
     <div
       style={roboto.style}
-      className='w-full  overflow-hidden flex relative justify-between items-center bg-tranparent h-[60vh] sm:h-screen'
+      className='w-full  overflow-hidden flex relative justify-between items-center bg-tranparent h-screen'
     >
       {/* Conic Gradient */}
-      <div className='absolute top-0 bottom-0 w-full h-full bg-cover bg-[url(/images/herobg.png)] opacity-10 sm:opacity-90 '></div>
+      <div className='absolute top-0 bottom-0 w-full h-full bg-cover lg:bg-[url(/images/herobg.png)] md:bg-[url(/images/herobg.png)] bg-[url(/images/herobg2.png)]'></div>
 
       {/* Hero Text */}
-      <div className='z-20 absolut lg:relative bottom-10 lg:bottom-0 mx-[80px]'>
-        <h3 className=' text-3xl lg:text-[58px] max-w-[100%] leading-tight text-white'>
+      <div className='z-20 absolut lg:relative bottom-10 lg:bottom-0 lg:mx-[80px] md:mx-[80px] mx-[30px]'>
+        <h3 className='text-3xl lg:text-[58px] max-w-[100%] leading-tight text-white'>
         No More Gatekeepers, Only Gateways
         </h3>
         <p className='text-lg lg:text-xl md:text-xl max-w-[100%] leading-tight text-white mt-10'>
@@ -66,7 +66,7 @@ const Hero = () => {
     <div className='items-center justify-between' style={{ letterSpacing: '0.06em' }}>
           <div
             style={banner}
-            className='py-6 text-xl text-gray-300 text-center'
+            className='py-6 lg:text-xl md:text-xl text-lg text-gray-300 text-center'
           >
             Unleash the Power of Future Internet 
           </div>

src/components/Mission.jsx

@@ -54,24 +54,16 @@ const Mission = () => {
           <div className='w-full h-full z-20 rounded-[50px] flex items-center justify-between  bg-gradient-to-tl from-primary2/20 to-primary2/20'>
             <motion.div
               transition={{ duration: 1.5 }}
-              className='flex-col lg:w-[45%]  ml-[89px]  h-[80%] justify-between flex'
+              className='flex-col lg:w-[45%]  lg:ml-[89px] md:ml-[89px]  h-[80%] justify-between flex lg:items-start md:items-start items-center'
             >
               <h3
                 style={roboto.style}
-                className='text-white max-w-[420px] leading-none font-medium text-3xl lg:text-[72px]'
+                className='text-white max-w-[420px] leading-none font-medium text-2xl lg:text-[72px] md:text-[72px] lg:text-start md:text-start text-center'
               >
                 Empowering Connectivity
               </h3>
-              <p className='text-base sm:text-[18px]  text-white font-thin'>
-                Netsepio introduces our groundbreaking decentralized internet
-                solution, designed to advance the adoption of decentralized
-                networks. Featuring superior capabilities, robust performance,
-                and competitive pricing, Netsepio is ideal for those exploring
-                the potential of decentralized internet. Built on the innovative
-                DePIN (Decentralized Physical Infrastructure Network), our
-                platform is tailored to enhance internet access and foster
-                global digital ecosystems, ensuring secure and unrestricted
-                connectivity for all.
+              <p className='text-base sm:text-[18px] text-white font-thin lg:text-start md:text-start text-center p-10 lg:p-0 md:p-0'>
+              NetSepio is revolutionizing internet access through the power of DePIN, empowering anyone to set up a VPN node and share their internet bandwidth, thus fostering a network that is both secure and universally accessible. By combining decentralized VPN (ÐVPN) and decentralized Wi-Fi (ÐWi-Fi) technologies, our mission is to make the internet safer, more private, and available to everyone.
               </p>
               <CustomBtn link='/about' title={"Our Mission"} />
             </motion.div>

src/components/Reviews.jsx

@@ -23,12 +23,12 @@ const Reviews = () => {
         priority
         alt='link'
       /> */}
-      <div className='z-20 flex flex-col items-start  gap-10'>
+      <div className='z-20 flex flex-col lg:items-start md:items-start items-center gap-10'>
         <p style={roboto.style} className='flex flex-col gap-1'>
-          <span className='text-white text-3xl lg:text-5xl font-medium'>
+          <span className='text-white text-2xl lg:text-5xl md:text-5xl font-medium text-center lg:text-start md:text-start'>
           Boost Your Online Security with 
           </span>
-          <span className='text-white text-3xl lg:text-5xl font-medium'>
+          <span className='text-white text-2xl lg:text-5xl md:text-5xl font-medium text-center lg:text-start md:text-start'>
           Trusted, Verified Reviews
           </span>
         </p>

src/components/WinSection.jsx

@@ -9,15 +9,15 @@ const WinSection = () => {
   return (
     <div
       style={roboto.style}
-      className='p-2 lg:p-20 flex w-full  my-[5%] flex-col items-start '
+      className='lg:p-20 md:p-20 flex w-full my-[5%] flex-col items-start'
     >
       <h3
-        className=' text-3xl lg:text-[52px] mb-[90px] w-full text-start
+        className=' text-2xl lg:text-[52px] lg:mb-[90px] md:mb-[90px] mb-[30px] w-full text-start lg:p-0 md:p-0 p-10
         text-white'
       >
         A Win-Win for Communities and Enterprises
       </h3>
-      <div className='w-full flex flex-col gap-12 sm:gap-0 lg:flex-row h-max justify-between' >
+      <div className='w-full flex flex-col gap-12 lg:flex-row md:flex-row h-max justify-between items-center' >
         {cardDetails2.map((item, index) => {
           return (
             <div