.infographic-container {
      position: relative;
      width: 450px;
      height: 450px;
    }

    .center-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 140px;
      height: 140px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      font-weight: bold;
      font-size: 13px;
      line-height: 1.3;
      padding: 15px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      z-index: 10;
    }

    .step-card {
      position: absolute;
      display: flex;
      align-items: center;
      padding: 8px 15px;
      border-radius: 25px;
      color: white;
      font-weight: 600;
      font-size: 11px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
      cursor: pointer;
      min-width: max-content;
    }
    .step-card-mob{

      display: flex;
      align-items: center;
      padding: 8px 15px;
      border-radius: 25px;
      color: white;
      font-weight: 600;
      font-size: 11px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
      cursor: pointer;
      min-width: max-content;
      margin-top: 1rem;
    }

    .step-card:hover {
      transform: scale(1.05);
    }

    .step-number {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      font-size: 10px;
      font-weight: bold;
    }

    .step-content {
      flex: 1;
    }

    .step-title {
      font-size: 12px;
      line-height: 1.2;
      
    }

    .step-icon {
      margin-left: 8px;
      font-size: 14px;
    }

    /* Step colors */
    .step-01 {
      background: linear-gradient(135deg, #a855f7, #8b5cf6);
    }

    .step-02 {
      background: linear-gradient(135deg, #8b5cf6, #6366f1);
    }

    .step-03 {
      background: linear-gradient(135deg, #3b82f6, #06b6d4);
    }

    .step-04 {
      background: linear-gradient(135deg, #f59e0b, #f97316);
    }

    .step-05 {
      background: linear-gradient(135deg, #10b981, #84cc16);
    }

    /* Tablet styles - 300x300 */
    @media screen and (max-width: 768px) {
      .infographic-container {
        width: 300px;
        height: 300px;
      }

      .center-circle {
        width: 140px;
        height: 140px;
        font-size: 13px;
      }

      .step-card {
        font-size: 11px;
        padding: 8px 15px;
        min-width: 140px;
      }

      .step-number {
        width: 25px;
        height: 25px;
        font-size: 10px;
      }
    }

    /* Small desktop styles - 400x400 */
    @media screen and (min-width: 769px) and (max-width: 1200px) {
      .infographic-container {
        width: 500px;
        height: 500px;
      }

      .center-circle {
        width: 180px;
        height: 180px;
        font-size: 15px;
        padding: 20px;
      }

      .step-card {
        font-size: 12px;
        padding: 10px 18px;
        min-width: 160px;
      }

      .step-number {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }

      .step-icon {
        font-size: 16px;
      }


    }

    /* Large desktop styles - 500x500 */
    @media screen and (min-width: 1201px) {
      .infographic-container {
        width: 700px;
        height: 700px;
      }

      .center-circle {
        width: 220px;
        height: 220px;
        font-size: 17px;
        padding: 25px;
      }

      .step-card {
        font-size: 12px;
        padding: 10px 10px;
        min-width: 200px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .step-number {
        width: 32px;
        height: 32px;
        font-size: 12px;
      }

      .step-icon {
        font-size: 18px;
      }


    }