Update mobile to xl. Responsive section 4

src/components/globe-map/marker.tsx

@@ -16,11 +16,11 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
   const { title, subtitle, description, video, legend } = popupContent[index];
 
   return (
-    <div className="relative -mt-[140px] -ml-[140px] lg:-ml-[140px] flex justify-center">
-      <div className='w-full lg:w-[662px] h-[350px] pl-8 pr-4 py-8 bg-white/20 backdrop-blur-[15px] text-white gap-6 inline-flex'>
+    <div className="relative -mt-[140px] -ml-[140px] xl:-ml-[140px] flex justify-center">
+      <div className='w-full xl:w-[662px] h-[350px] pl-8 pr-4 py-8 bg-white/20 backdrop-blur-[15px] text-white gap-6 inline-flex'>
         <div className="gap-6 flex">
-          <div className="min-w-[143px] w-[143px] h-[143px] lg:min-w-[286px] lg:w-[286px] lg:h-[286px] justify-center items-center flex">
-            <video className="w-[140px] h-[140px] lg:w-[280px] lg:h-[280px] lg:rounded-[50px]" autoPlay loop muted>
+          <div className="min-w-[143px] w-[143px] h-[143px] xl:min-w-[286px] xl:w-[286px] xl:h-[286px] justify-center items-center flex">
+            <video className="w-[140px] h-[140px] xl:w-[280px] xl:h-[280px] xl:rounded-[50px]" autoPlay loop muted>
               <source src={video} type="video/mp4" />
             </video>
           </div>
@@ -48,7 +48,7 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
                 <img src={legend.image} alt="Amazon legend" className="h-3" />
               </div>
             </div>
-            <div className="text-sm h-[160px] overflow-auto leading-tight lg:w-[304px]">
+            <div className="text-sm h-[160px] overflow-auto leading-tight xl:w-[304px]">
               <div className='max-w-[258px]'>
 
                 {description}

src/components/header/index.tsx

@@ -33,7 +33,7 @@ export default function Header() {
       })
     }>
       <div className="container flex justify-between items-center">
-        <Logo className="w-40 lg:w-60 h-10 text-white" />
+        <Logo className="w-40 xl:w-60 h-10 text-white" />
         <MenuButton />
       </div>
     </header>

src/components/intro/index.tsx

