.containersssss {
      max-width: 80rem;
      /* max-w-5xl */
      margin: 1.5rem auto 0;
      display: flex;
      flex-direction: column;
      border: 1px solid #d1d5db;
      /* gray-300 */
    }

    @media (min-width: 768px) {
      .containersssss {
        flex-direction: row;
      }
    }

    /* Tables */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 1rem;
      color: #000000;
      /* gray-500 */
      border: 1px solid #d1d5db;
      /* gray-300 */
    }

    @media (min-width: 768px) {

      table.hex,
      table.pms {
        width: 25%;
      }
    }

    thead th {
      border-bottom: 1px solid #d1d5db;
      padding: 0.5rem 0;
      text-align: center;
      font-weight: 400;
      color: #000000;
      /* gray-700 */
    }

    tbody tr {
      border-bottom: 1px solid #e5e7eb;
      /* gray-200 */
    }

    tbody tr:nth-child(even) {
      background-color: #f9fafb;
      /* gray-50 */
    }

    tbody td {
      padding: 0.25rem 0.75rem;
      font-weight: 400;
      font-size: 0.9rem;
      color: #000000;
      /* gray-500 */
      white-space: nowrap;
    }

    tbody td.value {
      color: #374151;
      /* gray-700 */
    }

    tbody td.hex-color {
      color: #f594a3;
    }

    tbody td.pms-hex-color {
      color: #f580a2;
    }

    tbody td.uppercase {
      text-transform: uppercase;
      color: #9ca3af;
      /* gray-400 */
    }

    /* Center block */
    /* Center block container */
    .center-block {
      width: 100%;
      border-left: 1px solid #d1d5db;
      border-right: 1px solid #d1d5db;
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    @media (min-width: 640px) {
      .center-block {
        flex-direction: row;
        align-items: stretch;
        /* Ensures equal height */
      }
    }

    /* Shared style for both color boxes */
    .color-left,
    .color-right {
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      align-items: center;
      box-sizing: border-box;
      padding: 1rem;
      margin-left: auto;
      margin-right: auto;
      flex: 1;
      max-width: 280px;
      min-height: 150px;
    }

    @media (max-width: 639px) {

      .color-left,
      .color-right {
        height: 120px;
        /* Or auto if you want it to grow/shrink with content */
      }

      tbody td {
        padding: 0.25rem 0.75rem;
        font-weight: 400;
        font-size: 0.8rem;
        color: #000000;
        /* gray-500 */
        white-space: nowrap;
      }
    }

    /* Left box (HEX) */
    .color-left {

      border-right: 1px solid #d1d5db;
      color: #fffcfc;
    }

    /* Right box (Pantone) */
    .color-right {

      /* example fallback, or dynamically set */
      border-left: none;
    }

    @media (max-width: 767px) {
      .center-block {
        flex-direction: column;
        align-items: center;
      }

      .color-left,
      .color-right {
        max-width: 90vw;
        /* almost full width on mobile */
        width: 100%;
        /* fill the container */
        margin-bottom: 1rem;
      }
    }

    /* Typography inside both boxes */
    .color-left h2,
    .color-right h2 {
      font-weight: 600;
      font-size: 1.25rem;
      margin: 0 0 0.25rem;
    }

    .color-left p,
    .color-right p {
      font-size: 0.8rem;
      font-weight: 400;
      margin: 0;
      color: #111827;
      /* gray-900 */
    }

    .color-left p span.hex-color {
      font-weight: 700;
      margin-left: 0.25rem;
      color: #fff;
    }

    .color-right .pantone-text {
      text-align: center;
    }

    .color-right .pantone-text p {
      color: #111827;
    }

    .color-right img {
      width: 100%;
      height: 6rem;
      object-fit: cover;
      display: block;
      margin-top: 0.5rem;
    }


    .display-block {
      display: none;
    }

      table {
      margin-bottom: 2rem;
      border-collapse: collapse;
    }

    td,
    th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .btn-primaryss {
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 8px;
      background-color: #444A9E;
      border: none;
      transition: background-color 0.3s ease;
    }

    .btn-primary:hover {
      background-color: #000;
    }

     .button-class {
      grid-column: 1 / -1;
      justify-self: center;
      margin-top: 0.5rem;
      padding: 0.5rem 1.25rem;
      border: 2px solid #444A9E;
      background: transparent;
      color: #444A9E;
      font-size: 1rem;
      border-radius: 0.25rem;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
     button:hover,
    button:focus {
      background-color: #444A9E;
      outline: none;
      color: white;
      box-shadow: 0 0 0 2px #444A9E;
    }