<div class="stats-bar">
    <div class="stats-inner1">
      <div class="stat-item reveal reveal-d1">
        <div class="stat-num">99.2 <span>%</span></div>
        <div class="stat-lbl">On-Time Delivery</div>
      </div>
      <div class="stat-item reveal reveal-d2">
        <div class="stat-num">3<span>x</span></div>
        <div class="stat-lbl">Faster Response</div>
      </div>
      <div class="stat-item reveal reveal-d3">
        <div class="stat-num">40<span>%</span></div>
        <div class="stat-lbl">Cost Reduction</div>
      </div>
      <!-- <div class="stat-item reveal reveal-d4">
        <div class="stat-num">15 </div>
        <div class="stat-lbl">Cities Covered</div>
      </div> -->
    </div>
  </div>
  <style>
    .stats-bar {
      width: 100%;
      padding: 50px 0;
      position: relative;
    }

    .stats-inner1 {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      position: relative;
      z-index: 2;
    }

    .stat-item {
      text-align: center;
      transition: transform 0.3s ease;
    }

    .stat-num {
      font-size: clamp(40px, 6vw, 70px);
      font-weight: 900;
      color: #111;
      line-height: 1;
      margin-bottom: 8px;
      font-family: "Manrope", sans-serif;
      letter-spacing: -2px;
    }

    .stat-num span {
      font-size: 0.5em;
      color: #E31E24;
      margin-left: 5px;
      vertical-align: middle;
    }

    .stat-lbl {
      font-size: clamp(13px, 1.5vw, 16px);
      font-weight: 700;
      color: #64748B;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    /* Tablet Scale (1024px) */
    @media (max-width: 1024px) {
      .stats-inner1 {
        max-width: 90%;
        gap: 20px;
      }
    }

    /* Mobile Stack (767px) */
    @media (max-width: 767px) {
      .stats-bar {
        padding: 40px 0;
      }
      .stats-inner1 {
        grid-template-columns: 1fr;
        gap: 45px;
      }
      .stat-num {
        font-size: 56px; /* Explicit size for mobile for clarity */
      }
    }

    /* Small Phone Scaling (480px) */
    @media (max-width: 480px) {
      .stat-num {
        font-size: 44px;
      }
      .stat-lbl {
        font-size: 11px;
        letter-spacing: 1px;
      }
    }
  </style>
