body {
     margin: 0 15%;
     padding: 20px;
 }

 .table-container {
     width: 100%;
     overflow-x: auto;
 }

 table {
     width: 100%;
     border-collapse: collapse;
     font-family: 'Outfit', sans-serif;
     margin: 20px 0;
 }

 caption {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 10px;
     color: #333;
 }

 thead th {
     background-color: #4CAF50;
     color: white;
     padding: 12px;
     text-align: left;
 }

 tbody td {
     padding: 10px;
     border-bottom: 1px solid #ddd;
 }

 tbody tr:nth-child(even) {
     background-color: #f9f9f9;
 }

 tbody tr:nth-child(odd) {
     background-color: #d4eee880;
 }

 tbody tr:hover {
     background-color: #d1cdcd;
 }

 tfoot td {
     background-color: #d9d5d5;
     font-weight: bold;
     padding: 10px;
 }

 @media (min-width: 769px) {
     table {
         font-size: 1rem;
     }
 }

 /* --- Mobile Specific --- */
 @media (max-width: 768px) {
     body {
         margin: 0 1%;
         padding: 5px;
         background-color: rgba(137, 43, 226, 0.22);
     }

     table {
         font-size: 0.7rem;
     }

     thead th,
     tbody td,
     tfoot td {
         padding: 6px;
     }

     caption {
         font-size: 1.1rem;
     }
 }