/* Prevent WordPress admin bar from covering fixed header */
html.wp-toolbar .luxury-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  html.wp-toolbar .luxury-header { top: 46px !important; }
}

/* Force zero margin/padding on html and body across all pages to prevent top gap */
html {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #F4F8F2 !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #F4F8F2 !important;
  font-size: 0 !important; /* Collapses any loose UTF-8 BOM or phantom text nodes before first child to 0px */
}

body > * {
  font-size: 1rem !important; /* Restores standard font size on all actual child elements */
}

/* Ensure fixed header starts flush with the very top of the window */
body:not(.admin-bar) .luxury-header,
html:not(.wp-toolbar) .luxury-header {
  top: 0 !important;
  margin-top: 0 !important;
}

/* RFQ Page — force white background on html/body so no cream bleed */
body.page-template-page-rfq,
html body.page-template-page-rfq {
    background-color: #ffffff !important;
}
body.page-template-page-rfq .ms-rfq-page,
body.page-template-page-rfq #primary {
    background-color: #ffffff !important;
}


/* Global Uppercase Headings Across All Pages (Primary Green #387C43) */
.ms-about-hero-title,
.ms-section-title,
.ms-story-heading,
.ms-insights-title,
.ms-post-title,
.ms-sidebar-title,
.ms-cta-title,
.ms-rfq-title,
.ms-page-title,
.mzst-brand-title,
.radian-hero-title,
.radian-title,
.mzst-title,
.mzst-headline,
.mzst-card-title,
.ms-journey-heading,
.ms-journey-title,
h1.ms-about-hero-title,
h1.ms-post-title,
h2.ms-insights-title,
h2.ms-section-title {
    color: #102A1D !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
        line-height: 1.1;
}

/* Make sure Elementor containers don't add double padding */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1400px;
}

/* Restore Default Compact Charcoal Pill Header Menu on Scroll */
.luxury-header.scrolled {
    background-color: transparent !important;
    padding-top: var(--sticky-header-padding-top, 0px) !important;
}

/* Ensure logo link is always visible on desktop scrolled state and transitions smoothly */
.luxury-header.header-dark .logo-link {
    display: grid !important;
}

/* Force container layout settings to override theme center-snapping */
.luxury-header.header-dark .header-container,
.luxury-header.scrolled .header-container {
    justify-content: space-between !important;
    height: var(--sticky-capsule-height, 58px) !important;
    min-height: 58px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--sticky-capsule-margin-top, 12px) !important;
    margin-bottom: 0 !important;
    padding: 0.45rem 1.5rem !important;
    
    /* Symmetrical CSS transitions targeting individual layout properties cleanly to prevent visual flashes */
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                min-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                margin 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Universal Desktop Nav Alignment & Overflow Protection (>= 1025px) */
@media (min-width: 1025px) {
  .luxury-header {
      background: transparent !important;
      background-color: transparent !important;
  }
  body:not(.home) .luxury-header {
      background: transparent !important;
      background-color: transparent !important;
  }
  .luxury-header .logo-link {
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
      z-index: 5 !important;
  }
  .luxury-header .header-right-group,
  .luxury-header .header-pill {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      flex-shrink: 0 !important;
      z-index: 5 !important;
  }
  .luxury-header .nav-actions {
      background-color: #3d3935 !important;
      border-radius: 16px !important;
      padding: 0.45rem 1.15rem !important;
      display: flex !important;
      align-items: center !important;
      gap: 0.35rem !important;
      flex-shrink: 0 !important;
      white-space: nowrap !important;
  }
  .luxury-header.header-dark .nav-actions,
  .luxury-header.scrolled .nav-actions {
      background-color: transparent !important;
      padding: 0 !important;
  }
  .luxury-header .nav-links-wrapper {
      display: flex !important;
      align-items: center !important;
      white-space: nowrap !important;
      flex-wrap: nowrap !important;
      gap: 0.25rem !important;
  }
  .luxury-header .nav-link-desktop {
      color: #ffffff !important;
      font-size: 13.5px !important;
      font-weight: 500 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
      white-space: nowrap !important;
      word-break: keep-all !important;
      padding: 0.45rem 0.85rem !important;
      margin: 0 2px !important;
      border-radius: 10px !important;
      flex-shrink: 0 !important;
      transition: background 0.2s ease, color 0.2s ease !important;
  }
  .luxury-header .nav-link-desktop:hover {
      background: rgba(255, 255, 255, 0.15) !important;
      color: #ffffff !important;
  }
  .luxury-header .nav-separator {
      display: inline-block !important;
      width: 1px !important;
      height: 14px !important;
      background: rgba(255, 255, 255, 0.25) !important;
      margin: 0 4px !important;
      flex-shrink: 0 !important;
  }
}

/* Large Desktop (>= 1440px) */
@media (min-width: 1440px) {
  .luxury-header .header-container {
      width: calc(100% - 64px) !important;
      max-width: 1400px !important;
      padding: 0.75rem 2rem !important;
  }
  .luxury-header.header-dark .header-container,
  .luxury-header.scrolled .header-container {
      width: var(--sticky-capsule-width, fit-content) !important;
      min-width: var(--sticky-capsule-min-width, 880px) !important;
      max-width: var(--sticky-capsule-max-width, 1260px) !important;
      padding: 0.45rem 1.5rem !important;
      gap: 1.75rem !important;
      transform: translateX(0) !important;
  }
}

/* Standard Laptop & Desktop (1201px to 1439px) */
@media (min-width: 1201px) and (max-width: 1439px) {
  .luxury-header .header-container {
      width: calc(100% - 48px) !important;
      max-width: 1320px !important;
      padding: 0.6rem 1.5rem !important;
  }
  .luxury-header .logo-link img {
      max-width: 120px !important;
  }
  .luxury-header .nav-actions {
      padding: 0.45rem 1rem !important;
      gap: 0.25rem !important;
  }
  .luxury-header .nav-link-desktop {
      font-size: 13px !important;
      letter-spacing: 0.06em !important;
      white-space: nowrap !important;
      padding: 0.4rem 0.75rem !important;
      color: #ffffff !important;
  }
  .luxury-header .nav-separator {
      margin: 0 3px !important;
      height: 14px !important;
      background: rgba(255, 255, 255, 0.25) !important;
  }
  .luxury-header.header-dark .header-container,
  .luxury-header.scrolled .header-container {
      width: var(--sticky-capsule-width, fit-content) !important;
      min-width: var(--sticky-capsule-min-width, 820px) !important;
      max-width: var(--sticky-capsule-max-width, 1180px) !important;
      padding: 0.45rem 1.25rem !important;
      gap: 1.25rem !important;
      transform: translateX(0) !important;
  }
}

/* Medium Desktop, Landscape Tablet & Small Laptops (1025px to 1200px, e.g. 1052px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .luxury-header .header-container {
      width: calc(100% - 32px) !important;
      max-width: 1200px !important;
      padding: 0.5rem 12px !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  .luxury-header .logo-link {
      flex-shrink: 0 !important;
      margin-right: 12px !important;
  }
  .luxury-header .logo-link img {
      max-width: 105px !important;
      height: 55px !important;
      width: auto !important;
      object-fit: contain !important;
  }
  .luxury-header .header-right-group {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      flex-shrink: 0 !important;
  }
  .luxury-header .header-pill {
      display: flex !important;
      align-items: center !important;
  }
  .luxury-header .nav-actions {
      background-color: #3d3935 !important;
      border-radius: 16px !important;
      padding: 0.42rem 0.85rem !important;
      gap: 0.2rem !important;
      display: flex !important;
      align-items: center !important;
      flex-shrink: 0 !important;
  }
  .luxury-header .nav-links-wrapper {
      display: flex !important;
      align-items: center !important;
      gap: 0.18rem !important;
      white-space: nowrap !important;
      flex-wrap: nowrap !important;
  }
  .luxury-header .nav-link-desktop {
      font-size: 12.5px !important;
      letter-spacing: 0.05em !important;
      white-space: nowrap !important;
      word-break: keep-all !important;
      padding: 0.38rem 0.6rem !important;
      margin: 0 1px !important;
      color: #ffffff !important;
      flex-shrink: 0 !important;
  }
  .luxury-header .nav-separator {
      margin: 0 3px !important;
      height: 12px !important;
      background: rgba(255, 255, 255, 0.25) !important;
  }

  /* Scrolled State in 1025px - 1200px */
  .luxury-header.header-dark .header-container,
  .luxury-header.scrolled .header-container {
      width: fit-content !important;
      max-width: calc(100vw - 32px) !important;
      padding: 0 16px !important;
      gap: 0.75rem !important;
      margin-left: auto !important;
      margin-right: auto !important;
      margin-top: 12px !important;
      transform: translateX(0) !important;
  }
  .luxury-header.scrolled .logo-link {
      margin-right: 0.5rem !important;
  }
  .luxury-header.scrolled .logo-link .logo-image-sticky {
      max-width: 60px !important;
      height: 26px !important;
  }
  .luxury-header.scrolled .nav-actions {
      background-color: transparent !important;
      padding: 0 !important;
      gap: 0.15rem !important;
  }
}

/* Mobile/Tablet scrolled container width & symmetrical centering (below 1024px) */
@media (max-width: 1024px) {
  .luxury-header.header-dark,
  .luxury-header.scrolled {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      left: 0 !important;
      right: 0 !important;
  }
  .luxury-header.header-dark .header-container,
  .luxury-header.scrolled .header-container {
      width: fit-content !important;
      min-width: 0 !important;
      max-width: calc(100vw - 32px) !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
      left: auto !important;
      right: auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
      margin-top: 12px !important;
      transform: none !important;
  }
  /* Show logo in mobile sticky header */
  .luxury-header.scrolled .logo-link {
      display: inline-flex !important;
      margin-right: 0.85rem !important;
      flex-shrink: 0 !important;
  }
  /* Keep mobile menu toggle aligned properly inside the capsule */
  .luxury-header.scrolled .header-right-group,
  .luxury-header.scrolled .header-pill,
  .luxury-header.scrolled .nav-actions {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-grow: 0 !important;
      min-width: 0 !important;
  }
}

/* ── Sticky Header Scrolled State: Toggle Button Floating Outside Menu Pill (Img 2) ── */
.luxury-header.scrolled .nav-actions,
.scrolled .nav-actions {
    position: relative !important;
}

.luxury-header.scrolled .ms-theme-toggle-btn,
.scrolled .ms-theme-toggle-btn {
    position: absolute !important;
    left: calc(100% + 14px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 9999 !important;
}

.luxury-header.scrolled .ms-theme-toggle-btn:hover,
.scrolled .ms-theme-toggle-btn:hover {
    transform: translateY(-50%) scale(1.08) !important;
}

/* Fix WP captions */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--color-text-secondary); }

/* Remove WP block library styles that may conflict */
.wp-block-image { margin: 0; }

/* Ensure the home main has no top padding (hero handles it) */
.ms-home-main { margin: 0; padding: 0; }

/* Fix admin bar colour to match theme */
#wpadminbar { background: var(--color-forest) !important; }
#wpadminbar a { color: var(--color-gold) !important; }

/* Ensure product showcase slides that use placeholder images look right */
.showcase-slide-img[src*="placehold.co"] {
  opacity: 0.85;
  filter: sepia(10%);
}

/* Ensure the origins visual container has a minimum height */
.origins-visual { min-height: 400px; }

/* Prevent Elementor padding on full-width sections */
.elementor-section.elementor-section-stretched { padding: 0; }

/* Contact form in CTA section */
.cta-sec .contact-form {
  background: rgba(253, 252, 247, 0.8);
  border: 1px solid var(--color-border);
  padding: 3rem;
  border-radius: 4px;
  backdrop-filter: blur(10px);
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Elementor Transparent Wrapper Fix for Custom Theme Sections */
.ms-home-main .elementor-section,
.ms-home-main .elementor-column,
.ms-home-main .elementor-widget-wrap,
.ms-home-main .elementor-widget,
.ms-home-main .elementor-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}


/* Ensure GSAP pin spacers and fixed children don't get clipped or stack incorrectly */
.ms-home-main .elementor-widget-wrap,
.ms-home-main .elementor-widget {
    overflow: visible !important;
}

.capabilities-sec {
    position: relative !important;
    width: 100% !important;
}
.cap-pin-container {
    position: relative;
    height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Section stacking — removed to prevent overlap conflicts */

/* Fix Unified Hero text layer centering */
.hsf-text-layer.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

/* =========================================================
   MS — EDITORIAL ARCHIVE (Tailwind CDN Port in use)
========================================================= */

/* --- HEADER OVERRIDES MIGRATED FROM THEME.CSS --- */

.luxury-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  padding-top: 1rem;
  /* We use CSS variable for sticky bg */
  --sticky-bg: rgba(0, 0, 0, 0.95);
  transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* On inner pages, start with a solid full-width background to prevent text overlap */
body:not(.home) .luxury-header {
  background-color: var(--sticky-bg);
}
/* When scrolling on inner pages, fade out the full-width background so the pill can take over */
body:not(.home) .luxury-header.scrolled {
  background-color: transparent;
}
.header-container {
/*   width: 100% !important; */
  min-width: 0 !important;
  max-width: 1400px !important;
  margin: 0.5rem auto 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  height: 65px !important;
  border-radius: 50px !important;
  
  /* Explicit default padding values for smooth morph interpolation */
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  
  transform: translateX(0) !important;
  transform-origin: top center !important;
  
  /* Symmetrical CSS transitions targeting individual layout properties cleanly to prevent visual flashes */
  transition: width 0.45s ease-in-out,
              min-width 0.45s ease-in-out,
              max-width 0.45s ease-in-out,
              height 0.45s ease-in-out,
              padding 0.45s ease-in-out,
              border-radius 0.45s ease-in-out,
              transform 0.45s ease-in-out,
              margin 0.45s ease-in-out !important;
}

@media (min-width: 1201px) {
  .header-container {
    max-width: 1400px !important;
    transform: translateX(0) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .header-container {
    width: calc(100% - 32px) !important;
    max-width: 1200px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    transform: translateX(0) !important;
  }
}

@media (max-width: 1023px) {
  .header-container {
    width: calc(100% - 2rem) !important;
    max-width: 100% !important;
    transform: translateX(0) !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 40px !important;
  }
}

/* Background Pill built using a pseudo-element, only active when scrolled */
.header-container::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border-radius: 14px !important;
  background-color: #3d3935 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  box-shadow: none !important;
  transform: none !important;
  
  /* Smooth CSS transition damping with transform included - fade out immediately on scroll up to prevent stretching artifacts */
  transition: opacity 0.08s ease-in-out,
              transform 0.45s ease-in-out,
              box-shadow 0.08s ease-in-out !important;
}

/* Scrolled state enqueued to display background cleanly with class trigger */
.luxury-header.scrolled .header-container::before {
  opacity: 1 !important;
  transform: none !important;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; */
  
  /* Snappy ease-out on scroll down */
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.logo-link {
  text-decoration: none !important;
  color: var(--color-beige) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  position: relative !important;
  min-height: 40px !important;
  transform: none !important;
  opacity: 1 !important;
  
  /* Gentler transition on scroll up */
  transition: all 0.45s ease-in-out !important;
}

.luxury-header.scrolled .logo-link {
  /* Responsive transition on scroll down */
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stack default logo and sticky logo in the exact same spot using relative + absolute overlay */
.logo-link,
a.logo-link,
#logo-home,
.luxury-header .logo-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: var(--header-logo-height, 81px) !important;
  width: var(--header-logo-width, 140px) !important;
  min-width: var(--header-logo-width, 140px) !important;
  max-width: var(--header-logo-width, 140px) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Default Logo (Dark logo) */
.logo-link .logo-text-wrapper,
.logo-link .default-logo {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  backface-visibility: hidden !important;
  will-change: opacity, transform !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.logo-link img,
.logo-link .logo-text-wrapper img,
.logo-link .default-logo img,
.luxury-header .logo-link img {
  max-width: var(--header-logo-width, 160px) !important;
  width: auto !important;
  height: var(--header-logo-height, 55px) !important;
  max-height: 60px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Sticky Logo (Light/White SVG logo) - Absolute overlay in exact same spot */
.logo-link .logo-image-sticky {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) scale(0.92) !important;
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: var(--sticky-logo-height, 42px) !important;
  width: auto !important;
  max-width: var(--header-logo-width, 140px) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backface-visibility: hidden !important;
  will-change: opacity, transform !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Scrolled state: Default logo fades out smoothly with zero width collapsing or blinking */
.luxury-header.scrolled .logo-link .logo-text-wrapper,
.luxury-header.scrolled .logo-link .default-logo {
  opacity: 0 !important;
  transform: scale(0.92) translateY(-4px) !important;
  pointer-events: none !important;
}

.luxury-header.scrolled .logo-link .logo-image-sticky {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
  pointer-events: auto !important;
}

.logo-text-large,
.logo-text-sub {
  transition: color 0.15s ease !important;
}

/* Cross-fade on nav-actions background color dynamically using scrolled class state */
.luxury-header .nav-actions {
  background-color: #3d3935 !important;
  border-radius: 16px !important;
  padding: 0.45rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: relative !important;
  
  /* Gentler transition on scroll up */
  transition: background-color 0.45s ease-in-out,
              border-radius 0.45s ease-in-out !important;
}

.luxury-header.header-dark .nav-actions,
.luxury-header.scrolled .nav-actions {
  background-color: transparent !important;
  border-radius: 23px !important;
  
  /* Responsive transition on scroll down */
  transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
	padding: 0 !important;
}

/* Override default theme long transitions on buttons and desktop links */
.luxury-header .menu-toggle,
.luxury-header .nav-link-desktop {
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease !important;
}
.default-logo {
  display: flex;
  flex-direction: column;
}

/* Duplicate Scrolled state rules removed to prevent transitions fighting */
.logo-text-large {
  font-family: var(--font-display);

}
/* =====================================================
   SHOWCASE HORIZONTAL SCROLL — Base CSS
   Required for MSHorizontalScroll.js to work correctly
===================================================== */
#showcase-horizontal {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#showcase-track {
  display: flex;
  gap: 2vw;
  padding: 0 5vw;
  will-change: transform;
}

.showcase-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 2rem 3rem;
}

.showcase-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-forest);
}

.showcase-slide {
  flex-shrink: 0;
  width: clamp(280px, 35vw, 450px);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--color-bg);
}

