/* Tailwind utilities ONLY — preflight/base and components are disabled so production Elementor/WordPress CSS controls body, typography, colors, spacing, and resets. */
@import "tailwindcss/utilities";

/* ============================================================
   GLOBAL FONT OVERRIDE — Strict Manrope Default
   Forced on all textual and structural elements while protecting 
   third-party icon fonts (FontAwesome, Fontello, Eicons, etc.).
   ============================================================ */
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-mobile-gutter: 10px;
}

.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. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

*, *::before, *::after {
  font-family: var(--font-manrope), "Manrope", system-ui, -apple-system, sans-serif;
}

*:not(i):not(svg):not(path):not(canvas):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="eicon-"]):not([class*="fontello"]) {
  font-family: var(--font-manrope), "Manrope", system-ui, -apple-system, sans-serif !important;
}

/* Smoother text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1025px) {
  #masthead .elementor-element.elementor-element-466de1b {
    top: 5px !important;
    padding: 0 28px !important;
  }

  #masthead .elementor-element.elementor-element-e052838 {
    margin-left: 1.4% !important;
    border-radius: 28px !important;
    background: transparent !important;
  }

  #masthead .elementor-element.elementor-element-d681ece {
    align-items: center !important;
    min-height: 104px !important;
  }

  #masthead .elementor-element.elementor-element-472172e {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
    width: 190px !important;
    height: auto !important;
    margin-left: 24px !important;
  }

  #masthead .elementor-element.elementor-element-e44ee7e,
  #masthead .elementor-element.elementor-element-f961133 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  #masthead .elementor-element.elementor-element-0b7bf6f > .elementor-widget-container {
    padding: 0 42px !important;
    border-radius: 22px !important;
  }

  #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: 8px !important;
  }

  #masthead .elementor-element.elementor-element-cabdb09 a.header-button {
    min-width: 185px !important;
    min-height: 58px !important;
    padding: 0 34px !important;
    border-radius: 24px !important;
    font-size: 18px !important;
    line-height: 58px !important;
  }

  #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
    top: 0 !important;
  }
}

.dm-contact-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 48%);
  min-height: 720px;
  margin: 0;
  overflow: hidden;
  background: #1f1f1f;
  color: #fff;
}

.dm-contact-left {
  position: relative;
  min-width: 0;
  padding: clamp(48px, 5vw, 76px) clamp(28px, 5vw, 72px);
  overflow: hidden;
}

.dm-contact-map {
  position: absolute;
  left: -5%;
  bottom: -1%;
  z-index: 0;
  width: min(980px, 112%);
  max-width: none;
  opacity: 0.34;
  pointer-events: none;
  user-select: none;
}

.dm-contact-kicker,
.dm-contact-title,
.dm-contact-copy,
.dm-contact-info {
  position: relative;
  z-index: 1;
}

.dm-contact-kicker {
  margin: 0 0 clamp(44px, 5vw, 64px);
  color: #fff;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.dm-contact-title {
  max-width: 850px;
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 5.2vw, 86px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dm-contact-copy {
  margin: clamp(36px, 4.5vw, 58px) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(18px, 1.55vw, 26px);
  font-weight: 400;
  line-height: 1.45;
}

.dm-contact-info {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(260px, 1.45fr);
  gap: clamp(32px, 5vw, 74px);
  max-width: 860px;
  margin-top: clamp(72px, 7vw, 114px);
}

.dm-contact-info-item h3 {
  margin: 0 0 32px;
  color: #fff;
  font-size: clamp(18px, 1.5vw, 25px);
  font-weight: 800;
  line-height: 1.2;
}

.dm-contact-info-item p {
  margin: 0;
  color: #fff;
  font-size: clamp(17px, 1.35vw, 24px);
  font-weight: 500;
  line-height: 1.6;
}

.dm-contact-card {
  align-self: stretch;
  min-width: 0;
  margin: 22px 34px 0 0;
  padding: clamp(72px, 7vw, 132px) clamp(42px, 7.2vw, 150px) clamp(50px, 5.5vw, 82px);
  border-radius: 34px 34px 0 0;
  background: #fff;
  color: #1b1b1b;
}

.dm-contact-card h3 {
  margin: 0 0 clamp(44px, 5vw, 68px);
  color: #1b1b1b;
  font-size: clamp(34px, 2.6vw, 45px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}

.dm-contact-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dm-contact-form label {
  display: block;
  margin: 0;
}

.dm-contact-form label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dm-contact-form input,
.dm-contact-form textarea {
  width: 100%;
  margin: 0;
  border: 1.5px solid #a9a9a9;
  border-radius: 14px;
  background: #fff;
  color: #1b1b1b;
  font-family: inherit;
  font-size: clamp(17px, 1.05vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-contact-form input {
  height: 72px;
  padding: 0 28px;
}

.dm-contact-form textarea {
  min-height: 250px;
  padding: 24px 28px;
  resize: vertical;
}

.dm-contact-form input::placeholder,
.dm-contact-form textarea::placeholder {
  color: #9c9c9c;
  opacity: 1;
}

.dm-contact-form input:focus,
.dm-contact-form textarea:focus {
  border-color: #c01227;
  box-shadow: 0 0 0 3px rgba(192, 18, 39, 0.11);
}

.dm-contact-status {
  margin: -6px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.dm-contact-status-success {
  color: #247a3d;
}

.dm-contact-status-error {
  color: #c01227;
}

.dm-contact-submit {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  height: 72px;
  margin-top: 26px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #e31d32;
  border-radius: 14px;
  background: #fff;
  color: #2d2d2d;
  font-family: inherit;
  font-size: clamp(16px, 1.02vw, 19px);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dm-contact-submit span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 0 34px;
}

.dm-contact-submit-icon {
  position: relative;
  display: inline-flex;
  width: 70px;
  min-width: 70px;
  background: #c01227;
}

.dm-contact-submit-icon::before,
.dm-contact-submit-icon::after {
  position: absolute;
  content: "";
  background: #fff;
}

.dm-contact-submit-icon::before {
  top: 35px;
  left: 23px;
  width: 28px;
  height: 3px;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.dm-contact-submit-icon::after {
  top: 25px;
  right: 25px;
  width: 16px;
  height: 16px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  background: transparent;
}

.dm-contact-submit:hover,
.dm-contact-submit:focus-visible {
  transform: translateY(-1px);
  border-color: #c01227;
  color: #111;
}

.dm-contact-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

@media (max-width: 1200px) {
  .dm-contact-section {
    grid-template-columns: 1fr;
  }

  .dm-contact-left {
    min-height: 640px;
  }

  .dm-contact-card {
    margin: 0 28px 40px;
    border-radius: 28px;
  }
}

@media (max-width: 720px) {
  .dm-contact-left {
    min-height: auto;
    padding: 42px 20px 58px;
  }

  .dm-contact-title {
    font-size: clamp(38px, 12vw, 58px);
  }

  .dm-contact-info {
    grid-template-columns: 1fr;
    gap: 42px;
    margin-top: 54px;
  }

  .dm-contact-info-item h3 {
    margin-bottom: 18px;
  }

  .dm-contact-card {
    margin: 0 20px 28px;
    padding: 28px 20px 24px;
    border-radius: 28px;
  }

  .dm-contact-card h3 {
    margin-bottom: 24px;
  }

  .dm-contact-form {
    gap: 18px;
  }

  .dm-contact-form input {
    height: 56px;
    padding: 0 18px;
  }

  .dm-contact-form textarea {
    min-height: 170px;
    padding: 18px;
  }

  .dm-contact-submit {
    width: 100%;
    height: 60px;
  }

  .dm-contact-submit span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 20px;
  }

  .dm-contact-submit-icon {
    width: 60px;
    min-width: 60px;
  }
}

/* Custom premium Industry Solutions hover cards styles */
.industry-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  margin: 30px 0 0;
}

