fix hero section layout in homepage

src/components/home/HowItWorks.tsx

@@ -26,10 +26,10 @@ const STEPS = [
 
 export function HowItWorks() {
   return (
-    <section className="bg-[#EEDDF3] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden pt-12 md:pt-16 pb-8 md:pb-10 px-6 md:px-12 lg:px-20 xl:px-24">
-      <div className="max-w-container-max mx-auto">
+    <section className="border-t border-brand-dark/10 pt-12 md:pt-16 lg:pt-20 pb-6 md:pb-8 lg:pb-10">
+      <div className="w-full">
         {/* Header Section */}
-        <div className="text-center mb-8 md:mb-10">
+        <div className="text-center mb-12 md:mb-16">
           <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
             Simple Process
           </span>