Added committee emails (fixing)

src/components/Contact/contact.scss

@@ -6,17 +6,28 @@
   place-items: center;
   align-content: center;
 
+  /* FIX 1: Push the content down below the navbar, and pull it up from the footer */
+  padding-top: 8rem; 
+  padding-bottom: 6rem; 
+
   h1 {
-    font-size: 6rem;
+    /* FIX 2: Shrink the massive desktop font size */
+    font-size: 4rem; 
+    text-align: center;
+    
+    /* FIX 3: Shrink it even more on mobile phones */
+    @media (max-width: 768px) {
+      font-size: 2.5rem;
+    }
   }
+  
   strong {
     font-size: 3rem;
   }
 
-  /* 1. Add a comma to target both the old component and your new section! */
   .contact-details, .committee-contacts {
     margin-top: 1rem;
-    width: 100%; /* Add this to ensure the container spans the full width */
+    width: 100%;
 
     h2 {
       font-size: 2.5rem;
@@ -24,20 +35,20 @@
       margin-bottom: 1.5rem;
       text-align: center;
       color: $dark;
+
+      /* Make the subheader a bit smaller on mobile too */
+      @media (max-width: 768px) {
+        font-size: 2rem;
+      }
     }
 
     ul {
       row-gap: 1rem;
       display: flex;
       flex-direction: column;
-
-      /* 1. Align the list items to the left so the icons line up perfectly */
       align-items: flex-start;
-      
-      /* 2. Shrink the invisible box around the list, then center that box! */
       width: fit-content;
       margin: 0 auto;
-
       list-style: none;
       padding: 0;
 
@@ -50,11 +61,16 @@
           color: $dark;
           font-size: 1.5rem;
           
+          /* Prevent long emails from breaking off the edge of small phone screens */
+          @media (max-width: 768px) {
+            font-size: 1.15rem;
+          }
+          
           svg {
             color: $dark;
-            /* Optional: Give the icon a strict width so they don't resize differently */
             width: 24px;
             height: auto;
+            flex-shrink: 0; /* Prevents the icon from squishing if text wraps */
           }
           &:hover {
             border-bottom: 2px solid $dark;