.showcase-slide-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-slide:hover .showcase-slide-img {
  transform: scale(1.04);
}

.showcase-slide-info {
  padding: 1.5rem;
}

.showcase-slide-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: 0.5rem;
}

.showcase-slide-cat {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 1rem;
}



/* =====================================================
   TARGETED BUG FIX: Capabilities Full-Screen Pinning
===================================================== */
.capabilities-sec {
    position: relative !important;
    width: 100% !important;
    background-color: #F8F8F6 !important;
    z-index: 20 !important;
}

.cap-pin-container {
    position: relative;
    height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.cap-text-wrapper {
    position: relative !important;
    width: 90% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    text-align: center !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cap-statement {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    font-family: var(--font-display) !important;
    font-size: clamp(32px, 4.5vw, 68px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #B8B8B8 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.cap-char {
    display: inline !important;
    will-change: color !important;
}

/* =====================================================
   TARGETED BUG FIX: Trade Excellence Stacked Cards
===================================================== */
.trade-excellence-sec,
section#trade-excellence-section,
.elementor-widget-ms_trade_excellence,
.elementor-widget-ms_trade_excellence .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.trade-pin-container,
#trade-pin-container,
.trade-cards-stack,
#trade-cards-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.elementor-widget-ms_trade_excellence .trade-card,
.elementor-widget-container .trade-card,
section#trade-excellence-section .trade-card,
#trade-pin-container .trade-card,
.trade-cards-stack .trade-card,
.trade-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4) !important;
}

#trade-card-1 { z-index: 10 !important; }
#trade-card-2 { z-index: 20 !important; }
#trade-card-3 { z-index: 30 !important; }
#trade-card-4 { z-index: 40 !important; }

/* =====================================================
   Journey Section — Fix heading top gap
===================================================== */
.journey-header-static {
    top: 15vh !important;
}

.journey-track-container {
    align-items: flex-start !important;
    padding-top: 31vh !important;
}

/* =====================================================
   TARGETED BUG FIX: Block background scroll on mega menu
===================================================== */
@media (min-width: 1024px) {
  body.ms-menu-active,
  html.ms-menu-active {
      overflow: hidden !important;
      height: 100% !important;
  }
  .mega-menu {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 1023px) {
  body.ms-menu-active {
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
  }
}

/* ── Mobile Form Layout Fix (Home, RFQ, Contact, Careers) ── */
@media screen and (max-width: 768px) {
    .ms-rfq-form-container,
    .ms-cp-form-card,
    .ms-cr-form-card,
    .ms-cr-form-right .ms-rfq-form-container,
    .ms-cp-form-right .ms-rfq-form-container {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .ms-rfq-form-grid,
    .ms-cp-form-grid,
    .ms-cr-form-grid,
    .ms-inquiry-grid,
    .ms-rfq-inquiry-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ms-form-group,
    .ms-rfq-form-grid .ms-form-group,
    .ms-cp-form-grid .ms-form-group,
    .ms-cr-form-grid .ms-form-group {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .ms-input-icon-wrapper,
    .ms-textarea-wrapper,
    .ms-select-wrapper {
        width: 100% !important;
    }

    .ms-input-icon-wrapper input,
    .ms-input-icon-wrapper select,
    .ms-textarea-wrapper textarea {
        font-size: 13px !important;
        padding-left: 42px !important;
        padding-right: 14px !important;
    }

    /* RFQ Page Specific Mobile Overrides (Matches Original RFQ Globe BG - Img 1 & 3) */
    body.page-template-page-rfq,
    html body.page-template-page-rfq,
    body.page-template-page-rfq #primary,
    body.page-template-page-rfq .site-main,
    body.page-template-page-rfq .ms-rfq-page {
        background-color: #F4F8F2 !important;
        background: #F4F8F2 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Force Fixed & 100% Transparent Elementor / Luxury Header on RFQ Mobile View */
    body.page-template-page-rfq header.elementor-location-header,
    body.page-template-page-rfq header[data-elementor-type="header"],
    body.page-template-page-rfq .elementor-433,
    body.page-template-page-rfq .luxury-header,
    html body.page-template-page-rfq header.elementor-location-header,
    html body.page-template-page-rfq .luxury-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding-top: 0 !important;
    }

    /* Strip background-color from all inner Elementor header sections, containers, columns, and wraps */
    body.page-template-page-rfq header.elementor-location-header *,
    body.page-template-page-rfq .elementor-433 *,
    body.page-template-page-rfq .luxury-header * {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .ms-rfq-page {
        padding: 0 0 50px 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    .ms-rfq-page .ms-container {
        padding: 0 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .ms-rfq-hero {
        position: relative !important;
        padding-top: 245px !important;
        padding-bottom: 60px !important;
        margin: 0 !important;
        top: 0 !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* Hero Background Image: Original RFQ ship-globe-bg.png image starting at Y=0 behind header */
    .ms-rfq-hero-bg {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        background-image: url('../images/ship-globe-bg.png') !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: right top !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Floating White Hero Card ("REQUEST A QUOTE") */
    .ms-rfq-hero .ms-container {
        position: relative !important;
        z-index: 2 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        padding: 24px 20px !important;
        box-shadow: 0 10px 30px rgba(16, 42, 29, 0.08) !important;
        border: 1px solid rgba(40, 90, 53, 0.12) !important;
        width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    .ms-rfq-title {
        font-family: var(--font-display, "Plus Jakarta Sans", sans-serif) !important;
        font-size: 26px !important;
        line-height: 1.25 !important;
        color: #102A1D !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        margin: 0 0 10px 0 !important;
    }
    .ms-rfq-subtitle {
        font-family: var(--font-body) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #4A5B50 !important;
        margin: 0 !important;
    }
    .ms-rfq-layout {
        margin-top: 24px !important;
        width: 100% !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .ms-rfq-main-col {
        width: 100% !important;
    }
    .ms-rfq-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        width: 100% !important;
    }
    .ms-rfq-section {
        padding: 0 !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .ms-rfq-footer-features {
        grid-template-columns: 1fr !important;
        margin-top: 24px !important;
        border-radius: 20px !important;
        width: 100% !important;
    }
    .ms-rfq-footer-card {
        padding: 18px 16px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(40, 90, 53, 0.08) !important;
    }
    .ms-rfq-footer-card:last-child {
        border-bottom: none !important;
    }
}

@media screen and (max-width: 480px) {
    .ms-rfq-form-container,
    .ms-cp-form-card,
    .ms-cr-form-card,
    .ms-cr-form-right .ms-rfq-form-container,
    .ms-cp-form-right .ms-rfq-form-container {
        padding: 20px 14px !important;
        border-radius: 14px !important;
    }

    .ms-rfq-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
}

/* Sticky Product Category Navigation Bar */
.ms-category-bar-wrapper,
#ms-category-bar-wrapper,
div.ms-category-bar-wrapper {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 100px !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    padding: 10px 10px !important;
}

.ms-category-bar,
#ms-category-pills {
    padding: 0 !important;
    margin: 0 !important;
}

.ms-category-bar-wrapper.is-sticky,
#ms-category-bar-wrapper.is-sticky,
div.ms-category-bar-wrapper.is-sticky {
    width: calc(100% - 4rem) !important;
    max-width: calc(1400px - 4rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
}

body.admin-bar .ms-category-bar-wrapper,
body.admin-bar #ms-category-bar-wrapper,
body.admin-bar div.ms-category-bar-wrapper {
    top: 132px !important;
}

@media (max-width: 1023px) {
    .ms-category-bar-wrapper,
    #ms-category-bar-wrapper,
    div.ms-category-bar-wrapper {
        top: 90px !important;
        z-index: 999999 !important;
    }
    .ms-category-bar-wrapper.is-sticky,
    #ms-category-bar-wrapper.is-sticky,
    div.ms-category-bar-wrapper.is-sticky {
        width: calc(100% - 2rem) !important;
        max-width: none !important;
    }
    body.admin-bar .ms-category-bar-wrapper,
    body.admin-bar #ms-category-bar-wrapper,
    body.admin-bar div.ms-category-bar-wrapper {
        top: 122px !important;
    }
}

/* Single Coffee Product Detail Page styling without image gallery */
.ms-coffee-product-card {
    display: block !important;
    padding: 40px !important;
}
.ms-coffee-product-card .ms-single-details {
    width: 100% !important;
    max-width: 100% !important;
}

/* Product 2 Card Box Design (Used in Catalogue 2 & Single Product Related Section) */
.ms-catalogue-no-images.ms-catalogue-grid,
.ms-catalogue-no-images .ms-catalogue-grid,
.ms-related-grid.ms-catalogue-no-images {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 24px !important;
    align-items: stretch !important;
}

@media (max-width: 991px) {
    .ms-catalogue-no-images.ms-catalogue-grid,
    .ms-catalogue-no-images .ms-catalogue-grid,
    .ms-related-grid.ms-catalogue-no-images {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Card Container */
.ms-catalogue-no-images .ms-commodity-card,
.ms-catalogue-no-images .ms-commodity-card.ms-commodity-journey-card,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-card {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid rgba(16, 42, 29, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    grid-column: auto !important;
    height: 100% !important;
}

.ms-catalogue-no-images .ms-commodity-card:hover,
.ms-catalogue-no-images .ms-commodity-card.ms-commodity-journey-card:hover,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(40, 90, 53, 0.1) !important;
    border-color: rgba(40, 90, 53, 0.25) !important;
}

/* Hide image col */
.ms-catalogue-no-images .ms-commodity-img-col,
.ms-catalogue-no-images .ms-commodity-img-col::after,
.ms-catalogue-no-images .ms-commodity-card::before,
.ms-catalogue-no-images .ms-commodity-card::after,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-img-col {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* Inner wrapper */
.ms-catalogue-no-images .ms-journey-card-inner,
.ms-catalogue-no-images .ms-card-link-wrapper,
.ms-related-grid.ms-catalogue-no-images .ms-journey-card-inner,
.ms-related-grid.ms-catalogue-no-images .ms-card-link-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 24px !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    box-sizing: border-box !important;
}

/* Category Pill Badge */
.ms-catalogue-no-images .ms-journey-cat-badge,
.ms-catalogue-no-images .ms-card-meta-top,
.ms-related-grid.ms-catalogue-no-images .ms-journey-cat-badge,
.ms-related-grid.ms-catalogue-no-images .ms-card-meta-top {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(40, 90, 53, 0.07) !important;
    border: 1px solid rgba(40, 90, 53, 0.16) !important;
    border-radius: 9999px !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #285A35 !important;
    width: fit-content !important;
    margin-bottom: 16px !important;
    line-height: 1.2 !important;
}

.ms-catalogue-no-images .ms-meta-cat,
.ms-related-grid.ms-catalogue-no-images .ms-meta-cat {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #285A35 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Title */
.ms-catalogue-no-images .ms-box-title,
.ms-catalogue-no-images .ms-commodity-title,
.ms-related-grid.ms-catalogue-no-images .ms-box-title,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-title {
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #102A1D !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    text-decoration: none !important;
}

/* Description Excerpt */
.ms-catalogue-no-images .ms-box-desc,
.ms-catalogue-no-images .ms-commodity-overview,
.ms-related-grid.ms-catalogue-no-images .ms-box-desc,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-overview {
    font-family: var(--font-body, "Inter", sans-serif) !important;
    font-size: 0.88rem !important;
    color: #4A5568 !important;
    line-height: 1.55 !important;
    margin: 0 0 20px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-grow: 1 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

/* CTA Link */
.ms-catalogue-no-images .ms-journey-card-cta,
.ms-catalogue-no-images .ms-commodity-cta,
.ms-related-grid.ms-catalogue-no-images .ms-journey-card-cta,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-cta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #285A35 !important;
    margin-top: auto !important;
    transition: color 0.25s ease !important;
    text-decoration: none !important;
}

.ms-catalogue-no-images .ms-journey-cta-arrow,
.ms-catalogue-no-images .cta-icon,
.ms-related-grid.ms-catalogue-no-images .ms-journey-cta-arrow,
.ms-related-grid.ms-catalogue-no-images .cta-icon {
    transition: transform 0.25s ease !important;
}

.ms-catalogue-no-images .ms-commodity-card:hover .ms-journey-cta-arrow,
.ms-catalogue-no-images .ms-commodity-card:hover .cta-icon,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-card:hover .ms-journey-cta-arrow,
.ms-related-grid.ms-catalogue-no-images .ms-commodity-card:hover .cta-icon {
    transform: translateX(5px) !important;
}

/* Ensure Elementor sections/containers don't clip sticky category bar */
.elementor-page-products1 .elementor-section,
.elementor-page-products1 .elementor-container,
.elementor-page-products1 .elementor-widget-container,
.page-id-products1 .elementor-section,
.page-id-products1 .elementor-container,
.page-id-products1 .elementor-widget-container,
.ms-catalogue-page .elementor-section,
.ms-catalogue-page .elementor-container,
div[class*="catalogue"] .elementor-section {
    overflow: visible !important;
}

/* Unblock CSS transform trapping on catalogue parent container for sticky navigation */
.ms-catalogue-content,
.ms-catalogue-page .ms-catalogue-content,
.ms-catalogue-content.fade-up,
div.ms-catalogue-content,
.ms-intro-row {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
}

/* Subtle luxury light shadow for search bar and category filter bar in Light Theme */
html:not([data-theme="dark"]) .ms-search-container,
html:not([data-theme="dark"]) .ms-category-bar-wrapper,
html:not([data-theme="dark"]) .ms-insights-search-wrapper,
html:not([data-theme="dark"]) .ms-insights-search-pill,
html[data-theme="light"] .ms-search-container,
html[data-theme="light"] .ms-category-bar-wrapper,
html[data-theme="light"] .ms-insights-search-wrapper,
html[data-theme="light"] .ms-insights-search-pill {
/*     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important; */
}

/* Mega Menu Right Panel Preview Box — Dark Mode #191919 Background */
html[data-theme="dark"] .preview-default-content,
html[data-theme="dark"] .light-preview,
html[data-theme="dark"] body .preview-default-content,
html[data-theme="dark"] body .light-preview,
html[data-theme="dark"] body.elementor-page div.elementor-element .preview-default-content,
html[data-theme="dark"] body div.elementor-element.elementor-element .preview-default-content,
html[data-theme="dark"] body [data-elementor-id] .preview-default-content {
    background: #191919 !important;
    background-color: #191919 !important;
    border: 1px solid #282828 !important;
    border-color: #282828 !important;
}

html[data-theme="dark"] .preview-badge,
html[data-theme="dark"] body .preview-badge,
html[data-theme="dark"] body.elementor-page div.elementor-element .preview-badge,
html[data-theme="dark"] body div.elementor-element.elementor-element .preview-badge {
    background: #121211 !important;
    background-color: #121211 !important;
    color: #E2E8F0 !important;
    border: 1px solid #282828 !important;
}

/* ── Global Trade Network Map Section — Dark Mode ── */
html[data-theme="dark"] .ms-network-sec,
html[data-theme="dark"] #network,
html[data-theme="dark"] .elementor-widget-ms_global_network,
html[data-theme="dark"] body.elementor-page div.elementor-element div.elementor-widget-container .ms-network-sec,
html[data-theme="dark"] body div.elementor-element.elementor-element div.elementor-widget-container .ms-network-sec {
    background: #0B0D11 !important;
    background-color: #0B0D11 !important;
    padding-top: 0 !important;
    padding-bottom: 70px !important;
}

html[data-theme="dark"] .ms-network-sec::before {
    opacity: 0.15 !important;
}

html[data-theme="dark"] .ms-network-title {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-network-desc {
    color: #CCCCCC !important;
}

html[data-theme="dark"] .ms-network-label {
    color: #285A35 !important;
}

html[data-theme="dark"] .ms-network-bg-img {
    filter: invert(1) hue-rotate(180deg) brightness(1.2) opacity(0.85) !important;
}

html[data-theme="dark"] .ms-network-node-label,
html[data-theme="dark"] .ms-network-hub-label {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-network-pin-circle {
    fill: #191919 !important;
    stroke: #285A35 !important;
}

/* ── FAQ Section — Dark Mode Top Padding Removal ── */
html[data-theme="dark"] .ms-faq-section,
html[data-theme="dark"] #faq,
html[data-theme="dark"] .elementor-widget-ms_faq,
html[data-theme="dark"] body.elementor-page div.elementor-element div.elementor-widget-container .ms-faq-section,
html[data-theme="dark"] body div.elementor-element.elementor-element div.elementor-widget-container .ms-faq-section {
    padding-top: 0 !important;
}

/* ── Vertical Scroll Navigation Indicator — Dark Mode ── */
html[data-theme="dark"] .ms-nav-line,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"] .ms-nav-line.active,
html[data-theme="dark"] .ms-nav-line:hover,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line.active,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line:hover {
    background-color: #285A35 !important;
}

html[data-theme="dark"] .ms-nav-line::before,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line::before {
    background: #191919 !important;
    color: #FFFFFF !important;
    border: 1px solid #333333 !important;
}

/* ── Single Product Detail Page — Dark Mode (Zero White Flash) ── */
html[data-theme="dark"] .ms-single-product-page,
html[data-theme="dark"] body.single-ms_commodity {
    background-color: #0B0D11 !important;
    background: #0B0D11 !important;
}

html[data-theme="dark"] .ms-single-product-card {
    background-color: #12141A !important;
    background: #12141A !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-single-product-title,
html[data-theme="dark"] .ms-single-product-card h1,
html[data-theme="dark"] .ms-single-product-card h2,
html[data-theme="dark"] .ms-single-product-card h3,
html[data-theme="dark"] .ms-single-product-card h4 {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-info-row,
html[data-theme="dark"] .ms-spec-row,
html[data-theme="dark"] .ms-variants-wrapper,
html[data-theme="dark"] .ms-single-info {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ms-info-label,
html[data-theme="dark"] .ms-info-value,
html[data-theme="dark"] .ms-product-description,
html[data-theme="dark"] .ms-single-desc {
    color: #E2E8F0 !important;
}

html[data-theme="dark"] .ms-type-btn,
html[data-theme="dark"] .ms-grade-chip,
html[data-theme="dark"] .ms-cat-dropdown-menu {
    background-color: #1B1E26 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #E2E8F0 !important;
}

/* Ensure category dropdown menu is never overlapped by lower rows or sibling pills */
.ms-cat-pill-item {
    position: relative !important;
    z-index: 10 !important;
}

/* Hover bridge attached to parent pill item (prevents scrolling dropdowns like Spices from closing) */
.ms-cat-pill-item::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: -10px !important;
    right: -10px !important;
    height: 16px !important;
    background: transparent !important;
    display: block !important;
    pointer-events: auto !important;
    cursor: default !important;
    z-index: 9999999 !important;
}

.ms-cat-pill-item:hover,
.ms-cat-pill-item:focus-within {
    z-index: 99999999 !important;
}

.ms-cat-dropdown-menu {
    top: calc(100% + 4px) !important;
    z-index: 999999999 !important;
    cursor: default !important;
}

.ms-cat-pill-item:hover .ms-cat-dropdown-menu,
.ms-cat-pill-item:focus-within .ms-cat-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
    z-index: 999999999 !important;
}

/* Force DEFAULT mouse arrow cursor on all bridge pseudo-elements, dropdown box, and header */
.ms-cat-pill-item::before,
.ms-cat-pill-item::after,
.ms-cat-dropdown-menu,
.ms-cat-dropdown-menu::before,
.ms-cat-dropdown-menu::after,
.ms-cat-dropdown-header,
.ms-cat-dropdown-list {
    cursor: default !important;
}

/* ONLY the pill button itself and dropdown link items display hand pointer cursor */
a.ms-pill,
a.ms-cat-btn,
.ms-pill.ms-cat-btn,
a.ms-cat-dropdown-item,
.ms-cat-dropdown-item,
.ms-cat-dropdown-item * {
    cursor: pointer !important;
}

.ms-cat-dropdown-header,
.ms-cat-dropdown-header * {
    cursor: default !important;
    user-select: none !important;
}

html[data-theme="dark"] .ms-type-btn:hover,
html[data-theme="dark"] .ms-grade-chip:hover {
    border-color: #285A35 !important;
    color: #285A35 !important;
}

html[data-theme="dark"] .ms-main-image-wrapper {
    background-color: #1B1E26 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --- Desktop Mega Menu Dropdown Update --- */
.mega-menu-dropdown-parent { position: relative; }
.mega-menu-submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mega-menu-dropdown-parent.is-open .mega-menu-submenu {
  display: grid;
}
.mega-menu-dropdown-parent.is-open .dropdown-icon {
  transform: rotate(180deg);
}
.mega-menu-subitem {
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  color: var(--color-text-primary, #333) !important;
  background-color: transparent;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.mega-menu-subitem::before {
  display: none;
}
.mega-menu-subitem:hover {
  color: #285A35 !important;
  border-color: #285A35 !important;
  transform: translateY(-2px) !important;
  background-color: rgba(40, 90, 53, 0.08);
}

.mobile-only-link {
  display: none;
}

/* ── Hide Menu Button on Desktop (Only visible on mobile / tablet <= 1024px) ── */
@media (min-width: 1025px) {
  .luxury-header .menu-toggle,
  .luxury-header #menu-toggle-btn,
  .header-right-group .menu-toggle,
  .header-pill .menu-toggle,
  .nav-actions .menu-toggle,
  .header-container .menu-toggle,
  #menu-toggle-btn,
  .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  .luxury-header .nav-actions {
    padding: 0.55rem 0.55rem !important;
  }
}

/* --- Mobile Header Styling Adjustments --- */
@media screen and (max-width: 1024px) {
  .mobile-only-link {
    display: list-item;
  }
  .mega-menu-submenu {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 10px;
  }
  .mega-menu-subitem {
    border: none;
    border-radius: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding: 10px !important;
    font-size: 1.5rem !important;
    background-color: transparent !important;
    white-space: normal !important;
  }
  .mega-menu-subitem:hover {
    transform: translateX(10px) !important;
  }

  /* Hide preview panel completely on mobile */
  #menu-preview-container {
    display: none !important;
  }
  
  /* Restructure scroll: Outer menu locked, inner content scrolls below sticky header */
  .mega-menu {
    overflow: hidden !important; /* Outer container locked */
  }
  .menu-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .menu-content {
    position: absolute !important;
    top: 100px !important; /* Push down to clear logo and menu toggle */
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 100px) !important;
    overflow-y: auto !important; /* Content area scrolls natively */
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    padding: 20px 1.5rem 120px 1.5rem !important;
    box-sizing: border-box !important;
  }
  .menu-grid {
    display: block !important;
    height: auto !important;
    flex: none !important;
  }
  .mega-menu-item {
    font-size: 1.5rem !important;
  }

  
  .header-right-group {
    gap: 8px !important; /* Reduced gap between menu pill and theme toggle */
  }
  .logo-link img {
    height: 50px !important; /* Converted to correct height for mobile viewports */
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
  }
  /* Mobile & Tablet Header Styling: Hide Desktop Pill completely */
  .luxury-header .header-pill,
  .luxury-header .nav-actions,
  .luxury-header .nav-links-wrapper {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  
  /* Modern, Clean Standalone Mobile & Tablet Hamburger Button */
  .luxury-header .menu-toggle,
  #menu-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.2) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    z-index: 100 !important;
  }
  
  .luxury-header .menu-toggle:hover,
  .luxury-header .menu-toggle:active {
    background: #F4F8F2 !important;
    border-color: #285A35 !important;
    transform: scale(1.05) !important;
  }

  /* Hide "MENU" text on mobile/tablet for a clean, minimalist hamburger icon */
  .luxury-header .menu-text {
    display: none !important;
    visibility: hidden !important;
  }

  /* 3-Bar Balanced Mobile Hamburger Icon */
  .luxury-header .menu-icon-luxury {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 20px !important;
    height: 18px !important;
  }

  .luxury-header .menu-icon-luxury .icon-line {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #285A35 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
  }

  .luxury-header .menu-icon-luxury .icon-line.mid {
    width: 16px !important;
    margin-left: auto !important;
  }

  .luxury-header .menu-icon-luxury .icon-line.bottom {
    width: 20px !important;
    margin-left: auto !important;
  }

  .luxury-header .menu-toggle:hover .menu-icon-luxury .icon-line.mid {
    width: 20px !important;
  }


  .logo-text-large { font-size: 1.4rem !important; }
  /* Mobile Menu Footer & Copyright: Left Aligned */
  .menu-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-top: 1.5rem !important;
    margin-top: 2rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .menu-footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.25rem !important;
    margin-bottom: 0.75rem !important;
    text-align: left !important;
  }
  .menu-footer-info {
    text-align: left !important;
    font-size: 0.75rem !important;
    color: var(--color-text-secondary, #666666) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

/* ── Hamburger → X (cross) when menu is open — GLOBAL (all breakpoints) ── */
/* Uses body.ms-menu-active to hit ALL .menu-icon-luxury instances at once */
body.ms-menu-active .menu-icon-luxury .icon-line,
#menu-toggle-btn[aria-expanded="true"] .menu-icon-luxury .icon-line {
  margin-left: 0 !important;
  width: 20px !important;
  transition: all 0.3s ease !important;
}
body.ms-menu-active .menu-icon-luxury .icon-line.top,
#menu-toggle-btn[aria-expanded="true"] .menu-icon-luxury .icon-line.top {
  transform: translateY(6px) rotate(45deg) !important;
  transform-origin: center !important;
}
body.ms-menu-active .menu-icon-luxury .icon-line.mid,
#menu-toggle-btn[aria-expanded="true"] .menu-icon-luxury .icon-line.mid {
  opacity: 0 !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
}
body.ms-menu-active .menu-icon-luxury .icon-line.bottom,
#menu-toggle-btn[aria-expanded="true"] .menu-icon-luxury .icon-line.bottom {
  transform: translateY(-6px) rotate(-45deg) !important;
  transform-origin: center !important;
}

/* ── Light Mode Hamburger Overrides (Trade Green #285A35 on Very Light Green / White) ── */
html[data-theme="light"] .luxury-header .menu-toggle {
    background: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.2) !important;
}
html[data-theme="light"] .luxury-header .menu-icon-luxury .icon-line {
    background: #285A35 !important;
}

/* Hover States in Light Mode */
html[data-theme="light"] .luxury-header .menu-toggle:hover {
    background: #F4F8F2 !important;
    border-color: #285A35 !important;
}
html[data-theme="light"] .luxury-header .menu-toggle:hover .menu-icon-luxury .icon-line {
    background: #1e4428 !important;
}

/* ── Searchable Country Select & Manual Location Input Styles ── */
/* ── Searchable Country Select & Manual Location Input Styles ── */

/* 1. Scrollable Dropdown List (Max Height 280px) */
.ms-custom-select-options,
.ms-cp-custom-select-options {
    max-height: 280px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Sticky Top Search Box Container */
.ms-select-search-box {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 10px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="dark"] .ms-select-search-box {
    background: #191919;
    border-bottom-color: #282828;
}

/* 3. Search Typeahead Input Field Styling */
.ms-select-search-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #111827;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ms-select-search-input:focus {
    border-color: #285A35;
    box-shadow: 0 0 0 2px rgba(40, 90, 53, 0.25);
}

html[data-theme="dark"] .ms-select-search-input {
    background: #262626;
    border-color: #333333;
    color: #ffffff;
}

/* 4. Slide-Down Animation for "Other Location" Manual Input */
.ms-other-country-wrapper {
    animation: msSlideDown 0.3s ease-out forwards;
}

@keyframes msSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 5. Force Hide Filtered-Out Non-Matching Country Options */
.ms-custom-option.is-hidden,
.ms-cp-custom-option.is-hidden {
    display: none !important;
}

.ms-custom-select-options,
.ms-cp-custom-select-options {
    display: flex !important;
    flex-direction: column !important;
}

/* History Timeline Content Cards Instant Responsive Activation (Zero Lag/Delay) */
.ms-content-card {
    opacity: 0.25 !important;
    transition: opacity 0.15s ease-out !important;
}

.ms-content-card.active {
    opacity: 1 !important;
}

/* Compact Non-Overlapping Sourcing Card Boxes for 14 Global Origins Map */
.gn-sourcing-card {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    transition: transform 0.25s ease, z-index 0.25s ease !important;
}

.gn-sourcing-card:hover {
    z-index: 99 !important;
    transform: translate(-50%, -55%) !important;
}

.gn-card-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.22) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    min-width: 120px !important;
    max-width: 190px !important;
    box-shadow: 0 8px 24px rgba(40, 90, 53, 0.08) !important;
}

.gn-sourcing-card:hover .gn-card-box {
    border-color: #285A35 !important;
    box-shadow: 0 12px 32px rgba(40, 90, 53, 0.18) !important;
    background: #FFFFFF !important;
}

.gn-country-name {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    color: #102A1D !important;
    margin-bottom: 3px !important;
    text-transform: uppercase !important;
}

.gn-commodity-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.gn-commodity-list li {
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #4A5B50 !important;
    white-space: nowrap !important;
}

.gn-dot-map-bg-img,
img.gn-dot-map-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
}

.gn-map-overlay-svg,
svg.gn-map-overlay-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Perfectly Round CSS Geographic Pin Dots for Global Network Map (Zero Oval Distortion) */
.gn-pin-dot {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 20 !important;
}

.gn-pin-halo {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: rgba(40, 90, 53, 0.45) !important;
    box-shadow: 0 0 10px rgba(40, 90, 53, 0.7) !important;
    animation: pinPulseHalo 2.5s infinite ease-in-out !important;
}

.gn-pin-core {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #285A35 !important;
    border: 1.5px solid #FFFFFF !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 6px rgba(40, 90, 53, 0.9) !important;
}

@keyframes pinPulseHalo {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.7); opacity: 0.2; }
}

/* Right Side Warehouse Specifications Checkmarks -> Pure White (#FFFFFF) */
.gn-check-icon,
.gn-wh-info-panel .gn-check-icon,
.gn-wh-specs .gn-check-icon,
.gn-wh-info-panel svg,
.gn-wh-specs svg,
.gn-wh-specs li svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Both Warehouse Navigation Arrow Buttons -> Identical Circle Border, Background & White Icon Color */
.gn-wh-nav-btn,
button.gn-wh-nav-btn,
.gn-wh-nav-btn.prev,
.gn-wh-nav-btn.next,
#gnwhPrevBtn,
#gnwhNextBtn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(40, 90, 53, 0.15) !important;
    border: 1px solid rgba(40, 90, 53, 0.5) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.gn-wh-nav-btn svg,
button.gn-wh-nav-btn svg,
.gn-wh-nav-btn.prev svg,
.gn-wh-nav-btn.next svg,
#gnwhPrevBtn svg,
#gnwhNextBtn svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.gn-wh-nav-btn:hover,
button.gn-wh-nav-btn:hover,
.gn-wh-nav-btn.prev:hover,
.gn-wh-nav-btn.next:hover {
    background: #285A35 !important;
    border-color: #285A35 !important;
    color: #0B0D11 !important;
    box-shadow: 0 4px 15px rgba(40, 90, 53, 0.4) !important;
}

.gn-wh-nav-btn:hover svg,
button.gn-wh-nav-btn:hover svg {
    stroke: #0B0D11 !important;
}

/* ==========================================================================
   GLOBAL ACCENT #285A35 SYSTEM — DEFAULT LIGHT THEME
   ========================================================================== */
:root, html, body {
    --color-gold: #285A35 !important;
    --color-gold-hover: #1e4428 !important;
    --color-gold-rgb: 40, 90, 53 !important;
    --theme-primary: #285A35 !important;
    --theme-primary-hover: #1e4428 !important;
    --primary-color: #285A35 !important;
}

/* Global Scrollbar */
html {
    scrollbar-color: #285A35 var(--color-bg) !important;
}
::-webkit-scrollbar-thumb {
    background: #285A35 !important;
}

/* Text Selection */
::selection {
    background: rgba(40, 90, 53, 0.35) !important;
    color: #FFFFFF !important;
}

/* Category Filter Pills Active State */
.ms-category-pill.is-active,
.ms-cat-pill.is-active,
.filter-pill.active,
.cat-pill.active,
.ms-cat-filter-btn.active,
[class*="pill"].active,
[class*="pill"].is-active {
    background-color: #285A35 !important;
    border-color: #285A35 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* Buttons & CTAs */
.btn-primary,
.ms-btn-primary,
.ms-gold-btn,
.submit-btn,
.ms-rfq-submit-btn,
.view-details-btn,
a.view-details {
    background-color: #285A35 !important;
    border-color: #285A35 !important;
  
}

.btn-primary:hover,
.ms-btn-primary:hover,
.ms-gold-btn:hover,
.submit-btn:hover,
.ms-rfq-submit-btn:hover {
    background-color: #1e4428 !important;
    border-color: #1e4428 !important;
    
    box-shadow: 0 4px 20px rgba(40, 90, 53, 0.4) !important;
}

/* Form Focus */
input:focus,
textarea:focus,
select:focus {
    border-color: #285A35 !important;
    box-shadow: 0 0 0 2px rgba(40, 90, 53, 0.25) !important;
}

/* Accents & Tags */
.ms-hero-tag,
.ms-section-badge,
.section-badge,
.tc-badge,
.fourmula-badge {
    color: #285A35 !important;
    border-color: rgba(40, 90, 53, 0.35) !important;
}

/* Hide any legacy theme toggle elements */
.ms-theme-toggle-btn,
.ms-theme-floating-toggle,
#ms-theme-floating-toggle {
    display: none !important;
    visibility: hidden !important;
}

/* Unified Hero Height (650px) & Light Green Background/Fade Overrides (Contact, Career, Global Network) */
#ms-cp-hero,
#ms-cr-hero,
#gn-hero,
.ms-cp-hero,
.ms-cr-hero,
.gn-hero-section,
html body #ms-cp-hero,
html body #ms-cr-hero,
html body #gn-hero,
html body .ms-cp-hero,
html body .ms-cr-hero,
html body .gn-hero-section,
html body [class*="elementor"] .ms-cp-hero,
html body [class*="elementor"] .ms-cr-hero,
html body [class*="elementor"] .gn-hero-section {
    min-height: 400px !important;
    height: 400px !important;
    background-color: #F4F8F2 !important;
    background: #F4F8F2 !important;
        border-bottom: 1px solid rgba(40, 90, 53, 0.12) !important;

}

@media (min-width: 992px) {
    #ms-cp-hero,
    #ms-cr-hero,
    #gn-hero,
    .ms-cp-hero,
    .ms-cr-hero,
    .gn-hero-section,
    .ms-cp-hero-inner,
    .ms-cr-hero-inner,
    .gn-hero-container {
        min-height: 400px !important;
        height: 400px !important;
        /* padding-top: 45px !important; */
        padding-bottom: 45px !important;
    }
}

/* Left Side Light Green Gradient Overlays Across All 3 Heroes */
#ms-cp-hero .ms-cp-hero-fade,
#ms-cr-hero .ms-cr-hero-fade,
#gn-hero .gn-hero-fade,
#gn-hero .gn-hero-bg-wrapper::after,
.ms-cp-hero-fade,
.ms-cr-hero-fade,
.gn-hero-fade,
.gn-hero-bg-wrapper::after,
html body .ms-cp-hero-fade,
html body .ms-cr-hero-fade,
html body .gn-hero-fade,
html body .gn-hero-bg-wrapper::after {
    background: linear-gradient(
        to right,
        #F4F8F2 0%,
        #F4F8F2 36%,
        rgba(244, 248, 242, 0.95) 45%,
        rgba(244, 248, 242, 0.70) 55%,
        rgba(244, 248, 242, 0.30) 65%,
        rgba(244, 248, 242, 0) 80%
    ) !important;
    pointer-events: none !important;
}

/* Contact & Career Hero Image: Align to bottom so bottom portion of the image shows */
#ms-cp-hero .ms-cp-hero-bg-img,
#ms-cp-hero img,
.ms-cp-hero-bg-img,
html body #ms-cp-hero img,
#ms-cr-hero .ms-cr-hero-bg-img,
#ms-cr-hero img,
.ms-cr-hero-bg-img,
html body #ms-cr-hero img {
    object-position: right bottom !important;
}

/* Global Network Hero Globe: Align to top-right corner to eliminate white space */
#gn-hero .gn-hero-bg-img,
#gn-hero img,
.gn-hero-bg-img,
html body #gn-hero .gn-hero-bg-img,
html body #gn-hero img {
    object-position: right top !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Contact Info Strip Icons & Dividers - Force Brand Green (Beats Elementor post-1077.css) */
#ms-cp-info-strip .ms-cp-info-icon,
section#ms-cp-info-strip .ms-cp-info-icon,
html body #ms-cp-info-strip .ms-cp-info-icon,
html body .elementor-1077 .elementor-element.elementor-element-ec2582b .ms-cp-info-icon,
html body .elementor-119 .elementor-element .ms-cp-info-icon,
html body [class*="elementor"] .ms-cp-info-icon,
.ms-cp-info-icon {
    color: #285A35 !important;
    border-color: #285A35 !important;
    border: 1px solid #285A35 !important;
}

#ms-cp-info-strip .ms-cp-info-icon svg,
section#ms-cp-info-strip .ms-cp-info-icon svg,
html body #ms-cp-info-strip .ms-cp-info-icon svg,
html body [class*="elementor"] .ms-cp-info-icon svg,
.ms-cp-info-icon svg {
    color: #285A35 !important;
    stroke: #285A35 !important;
    fill: none !important;
}

#ms-cp-info-strip .ms-cp-info-item,
section#ms-cp-info-strip .ms-cp-info-item,
html body #ms-cp-info-strip .ms-cp-info-item,
html body .elementor-1077 .elementor-element.elementor-element-ec2582b .ms-cp-info-item,
html body [class*="elementor"] .ms-cp-info-item,
.ms-cp-info-item {
    border-color: rgba(40, 90, 53, 0.18) !important;
}

/* Force Green on Dividers Across All Pages */
.ms-cr-gold-divider,
.gn-gold-divider,
.gold-divider,
.ms-gold-divider,
html body .ms-cr-gold-divider,
html body .gn-gold-divider,
html body [class*="gold-divider"] {
    background-color: #285A35 !important;
    background: #285A35 !important;
}

/* Contact Page Global Offices Section - Light Green Palette & Layout Overrides (Beats Elementor post-1077.css & post-119.css) */
#ms-cp-offices,
section#ms-cp-offices,
html body #ms-cp-offices,
html body section#ms-cp-offices,
html body .elementor-1077 .elementor-element.elementor-element-ec2582b #ms-cp-offices,
html body .elementor-1077 .elementor-element.elementor-element-ec2582b .ms-cp-offices,
html body .elementor-119 .elementor-element.elementor-element-c0131c2 #ms-cp-offices,
html body .elementor-119 .elementor-element.elementor-element-c0131c2 .ms-cp-offices,
html body div[class*="elementor"] .elementor-element .ms-cp-offices,
html body .elementor-element .ms-cp-offices,
html body .ms-cp-offices,
section.ms-cp-offices {
    background-color: #F4F8F2 !important;
    background: #F4F8F2 !important;
    padding: 100px 40px !important;
}

/* Stack layout: Header on top, boxes across bottom */
#ms-cp-offices .ms-cp-offices-inner,
html body #ms-cp-offices .ms-cp-offices-inner,
.ms-cp-offices .ms-cp-offices-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

#ms-cp-offices .ms-cp-offices-top,
#ms-cp-offices .ms-cp-offices-left,
html body #ms-cp-offices .ms-cp-offices-top,
html body #ms-cp-offices .ms-cp-offices-left,
.ms-cp-offices .ms-cp-offices-top,
.ms-cp-offices .ms-cp-offices-left {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    /* border-bottom: 1px solid rgba(40, 90, 53, 0.15) !important; */
    padding-bottom: 32px !important;
}

#ms-cp-offices .ms-cp-offices-title,
html body #ms-cp-offices .ms-cp-offices-title,
.ms-cp-offices .ms-cp-offices-title {
    color: #102A1D !important;
    font-size: 36px !important;
    font-weight: 800 !important;
}

#ms-cp-offices .ms-cp-offices-desc,
html body #ms-cp-offices .ms-cp-offices-desc,
.ms-cp-offices .ms-cp-offices-desc {
    color: #4A5B50 !important;
    font-size: 16px !important;
    max-width: 580px !important;
    margin: 0 !important;
}

#ms-cp-offices .ms-cp-offices-label,
html body #ms-cp-offices .ms-cp-offices-label,
.ms-cp-offices .ms-cp-offices-label {
    color: #285A35 !important;
}

/* 4 boxes grid across bottom */
#ms-cp-offices .ms-cp-offices-grid,
#ms-cp-offices .ms-cp-offices-right,
html body #ms-cp-offices .ms-cp-offices-grid,
html body #ms-cp-offices .ms-cp-offices-right,
.ms-cp-offices .ms-cp-offices-grid,
.ms-cp-offices .ms-cp-offices-right {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
}

@media (max-width: 1200px) {
    #ms-cp-offices .ms-cp-offices-grid,
    #ms-cp-offices .ms-cp-offices-right,
    html body #ms-cp-offices .ms-cp-offices-grid,
    html body #ms-cp-offices .ms-cp-offices-right {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #ms-cp-offices .ms-cp-offices-grid,
    #ms-cp-offices .ms-cp-offices-right,
    html body #ms-cp-offices .ms-cp-offices-grid,
    html body #ms-cp-offices .ms-cp-offices-right {
        grid-template-columns: 1fr !important;
    }
}

/* Card Styling - White Cards with Subtle Green Borders */
#ms-cp-offices .ms-cp-office-card,
html body #ms-cp-offices .ms-cp-office-card,
html body .elementor-1077 .elementor-element.elementor-element-ec2582b .ms-cp-office-card,
html body .elementor-119 .elementor-element.elementor-element-c0131c2 .ms-cp-office-card,
html body div[class*="elementor"] .elementor-element .ms-cp-office-card,
html body .elementor-element .ms-cp-office-card,
html body .ms-cp-office-card,
.ms-cp-office-card {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #69d8871f !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(40, 90, 53, 0.06) !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

#ms-cp-offices .ms-cp-office-card:hover,
html body #ms-cp-offices .ms-cp-office-card:hover {
    border-color: #285a3559 !important;
    box-shadow: 0 20px 40px rgba(40, 90, 53, 0.14) !important;
    transform: translateY(-6px) !important;
}

#ms-cp-offices .ms-cp-office-img-wrapper,
html body #ms-cp-offices .ms-cp-office-img-wrapper {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    position: relative !important;
}

#ms-cp-offices .ms-cp-office-img,
html body #ms-cp-offices .ms-cp-office-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}

#ms-cp-offices .ms-cp-office-card:hover .ms-cp-office-img {
    transform: scale(1.05) !important;
}

#ms-cp-offices .ms-cp-office-body,
html body #ms-cp-offices .ms-cp-office-body {
    padding: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    flex: 1 !important;
    background: #FFFFFF !important;
}

#ms-cp-offices .ms-cp-office-title-row,
html body #ms-cp-offices .ms-cp-office-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #285A35 !important;
}

#ms-cp-offices .ms-cp-office-title,
html body #ms-cp-offices .ms-cp-office-title,
.ms-cp-office-title {
    color: #102A1D !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

#ms-cp-offices .ms-cp-office-sublabel,
html body #ms-cp-offices .ms-cp-office-sublabel,
.ms-cp-office-sublabel {
    color: #285A35 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin-bottom: 4px !important;
}

#ms-cp-offices .ms-cp-office-address,
html body #ms-cp-offices .ms-cp-office-address,
.ms-cp-office-address,
#ms-cp-offices .ms-cp-office-meta,
html body #ms-cp-offices .ms-cp-office-meta,
.ms-cp-office-meta {
    color: #4A5B50 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    
}

#ms-cp-offices .ms-cp-office-meta a,
html body #ms-cp-offices .ms-cp-office-meta a {
    color: #285A35 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   GLOBAL NETWORK: SOURCING REGIONS (LIGHT GREEN PALETTE & BRAND GREEN LINES/PINS)
   ========================================================================== */
#gn-sourcing,
section#gn-sourcing,
.gn-sourcing-section,
html body #gn-sourcing,
html body .gn-sourcing-section,
html body [class*="elementor"] #gn-sourcing {
    background-color: #F4F8F2 !important;
    background: #F4F8F2 !important;
    color: #102A1D !important;
}

#gn-sourcing .gn-section-title,
html body #gn-sourcing .gn-section-title {
    color: #102A1D !important;
}

#gn-sourcing .gn-section-desc,
html body #gn-sourcing .gn-section-desc {
    color: #4A5B50 !important;
}

#gn-sourcing .gn-label,
html body #gn-sourcing .gn-label {
    color: #285A35 !important;
}

#gn-sourcing .gn-card-box,
html body #gn-sourcing .gn-card-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.22) !important;
    box-shadow: 0 8px 24px rgba(40, 90, 53, 0.08) !important;
}

