.teleinfra-metrics-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: 30px 4%;
            gap: 50px;
            background: linear-gradient(135deg, #ffffff, #f7f7f7);
            border-radius: 20px;
            width: 100%;
        }


    .metrics-section {
      width: 100%;
      max-width: 1100px;
      /* margin: 60px auto; */
      padding: 20px 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      text-align: center;
    }

    .metric {
      /* background: #fff; */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-radius: 20px;
      padding: 30px 15px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .metric:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    }

    .metric h2 {
      font-size: 2rem;
      color: #1b8795;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .metric p {
      font-size: 1rem;
      color: #1c1c1c;
      font-weight: 500;
      text-align: center;
      line-height: 1.1;
    }

    @media (max-width: 600px) {
      .metric h2 {
        font-size: 1.6rem;
      }
    }

        .teleinfra-chart {
            flex: 1;
            min-width: 100%;
        }

        canvas {
            width: 100% !important;
            height: auto !important;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 15px;
        }

        /* --- Responsive --- */
        @media (max-width: 900px) {
            .teleinfra-metrics-container {
                flex-direction: column;
                align-items: center;
            }

            .teleinfra-chart,
            .teleinfra-slider {
                max-width: 100%;
            }
        }