fix about section spacing and text

web/app/globals.css

@@ -684,31 +684,36 @@ body {
 
 .info-page {
   background: linear-gradient(to bottom, #f9f9f9, #ffffff);
-  padding-bottom: 4rem;
 }
 
 .info-hero {
   text-align: center;
-  padding: 4rem 2rem 3rem;
+  padding: 2.5rem 2rem 1.5rem;
 }
 
 .info-title {
-  font-size: 3rem;
+  font-size: 1.6rem;
   color: #333;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
   font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 
 .info-subtitle {
-  font-size: 1.25rem;
-  color: #666;
-  margin-bottom: 1.5rem;
+  font-size: 1rem;
+  color: #888;
+  margin-bottom: 1rem;
+  max-width: 520px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.6;
 }
 
 .info-content {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 2rem 4rem;
+  padding: 0 2rem 3rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
@@ -3147,19 +3152,19 @@ img, video, iframe {
 
 @media (max-width: 768px) {
   .info-title {
-    font-size: 2rem;
+    font-size: 1.3rem;
   }
   .info-subtitle {
-    font-size: 1.1rem;
+    font-size: 0.95rem;
   }
 }
 
 @media (max-width: 480px) {
   .info-title {
-    font-size: 1.6rem;
+    font-size: 1.2rem;
   }
   .info-subtitle {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
   .image-links-container {
     grid-template-columns: 1fr;

web/app/page.js

@@ -79,8 +79,8 @@ export default function Home() {
       {/* About Us */}
       <section className="info-page">
         <div className="info-hero">
-          <h2 className="info-title">About Leon&apos;s Pet Store</h2>
-          <p className="info-subtitle">Your trusted local destination for pet care, adoption, and supplies — built on a love for animals and community.</p>
+          <h2 className="info-title">About Us</h2>
+          <p className="info-subtitle">A full-service pet store built on a love for animals and community.</p>
           <div className="title-decoration"></div>
         </div>
         <div className="info-content">