#gn-sourcing .gn-sourcing-card:hover .gn-card-box,
html body #gn-sourcing .gn-sourcing-card:hover .gn-card-box {
    border-color: #285A35 !important;
    box-shadow: 0 12px 32px rgba(40, 90, 53, 0.18) !important;
    background: #FFFFFF !important;
}

#gn-sourcing .gn-country-name,
html body #gn-sourcing .gn-country-name {
    color: #102A1D !important;
}

#gn-sourcing .gn-commodity-list li,
html body #gn-sourcing .gn-commodity-list li {
    color: #4A5B50 !important;
}

#gn-sourcing .gn-commodity-list li::before,
html body #gn-sourcing .gn-commodity-list li::before {
    color: #285A35 !important;
}

#gn-sourcing .gn-hub-badge,
html body #gn-sourcing .gn-hub-badge {
    background: rgba(40, 90, 53, 0.12) !important;
    color: #285A35 !important;
}

#gn-sourcing .gn-card-tagline,
html body #gn-sourcing .gn-card-tagline {
    color: #285A35 !important;
}

#gn-sourcing .gn-card-desc,
html body #gn-sourcing .gn-card-desc {
    color: #4A5B50 !important;
    border-top: 1px solid rgba(40, 90, 53, 0.12) !important;
}

