Hot Fix responsive font

components/layouts/ContactFormSection.jsx

@@ -15,9 +15,9 @@ const ContactFormSection = ({
       </div>
       <div className="relative z-10 flex flex-col items-center justify-center h-full">
         <div className="relative flex justify-center items-end w-full mb-20">
-          <h1 className="text-6xl font-normal text-white">{text}</h1>
+          <h1 className="lg:text-5xl md:text-4xl sm:text-3xl text-3xl text-center text-white break-normal">{text}</h1>
         </div>
-        <div className="flex justify-start space-x-4">
+        <div className="flex justify-start space-x-4 text-center text-white break-normal">
         <ContactButton
         buttonText={buttonText}
         email={email}

components/layouts/Section.jsx

@@ -79,13 +79,23 @@ const Section = ({
       )}
       <div className="relative z-10 flex flex-col items-center justify-center h-full">
         <div className="relative flex justify-center items-end w-full mb-20">
-          <Heading className={`text-6xl font-normal text-white ${isMobile ? 'text-4xl md:text-5xl mx-4 px-2' : ''}`}>{text}</Heading>
+          <Heading
+            className="lg:text-5xl md:text-4xl sm:text-3xl text-3xl text-center text-white break-normal"
+          >
+            {text}
+          </Heading>
         </div>
         <div className="flex justify-start space-x-4">
           {isMobile && !hasInteracted ? (
-            <VideoButton buttonVideoURL={buttonVideoURL} buttonOneText={buttonOneText} />
+            <VideoButton
+              buttonVideoURL={buttonVideoURL}
+              buttonOneText={buttonOneText}
+            />
           ) : (
-            <VideoButton buttonVideoURL={buttonVideoURL} buttonOneText={buttonOneText} />
+            <VideoButton
+              buttonVideoURL={buttonVideoURL}
+              buttonOneText={buttonOneText}
+            />
           )}
           {buttonLink && (
             <Link

components/layouts/SectionTwo.jsx

@@ -15,7 +15,7 @@ const SectionTwo = ({
       </div>
       <div className="relative z-10 flex flex-col items-center justify-center h-full">
         <div className="relative flex justify-center items-end w-full mb-20">
-          <h1 className="text-6xl font-normal text-white">{text}</h1>
+          <h1 className="lg:text-5xl md:text-4xl sm:text-3xl text-3xl text-center text-white break-normal">{text}</h1>
         </div>
         <div className="flex justify-start space-x-4">
         <Button

tailwind.config.js

@@ -60,7 +60,13 @@ module.exports = {
     "overflow-auto",
     "overflow-hidden",
     "scrollbar-hidden",
-    
+    "text-xl",
+    "text-2xl",
+    "text-lg",
+    "md:",
+    "text-sm",
+    "sm:",
+    "text-3xl",
   ],
   theme: {
     extend: {