.responsive-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1em 0;
        font-size: 1em;
        min-width: 300px;
      }
      .responsive-table th,
      .responsive-table td {
        border: 1px solid #ddd;
        padding: 0.75em 1em;
        text-align: center;
      }
      .responsive-table th {
        background-color: #f5f5f7;
        color: #222;
        font-weight: bold;
      }
      .responsive-table tr:nth-child(even) {
        background-color: #fafafc;
      }
      @media (max-width: 800px) {
        .responsive-table thead {
          display: none;
        }
        .responsive-table,
        .responsive-table tbody,
        .responsive-table tr,
        .responsive-table td {
          display: block;
          width: 100%;
        }
        .responsive-table tr {
          margin-bottom: 1.5em;
          border: 2px solid #eee;
          border-radius: 0.6em;
          background: #fff;
          box-shadow: 0 2px 10px 0 #eee;
        }
        .responsive-table td {
          text-align: left;
          padding: 0.7em 1em;
          position: relative;
          padding-left: 50%;
          border: none;
          border-bottom: 1px solid #eee;
        }
        .responsive-table td::before {
          content: attr(data-label);
          position: absolute;
          left: 1em;
          top: 0.7em;
          font-weight: bold;
          color: #444;
          width: 45%;
          text-align: left;
          white-space: nowrap;
        }
      }
      /* Optional: colored check/cross icons */
      .yes {
        color: #15b66a;
        font-weight: bold;
      }
      .no {
        color: #ca2222;
        font-weight: bold;
      }