#gn-sourcing svg.gn-map-overlay-svg path,
html body #gn-sourcing svg.gn-map-overlay-svg path {
    stroke: #285A35 !important;
}

#gn-sourcing .gn-pin-halo,
html body #gn-sourcing .gn-pin-halo {
    background: rgba(40, 90, 53, 0.35) !important;
    box-shadow: 0 0 8px rgba(40, 90, 53, 0.5) !important;
}

#gn-sourcing .gn-pin-core,
html body #gn-sourcing .gn-pin-core {
    background: #285A35 !important;
    box-shadow: 0 0 6px #285A35 !important;
}

/* Hero Banner Bottom Shadow Divider (No border, pure luxury box-shadow) */
#gn-hero,
section#gn-hero,
.gn-hero-section,
html body #gn-hero,
html body .gn-hero-section,
#home-hero,
.ms-home-hero,
.ms-au-hero,
.ms-cp-hero,
.ms-careers-hero {
	position: relative !important;
    z-index: 15 !important;
}

/* Global Network Presence: Exact Contact Page 4-Office Card Design */
#gn-presence.gn-presence-section,
#gn-presence.ms-cp-offices,
section#gn-presence,
html body #gn-presence {
    background-color: #F4F8F2;
    background: #F4F8F2;
    padding: 100px 0;
}

