@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400&display=swap');

.dynamic-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
    font-size: 16px; /* Reduced slightly for better layout */
    text-align: left;
    border-radius: 8px; /* Rounded corners */
    overflow: hidden;
}

.dynamic-table th, .dynamic-table td {
    border: 1px solid #ddd;
    padding: 12px; /* Increased padding for better spacing */
}

.dynamic-table th {
    background-color: #f4f4f4;
    font-weight: bold;
    text-transform: uppercase;
}

.dynamic-table tr:nth-child(even) {
    background-color: #fafafa;
}

.dynamic-table tr:hover {
    background-color: #eaeaea;
    transition: background-color 0.3s ease-in-out;
}

.dynamic-table img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Responsive Design */
@media screen and (max-width: 600px) {
    .dynamic-table {
        font-size: 14px;
    }
    
    .dynamic-table th, .dynamic-table td {
        padding: 8px;
    }
}