.asiya-table {
    width: 100%;
    border-collapse: collapse; /* Optional: for removing space between borders */
    table-layout: auto; /* Allows table cells to adjust based on content */
}

.asiya-table th, .asiya-table td {
    padding: 8px 16px; /* Good spacing inside each cell */
    border: 1px solid #ccc; /* Light grey border for clarity */
    text-align: left; /* Align text to the left inside cells */
}

.asiya-table thead th {
    background-color: #f2f2f2; /* Light grey background for headers */
}

@media screen and (max-width: 600px) {
    .asiya-table, .asiya-table thead, .asiya-table tbody, .asiya-table th, .asiya-table td, .asiya-table tr {
        display: block;
    }

    .asiya-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .asiya-table tr { 
        border: 1px solid #ccc;
    }

    .asiya-table td {
        /* Each cell is now a row on its own */
        border: none;
        position: relative;
        padding-left: 50%; /* Adjust according to preference */
        text-align: right; /* Right align text to make space for labels */
    }

    .asiya-table td:before {
        /* Add a pseudo-element for labels */
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%; /* Adjust the label width */
        padding-right: 10px; /* Space between label and content */
        white-space: nowrap; /* Ensures the text doesn't wrap */
        text-align: left;
        font-weight: bold; /* Optional: to distinguish label from data */
        content: attr(data-label); /* Uses the data-label attribute from HTML */
    }
}