#gn-presence .gn-offices-header,
#gn-presence .ms-cp-offices-top,
html body #gn-presence .gn-offices-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    /* border-bottom: 1px solid rgba(40, 90, 53, 0.15) !important; */
    padding-bottom: 24px !important;
    /* margin-bottom: 40px !important; */
    width: 100% !important;
}

#gn-presence .gn-offices-header-left,
#gn-presence .ms-cp-offices-top-content {
    /* max-width: 700px !important; */
}

#gn-presence .gn-label,
#gn-presence .ms-cp-offices-label {
    display: block !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #285A35 !important;
    margin-bottom: 12px !important;
}

#gn-presence .gn-section-title,
#gn-presence .ms-cp-offices-title {
    font-family: var(--font-display) !important;
    font-size: clamp(28px, 3.2vw, 36px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: #102A1D !important;
    margin: 0 !important;
}

#gn-presence .gn-offices-cards-grid,
#gn-presence .ms-cp-offices-grid,
html body #gn-presence .gn-offices-cards-grid,
html body #gn-presence .ms-cp-offices-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
}

#gn-presence .gn-office-card,
#gn-presence .ms-cp-office-card,
html body #gn-presence .gn-office-card,
html body #gn-presence .ms-cp-office-card {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.14) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 12px 30px rgba(40, 90, 53, 0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

#gn-presence .gn-office-card:hover,
#gn-presence .ms-cp-office-card:hover,
html body #gn-presence .gn-office-card:hover,
html body #gn-presence .ms-cp-office-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 45px rgba(40, 90, 53, 0.14) !important;
    border-color: rgba(40, 90, 53, 0.35) !important;
}

#gn-presence .gn-office-img-wrapper,
#gn-presence .ms-cp-office-img-wrapper,
#ms-cp-offices .ms-cp-office-img-wrapper,
html body #gn-presence .gn-office-img-wrapper,
html body #gn-presence .ms-cp-office-img-wrapper,
html body #ms-cp-offices .ms-cp-office-img-wrapper,
.ms-cp-office-img-wrapper,
.gn-office-img-wrapper {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #E8EFE5 !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#gn-presence .gn-office-img,
#gn-presence .ms-cp-office-img,
#ms-cp-offices .ms-cp-office-img,
html body #gn-presence .gn-office-img,
html body #gn-presence .ms-cp-office-img,
html body #ms-cp-offices .ms-cp-office-img,
.ms-cp-office-img,
.gn-office-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 18px 18px 0 0 !important;
    transition: transform 0.6s ease !important;
}

#gn-presence .gn-office-card:hover .gn-office-img,
#gn-presence .ms-cp-office-card:hover .ms-cp-office-img,
#ms-cp-offices .ms-cp-office-card:hover .ms-cp-office-img,
.ms-cp-office-card:hover .ms-cp-office-img {
    transform: scale(1.05) !important;
}

#gn-presence .gn-office-info,
#gn-presence .ms-cp-office-body,
html body #gn-presence .gn-office-info,
html body #gn-presence .ms-cp-office-body {
    padding: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    flex-grow: 1 !important;
    background: #FFFFFF !important;
    border-radius: 0 0 18px 18px !important;
}

#gn-presence .ms-cp-office-title-row,
html body #gn-presence .ms-cp-office-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #285A35 !important;
    border-bottom: 1px solid rgba(40, 90, 53, 0.12) !important;
    padding-bottom: 12px !important;
    margin: 0 !important;
}

#gn-presence .ms-cp-office-title-row svg {
    color: #285A35 !important;
    stroke: #285A35 !important;
    flex-shrink: 0 !important;
}

#gn-presence .ms-cp-office-title,
#gn-presence .gn-office-country,
html body #gn-presence .ms-cp-office-title {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #102A1D !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#gn-presence .gn-office-role {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #285A35 !important;
    opacity: 0.8 !important;
}

#gn-presence .ms-cp-office-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#gn-presence .ms-cp-office-sublabel {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #285A35 !important;
}

#gn-presence .ms-cp-office-address,
#gn-presence .gn-office-city {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #4A5B50 !important;
    margin: 0 !important;
}

#gn-presence .ms-cp-office-contact-meta,
#gn-presence .gn-office-contact-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(40, 90, 53, 0.15) !important;
    margin-top: auto !important;
}

#gn-presence .ms-cp-office-meta,
#gn-presence .gn-office-detail {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    color: #4A5B50 !important;
    margin: 0 !important;
}

#gn-presence .ms-cp-office-meta span,
#gn-presence .gn-office-detail span {
    color: #285A35 !important;
    font-weight: 700 !important;
}

#gn-presence .ms-cp-office-meta a,
#gn-presence .gn-office-detail a {
    color: #4A5B50 !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

#gn-presence .ms-cp-office-meta a:hover,
#gn-presence .gn-office-detail a:hover {
    color: #285A35 !important;
}

@media (max-width: 1024px) {
    #gn-presence .gn-offices-cards-grid,
    #gn-presence .ms-cp-offices-grid,
    html body #gn-presence .gn-offices-cards-grid,
    html body #gn-presence .ms-cp-offices-grid,
    .ms-cp-offices-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    #gn-presence .gn-offices-cards-grid,
    #gn-presence .ms-cp-offices-grid,
    html body #gn-presence .gn-offices-cards-grid,
    html body #gn-presence .ms-cp-offices-grid,
    .gn-presence-section .gn-offices-cards-grid,
    .gn-presence-section .ms-cp-offices-grid,
    .ms-cp-offices .ms-cp-offices-grid,
    .ms-cp-offices-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   HOMEPAGE: ABOUT MOLVIZADAH SONS SECTION
   Placed directly after Catalogue / Category section
───────────────────────────────────────────────────────────── */
.ms-home-about-section {
    position: relative;
    background: linear-gradient(180deg, #F9FBF8 0%, #F3F7F1 100%);
    border-top: 1px solid rgba(40, 90, 53, 0.09);
    border-bottom: 1px solid rgba(40, 90, 53, 0.09);
    padding: 100px 0;
    overflow: hidden;
}

.ms-home-about-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
}

.ms-home-about-grid {
    display: grid;
    grid-template-columns: 1.18fr 0.92fr;
    gap: 64px;
    align-items: center;
}

/* Badge */
.ms-home-about-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1.5px solid rgba(40, 90, 53, 0.25);
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #285A35;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(40, 90, 53, 0.06);
}

.ms-about-badge-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #285A35;
    box-shadow: 0 0 0 3px rgba(40, 90, 53, 0.2);
    display: inline-block;
}

/* Heading */
.ms-home-about-heading {
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif) !important;
    font-size: clamp(26px, 3.2vw, 36px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    color: #102A1D !important;
    text-transform: uppercase !important;
    margin: 0 0 24px 0 !important;
}

/* Editorial Paragraphs */
.ms-home-about-paragraphs p {
    font-size: 1.02rem !important;
    line-height: 1.8 !important;
    color: #4A5B50 !important;
    margin: 0 0 16px 0 !important;
    font-weight: 400 !important;
}

.ms-home-about-paragraphs p.ms-home-about-lead {
    font-size: 1.02rem !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: #4A5B50 !important;
    margin-bottom: 16px !important;
}

/* Strategic Highlights / Pillars Strip */
.ms-home-about-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 32px 0;
}

.ms-about-pillar-item {
    background: #ffffff;
    border: 1px solid rgba(40, 90, 53, 0.14);
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(16, 42, 29, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ms-about-pillar-item:hover {
    transform: translateY(-3px);
    border-color: rgba(40, 90, 53, 0.35);
    box-shadow: 0 8px 22px rgba(16, 42, 29, 0.08);
}

.ms-about-pillar-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(40, 90, 53, 0.08);
    color: #285A35;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ms-about-pillar-body {
    display: flex;
    flex-direction: column;
}

.ms-about-pillar-value {
    font-size: 0.96rem;
    font-weight: 800;
    color: #102A1D;
    line-height: 1.25;
}

.ms-about-pillar-caption {
    font-size: 0.72rem;
    font-weight: 600;
    color: #617367;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* CTA Buttons */
.ms-home-about-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ms-about-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.ms-about-btn-solid {
    background: #285A35 !important;
    color: #ffffff !important;
    border: 1.5px solid #285A35 !important;
    box-shadow: 0 4px 16px rgba(40, 90, 53, 0.25);
}

.ms-about-btn-solid:hover {
    background: #1C4025 !important;
    border-color: #1C4025 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 90, 53, 0.35);
}

.ms-about-btn-outline {
    background: transparent !important;
    color: #285A35 !important;
    border: 1.5px solid rgba(40, 90, 53, 0.32) !important;
}

.ms-about-btn-outline:hover {
    background: rgba(40, 90, 53, 0.08) !important;
    border-color: #285A35 !important;
    color: #102A1D !important;
    transform: translateY(-2px);
}

/* Right Visual Column */
.ms-home-about-visual {
    position: relative;
}

.ms-home-about-visual-card {
    position: relative;
    max-width: 540px;
    margin-left: auto;
}

.ms-home-about-img-wrap {
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    aspect-ratio: 4 / 3 !important;
    box-shadow: 0 20px 48px -10px rgba(16, 42, 29, 0.16), 0 0 0 1px rgba(40, 90, 53, 0.12) !important;
    background: transparent !important;
}

.ms-about-img,
.ms-home-about-img-wrap img,
html body .ms-home-about-img-wrap img,
.elementor .ms-home-about-img-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ms-home-about-visual-card:hover .ms-about-img {
    transform: scale(1.035) !important;
}

.ms-about-img-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 42, 29, 0.02) 0%, rgba(16, 42, 29, 0.4) 100%);
    pointer-events: none;
}

/* Floating Cards */
.ms-about-floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(40, 90, 53, 0.16);
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 14px 35px rgba(16, 42, 29, 0.14);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 3;
    animation: msFloat 6s ease-in-out infinite alternate;
}

.ms-floating-top {
    top: -20px;
    right: -16px;
}

.ms-floating-bottom {
    bottom: -20px;
    left: -20px;
    animation-delay: -3s;
}

@keyframes msFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

.ms-floating-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(40, 90, 53, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ms-floating-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #285A35;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ms-floating-meta {
    display: flex;
    flex-direction: column;
}

.ms-floating-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #102A1D;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ms-floating-subtitle {
    font-size: 0.72rem;
    color: #55675A;
    font-weight: 500;
    margin-top: 2px;
}

