From a3cb82587896d52bfe3b25116a3993251e260b38 Mon Sep 17 00:00:00 2001
From: yusuf0279 <yusuf.sabuwala@openxpert.cloud>
Date: Tue, 21 Jul 2026 09:52:29 +0000
Subject: [PATCH] mobile fixes

---
 src/components/home/HomeServicesSection.jsx |  2 +-
 src/css/dynamic.css                         | 47 ++++++++++++++++++---
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/home/HomeServicesSection.jsx b/src/components/home/HomeServicesSection.jsx
index 7927d13..99bfdf1 100644
--- a/src/components/home/HomeServicesSection.jsx
+++ b/src/components/home/HomeServicesSection.jsx
@@ -68,7 +68,7 @@ export default function HomeServicesSection() {
           <div className="elementor-widget-container">
             <div className="row gy-4">
               {SERVICES.map((s) => (
-                <div key={s.slug} className="col-xxl-3 col-lg-4 col-md-6">
+                <div key={s.slug} className="col-4 col-xxl-3 col-lg-4 col-md-6">
                   <div className="service-block-new">
                     <img className="service-bg" decoding="async" src={s.img} alt={s.title} />
                     <div className="service-overlay"></div>
diff --git a/src/css/dynamic.css b/src/css/dynamic.css
index 6fcb4c4..d601535 100644
--- a/src/css/dynamic.css
+++ b/src/css/dynamic.css
@@ -893,13 +893,48 @@ img { max-width: 100%; height: auto; }
 /* ── Mobile overrides for new service cards ── */
 @media (max-width: 767px) {
   .service-block-new {
-    height: 220px;
+    height: 180px !important;
+    overflow: hidden !important;
+    border-radius: 12px !important;
   }
-  .service-block-new .service-title {
-    font-size: 16px;
+  .service-block-new .service-bg {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+    object-position: center !important;
+    display: block !important;
+  }
+  .service-block-new .service-overlay {
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.85) 0%,
+      rgba(0, 0, 0, 0.4) 40%,
+      rgba(0, 0, 0, 0) 70%
+    ) !important;
   }
   .service-block-new .service-content {
-    padding: 16px;
+    padding: 12px !important;
+    z-index: 2 !important;
+  }
+  .service-block-new .service-title {
+    font-size: 11px !important;
+    line-height: 1.3 !important;
+    font-weight: 600 !important;
+    color: #fff !important;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    margin: 0 !important;
+  }
+  .service-block-new .service-title a {
+    color: #fff !important;
+    text-decoration: none !important;
+  }
+  [data-id="148606f"] .row {
+    --bs-gutter-y: 8px !important;
   }
 }
 
@@ -1069,7 +1104,9 @@ img { max-width: 100%; height: auto; }
    .customer-box {
      padding: 8px 19px !important;
    }
-}
+   
+
+ }
 
 /* ══════════════════════════════════════════════════════════════
    FIX 5: Hero Spacing — match hero-to-services gap with header-to-hero gap