@media (max-width: 1024px) {
  .industry-solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .industry-solutions-grid {
    grid-template-columns: 1fr;
  }
  .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    box-sizing: border-box !important;
  }
  .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767px) {
  .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .elementor.elementor-61 .elementor-element.elementor-element-d602f7f {
    --padding-left: 20px !important;
    --padding-right: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .elementor.elementor-61 .elementor-element.elementor-element-f64bd88,
  .elementor.elementor-61 .elementor-element.elementor-element-5ed2dbb,
  .elementor.elementor-61 .elementor-element.elementor-element-6829276 {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --margin-left: 0px !important;
    --margin-right: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .elementor.elementor-61 .elementor-element.elementor-element-6829276 {
    --e-con-grid-template-columns: minmax(0, 1fr) !important;
    --grid-justify-content: stretch !important;
    --justify-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    min-width: 0 !important;
  }

  .elementor.elementor-61 .industry-solutions-grid,
  .elementor.elementor-61 .industry-card-link {
    max-width: 100%;
    width: 100%;
    min-width: 0;
  }

  .elementor.elementor-61 .industry-solutions-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
  .elementor.elementor-86 .elementor-element.elementor-element-c2c601a,
  .elementor.elementor-104 .elementor-element.elementor-element-c70681e {
    --padding-left: var(--dm-mobile-gutter) !important;
    --padding-right: var(--dm-mobile-gutter) !important;
    padding-left: var(--dm-mobile-gutter) !important;
    padding-right: var(--dm-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner,
  .elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner,
  .elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner > .e-con,
  .elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner > .e-con,
  .elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner > .e-con {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .comparison-section .container {
    width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
    max-width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .wcd-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

.industry-card-link {
  position: relative;
  height: 600px;
  border-radius: 30px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: #121212;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

/* Elegant glass border highlight */
.industry-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 6;
  pointer-events: none;
  transition: border-color 0.4s ease;
}

/* Premium luxury shimmer sweep animation on hover */
@keyframes shimmer-sweep {
  0% { transform: translateX(-150%) skewX(-25deg); }
  100% { transform: translateX(150%) skewX(-25deg); }
}

.industry-card-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-150%) skewX(-25deg);
  z-index: 7;
  pointer-events: none;
}

.industry-card-link:hover::before {
  animation: shimmer-sweep 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.industry-card-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(192, 18, 39, 0.25);
}

.industry-card-link:hover::after {
  border-color: rgba(255, 255, 255, 0.25);
}

.industry-card-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.industry-card-link:hover .industry-card-bg {
  transform: scale(1.04);
}

.industry-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Fade out dark overlay on hover to prevent muddying the crimson wash! */
.industry-card-link:hover .industry-card-overlay {
  opacity: 0;
}

.industry-card-hover-bg {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Glowing vibrant crimson wash matching the reference image exactly */
  background: linear-gradient(to top, rgba(192, 18, 39, 0.88) 0%, rgba(215, 20, 40, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.industry-card-link:hover .industry-card-hover-bg {
  opacity: 1;
}

/* Default card bottom text state */
.industry-card-default-content {
  position: absolute;
  bottom: 40px;
  left: 24px;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0);
}

.industry-card-link:hover .industry-card-default-content {
  opacity: 0;
  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: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
  font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}

/* Hover state content wrapper */
.industry-card-hover-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.industry-card-link:hover .industry-card-hover-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.industry-card-hover-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Premium horizontal top divider line from the prompt design */
.industry-card-hover-top::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin-bottom: 5px;
}

.industry-card-description {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}

.industry-card-section-title {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  opacity: 0.9 !important;
  font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}

.industry-card-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.industry-card-list-item {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  position: relative !important;
  padding-left: 18px !important;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}

.industry-card-link:hover .industry-card-list-item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation entry delays - snappier response */
.industry-card-list-item.bullet-1 { transition-delay: 0.04s; }
.industry-card-list-item.bullet-2 { transition-delay: 0.08s; }
.industry-card-list-item.bullet-3 { transition-delay: 0.12s; }
.industry-card-list-item.bullet-4 { transition-delay: 0.16s; }
.industry-card-list-item.bullet-5 { transition-delay: 0.2s; }
.industry-card-list-item.bullet-6 { transition-delay: 0.24s; }

/* Custom CSS circular dot for bullet points to guarantee consistent rendering */
.industry-card-list-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  width: 6px !important;
  height: 6px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
}

/* Hover state bottom section */
.industry-card-hover-bottom {
  display: flex;
  align-items: center;
  gap: 15px;
}

.industry-card-hover-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c01227;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Removed rotate(45deg) which turned the ↗ diagonal arrow into a straight right arrow → */
.industry-card-link:hover .industry-card-hover-icon {
  transform: scale(1.08) translateY(-2px);
  background-color: #ffffff;
  color: #c01227;
}

.industry-card-hover-title {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
}

/* 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 */
@keyframes shimmer-sweep {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* ============================================================
   CUSTOM STANDARDIZED HERO STYLES
   Ensures all subpage hero sections have the exact same height, 
   width, framing margin/padding, and border-radius as the 
   Home Page content slider / hero container.
   ============================================================ */

/* Outer parent layout wrapper mirroring .elementor-element-741f56c */
.custom-standard-hero-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 20px 20px 20px 20px !important; /* Top, Right, Bottom, Left margin framing */
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* Inner hero card mirroring .owl-stage-outer border-radius and slider dimensions */
.custom-standard-hero-card {
  position: relative !important;
  width: 100% !important;
  height: 800px !important;
  min-height: 800px !important;
  border-radius: 25px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Dark background tint overlay to match home sliders and protect text contrast */
.custom-standard-hero-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--hero-overlay, linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.95) 100%)) !important;
  z-index: 1 !important;
}

.custom-standard-hero-card > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Responsive constraints mirror the home page carousel (.elementor-element-6c7cbcb
   .owl-carousel.owl-theme .content-item) EXACTLY so every page hero matches the
   home hero at all sizes. The home card is a fixed 800px on all widths >= 841px
   (large desktop, MacBook M1/Pro, and standard laptops alike) and only steps down
   to 600px at <= 840px. Earlier this card shrank at <= 1536px, which is why the
   About hero looked smaller than Home on MacBook M1/Pro (their ~1440-1512px logical
   width falls below 1536px). Match the home breakpoint instead. */
@media (max-width: 1024px) {
  .custom-standard-hero-container {
    /* No top gap on mobile/tablet: the hero card sits flush to the top so the floating
       navbar rests directly on the hero instead of leaving a band above it. */
    padding: 0 10px 10px 10px !important;
  }
}
@media (max-width: 840px) {
  .custom-standard-hero-card {
    height: 600px !important;
    min-height: 600px !important;
    border-radius: 22px !important;
  }
}

/* Mobile hero/header normalization
   Home is the reference: at phone width the hero wrapper is full-width with
   10px side gutters, the visible hero card is 370px wide, starts 7px from the
   viewport top, and the first section begins immediately after the hero wrapper.
   Apply those same computed values to every hero template instead of carrying
   separate page-level mobile overrides. */
@media (max-width: 840px) {
  body .elementor .elementor-element.elementor-element-741f56c,
  body .custom-standard-hero-container,
  body .miletruth-hero .elementor-element.elementor-element-86f3204 {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 var(--dm-mobile-gutter) var(--dm-mobile-gutter) var(--dm-mobile-gutter) !important;
    --padding-top: 0px !important;
    --padding-right: var(--dm-mobile-gutter) !important;
    --padding-bottom: var(--dm-mobile-gutter) !important;
    --padding-left: var(--dm-mobile-gutter) !important;
    --padding-block-start: 0px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body .elementor .elementor-element.elementor-element-6c7cbcb .owl-stage-outer,
  body .custom-standard-hero-card,
  body .miletruth-hero .miletruth-hero-container {
    width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body .elementor .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item,
  body .elementor .elementor-element.elementor-element-6c7cbcb .content-item,
  body .miletruth-hero .slide-content {
    height: 600px !important;
    min-height: 600px !important;
  }

  body .elementor .elementor-element.elementor-element-741f56c + *,
  body .custom-standard-hero-container + *,
  body .elementor-63.miletruth-hero + * {
    margin-top: 0 !important;
  }
}

@media (max-width: 480px) {
  body .elementor .elementor-element.elementor-element-6c7cbcb .owl-stage-outer,
  body .custom-standard-hero-card,
  body .miletruth-hero .miletruth-hero-container {
    height: 520px !important;
    min-height: 520px !important;
    margin-top: 7px !important;
    border-radius: 25px !important;
  }

  body .elementor .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item,
  body .elementor .elementor-element.elementor-element-6c7cbcb .content-item,
  body .miletruth-hero .slide-content {
    height: 520px !important;
    min-height: 520px !important;
  }

  body .miletruth-hero .miletruth-hero-container {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* Consistent flush hero across every page on mobile/tablet — the floating navbar
   (position:absolute; top:5px) should rest directly on the hero with no band
   above it. Home / How It Works / Solutions share .elementor-element-741f56c;
   MileTruth uses .miletruth-hero-container. (About / Contact / Blog already use
   .custom-standard-hero-container, handled above.) */
@media (max-width: 1024px) {
  /* The e-con applies top padding via the --padding-top / --padding-block-start
     vars (site.css sets them to 10px at a higher specificity), so override the
     vars — not just padding-top — to actually zero the gap. */
  .elementor-element.elementor-element-741f56c {
    --padding-top: 0px !important;
    --padding-block-start: 0px !important;
    padding-top: 0 !important;
  }
  .miletruth-hero-container {
    margin-top: 0 !important;
  }

  /* Audit & align section rhythm on mobile/tablet across all content pages */
  .elementor-86 #women-entrepreneurship.elementor-element-bbc6760,
  .elementor-86 .comparison-section,
  .elementor-86 .elementor-element.elementor-element-bbc6760:not(#women-entrepreneurship),
  .elementor-86 .elementor-element.elementor-element-c2c601a,
  .elementor-59 .elementor-element.elementor-element-bbc6760,
  .elementor-104 .elementor-element.elementor-element-c70681e {
    margin-top: var(--space-section) !important;
    margin-bottom: 0 !important;
  }

  /* Solutions page: First section under Solutions Hero gets the hero gap */
  .elementor-59 .elementor-element.elementor-element-3b4a7cc {
    margin-top: var(--space-hero-gap) !important;
    margin-bottom: 0 !important;
  }
  
  /* About page: First section under About Hero gets the hero gap */
  .elementor-86 .elementor-element.elementor-element-88745f4:first-of-type {
    margin-top: var(--space-hero-gap) !important;
  }
  /* About page: Subsequent sections get standard section spacing */
  .elementor-86 .elementor-element.elementor-element-88745f4 ~ .elementor-element.elementor-element-88745f4 {
    margin-top: var(--space-section) !important;
  }
}