/* Responsive Breakpoints */
/* Tablet View (768px to 1024px, including 976px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .ms-home-about-section,
    html body .ms-home-about-section {
        padding: 64px 0 !important;
    }

    .ms-home-about-container,
    html body .ms-home-about-container {
        padding: 0 28px !important;
        max-width: 100% !important;
    }

    .ms-home-about-grid,
    html body .ms-home-about-grid,
    .elementor .ms-home-about-grid {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 36px !important;
        align-items: center !important;
    }

    .ms-home-about-heading,
    html body .ms-home-about-heading,
    .elementor .ms-home-about-heading {
        font-size: clamp(24px, 2.8vw, 30px) !important;
        margin: 0 0 18px 0 !important;
        line-height: 1.22 !important;
    }

    .ms-home-about-paragraphs p,
    html body .ms-home-about-paragraphs p {
        font-size: 0.94rem !important;
        line-height: 1.68 !important;
        margin: 0 0 12px 0 !important;
    }

    .ms-home-about-visual,
    html body .ms-home-about-visual {
        width: 100% !important;
    }

    .ms-home-about-visual-card,
    html body .ms-home-about-visual-card {
        max-width: 100% !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .ms-home-about-img-wrap,
    html body .ms-home-about-img-wrap,
    .elementor .ms-home-about-img-wrap {
        aspect-ratio: 4 / 3 !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-shadow: 0 16px 36px -8px rgba(16, 42, 29, 0.14) !important;
    }

    .ms-home-about-pillars {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .ms-about-floating-badge {
        position: static;
        margin-top: 12px;
    }

    .ms-floating-top,
    .ms-floating-bottom {
        display: none !important;
    }
}

/* Mobile View (<= 767px) */
@media (max-width: 767px) {
    .ms-home-about-section,
    html body .ms-home-about-section {
        padding: 44px 0 50px 0 !important;
    }

    .ms-home-about-container,
    html body .ms-home-about-container {
        padding: 0 18px !important;
    }

    .ms-home-about-grid,
    html body .ms-home-about-grid,
    .elementor .ms-home-about-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: start !important;
    }

    .ms-home-about-heading,
    html body .ms-home-about-heading,
    .elementor .ms-home-about-heading {
        font-size: 24px !important;
        margin: 0 0 16px 0 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    .ms-home-about-paragraphs p,
    html body .ms-home-about-paragraphs p {
        font-size: 0.92rem !important;
        line-height: 1.65 !important;
        margin: 0 0 12px 0 !important;
    }

    .ms-home-about-visual,
    html body .ms-home-about-visual {
        width: 100% !important;
    }

    .ms-home-about-visual-card,
    html body .ms-home-about-visual-card {
        max-width: 100% !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .ms-home-about-img-wrap,
    html body .ms-home-about-img-wrap,
    .elementor .ms-home-about-img-wrap {
        aspect-ratio: 16 / 10 !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-shadow: 0 12px 28px -6px rgba(16, 42, 29, 0.12) !important;
    }

    .ms-home-about-pillars {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ms-home-about-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .ms-about-btn {
        justify-content: center !important;
    }

    .ms-about-floating-badge {
        position: static !important;
        margin-top: 12px !important;
        animation: none !important;
    }

    .ms-floating-top,
    .ms-floating-bottom {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   ABOUT US PAGE: ENFORCE LUXURY GREEN LIGHT BACKGROUND (#F4F8F2)
   Replaces all golden/cream light backgrounds across the entire page
───────────────────────────────────────────────────────────── */
body.page-template-page-about,
body.page-id-about,
html body.page-template-page-about,
#ms-about-main,
.ms-au-page {
    background-color: #F4F8F2 !important;
    background: #F4F8F2 !important;
}

/* Global Inner Pages Hero 400px height (About, Contact, Careers, Global Network) */
.ms-au-hero,
.ms-cp-hero,
.ms-cr-hero,
.gn-hero-section,
#gn-hero {
    min-height: 400px;
    height: 400px;
    box-sizing: border-box;
}

.ms-au-hero-bg,
.ms-au-hero-bg-img,
.gn-hero-bg-wrapper,
.gn-hero-bg-img,
.ms-cp-hero-bg,
.ms-cp-hero-bg-img,
.ms-cr-hero-bg-wrapper,
.ms-cr-hero-bg-img {
    height: 400px;
    min-height: 400px;
    max-height: 400px;
    box-sizing: border-box;
}

.ms-au-hero-inner,
.ms-cp-hero-inner,
.ms-cr-hero-inner {
    min-height: 400px;
    height: 400px;
    padding-top: 110px;
    padding-bottom: 45px;
}

.gn-hero-container {
    padding-top: 110px !important;
    padding-bottom: 45px !important;
}

.ms-au-hero-fade {
    background: linear-gradient(to right, #F4F8F2 0%, #F4F8F2 36%, rgba(244, 248, 242, 0.95) 45%, rgba(244, 248, 242, 0.70) 55%, rgba(244, 248, 242, 0.30) 65%, rgba(244, 248, 242, 0) 80%) !important;
}

.ms-au-who {
    background: linear-gradient(180deg, #F9FBF8 0%, #F3F7F1 100%);
    border-top: 1px solid rgba(40, 90, 53, 0.08);
    border-bottom: 1px solid rgba(40, 90, 53, 0.08);
}

.ms-au-who-inner {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 64px !important;
    align-items: center !important;
}

.ms-au-model {
    background-color: #F4F8F2;
    background: #F4F8F2;
}

section.ms-au-values,
.ms-au-values {
    background-color: #F4F8F2;
    background: #F4F8F2;
}

.ms-au-value-card {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.14) !important;
    /* box-shadow: 0 10px 30px rgba(16, 42, 29, 0.04) !important; */
}

.ms-au-value-card:hover {
    background-color: #F9FBF8 !important;
    border-color: rgba(40, 90, 53, 0.4) !important;
    /* box-shadow: 0 20px 40px rgba(16, 42, 29, 0.09) !important; */
}

.ms-au-leadership {
    background-color: #FFF;
    background: #FFF;
}

.ms-au-stat-item {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.14) !important;
}

@media (max-width: 1080px) {
    .ms-au-who-inner {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
    }
}



/* ==========================================================================
   GLOBAL NETWORK � LOGISTICS FEATURE CARDS (Dark ? Light Green Theme)
   ========================================================================== */



/* Section heading + desc on light bg — Left aligned */
.gn-markets-section .gn-markets-header-center,
html body .gn-markets-section .gn-markets-header-center {
    text-align: left !important;
    margin: 0 0 3rem 0 !important;
}

.gn-markets-section .gn-section-title,
.gn-markets-section .text-white,
html body .gn-markets-section .gn-section-title {
    color: #102A1D !important;
    text-align: left !important;
}

.gn-markets-section .gn-section-desc,
.gn-markets-section .text-muted,
html body .gn-markets-section .gn-section-desc {
    color: #4A5B50 !important;
    text-align: left !important;
    margin: 0 !important;
}

.gn-markets-section .gn-container,
#gn-markets .gn-container,
html body .gn-markets-section .gn-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Label pill */
.gn-markets-section .gn-label {
    color: #285A35 !important;
    border-color: rgba(40, 90, 53, 0.3) !important;
}

/* Feature card: dark ? white */
.gn-feature-card,
html body .gn-feature-card {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(40, 90, 53, 0.15) !important;
    box-shadow: 0 4px 20px rgba(16, 42, 29, 0.06) !important;
}

.gn-feature-card:hover,
html body .gn-feature-card:hover {
    border-color: rgba(40, 90, 53, 0.45) !important;
    background: #FFFFFF !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(16, 42, 29, 0.12) !important;
}

/* Icon circle: green bg + white border + white SVG stroke */
.gn-feature-icon-circle,
html body .gn-feature-icon-circle {
    background: #285A35 !important;
    border: 2.5px solid #FFFFFF !important;
    box-shadow: 0 0 0 1.5px #285A35 !important;
    width: 52px !important;
    height: 52px !important;
}

.gn-feature-icon-circle svg,
html body .gn-feature-icon-circle svg {
    stroke: #FFFFFF !important;
}

/* Card titles + descriptions on white cards */
.gn-feature-title,
html body .gn-feature-title {
    color: #102A1D !important;
}

.gn-feature-desc,
html body .gn-feature-desc {
    color: #4A5B50 !important;
}

/* Responsive: wrap to 2-col on tablet, 1-col on mobile */
@media (max-width: 1080px) {
    .gn-markets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 640px) {
    .gn-markets-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   GLOBAL NETWORK � REGIONAL CONTACTS (Golden ? Brand Green Theme)
   ========================================================================== */

/* Section background */
#gn-regional-contacts.ms-faq-section,
html body #gn-regional-contacts,
html body #gn-regional-contacts.ms-faq-section {
    background-color: #F4F8F2 !important;
    background-image: none !important;
}

/* Icon circle border: golden ? green */
#gn-regional-contacts .ms-faq-support-icon,
html body #gn-regional-contacts .ms-faq-support-icon {
    border-color: #285A35 !important;
    color: #285A35 !important;
    background: rgba(40, 90, 53, 0.08) !important;
}

/* Divider line: golden ? green */
#gn-regional-contacts .ms-faq-support-divider,
html body #gn-regional-contacts .ms-faq-support-divider {
    background-color: #285A35 !important;
}

/* Accordion item number color */
#gn-regional-contacts .ms-faq-item-num,
html body #gn-regional-contacts .ms-faq-item-num {
    color: #285A35 !important;
}

/* Accordion + icon colors */
#gn-regional-contacts .ms-faq-item-icon,
html body #gn-regional-contacts .ms-faq-item-icon {
    color: #285A35 !important;
}

/* Title color */
#gn-regional-contacts .ms-faq-title,
html body #gn-regional-contacts .ms-faq-title {
    color: #102A1D !important;
}

/* Subtitle label */
#gn-regional-contacts .ms-faq-desc,
html body #gn-regional-contacts .ms-faq-desc {
    color: #285A35 !important;
}

/* ==========================================================================
   GLOBAL NETWORK � SUPPLY CHAIN ICONS (Green Circle Border)
   ========================================================================== */

.gn-step-icon-box,
html body .gn-step-icon-box {
    border: 2px solid #285A35 !important;
    border-radius: 50% !important;
    background: rgba(40, 90, 53, 0.07) !important;
    padding: 8px !important;
}


/* ==========================================================================
   ABOUT US - WHO WE ARE: LEAD PARAGRAPH SAME AS BODY
   ========================================================================== */
.ms-au-who-paragraphs p.ms-au-who-lead,
.ms-au-who-lead {
    font-size: 1.02rem;
    line-height: 1.8;
    font-weight: 400;
    color: #4A5B50;
    margin-bottom: 16px;
}

/* ==========================================================================
   ABOUT US - HISTORY TIMELINE: WHITE BACKGROUND THEME (Image 1)
   ========================================================================== */
.ms-history-section-outer {
    background-color: #FFFFFF;
    background: #FFFFFF;
    color: #102A1D;
    border-top: 1px solid rgba(40, 90, 53, 0.1);
}

.ms-history-grain,
.ms-history-vignette,
html body .ms-history-grain,
html body .ms-history-vignette {
    display: none !important;
}

.ms-history-sticky-wrapper,
html body .ms-history-sticky-wrapper {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

.ms-history-heading,
html body .ms-history-heading {
    color: #102A1D;
}

.ms-history-label,
html body .ms-history-label {
    color: #285A35 !important;
    opacity: 1 !important;
}

.ms-timeline-ticks-above {
    background-image: repeating-linear-gradient(
        to right,
        rgba(40, 90, 53, 0.25) 0px,
        rgba(40, 90, 53, 0.25) 1px,
        transparent 1px,
        transparent 16px
    ) !important;
}

.ms-timeline-ticks-above::after {
    background-image: repeating-linear-gradient(
        to right,
        rgba(40, 90, 53, 0.45) 0px,
        rgba(40, 90, 53, 0.45) 1px,
        transparent 1px,
        transparent 80px
    ) !important;
}

.ms-timeline-main-line {
    background-color: rgba(40, 90, 53, 0.2) !important;
}

.ms-timeline-progress-fill {
    background-color: #285A35 !important;
    background: #285A35 !important;
    box-shadow: 0 0 10px rgba(40, 90, 53, 0.4) !important;
}

.ms-active-badge {
    background: #285A35 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(40, 90, 53, 0.3) !important;
}

.ms-active-connector {
    background-color: #285A35 !important;
    box-shadow: 0 0 6px rgba(40, 90, 53, 0.4) !important;
}

.ms-node-diamond {
    background-color: #FFFFFF !important;
    border: 1.5px solid rgba(40, 90, 53, 0.35) !important;
}

.ms-milestone-node.is-reached .ms-node-diamond {
    background-color: #285A35 !important;
    border-color: #285A35 !important;
    box-shadow: 0 0 8px rgba(40, 90, 53, 0.4) !important;
}

.ms-milestone-node.is-reached .ms-node-year-label {
    color: #102A1D !important;
    font-weight: 800 !important;
}

.ms-milestone-node.is-current .ms-node-diamond {
    background-color: #285A35 !important;
    border-color: #285A35 !important;
    box-shadow: 0 0 14px rgba(40, 90, 53, 0.6) !important;
}

.ms-milestone-node.is-reached .ms-node-stem-down,
.ms-milestone-node.is-current .ms-node-stem-down {
    background-color: #285A35 !important;
    box-shadow: 0 0 6px rgba(40, 90, 53, 0.4) !important;
}

.ms-node-year-label,
html body .ms-history-section-outer .ms-node-year-label,
html body #ms-history-section-outer .ms-node-year-label {
    color: #777777;
}

.ms-milestone-node.is-reached .ms-node-year-label,
html body .ms-history-section-outer .ms-milestone-node.is-reached .ms-node-year-label,
html body #ms-history-section-outer .ms-milestone-node.is-reached .ms-node-year-label {
    color: #102A1D;
}

.ms-card-year,
html body .ms-history-section-outer .ms-card-year,
html body #ms-history-section-outer .ms-card-year {
    color: #102A1D;
}

.ms-card-subtitle {
    color: #285A35;
    font-weight: 800;
}

.ms-card-desc {
    color: #4A5B50;
}

