UI styling update

app/health/rare-disorders/components/SolutionsOffer.jsx

@@ -11,19 +11,30 @@ export default function SolutionsOffer() {
   ];
 
   return (
-    <section className="mx-auto px-10 pt-12">
-      <h2 className="text-2xl font-semibold text-gray-700 text-left pb-2 mb-4">Our Rare Disease Solutions Offer</h2>
-      <div className="grid sm:grid-cols-2 gap-6">
+    <div className="mx-auto px-8 py-6">
+      <h2 className="text-3xl font-bold text-teal-700 mb-4">Our Rare Disease Solutions Offer</h2>
+      
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        Comprehensive genomic sequencing solutions designed to unlock genetic insights 
+        and accelerate diagnosis for rare disease patients and their families.
+      </p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
         {solutions.map((sol, idx) => (
           <div
             key={idx}
-            className="border rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer"
+            className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
+            style={{backgroundColor: '#f2fcfc'}}
           >
-            <h3 className="text-xl font-semibold text-gray-700 mb-2">{sol.name}</h3>
-            <p className="text-gray-600 leading-relaxed text-base">{sol.desc}</p>
+            <div className="flex items-start">
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">{sol.name}</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">{sol.desc}</p>
+              </div>
+            </div>
           </div>
         ))}
       </div>
-    </section>
+    </div>
   );
 }