/* ==========================================================================
   SECTION 04: IMPACT STATISTICS COUNTER BAR (ROYAL BLUE GRADIENT & MESH)
   ========================================================================== */

.ehs-stats-section {
  position: relative !important;
  z-index: 10 !important;
  margin-top: -50px !important; /* Elegant overlapping pull over the Hero slider */
  padding-bottom: 50px !important;
}

/* 1. Main Card Wrapper: Deep Royal Blue to Sky Blue Multi-stop Gradient */
.ehs-stats-wrapper {
  position: relative !important;
  border-radius: 18px !important;
  padding: 34px 28px !important;
  overflow: hidden !important;
  
  /* Rich Royal Blue to Vibrant Cyan/Sky Blue Flow */
  background: linear-gradient(135deg, #002244 0%, #004085 40%, #0284c7 80%, #38bdf8 100%) !important;
  
  /* Elegant Translucent Border & Deep Elevation Shadow */
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    0 20px 45px rgba(0, 34, 68, 0.4),
    0 4px 16px rgba(2, 132, 199, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ehs-stats-wrapper:hover {
  transform: translateY(-3px) !important;
  box-shadow: 
    0 24px 50px rgba(0, 34, 68, 0.45),
    0 6px 20px rgba(2, 132, 199, 0.35) !important;
}

/* 2. Embedded Geometric Micro-Mesh Overlay */
.ehs-stats-wrapper::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1.2px, transparent 0),
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
  background-size: 24px 24px, 24px 24px, 24px 24px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 3. Stats 4-Column Grid Layout */
.ehs-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 4. Stat Items & Vertical Frost Dividers */
.ehs-stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 8px 22px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.ehs-stat-item:last-child {
  border-right: none !important;
}

/* 5. Frosted Glass Icon Badge */
.ehs-stat-icon-wrap {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

.ehs-stat-icon-wrap svg {
  color: #ffffff !important;
}

/* 6. Typography (Pure White & Light Ice Contrast) */
.ehs-stat-content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.ehs-stat-number {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 4px !important;
  text-shadow: 0 2px 8px rgba(0, 24, 51, 0.4) !important;
}

.ehs-stat-label {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
  text-shadow: 0 1px 4px rgba(0, 24, 51, 0.3) !important;
}

.ehs-stat-subtext {
  font-size: 12px !important;
  color: #e0f2fe !important; /* Soft icy sky blue */
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Responsive Grid */
@media (max-width: 1024px) {
  .ehs-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .ehs-stat-item {
    border-right: none !important;
    padding: 6px 14px !important;
  }
  .ehs-stat-item:nth-child(1),
  .ehs-stat-item:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
  }
}

@media (max-width: 640px) {
  .ehs-stats-section {
    margin-top: -25px !important;
    padding-bottom: 35px !important;
  }
  .ehs-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ehs-stat-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
    padding-bottom: 14px !important;
  }
  .ehs-stat-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .ehs-stat-number {
    font-size: 24px !important;
  }
}