fix padding gap

src/app/globals.css

@@ -10,6 +10,76 @@ html {
   scroll-behavior: smooth;
 }
 
+/* ============================================================
+   GLOBAL SPACING SYSTEM
+   A single shared vertical-rhythm scale so every section uses
+   consistent top/bottom spacing instead of ad-hoc values.
+   Fluid (clamp) so it scales down gracefully on small screens.
+     --space-section     → standard section  (≈80px)
+     --space-section-lg  → large/feature section (≈100px)
+     --space-hero-gap    → gap from hero to the first section below
+   Apply via .dm-section / .dm-section-lg, or reference the vars
+   directly in component styles.
+   ============================================================ */
+:root {
+  --space-section: clamp(40px, 5vw, 64px);
+  --space-section-lg: clamp(52px, 6vw, 80px);
+  --space-hero-gap: clamp(36px, 4.5vw, 64px);
+}
+
+.dm-section {
+  padding-top: var(--space-section) !important;
+  padding-bottom: var(--space-section) !important;
+}
+
+.dm-section-lg {
+  padding-top: var(--space-section-lg) !important;
+  padding-bottom: var(--space-section-lg) !important;
+}
+
+/* ------------------------------------------------------------
+   Hero → first-section gap fixes
+   The "Doormile Way" container (.elementor-element-88745f4) carries a
+   150px top margin from the shared Elementor kit (intended as mid-page
+   spacing on Home, where it sits deep in the stack). On the About page
+   it is the FIRST section under the hero, so that 150px reads as an
+   oversized empty gap. Scope the reduction to the About page only
+   (.elementor-86) so Home's mid-page rhythm is untouched.
+   ------------------------------------------------------------ */
+.elementor-86 .elementor-element.elementor-element-88745f4 {
+  margin-top: var(--space-hero-gap) !important;
+}
+
+/* ------------------------------------------------------------
+   HOME PAGE — unified section rhythm
+   The shared Elementor kit stamps several stacked sections with a
+   150px top margin. On Home that makes "The Problem", the marquee,
+   "Connected Logistics" and "The Doormile Way" float far below the
+   section above them, while Stats and the EV card sit tight — an
+   uneven, broken rhythm. Normalize EVERY post-hero section to one
+   consistent gap so the page reads Hero ↓ Section ↓ Section evenly.
+
+   Scoped to `.elementor.elementor-61` — the Home page root uniquely
+   carries BOTH classes, so this never leaks onto other pages that
+   reuse these components (e.g. The Doormile Way on About-us, whose
+   root is `.elementor.elementor-86`).
+
+   Hero (741f56c) and the Stats band (9b26234) directly beneath it are
+   intentionally left tight and untouched.
+   ------------------------------------------------------------ */
+/* Sections, in render order: 30fd9d1 The Problem · b62c0b3 Marquee ·
+   89a0ca1 Connected Logistics · 88745f4 The Doormile Way · bbc6760 EV ·
+   3b4a7cc Industry Solutions. */
+.elementor.elementor-61 .elementor-element.elementor-element-30fd9d1,
+.elementor.elementor-61 .elementor-element.elementor-element-b62c0b3,
+.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
+.elementor.elementor-61 .elementor-element.elementor-element-88745f4,
+.elementor.elementor-61 .elementor-element.elementor-element-bbc6760,
+.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
+  margin-top: var(--space-section) !important;
+  margin-bottom: 0 !important;
+}
+
 /* Lenis global smooth scroll (src/animations/SmoothScroll.tsx). These classes are
    only present on routes/devices where Lenis is active; on touch devices and with
    prefers-reduced-motion Lenis is off and native scroll-behavior:smooth (above) applies. */
@@ -87,12 +157,15 @@ body {
   #masthead .elementor-element.elementor-element-0b7bf6f .header-menu-container .main-menu > li > a {
     padding-top: 15px !important;
     padding-bottom: 16px !important;
+    padding-left: 14px !important;
+    padding-right: 14px !important;
     font-size: 15px !important;
     line-height: 1.2 !important;
+    white-space: nowrap !important;
   }
 
   #masthead .header-menu-container .main-menu {
-    gap: 18px !important;
+    gap: 8px !important;
   }
 
   #masthead .elementor-element.elementor-element-cabdb09 a.header-button {
@@ -450,8 +523,8 @@ body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
-  width: 90%;
-  margin: 30px auto;
+  width: 100%;
+  margin: 30px 0 0;
 }
 
 @media (max-width: 1024px) {
@@ -579,12 +652,17 @@ body {
   transform: translateY(10px);
 }
 
+/* Default card title — single typography token shared by every card (FMCG,
+   Pharmaceutical, Enterprise & B2B). FMCG is the reference: small, clean,
+   bottom-left, consistent weight. Kept compact so longer labels read at the
+   same size/weight as FMCG instead of looking heavier. */
 .industry-card-default-title {
   color: #ffffff !important;
-  font-size: 28px !important;
+  font-size: 22px !important;
   font-weight: 700 !important;
+  line-height: 1.2 !important;
   margin: 0 !important;
-  letter-spacing: -0.5px !important;
+  letter-spacing: -0.3px !important;
   text-transform: none !important;
   font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
 }
@@ -730,9 +808,27 @@ body {
   letter-spacing: -0.5px !important;
 }
 
-.elementor-element-3b4a7cc > .e-con-inner {
+/* Industry Solutions: match the Meet Crew (OurTeam) container EXACTLY. The
+   e-con-boxed inner otherwise spans edge-to-edge because the vendor
+   "display: var(--display)" resolves to the invalid `inline` fallback, so its
+   max-width is ignored. The previous rule here only set padding (never
+   max-width / margin / display), which is why the divider line stretched almost
+   full-viewport and the heading hugged the left edge. Force flex and pin the
+   inner to the shared 1480px inset so the label divider, heading and card grid
+   all share the same left/right edges as the rest of the page. */
+.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
+  display: flex;
+}
+.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
+  display: flex;
+  flex-direction: column;
+  max-width: 1480px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   padding-left: clamp(20px, 4vw, 50px) !important;
   padding-right: clamp(20px, 4vw, 50px) !important;
+  box-sizing: border-box;
 }
 
 /* Custom premium animations keyframes */