fix: smaller screen size format

Author: chelleDrC

app/contact/components/YourDetails.tsx

@@ -10,7 +10,10 @@ export default function YourDetails() {
 
       {/* Email Input */}
       <div className="mb-4">
-        <label htmlFor="email" className="block mb-2 font-semibold">
+        <label
+          htmlFor="email"
+          className="block mb-2 font-semibold text-web-body-font "
+        >
           Email
         </label>
         <Input
@@ -24,7 +27,10 @@ export default function YourDetails() {
 
       {/* Subject Input */}
       <div className="mb-4">
-        <label htmlFor="subject" className="block mb-2 font-semibold">
+        <label
+          htmlFor="subject"
+          className="block mb-2 font-semibold text-web-body-font "
+        >
           Subject
         </label>
         <Input
@@ -38,19 +44,25 @@ export default function YourDetails() {
 
       {/* Message Textarea */}
       <div className="mb-4">
-        <label htmlFor="message" className="block mb-2 font-semibold">
+        <label
+          htmlFor="message"
+          className="block mb-2 font-semibold text-web-body-font "
+        >
           Message
         </label>
         <textarea
           id="message"
           placeholder="Your Message"
-          className="w-full p-2 bg-transparent rounded text-base focus:outline-none caret-white"
+          className="w-full p-2 bg-transparent rounded text-base focus:outline-none caret-white text-web-body-font "
           rows={4}
           style={{ resize: 'none', maxHeight: '150px' }}
         />
       </div>
 
-      <Button variant="footer" className="max-w-[148px] text-dark-green">
+      <Button
+        variant="footer"
+        className="max-w-[148px] text-dark-green text-web-body-font "
+      >
         Send
       </Button>
     </div>

app/contact/page.tsx

@@ -88,30 +88,37 @@ export default function ContactPage() {
       </svg>
       <Container
         className={`relative min-h-screen justify-center items-center flex gap-[46px] ${
-          width < 1024 ? 'flex-col' : 'flex-row'
+          width < 1024 ? 'flex-col mt-[100px]' : 'flex-row'
         }`}
       >
         <div
           className={`flex flex-col gap-[80px] items-start justify-start ${
-            width < 1024 ? 'text-center w-[531px] items-center' : ''
+            width < 1024
+              ? 'text-center justify-center sw-[531px] items-center'
+              : ''
           }`}
         >
-          <div className="flex flex-col gap-[20px] text-white">
+          <div className="flex flex-col gap-[20px] text-white sm:items-center lg:items-start">
             <h1 className="text-web-title-font font-bold">Contact Us</h1>
-            <p className="text-web-body-font">
+            <p className="text-web-body-font sm:w-[300px]">
               Get in touch with us for any questions, concerns, or to learn more
               about our organization and initiatives
             </p>
           </div>
-          <div className="flex gap-[28px]">
+          <div
+            className={`flex gap-[28px] ${
+              width < 1024 ? 'flex-col items-center gap-[10px]' : 'flex-row'
+            }`}
+          >
             <Image
               src={'/assets/icons/email-us.svg'}
               width={63}
               height={63}
               alt=""
+              className=""
             />
             <div className="flex flex-col text-white">
-              <p className="text-[#FFC201] leading-[49px] text-web-medium-font font-bold text-left">
+              <p className="text-[#FFC201] leading-[49px] text-web-medium-font font-bold">
                 E-mail us
               </p>
               <p className="text-web-body-font">durianpy.davao@gmail.com</p>