@@ -17,15 +17,15 @@ export default function Intro() {
     }
   }
   return (
-    <section className="relative min-h-[600px] lg:h-[110vh] bg-blue-900">
+    <section className="relative min-h-[600px] xl:h-[110vh] bg-blue-900">
       <HeroVideo />
       <Lines verticalClassName="left-8 w-[calc(100vh-16px)]" sectionName='intro' columns={[64, 254, 270, 430, 1074]} rows={[204, 444, 516, 559, 602]} />
-      <div className='container relative pt-[110px] lg:pt-[198px] space-y-[30px] pl-8 lg:pl-24'>
-        <h1 className='lg:max-w-[1012px]'>
-          <div className="text-light-green text-2xl lg:text-5xl font-semibold">Digital Twins: </div>
-          <div className="text-white text-2xl lg:text-5xl font-semibold">Innovative Research for a Sustainable Future</div>
+      <div className='container relative pt-[110px] xl:pt-[198px] space-y-[30px] pl-8 xl:pl-24'>
+        <h1 className='xl:max-w-[1012px]'>
+          <div className="text-light-green text-2xl xl:text-5xl font-semibold">Digital Twins: </div>
+          <div className="text-white text-2xl xl:text-5xl font-semibold">Innovative Research for a Sustainable Future</div>
         </h1>
-        <VerticalCarousel className="text-white text-sm lg:text-2xl">
+        <VerticalCarousel className="text-white text-sm xl:text-2xl">
           <div>
             Bridging data and discovery with state-of-the-art digital twin technology
           </div>
@@ -54,7 +54,7 @@ export default function Intro() {
           </MotionButton>
         </div>
       </div>
-      <Marquee className="w-full text-light-green lg:text-xl gap-12 border-t border-light-green py-4 absolute bottom-0">
+      <Marquee className="w-full text-light-green xl:text-xl gap-12 border-t border-light-green py-4 absolute bottom-0">
         <span className='ml-10 pl-10 border-l h-8 border-light-green' >Bridging data and discovery with state-of-the-art digital twin technology</span>
         <span className='ml-10 pl-10 border-l h-8 border-light-green' >Advancing climate knowledge through digital twins</span>
         <span className='ml-10 pl-10 border-l h-8 border-light-green' >Harnessing advanced simulations to adapt to and mitigate climate impacts</span>

src/components/know-more-button/index.tsx

@@ -9,7 +9,7 @@ const KnowMoreButton = ({ onClick, opened, className }: {
 }) => (
   <Button variant="vanilla" size="auto" className={cn("justify-center items-center gap-4 group", className)} onClick={onClick}>
     <div className="justify-center items-center gap-4 flex">
-      <div className="text-base lg:text-lg underline tracking-tight">{opened ? 'Show less' : 'Know more'}</div>
+      <div className="text-base xl:text-lg underline tracking-tight">{opened ? 'Show less' : 'Know more'}</div>
       <ArrowDown className={cn("w-6 h-6 group-hover:translate-y-1 transition-transform duration-300",
         { "rotate-180": opened })}
       />

src/components/menu/index.tsx

@@ -37,14 +37,14 @@ export default function Menu() {
     <>
       {openedMenu && <MenuLines verticalClassName="absolute right-0" columns={[0, 254, 270, 430, 1074]} />}
       <motion.nav
-        className="fixed top-0 w-full overflow-auto lg:w-[470px] right-0 h-full bg-light-green flex flex-col p-10 justify-between z-50"
+        className="fixed top-0 w-full overflow-auto xl:w-[470px] right-0 h-full bg-light-green flex flex-col p-10 justify-between z-50"
         initial={{ x: "100%" }}
         animate={{ x: openedMenu ? 0 : "100%" }}
         transition={{ type: "linear", duration: 0.3 }}
       >
         <div className="flex flex-col gap-[72px] pb-10">
           <CloseMenuButton />
-          <ul className="text-xl lg:text-3xl text-green-700 font-semibold space-y-8 max-w-[292px]">
+          <ul className="text-xl xl:text-3xl text-green-700 font-semibold space-y-8 max-w-[292px]">
             <li>
               <Link href="/">
                 <HoverRepeatAnimation>Home</HoverRepeatAnimation></Link>

src/components/section-1/index.tsx

@@ -20,19 +20,19 @@ export default function Section1() {
     'grid-cols-[1fr_1fr_1fr]': hoveredIndex === null,
   };
   return (
-    <section className="relative bg-white py-6 pb-[60px] lg:py-20 scroll-mt-8" id="section-1">
+    <section className="relative bg-white py-6 pb-[60px] xl:py-20 scroll-mt-8" id="section-1">
       <Lines verticalClassName="px-[152px]" sectionName="section-1" rows={[openedKnowMore ? 632 : 474, (!hoveredIndex || hoveredIndex === 0) ? 1108 : 1136]} colorClass="bg-blue-900/10" columnsNumber={3} hoveredIndex={hoveredIndex} />
       <div className="container g:px-[150px]">
-        <div className="max-w-[594px] text-green-700 space-y-5 mb-6 border-b lg:border-0 lg:mb-0 pb-6 lg:pb-20">
-          <div className="text-sm lg:text-lg font-medium uppercase">Understanding digital twins</div>
-          <h3 className="text-xl lg:text-2xl">A digital twin is a highly sophisticated virtual replica of a physical system, process, or object. It includes a tight integration between models, data and decisions with applications across multiple areas of science, technology, and society.</h3>
+        <div className="max-w-[594px] text-green-700 space-y-5 mb-6 border-b xl:border-0 xl:mb-0 pb-6 xl:pb-20">
+          <div className="text-sm xl:text-lg font-medium uppercase">Understanding digital twins</div>
+          <h3 className="text-xl xl:text-2xl">A digital twin is a highly sophisticated virtual replica of a physical system, process, or object. It includes a tight integration between models, data and decisions with applications across multiple areas of science, technology, and society.</h3>
           <KnowMoreButton onClick={() => setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} />
           <AnimatePresence>
             {openedKnowMore && <motion.div
               initial={{ opacity: 0, height: 0 }}
               exit={{ opacity: 0, height: 0 }}
               animate={{ opacity: 1, height: 'auto' }}
-              className="text-sm lg:text-base"
+              className="text-sm xl:text-base"
             >
               In the context of climate science, a digital twin of the Earth system integrates extensive data sets from real-world observations and simulations to create a dynamic, interactive model. This virtual environment allows the climate adaptation and mitigation community to experiment, predict, and analyse different scenarios with unprecedented detail, quality and consistency, while allowing users to address relevant ‘what-if’ questions.
             </motion.div>}
@@ -85,54 +85,54 @@ export default function Section1() {
               ))}
             </AnimatePresence>
           </div>}
-        <div className={cn("text-green-700 grid mt-6 lg:mt-0")}>
+        <div className={cn("text-green-700 grid mt-6 xl:mt-0")}>
           <div className={cn(gridColumns)}>
             <FadeIn delay={0.5}>
-              <h4 className="text-lg lg:text-xl pr-10 mb-4 col-span-1 max-w-[350px]">
+              <h4 className="text-lg xl:text-xl pr-10 mb-4 col-span-1 max-w-[350px]">
                 How the digital twin for climate change adaptation helps research and society?
               </h4>
             </FadeIn>
           </div>
           <FadeIn delay={1}>
-            <div className={cn(gridColumns, 'mb-2 lg:mb-[30px]')}>
+            <div className={cn(gridColumns, 'mb-2 xl:mb-[30px]')}>
               <div className="col-start-2">
-                <div className="flex-col gap-2 lg:gap-4 flex pr-10">
+                <div className="flex-col gap-2 xl:gap-4 flex pr-10">
                   <div className="flex-col flex " >
-                    <div className="lg:text-lg leading-relaxed">01</div>
-                    <div className="lg:text-lg leading-relaxed">Understanding processes:</div>
+                    <div className="xl:text-lg leading-relaxed">01</div>
+                    <div className="xl:text-lg leading-relaxed">Understanding processes:</div>
                   </div>
-                  <div className="text-xs lg:text-sm leading-tight max-w-[350px]">The digital twin produces simulations that allow researchers to understand the complex interactions of phenomena in the Earth-system that determine how our planet evolves.</div>
+                  <div className="text-xs xl:text-sm leading-tight max-w-[350px]">The digital twin produces simulations that allow researchers to understand the complex interactions of phenomena in the Earth-system that determine how our planet evolves.</div>
                 </div>
               </div>
               <div className="col-start-3">
-                <div className="flex-col gap-2 mt-2 lg:mt-0 lg:gap-4 flex pr-10">
+                <div className="flex-col gap-2 mt-2 xl:mt-0 xl:gap-4 flex pr-10">
                   <div className="flex-col flex">
-                    <div className="lg:text-lg leading-relaxed">02</div>
-                    <div className="lg:text-lg leading-relaxed">Simulating scenarios:</div>
+                    <div className="xl:text-lg leading-relaxed">02</div>
+                    <div className="xl:text-lg leading-relaxed">Simulating scenarios:</div>
                   </div>
-                  <div className="lg:text-xs text-sm leading-tight max-w-[350px]">The digital twin allows researchers, policy makers and practitioners to develop and test different climate and impact scenarios that help understand what might happen under various conditions.</div>
+                  <div className="xl:text-xs text-sm leading-tight max-w-[350px]">The digital twin allows researchers, policy makers and practitioners to develop and test different climate and impact scenarios that help understand what might happen under various conditions.</div>
                 </div>
               </div>
             </div>
           </FadeIn>
           <FadeIn delay={1.3}>
             <div className={cn(gridColumns)}>
               <div className="col-start-2">
-                <div className="flex-col gap-2 lg:gap-4 flex pr-10">
+                <div className="flex-col gap-2 xl:gap-4 flex pr-10">
                   <div className="flex-col flex ">
-                    <div className="lg:text-lg leading-relaxed">03</div>
-                    <div className="lg:text-lg leading-relaxed">Improving decision-making:</div>
+                    <div className="xl:text-lg leading-relaxed">03</div>
+                    <div className="xl:text-lg leading-relaxed">Improving decision-making:</div>
                   </div>
-                  <div className="text-xs lg:text-sm leading-tight max-w-[350px]">By providing clear and accurate insights on the past, present and future, the digital twin can support decision-makers, policy-makers and world leaders make better informed decisions to address climate-related risks effectively and sustainably</div>
+                  <div className="text-xs xl:text-sm leading-tight max-w-[350px]">By providing clear and accurate insights on the past, present and future, the digital twin can support decision-makers, policy-makers and world leaders make better informed decisions to address climate-related risks effectively and sustainably</div>
                 </div>
               </div>
               <div className="col-start-3">
-                <div className="flex-col gap-2 mt-2 lg:mt-0 lg:gap-4 flex pr-10">
+                <div className="flex-col gap-2 mt-2 xl:mt-0 xl:gap-4 flex pr-10">
                   <div className="flex-col flex">
-                    <div className="lg:text-lg leading-relaxed">04</div>
-                    <div className="lg:text-lg leading-relaxed">Enhancing interdisciplinary and transdisciplinarity:</div>
+                    <div className="xl:text-lg leading-relaxed">04</div>
+                    <div className="xl:text-lg leading-relaxed">Enhancing interdisciplinary and transdisciplinarity:</div>
                   </div>
-                  <div className="text-xs lg:text-sm leading-tight max-w-[350px]">Virtual models support collaboration among users from different disciplines, impact sectors, and geographical locations, ensuring a holistic approach to studying and solving real climate challenges.</div>
+                  <div className="text-xs xl:text-sm leading-tight max-w-[350px]">Virtual models support collaboration among users from different disciplines, impact sectors, and geographical locations, ensuring a holistic approach to studying and solving real climate challenges.</div>
                 </div>
               </div>
             </div>

src/components/section-2/index.tsx

@@ -177,14 +177,14 @@ export default function Section2() {
                   animate={{ width: globePhase === 1 ? 0 : '100%' }}
                   transition={{ duration: 0.1, ease: 'linear' }}
                 >
-                  <div className="text-light-green text-base lg:text-lg uppercase tracking-tight">UNLOCKING CLIMATE POTENTIAL</div>
-                  <div className="text-light-green text-2xl lg:text-4xl max-w-[90vw] lg:max-w-[720px]">
+                  <div className="text-light-green text-base xl:text-lg uppercase tracking-tight">UNLOCKING CLIMATE POTENTIAL</div>
+                  <div className="text-light-green text-2xl xl:text-4xl max-w-[90vw] xl:max-w-[720px]">
                     High-quality information <br />from global to local scale
                   </div>
                 </motion.div>
               </motion.div>
               <motion.div
-                className={cn("absolute text-light-green leading-relaxed w-[70vw] lg:w-[500px] flex flex-col gap-2 lg:gap-6 transition-opacity",
+                className={cn("absolute text-light-green leading-relaxed w-[70vw] xl:w-[500px] flex flex-col gap-2 xl:gap-6 transition-opacity",
                   {
                     'hidden opacity-0': globePhase !== 1,
                     'opacity-100': globePhase === 1

src/components/section-3/index.tsx

@@ -60,7 +60,7 @@ const CasesText = ({ hoveredIndex, setHoveredIndex, content, index }:
       <ArrowRight className="w-4 h-4" />
     </Link>}</>
   return (
-    <div className="pt-3 pb-4 lg:pt-10 lg:pb-20 pl-1 flex-col gap-4 flex text-green-700 text-base" onMouseEnter={() => setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)}>
+    <div className="pt-3 pb-4 xl:pt-10 xl:pb-20 pl-1 flex-col gap-4 flex text-green-700 text-base" onMouseEnter={() => setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)}>
       <div className="leading-relaxed">
         <div>{number}</div>
         <div>{title}</div>
@@ -128,9 +128,9 @@ export default function Section3() {
   const isMobile = useIsMobile();
   return (
     <section className="relative bg-white pt-20 scroll-mt-8" id="section-3">
-      <Lines verticalClassName="lg:px-[152px]" sectionName="section-3" rows={[1074]} colorClass="bg-blue-900/10" columnsNumber={5} hoveredIndex={hoveredIndex} />
-      <div className="container lg:px-[150px] flex flex-col lg:block">
-        <div className="flex flex-col-reverse items-center lg:items-start lg:flex-row pb-[60px] lg:pb-[150px] gap-6 lg:gap-[69px]">
+      <Lines verticalClassName="xl:px-[152px]" sectionName="section-3" rows={[1074]} colorClass="bg-blue-900/10" columnsNumber={5} hoveredIndex={hoveredIndex} />
+      <div className="container xl:px-[150px] flex flex-col xl:block">
+        <div className="flex flex-col-reverse items-center xl:items-start xl:flex-row pb-[60px] xl:pb-[150px] gap-6 xl:gap-[69px]">
           <div className="relative" ref={visualizationRef}>
             <Image
               alt=""
@@ -200,10 +200,10 @@ export default function Section3() {
               </div>
             </div>
           </div>
-          <div className="max-w-[594px] text-green-700 space-y-3 lg:space-y-5 pb-10">
-            <div className="lg:text-lg font-medium uppercase">From data to impact</div>
-            <h2 className="text-2xl lg:text-3xl font-medium pb-8 lg:pb-20">Integrating Climate and Impact Models</h2>
-            <h3 className="text-xl lg:text-2xl pb-4 lg:pb-10">Digital twins offer a powerful capability: integrating the physical processes simulated in climate models with the modelling of aspects relevant for impact sectors.</h3>
+          <div className="max-w-[594px] text-green-700 space-y-3 xl:space-y-5 pb-10">
+            <div className="xl:text-lg font-medium uppercase">From data to impact</div>
+            <h2 className="text-2xl xl:text-3xl font-medium pb-8 xl:pb-20">Integrating Climate and Impact Models</h2>
+            <h3 className="text-xl xl:text-2xl pb-4 xl:pb-10">Digital twins offer a powerful capability: integrating the physical processes simulated in climate models with the modelling of aspects relevant for impact sectors.</h3>
             <KnowMoreButton onClick={() => setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} />
             <AnimatePresence>
               {openedKnowMore && <motion.div
@@ -251,7 +251,7 @@ export default function Section3() {
             ))}
           </AnimatePresence>
         </div>}
-        {!isMobile && <div className={cn('hidden lg:visible min-h-[290px]', gridColumns)} id="use-cases">
+        {!isMobile && <div className={cn('hidden xl:visible min-h-[290px]', gridColumns)} id="use-cases">
           {Array(5).fill(null).map((_, index) => (
             <CasesText content={USE_CASES[index]} index={index} hoveredIndex={hoveredIndex} setHoveredIndex={setHoveredIndex} />
           ))}