Fix overflow

src/components/approach.tsx

@@ -26,7 +26,7 @@ const Approach = () => {
               <h2 className='lg:text-4xl text-display-xs font-semibold text-center mb-2 text-white'>
                 Evaluate
               </h2>
-              <p className='text-body-md font-normal text-neutral-600 text-center text-neutral-300'>
+              <p className='text-body-md font-normal text-center text-neutral-300'>
                 We begin with a detailed site evaluation to understand your
                 energy monitoring needs, from overall consumption to specific
                 equipment. <br />
@@ -43,7 +43,7 @@ const Approach = () => {
               <h2 className='lg:text-4xl text-display-xs font-semibold text-center mb-2 text-white'>
                 Deploy
               </h2>
-              <p className='text-body-md font-normal text-neutral-600 text-center text-neutral-300'>
+              <p className='text-body-md font-normal text-center text-neutral-300'>
                 We provide an all-inclusive package of hardware, connectivity,
                 and software, specifically tailored to your logistical
                 operations. <br /> Our turnkey solutions ensure a smooth and
@@ -61,7 +61,7 @@ const Approach = () => {
               <h2 className='lg:text-4xl text-display-xs font-semibold text-center mb-2 text-white'>
                 Analyse
               </h2>
-              <p className='text-body-md font-normal text-neutral-600 text-center text-neutral-300'>
+              <p className='text-body-md font-normal text-center text-neutral-300'>
                 Benefit from immediate analytics post-deployment, offering
                 instant access to crucial energy data. <br /> Empower your
                 decision-making with timely and accurate energy insights.

src/components/hero.tsx

@@ -6,7 +6,7 @@ const Hero = () => {
     <div id='#hero' className='container-border-bottom'>
       <div className='container mx-auto'>
         <div className='lg:py-20 md:py-14 pt-5 pb-5'>
-          <div className='flex flex-col relative lg:py-0 pb-10'>
+          <div className='flex flex-col relative lg:py-0 pb-10 overflow-hidden sm:overflow-visible'>
             <div className='absolute lg:block hidden h-16 bg-white bottom-0 left-0 right-0'></div>
             <div className='absolute lg:block hidden h-16 bg-white top-0 left-0 right-0'></div>
             <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-8 items-center  relative'>
@@ -21,10 +21,14 @@ const Hero = () => {
                   optimise their energy usage, paving the way for a smarter,
                   more efficient operational landscape.
                 </p>
-                <Button label='Speak to an Expert' link='mailto:sales@wia.io' size='lg' />
+                <Button
+                  label='Speak to an Expert'
+                  link='mailto:sales@wia.io'
+                  size='lg'
+                />
               </div>
 
-              <div className='circle-background flex relative'>
+              <div className='circle-background flex relative overflow-hidden sm:overflow-visible'>
                 <img
                   src='./energy-page.png'
                   alt='energy-page'

src/components/layout.tsx

@@ -7,12 +7,12 @@ import Footer from "./footer";
 
 const Layout = ({ children }: any) => (
   <>
-    <Helmet>
+    <Helmet> 
       <script src="https://gumroad.com/js/gumroad.js" />
       <script src="https://kit.fontawesome.com/d7b6a45a19.js" crossOrigin="anonymous"></script>
       <link rel="icon" href="https://cdn.wia.io/website/images/favicons/android-chrome-192x192.png" />
       <link rel="stylesheet" href="https://kit.fontawesome.com/d7b6a45a19.css" crossOrigin="anonymous"></link>
-
+      <meta name="viewport" />
     </Helmet>
     <Header />
     <div>

src/styles/styles.scss

@@ -73,6 +73,7 @@ body {
 
 .approach-section {
   position: relative;
+  overflow: hidden;
   .approach-background {
     width: 200%;
     height: 100%;