mobile screen issue fixed

src/app/brands/page.tsx

@@ -180,7 +180,7 @@ export default function BrandsPage() {
                 Nearle connects FMCG brands, food companies, and local manufacturers with verified neighbourhood stores and their loyal customer communities.
               </p>
 
-              <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
+              <div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
                 <Link
                   href="/contact"
                   className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"

src/app/delivery-partners/page.tsx

@@ -218,7 +218,7 @@ export default function DeliveryPartnersPage() {
                 Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood — on your own schedule, at your own pace.
               </p>
 
-              <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
+              <div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
                 <Link
                   href="/contact"
                   className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"

src/app/merchants/page.tsx

@@ -191,7 +191,7 @@ export default function MerchantsPage() {
                 Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business — without leaving your store.
               </p>
 
-              <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
+              <div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
                 <Link
                   href="/contact"
                   className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"

src/components/businesses/BusinessFeaturesGrid.tsx

@@ -507,24 +507,20 @@ export function BusinessFeaturesGrid() {
             whileInView="visible"
             viewport={viewport}
           >
-            <div className="grid grid-cols-2" style={{ gap: 28 }}>
+            <div className="grid grid-cols-2 gap-3 sm:gap-[28px]">
               {CARDS.map((card) => {
                 const { CardIllus } = card;
                 return (
                   <motion.div
                     key={card.title}
                     variants={scaleIn}
-                    className={`relative flex flex-col overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_28px_rgba(99,48,214,0.09)] ${card.bg}`}
+                    className={`relative flex flex-col overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_28px_rgba(99,48,214,0.09)] rounded-[34px] p-3.5 sm:p-[28px] min-h-[190px] sm:min-h-[330px] ${card.bg}`}
-                    style={{ borderRadius: 34, padding: 28, minHeight: 330 }}
                   >
                     <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${card.iconBg}`}>
                       <MaterialIcon icon={card.iconName} size={18} />
                     </div>
-                    <div
+                    <div className="flex-1 flex items-center justify-center overflow-hidden my-1 sm:my-2">
-                      className="flex-1 flex items-center justify-center overflow-hidden"
+                      <div className="w-full h-[90px] sm:h-[160px]">
-                      style={{ margin: "8px 0" }}
-                    >
-                      <div className="w-full" style={{ height: 160 }}>
                         <CardIllus />
                       </div>
                     </div>

src/components/heroes/AboutHero.tsx

@@ -104,7 +104,7 @@ export function AboutHero() {
 
             <motion.div
               variants={ctaVariant}
-              className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
+              className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
             >
               <a
                 href="#story-section"

src/components/heroes/BusinessHero.tsx

@@ -77,7 +77,7 @@ export function BusinessHero() {
 
             <motion.div
               variants={ctaVariant}
-              className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
+              className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
             >
               <Link
                 href="/contact"

src/components/heroes/PeopleHero.tsx

@@ -71,7 +71,7 @@ export function PeopleHero() {
 
             <motion.div
               variants={ctaVariant}
-              className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
+              className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
             >
               <a
                 href="#download-section"

src/components/home/Hero.tsx

@@ -114,10 +114,6 @@ export function Hero() {
         </svg>
       </div>
 
-      {/* 5. Three small X marks */}
-      <div className="absolute top-[8%] left-[48%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
-      <div className="hidden lg:block absolute top-[52%] left-[44%] text-[#6D28D9]/20 font-bold text-lg pointer-events-none select-none z-0">✕</div>
-      <div className="absolute bottom-[14%] right-[5%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
 
       {/* 6. Large partial purple circle (bottom-right corner) */}
       <motion.div
@@ -167,7 +163,7 @@ export function Hero() {
           </motion.p>
 
           {/* CTAs: primary scales in, secondary slides from left */}
-          <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
+          <div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
             <motion.div
               variants={primaryCtaVariant}
               whileHover={{ scale: 1.03, transition: { duration: 0.2, ease: EASE } }}
@@ -175,7 +171,7 @@ export function Hero() {
             >
               <Link
                 href="/people"
-                className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-colors duration-200 block"
+                className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-5 sm:px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-colors duration-200 block"
               >
                 Explore Stores
               </Link>
@@ -187,7 +183,7 @@ export function Hero() {
             >
               <Link
                 href="/people#download-section"
-                className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-colors duration-200 hover:bg-[#6D28D9]/5 block"
+                className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-5 sm:px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-colors duration-200 hover:bg-[#6D28D9]/5 block"
               >
                 Get the App
               </Link>

src/components/layout/HeroVisualCollage.tsx

@@ -76,8 +76,6 @@ export function HeroVisualCollage({
         </svg>
       </div>
 
-      <div className="absolute top-12 left-6 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
-      <div className="absolute bottom-16 right-8 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
 
       {/* LEFT IMAGE PANEL */}
       {leftImage && (

src/components/ui/FeatureStatsRow.tsx

@@ -18,32 +18,49 @@ type FeatureStatsRowProps = {
 export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
   return (
     <motion.div
-      className={`w-full py-6 md:py-8 ${className}`}
+      className={`w-full py-5 md:py-8 ${className}`}
       variants={staggerContainer}
       initial="hidden"
       whileInView="visible"
       viewport={viewport}
     >
-      <div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-y-6 gap-x-4 lg:gap-0">
+      <div className="grid grid-cols-2 lg:flex lg:flex-row lg:items-center lg:justify-between gap-3 lg:gap-0">
         {items.map((item, index) => (
           <motion.div
             key={item.title}
             variants={fadeUp}
-            className={`flex items-center gap-3.5 lg:flex-1 px-3 lg:px-8 text-left ${
+            className={[
-              index < items.length - 1
+              // ── Mobile card (< 640 px) ──────────────────────────────────
-                ? "lg:border-r lg:border-[#6330D6]/10"
+              "flex flex-col gap-3",
-                : ""
+              "bg-white",
-            }`}
+              "border border-[#6330D6]/10",
+              "rounded-2xl",
+              "shadow-[0_2px_14px_rgba(99,48,214,0.07)]",
+              "p-4",
+              // ── Tablet strip (640 px – 1023 px) ────────────────────────
+              "sm:flex-row sm:items-center sm:gap-3.5",
+              "sm:bg-transparent",
+              "sm:border-0",
+              "sm:rounded-none",
+              "sm:shadow-none",
+              "sm:px-3 sm:py-2",
+              // ── Desktop strip (1024 px +) ───────────────────────────────
+              "lg:flex-1 lg:px-8 lg:py-0",
+              "text-left",
+              index < items.length - 1 ? "lg:border-r lg:border-[#6330D6]/10" : "",
+            ]
+              .filter(Boolean)
+              .join(" ")}
           >
             <div className="w-9 h-9 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
               <MaterialIcon icon={item.icon} size={18} />
             </div>
             <div className="min-w-0">
-              <h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight truncate">
+              <h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight">
                 {item.title}
               </h4>
               {item.desc && (
-                <p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-tight truncate">
+                <p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-snug">
                   {item.desc}
                 </p>
               )}