/* History Timeline Mobile & Tablet Responsive Layout */
@media (max-width: 768px) {
    #ms-history-section-outer,
    .ms-history-section-outer,
    html body #ms-history-section-outer,
    html body .ms-history-section-outer {
        height: auto !important;
        min-height: auto !important;
        padding: 50px 0 !important;
        overflow: visible !important;
    }

    .ms-history-sticky-wrapper,
    html body .ms-history-sticky-wrapper,
    .ms-history-sticky-wrapper.is-fixed-pinned,
    html body .ms-history-sticky-wrapper.is-fixed-pinned,
    .ms-history-sticky-wrapper.is-unpinned-bottom,
    html body .ms-history-sticky-wrapper.is-unpinned-bottom {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .ms-history-container,
    html body .ms-history-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .ms-history-heading,
    html body .ms-history-heading {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .ms-history-desc,
    html body .ms-history-desc {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-top: 12px !important;
    }

    /* Timeline Track on Mobile: Safe padding so left/right labels never get clipped */
    .ms-timeline-track-area,
    html body .ms-timeline-track-area {
        margin-top: 55px !important;
        margin-bottom: 25px !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .ms-timeline-axis-line,
    html body .ms-timeline-axis-line {
        width: 100% !important;
    }

    .ms-active-marker-pin,
    html body .ms-active-marker-pin {
        top: -46px !important;
    }

    .ms-active-badge,
    html body .ms-active-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    .ms-node-year-label,
    html body .ms-node-year-label {
        font-size: 12px !important;
        font-weight: 700 !important;
        top: -26px !important;
    }

    /* Milestone node hit area & alignment */
    .ms-milestone-node,
    html body .ms-milestone-node {
        transform: translateX(-50%) !important;
    }

    /* Content Cards Grid: Clean vertical stack on mobile with full opacity */
    .ms-history-content-grid,
    html body .ms-history-content-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
        margin-top: 35px !important;
        width: 100% !important;
    }

    .ms-content-card,
    html body .ms-content-card {
        opacity: 1 !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .ms-card-year,
    html body .ms-card-year {
        font-size: 32px !important;
        margin-bottom: 6px !important;
    }

    .ms-card-subtitle,
    html body .ms-card-subtitle {
        font-size: 12px !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 8px !important;
    }

    .ms-card-desc,
    html body .ms-card-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   ABOUT US - CAPABILITIES: WHITE BACKGROUND THEME (Image 2)
   ========================================================================== */
.ms-au-capabilities {
    background-color: #FFFFFF;
    background: #FFFFFF;
    color: #102A1D;
    padding: 140px 0;
}

.ms-au-capabilities .ms-au-section-title {
    color: #102A1D;
}

.ms-au-cap-desc {
    color: #4A5B50;
}

.ms-au-capabilities .ms-au-btn-outline-gold,
html body .ms-au-capabilities .ms-au-btn-outline-gold {
    border-color: #285A35 !important;
    color: #285A35 !important;
}

.ms-au-capabilities .ms-au-btn-outline-gold:hover,
html body .ms-au-capabilities .ms-au-btn-outline-gold:hover {
    background-color: #285A35 !important;
    color: #ffffff !important;
}

.ms-au-cap-card,
html body .ms-au-cap-card {
    border: 1.5px solid rgba(40, 90, 53, 0.15) !important;
    box-shadow: 0 8px 24px rgba(16, 42, 29, 0.08) !important;
    min-width: 0 !important;
}

.ms-au-cap-card:hover,
html body .ms-au-cap-card:hover {
    border-color: #285A35 !important;
    box-shadow: 0 20px 40px rgba(16, 42, 29, 0.18) !important;
}

/* Capabilities Container & Grid Containment: Prevents 4-card grid from overflowing right side */
.ms-au-capabilities,
html body .ms-au-capabilities {
    overflow: hidden !important;
}

.ms-au-capabilities-inner,
html body .ms-au-capabilities-inner {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

@media (min-width: 1025px) {
    .ms-au-capabilities-inner,
    html body .ms-au-capabilities-inner {
        display: grid !important;
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
        gap: 48px !important;
        align-items: center !important;
    }

    .ms-au-cap-left,
    html body .ms-au-cap-left {
        min-width: 0 !important;
        width: 100% !important;
    }

    .ms-au-cap-right,
    html body .ms-au-cap-right {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 440px !important;
    }
}

@media (max-width: 1024px) {
    .ms-au-capabilities-inner,
    html body .ms-au-capabilities-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .ms-au-cap-left,
    html body .ms-au-cap-left {
        width: 100% !important;
    }

    .ms-au-cap-right,
    html body .ms-au-cap-right {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        height: auto !important;
    }

    .ms-au-cap-card,
    html body .ms-au-cap-card {
        height: 320px !important;
    }
}

@media (max-width: 600px) {
    .ms-au-capabilities-inner,
    html body .ms-au-capabilities-inner {
        /* padding-left: 16px !important; */
        /* padding-right: 16px !important; */
    }

    .ms-au-cap-right,
    html body .ms-au-cap-right {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ms-au-cap-card,
    html body .ms-au-cap-card {
        height: 280px !important;
    }
}

/* ==========================================================================
   CAREERS PAGE - OPEN POSITIONS (Light Green Background)
   ========================================================================== */
.ms-cr-positions,
section#ms-cr-positions,
html body .ms-cr-positions,
html body #ms-cr-positions {
    background-color: #F4F8F2 !important;
    background: #F4F8F2 !important;
    color: #102A1D !important;
}

.ms-cr-positions-network,
html body .ms-cr-positions-network {
    display: none !important;
}

.ms-cr-positions .ms-cr-section-title,
.ms-cr-positions .ms-cr-title-light,
html body .ms-cr-positions .ms-cr-section-title,
html body .ms-cr-positions .ms-cr-title-light {
    color: #102A1D !important;
}

.ms-cr-table thead th,
html body .ms-cr-table thead th {
    color: #285A35 !important;
    border-bottom: 2px solid rgba(40, 90, 53, 0.2) !important;
}

.ms-cr-table-row,
html body .ms-cr-table-row {
    border-bottom: 1px solid rgba(40, 90, 53, 0.12) !important;
}

.ms-cr-table-row:hover,
html body .ms-cr-table-row:hover {
    background-color: rgba(40, 90, 53, 0.04) !important;
}

.ms-cr-table td,
html body .ms-cr-table td {
    color: #333333 !important;
    font-size: 15px !important;
}

.ms-cr-position-title,
html body .ms-cr-position-title {
    color: #102A1D !important;
    font-weight: 700 !important;
}

.ms-cr-row-toggle,
html body .ms-cr-row-toggle {
    border: 1.5px solid #285A35 !important;
    background: rgba(40, 90, 53, 0.08) !important;
    color: #285A35 !important;
}

.ms-cr-table-row.ms-cr-row-has-toggle:hover .ms-cr-row-toggle,
.ms-cr-table-row.is-open .ms-cr-row-toggle,
html body .ms-cr-table-row.ms-cr-row-has-toggle:hover .ms-cr-row-toggle,
html body .ms-cr-table-row.is-open .ms-cr-row-toggle {
    background-color: #285A35 !important;
    border-color: #285A35 !important;
    color: #FFFFFF !important;
}

.ms-cr-apply-link,
html body .ms-cr-apply-link {
    color: #285A35 !important;
}

.ms-cr-detail-heading,
html body .ms-cr-detail-heading {
    color: #285A35 !important;
}

.ms-cr-detail-text,
html body .ms-cr-detail-text {
    color: #4A5B50 !important;
}

.ms-cr-detail-list li,
html body .ms-cr-detail-list li {
    color: #4A5B50 !important;
}

.ms-cr-detail-list li::before,
html body .ms-cr-detail-list li::before {
    background-color: #285A35 !important;
}

/* ==========================================================================
   CAREERS PAGE - FORM SECTION (White Background)
   ========================================================================== */
.ms-cr-form-section,
section#ms-cr-application-form,
html body .ms-cr-form-section,
html body #ms-cr-application-form {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

.ms-cr-form-left .ms-cr-section-title,
html body .ms-cr-form-left .ms-cr-section-title {
    color: #102A1D !important;
}

.ms-cr-form-desc,
html body .ms-cr-form-desc {
    color: #4A5B50 !important;
}

.ms-cr-form-right .ms-rfq-form-container,
html body .ms-cr-form-right .ms-rfq-form-container {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(40, 90, 53, 0.15) !important;
    box-shadow: 0 10px 40px rgba(16, 42, 29, 0.08) !important;
}

/* ==========================================================================
   CAREERS PAGE - HERO LIGHT DIVIDER & POSITION ICON
   ========================================================================== */
.ms-cr-hero,
#ms-cr-hero,
html body .ms-cr-hero,
html body #ms-cr-hero {
    border-bottom: 1px solid rgba(40, 90, 53, 0.12) !important;
    box-shadow: 0 16px 36px -4px rgba(16, 42, 29, 0.08), 0 6px 16px rgba(0, 0, 0, 0.03) !important;
}

.ms-cr-position-icon,
html body .ms-cr-position-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(40, 90, 53, 0.25) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(16, 42, 29, 0.05) !important;
}

/* ==========================================================================
   CAREERS PAGE - TABLE WRAPPER SCROLLBAR REMOVAL & DARK CELL TEXT
   ========================================================================== */
.ms-cr-table-wrapper,
html body .ms-cr-table-wrapper,
.elementor .ms-cr-table-wrapper {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: hidden !important;
    max-height: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ms-cr-table-wrapper::-webkit-scrollbar,
html body .ms-cr-table-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ms-cr-table td,
html body .ms-cr-table td,
html body .elementor .ms-cr-table td,
.ms-cr-table tbody tr td,
html body .ms-cr-table tbody tr td,
.ms-cr-table td[data-label="Department"],
.ms-cr-table td[data-label="Location"],
.ms-cr-table td[data-label="Type"],
html body .ms-cr-table td[data-label="Department"],
html body .ms-cr-table td[data-label="Location"],
html body .ms-cr-table td[data-label="Type"] {
    color: #222222 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   ABOUT US - WHO WE ARE: RECTANGLE IMAGE & MATCHED WIDTH
   ========================================================================== */
@media (min-width: 1025px) {
    .ms-au-who-inner,
    html body .ms-au-who-inner {
        display: grid !important;
        grid-template-columns: 1.15fr 0.85fr !important;
        gap: 54px !important;
        align-items: center !important;
    }
}

.ms-au-who-featured-frame {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 48px -10px rgba(16, 42, 29, 0.16), 0 0 0 1px rgba(40, 90, 53, 0.12);
}

.ms-au-who-featured-overlay {
    display: none;
}

/* Responsive Tablet & Mobile Who We Are Section (Single Column Full Width) */
@media (max-width: 1024px) {
    .ms-au-who,
    html body .ms-au-who {
        padding: 28px 20px 50px 20px !important;
        box-sizing: border-box !important;
        position: relative !important;
        clear: both !important;
    }
    .ms-au-who-inner,
    html body .ms-au-who-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 32px !important;
        box-sizing: border-box !important;
    }
    .ms-au-who-left,
    html body .ms-au-who-left {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .ms-au-who-right,
    html body .ms-au-who-right {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .ms-au-who-visual-wrapper,
    html body .ms-au-who-visual-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .ms-au-who-featured-frame,
    html body .ms-au-who-featured-frame {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: 380px !important;
        aspect-ratio: 16 / 10 !important;
        box-sizing: border-box !important;
    }
    .ms-au-who-featured-img,
    html body .ms-au-who-featured-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    .ms-au-who-paragraphs,
    html body .ms-au-who-paragraphs {
        width: 100% !important;
        max-width: 100% !important;
    }
    .ms-au-who-paragraphs p,
    html body .ms-au-who-paragraphs p,
    .ms-au-who-para,
    html body .ms-au-who-para {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        word-break: normal !important;
    }
}

/* ==========================================================================
   HOME PAGE - ABOUT MOLVIZADAH SONS SECTION STYLING & RECTANGLE IMAGE
   ========================================================================== */
@media (min-width: 1025px) {
    .ms-home-about-grid,
    html body .ms-home-about-grid,
    .elementor .ms-home-about-grid {
        display: grid !important;
        grid-template-columns: 1.15fr 0.85fr !important;
        gap: 54px !important;
        align-items: center !important;
    }
}

.ms-home-about-heading,
html body .ms-home-about-heading,
.elementor .ms-home-about-heading {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: clamp(26px, 3.5vw, 36px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #102A1D !important;
    text-transform: uppercase !important;
    margin: 0 0 24px 0 !important;
}

.ms-home-about-img-wrap,
html body .ms-home-about-img-wrap,
.elementor .ms-home-about-img-wrap {
    aspect-ratio: 4 / 3 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 48px -10px rgba(16, 42, 29, 0.16), 0 0 0 1px rgba(40, 90, 53, 0.12) !important;
}

.ms-home-about-img-wrap .ms-about-img-gradient,
html body .ms-home-about-img-wrap .ms-about-img-gradient,
.ms-about-img-gradient {
    display: none !important;
}

/* -------------------------------------------------------------
   FLOATING BACK TO TOP BUTTON
------------------------------------------------------------- */
.ms-back-to-top {
    position: fixed !important;
    bottom: 32px !important;
    right: 32px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #d4dfd7 !important;
    color: #102A1D !important;
    box-shadow: 0 4px 16px rgba(16, 42, 29, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(16px) !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: opacity 0.28s ease,
                visibility 0.28s ease,
                transform 0.28s ease,
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                color 0.2s ease !important;
}

/* Invisible extended touch/click hit area */
.ms-back-to-top::after {
    content: '' !important;
    position: absolute !important;
    inset: -8px !important;
    border-radius: 50% !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.ms-back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.ms-back-to-top svg,
.ms-back-to-top svg * {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 2.6 !important;
    pointer-events: none !important; /* Critical: SVG must not swallow click */
}

.ms-back-to-top:hover {
    background: #285A35 !important;
    border-color: #285A35 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(40, 90, 53, 0.28) !important;
    transform: translateY(0) scale(1.05) !important;
}

.ms-back-to-top:active {
    transform: translateY(0) scale(0.96) !important;
    opacity: 0.92 !important;
}

@media (max-width: 767px) {
    .ms-back-to-top {
        bottom: 22px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
    }
    .ms-back-to-top svg,
    .ms-back-to-top svg * {
        width: 18px !important;
        height: 18px !important;
    }
}

/* Universal Form Validation & Phone Input Styles */
.ms-input-error,
input.ms-input-error,
select.ms-input-error,
textarea.ms-input-error {
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    outline: none !important;
    border-radius: 11px;
}

.ms-no-results {
    padding: 12px 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #6B7280 !important;
    background: #F9FAFB !important;
    border-top: 1px solid #E5E7EB !important;
    user-select: none !important;
    pointer-events: none !important;
}

html[data-theme="dark"] .ms-no-results {
    color: #9CA3AF !important;
    background: #1F2937 !important;
    border-top-color: #374151 !important;
}

/* Ensure RFQ sections and form allow floating dropdowns */
.ms-rfq-layout,
.ms-rfq-main-col,
.ms-rfq-form-container,
.ms-rfq-form,
.ms-rfq-section,
.ms-rfq-section:first-child,
.ms-rfq-section:last-child,
.ms-rfq-form-grid {
    overflow: visible !important;
}

/* Ensure Country and Custom Select Dropdowns open normally BELOW the input field */
.ms-select-wrapper .ms-custom-select-options,
.ms-country-select-wrapper .ms-custom-select-options,
.ms-select-wrapper:has(select[name="country"]) .ms-custom-select-options {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 36px rgba(16, 42, 29, 0.16) !important;
    z-index: 999999 !important;
}

.ms-select-wrapper.is-open .ms-custom-select-options,
.ms-country-select-wrapper.is-open .ms-custom-select-options,
.ms-select-wrapper.is-open:has(select[name="country"]) .ms-custom-select-options {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Proper RFQ Form Dropdown Arrows & Left Field Icons */
.ms-rfq-form-container .ms-input-icon-wrapper > svg:not(.icon-right),
.ms-rfq-form-container .ms-input-icon-wrapper svg.icon-left,
.ms-input-icon-wrapper svg.icon-left {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: color 0.2s, stroke 0.2s !important;
}

.ms-rfq-form-container .ms-input-icon-wrapper:focus-within > svg:not(.icon-right),
.ms-rfq-form-container .ms-input-icon-wrapper.is-open > svg:not(.icon-right),
.ms-rfq-form-container .ms-input-icon-wrapper:focus-within svg.icon-left,
.ms-rfq-form-container .ms-input-icon-wrapper.is-open svg.icon-left {
    color: #285A35 !important;
    stroke: #285A35 !important;
}

.ms-rfq-form-container .ms-select-wrapper select,
.ms-country-select-wrapper select {
    width: 100% !important;
    padding-left: 46px !important;
    padding-right: 44px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
}

.ms-rfq-form-container .ms-select-wrapper svg.icon-right,
.ms-rfq-form-container .ms-country-select-wrapper svg.icon-right,
.ms-rfq-form-container .ms-row-variant-select svg.icon-right,
.ms-rfq-form-container .ms-dropdown-filter svg.icon-right,
.ms-select-wrapper svg.icon-right,
.ms-country-select-wrapper svg.icon-right,
.ms-row-variant-select svg.icon-right {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    stroke: #285A35 !important;
    color: #285A35 !important;
    pointer-events: none !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s !important;
    z-index: 2 !important;
    display: block !important;
}

.ms-rfq-form-container .ms-select-wrapper.is-open svg.icon-right,
.ms-rfq-form-container .ms-country-select-wrapper.is-open svg.icon-right,
.ms-rfq-form-container .ms-row-variant-select.is-open svg.icon-right,
.ms-rfq-form-container .ms-dropdown-filter.is-open svg.icon-right,
.ms-select-wrapper.is-open svg.icon-right,
.ms-country-select-wrapper.is-open svg.icon-right,
.ms-row-variant-select.is-open svg.icon-right {
    transform: translateY(-50%) rotate(180deg) !important;
    stroke: #285A35 !important;
    color: #285A35 !important;
}

.ms-row-variant-select {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.ms-row-variant-select select {
    padding-left: 46px !important;
    padding-right: 34px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.ms-row-variant-select svg.icon-left {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: #285A35 !important;
    stroke: #285A35 !important;
    z-index: 2 !important;
}

.ms-row-variant-select svg.icon-right {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 15px !important;
    height: 15px !important;
    z-index: 2 !important;
}

/* Ensure RFQ Section 1 (Personal Info) and Section 2 (Inquiry) use full-width single-column inputs on desktop 3-card layout */
@media (min-width: 1025px) {
    .ms-rfq-form > .ms-rfq-section:nth-of-type(1) .ms-rfq-form-grid,
    .ms-rfq-section:first-of-type .ms-rfq-form-grid,
    .ms-rfq-form .ms-rfq-section:nth-child(1) .ms-rfq-form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ms-rfq-form > .ms-rfq-section:nth-of-type(2) .ms-rfq-form-grid,
    .ms-rfq-form > .ms-rfq-section:nth-of-type(2) .ms-rfq-inquiry-grid,
    .ms-rfq-section:nth-of-type(2) .ms-rfq-form-grid,
    .ms-rfq-section:nth-of-type(2) .ms-rfq-inquiry-grid,
    .ms-rfq-form .ms-rfq-section:nth-child(2) .ms-rfq-form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ms-rfq-section:first-of-type {
        border-radius: 16px 0 0 16px !important;
    }
    .ms-rfq-section:last-of-type {
        border-radius: 0 16px 16px 0 !important;
    }
}

/* Fix Readonly Selected Product Dropdown Icon size (Tea, etc.) */
.ms-readonly-input svg.icon-right,
.ms-input-icon-wrapper.ms-readonly-input svg.icon-right,
.ms-readonly-input svg:not(.icon-left) {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    stroke: #285A35 !important;
    color: #285A35 !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.ms-readonly-input input {
    padding-right: 44px !important;
}

/* --- Custom Luxury Variation Dropdowns (Product Page) --- */
.ms-variant-dropdown-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    position: relative !important;
    margin-bottom: 4px !important;
}

.ms-variant-dropdown-row .ms-variant-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #102A1D !important;
    margin: 0 !important;
    min-width: 92px !important;
    flex-shrink: 0 !important;
}

.ms-custom-variation-dropdown {
    position: relative !important;
    width: 100% !important;
    max-width: 320px !important;
}

.ms-custom-variation-trigger {
    width: 100% !important;
    height: 44px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #d4dfd7 !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #102A1D !important;
    cursor: pointer !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.ms-custom-variation-trigger:hover {
    border-color: #285A35 !important;
}

.ms-custom-variation-dropdown.is-open .ms-custom-variation-trigger {
    border-color: #285A35 !important;
    box-shadow: 0 0 0 3px rgba(40, 90, 53, 0.15) !important;
}

.ms-custom-variation-arrow {
    width: 16px !important;
    height: 16px !important;
    stroke: #285A35 !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ms-custom-variation-dropdown.is-open .ms-custom-variation-arrow {
    transform: rotate(180deg) !important;
}

.ms-custom-variation-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(40, 90, 53, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px rgba(16, 42, 29, 0.14) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 6px !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-6px) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.ms-custom-variation-dropdown.is-open .ms-custom-variation-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.ms-custom-variation-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #102A1D !important;
    cursor: pointer !important;
    transition: background-color 0.18s, color 0.18s !important;
}

.ms-custom-variation-item:hover {
    background: rgba(40, 90, 53, 0.08) !important;
    color: #285A35 !important;
}

.ms-custom-variation-item.is-selected {
    background: rgba(40, 90, 53, 0.12) !important;
    color: #285A35 !important;
    font-weight: 700 !important;
}

.ms-item-check {
    width: 16px !important;
    height: 16px !important;
    display: none !important;
    flex-shrink: 0 !important;
}

.ms-custom-variation-item.is-selected .ms-item-check {
    display: block !important;
}

@media (max-width: 480px) {
    .ms-variant-dropdown-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .ms-custom-variation-dropdown {
        max-width: 100% !important;
    }
}

/* Contact Page Hero Banner Image Alignment: Ensure bottom of logistics/port visual shows properly */
.ms-cp-hero,
#ms-cp-hero,
html body .ms-cp-hero,
html body [class*="elementor"] .ms-cp-hero {
    min-height: 480px !important;
    height: 480px !important;
}

.ms-cp-hero-inner,
#ms-cp-hero .ms-cp-hero-inner,
html body .ms-cp-hero-inner {
    min-height: 480px !important;
    height: 480px !important;
}

.ms-cp-hero-bg-img,
#ms-cp-hero .ms-cp-hero-bg-img,
html body .ms-cp-hero-bg-img,
html body [class*="elementor"] .ms-cp-hero .ms-cp-hero-bg-img {
    object-position: right bottom !important;
}

/* Careers Page Hero: Lock to exact 400px height across desktop viewports */
@media (min-width: 1025px) {
    .ms-cr-hero,
    #ms-cr-hero,
    html body .ms-cr-hero,
    html body [class*="elementor"] .ms-cr-hero {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .ms-cr-hero-bg-wrapper,
    html body .ms-cr-hero-bg-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        inset: 0 !important;
        overflow: hidden !important;
    }

    .ms-cr-hero-bg-img,
    html body .ms-cr-hero-bg-img {
        width: 100% !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        object-fit: cover !important;
        object-position: right bottom !important;
        display: block !important;
    }

    .ms-cr-hero-inner,
    html body .ms-cr-hero-inner {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        box-sizing: border-box !important;
    }
}

/* Footer Headings default fallback */
.ms-exact-footer .mef-heading {
    color: #285A35;
}

/* Homepage Global Trade Network Map: Mobile Horizontal Scroll */
@media (max-width: 767px) {
    .ms-network-sec {
        padding: 50px 0 !important;
    }
    .ms-network-header {
        margin-bottom: 20px !important;
        padding: 0 16px !important;
    }
    .ms-network-title {
        font-size: 2rem !important;
        margin-bottom: 20px !important;
    }
    .ms-network-visual-wrapper,
    #network .ms-network-visual-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 16px 15px 16px !important;
        box-sizing: border-box !important;
    }
    .ms-network-map-host,
    #ms-network-map-host {
        min-width: 750px !important;
        width: 750px !important;
        min-height: auto !important;
    }
    .ms-network-svg-container,
    .ms-network-bg-img,
    .ms-network-overlay-svg {
        min-width: 750px !important;
        width: 750px !important;
        max-width: none !important;
    }
}

/* ==========================================================================
   HERO FLOATING CARD RESPONSIVE CLEARANCE (About, Contact, Careers, Global Network)
   Prevents floating white card from overlapping or obscuring 2nd section titles & content
   ========================================================================== */
@media (max-width: 1024px) {
    /* Ensure Hero container has natural height and does not clip or overflow */
    .ms-au-hero,
    .ms-cp-hero,
    .ms-cr-hero,
    .gn-hero-section,
    #ms-au-hero,
    #ms-cp-hero,
    #ms-cr-hero,
    #gn-hero,
    html body .ms-au-hero,
    html body .ms-cp-hero,
    html body .ms-cr-hero,
    html body .gn-hero-section {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Hero background image container: reduce height to prevent excess dead space */
    .ms-au-hero-bg,
    .ms-cp-hero-bg,
    .ms-cr-hero-bg-wrapper,
    .gn-hero-bg-wrapper,
    html body .ms-au-hero-bg,
    html body .ms-cp-hero-bg,
    html body .ms-cr-hero-bg-wrapper,
    html body .gn-hero-bg-wrapper {
        height: 270px !important;
        min-height: 240px !important;
        max-height: 280px !important;
    }

    /* Provide balanced bottom margin on the floating inner card container */
    .ms-au-hero-inner,
    .ms-cp-hero-inner,
    .ms-cr-hero-inner,
    .gn-hero-container,
    html body .ms-au-hero-inner,
    html body .ms-cp-hero-inner,
    html body .ms-cr-hero-inner,
    html body .gn-hero-container {
        height: auto !important;
        min-height: auto !important;
        margin-top: -60px !important;
        margin-bottom: 25px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Section 2 Responsive Clearances (Contact, Careers, Global Network) */
    .ms-cp-info-strip,
    .ms-cr-why,
    .ms-cr-positions,
    #ms-cr-positions,
    .gn-sourcing-section,
    html body .ms-cp-info-strip,
    html body .ms-cr-why,
    html body .ms-cr-positions,
    html body #ms-cr-positions,
    html body .gn-sourcing-section {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
        margin-top: 0 !important;
        padding-top: 154px !important;
    }

    /* About Us Section 2: Remove top border on mobile & position title right below hero card */
    .ms-au-who,
    .ms-home-about-section,
    html body .ms-au-who,
    html body .ms-home-about-section,
    section.ms-au-who,
    section.ms-home-about-section {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
        margin-top: 0 !important;
        padding-top: 32px !important;
        border-top: none !important;
    }

    /* Guarantee the Section 2 title and first paragraph are prominently visible */
    .ms-au-who .ms-au-section-title,
    html body .ms-au-who .ms-au-section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    /* About Us WHAT WE STAND FOR Section — Mobile Horizontal Carousel (< 1025px) */
    .ms-au-values-carousel-outer,
    #ms-au-values .ms-au-values-carousel-outer,
    html body .ms-au-values-carousel-outer {
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 44px !important;
    }

    .ms-au-values-arrow,
    #ms-au-values .ms-au-values-arrow,
    html body .ms-au-values-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border: 1.5px solid rgba(40, 90, 53, 0.3) !important;
        background: #FFFFFF !important;
        color: #285A35 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.25s ease !important;
        padding: 0 !important;
        outline: none !important;
    }
    .ms-au-values-arrow:active,
    .ms-au-values-arrow:hover {
        background: #285A35 !important;
        color: #FFFFFF !important;
        border-color: #285A35 !important;
    }
    .ms-au-values-arrow svg {
        width: 16px !important;
        height: 16px !important;
        pointer-events: none !important;
        stroke: currentColor !important;
    }
    .ms-au-values-arrow-prev { left: 4px !important; }
    .ms-au-values-arrow-next { right: 4px !important; }

    .ms-au-values-clip-container,
    #ms-au-values .ms-au-values-clip-container,
    html body .ms-au-values-clip-container {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
    }

    .ms-au-values-grid,
    #ms-au-values .ms-au-values-grid,
    html body .ms-au-values-grid,
    body.page-template-page-about .ms-au-values-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        gap: 20px !important;
        transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        will-change: transform !important;
        padding-bottom: 24px !important;
        padding-top: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ms-au-value-card,
    #ms-au-values .ms-au-value-card,
    html body .ms-au-value-card,
    body.page-template-page-about .ms-au-value-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        border-radius: 20px !important;
        padding: 32px 24px !important;
        background-color: #FFFFFF !important;
        border: 1px solid rgba(40, 90, 53, 0.14) !important;
        box-sizing: border-box !important;
    }

    /* Hover state matching Journey section */
    .ms-au-value-card:hover,
    #ms-au-values .ms-au-value-card:hover,
    html body .ms-au-value-card:hover {
        border-color: #285A35 !important;
        /* box-shadow: 0 22px 48px rgba(40, 90, 53, 0.12) !important; */
        background-color: #FFFFFF !important;
        transform: none !important;
    }

    .ms-au-value-card:hover .ms-au-value-icon,
    #ms-au-values .ms-au-value-card:hover .ms-au-value-icon,
    html body .ms-au-value-card:hover .ms-au-value-icon {
        background: #285A35 !important;
        color: #FFFFFF !important;
        border-color: #285A35 !important;
        transform: scale(1.06) !important;
        /* box-shadow: 0 8px 20px rgba(40, 90, 53, 0.25) !important; */
    }

    .ms-au-value-card:hover .ms-au-value-icon svg,
    .ms-au-value-card:hover .ms-au-value-icon i,
    .ms-au-value-card:hover .ms-au-value-icon svg path,
    .ms-au-value-card:hover .ms-au-value-icon svg circle,
    .ms-au-value-card:hover .ms-au-value-icon svg polyline,
    .ms-au-value-card:hover .ms-au-value-icon svg line {
        stroke: #FFFFFF !important;
        color: #FFFFFF !important;
    }
}

@media (min-width: 1025px) {
    .ms-au-values-arrow,
    #ms-au-values .ms-au-values-arrow,
    html body .ms-au-values-arrow {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .ms-au-hero-bg,
    .ms-cp-hero-bg,
    .ms-cr-hero-bg-wrapper,
    .gn-hero-bg-wrapper,
    html body .ms-au-hero-bg,
    html body .ms-cp-hero-bg,
    html body .ms-cr-hero-bg-wrapper,
    html body .gn-hero-bg-wrapper {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .ms-au-hero-inner,
    .ms-cp-hero-inner,
    .ms-cr-hero-inner,
    .gn-hero-container,
    html body .ms-au-hero-inner,
    html body .ms-cp-hero-inner,
    html body .ms-cr-hero-inner,
    html body .gn-hero-container {
        margin-top: -55px !important;
        margin-bottom: 12px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .ms-cp-info-strip,
    .ms-cr-why,
    .ms-cr-positions,
    #ms-cr-positions,
    .gn-sourcing-section,
    html body .ms-cp-info-strip,
    html body .ms-cr-why,
    html body .ms-cr-positions,
    html body #ms-cr-positions,
    html body .gn-sourcing-section {
        padding-top: 115px !important;
        padding-bottom: 40px !important;
    }

    .ms-au-who,
    .ms-home-about-section,
    html body .ms-au-who,
    html body .ms-home-about-section {
        padding-top: 28px !important;
        padding-bottom: 40px !important;
        border-top: none !important;
    }

    /* In mobile view, hide all borders on contact info strip items */
    .ms-cp-info-item,
    #ms-cp-info-strip .ms-cp-info-item,
    html body #ms-cp-info-strip .ms-cp-info-item,
    html body .ms-cp-info-item {
        border: none !important;
        border-left: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        padding-left: 0 !important;
    }
}

/* ==========================================================================
   HEADER NORMALIZATION (Global Network, Contact, Careers, About Us)
   Prevents accidental header margins, pushdowns, or extra spacing
   ========================================================================== */
.luxury-header,
#main-header,
header.luxury-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

.luxury-header .header-container,
#main-header .header-container {
    pointer-events: auto !important;
}

body.admin-bar .luxury-header,
body.admin-bar #main-header {
    top: 32px !important;
}
@media (max-width: 782px) {
    body.admin-bar .luxury-header,
    body.admin-bar #main-header {
        top: 46px !important;
    }
}

/* ==========================================================================
   HEADER LOGO UNCLIPPED ASPECT RATIO & ELEMENTOR OVERRIDES
   ========================================================================== */

/* 1. Header container height in default unscrolled state */
html body .luxury-header:not(.scrolled) .header-container {
    min-height: 90px !important;
    height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    overflow: visible !important;
}

/* 2. Logo link & wrapper containers - zero clipping */
html body .luxury-header .logo-link,
html body .luxury-header .logo-text-wrapper,
html body .luxury-header .default-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 5 !important;
}

/* 3. Base Default Logo: Proportional scaling without peak-to-peak cropping */
html body .elementor-widget-ms_header .logo-link .default-logo img,
html body .luxury-header .logo-link .default-logo img {
    max-width: var(--header-logo-width, 160px);
    max-height: 65px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    overflow: visible !important;
}

/* 4. Base Sticky Logo: Compact ratio for capsule pill */
html body .elementor-widget-ms_header .logo-link .logo-image-sticky,
html body .luxury-header .logo-link .logo-image-sticky {
    max-width: var(--sticky-logo-width, 85px);
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    overflow: visible !important;
}

/* ==========================================================================
   CAREERS PAGE — DESIGN SYSTEM ALIGNMENT MATCHING ABOUT US PAGE
   ========================================================================== */

/* 1. Global Section Container & Background */
.ms-cr-page,
#ms-careers-main,
body.page-template-page-careers,
body.page-id-careers {
    background-color: #F4F8F2 !important;
    background: #F4F8F2 !important;
}

/* 2. Section Paddings (Desktop: 100px-120px) */
.ms-cr-why,
.ms-cr-positions,
.ms-cr-form-section,
.ms-cr-cta,
html body .ms-cr-why,
html body .ms-cr-positions,
html body .ms-cr-form-section,
html body .ms-cr-cta {
    padding: 100px 0 !important;
    background-color: #F4F8F2 !important;
}

.ms-cr-positions {
    background-color: #FFFFFF !important;
}

/* 3. Eyebrow Labels Default */
.ms-cr-eyebrow,
.ms-cr-eyebrow-dark {
    display: inline-block;
    color: #285A35;
    margin-bottom: 12px;
}

/* 4. Headings Default */
.ms-cr-section-title,
.ms-cr-hero-title {
    color: #102A1D;
    margin: 0 0 16px 0;
}

/* 5. Paragraphs & Description Text Default */
.ms-cr-hero-desc,
.ms-cr-why-desc,
.ms-cr-form-desc {
    color: #555555;
}

    /* Section 2 Title Clearance below Hero Card on Mobile */
    .ms-cr-why,
    section.ms-cr-why,
    html body .ms-cr-why {
        padding-top: 32px !important;
        border-top: none !important;
    }
}