/* Global styles for responsiveness – will be applied if copied into a tag in HTML head or a CSS file */
@media (max-width: 768px) {
div[style*=”max-width: 900px”] {
margin: 10px auto;
padding: 15px;
border-radius: 8px;
}
h1[style*=”font-size: 38px”] {
font-size: 28px !important;
padding: 10px !important;
}
h2[style*=”font-size: 28px”] {
font-size: 22px !important;
margin-top: 30px !important;
margin-bottom: 15px !important;
}
h3[style*=”font-size: 22px”] {
font-size: 18px !important;
margin-bottom: 5px !important;
}
p, li, td {
font-size: 15px !important;
line-height: 1.7 !important;
}
div[style*=”display: flex; flex-direction: column”] {
padding: 15px 20px !important;
}
div[style*=”display: flex; align-items: flex-start; gap: 15px;”] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
div[style*=”display: flex; align-items: flex-start; gap: 15px;”] span {
margin-bottom: 5px;
}
table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table thead, table tbody, table th, table td, table tr {
display: block;
}
table tr {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
table tbody tr:nth-child(even) td {
background-color: #f8f8f8 !important;
}
table thead tr {
display: none; /* Hide header on small screens */
}
table td {
border: none;
position: relative;
padding-left: 50% !important;
text-align: right !important;
font-size: 16px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
table td:before {
content: attr(data-label);
position: absolute;
left: 15px;
width: calc(50% – 30px);
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
color: #0056b3;
text-align: left;
}
table tr:nth-child(1) td:before { content: “ویژگی”; }
table tr:nth-child(2) td:nth-child(1):before { content: “خدمات پایه”; }
table tr:nth-child(2) td:nth-child(2):before { content: “خدمات جامع”; }

/* Adapting table rows for better display, manual data-label needed */
table tbody tr td:nth-child(1):before { content: “ویژگی”; }
table tbody tr:nth-child(1) td:nth-child(2):before { content: “خدمات پایه”; }
table tbody tr:nth-child(1) td:nth-child(3):before { content: “خدمات جامع”; }

table tbody tr:nth-child(2) td:nth-child(1):before { content: “بررسی ادبیات”; }
table tbody tr:nth-child(2) td:nth-child(2):before { content: “خدمات پایه”; }
table tbody tr:nth-child(2) td:nth-child(3):before { content: “خدمات جامع”; }

table tbody tr:nth-child(3) td:nth-child(1):before { content: “روش تحقیق”; }
table tbody tr:nth-child(3) td:nth-child(2):before { content: “خدمات پایه”; }
table tbody tr:nth-child(3) td:nth-child(3):before { content: “خدمات جامع”; }

table tbody tr:nth-child(4) td:nth-child(1):before { content: “بودجه‌بندی”; }
table tbody tr:nth-child(4) td:nth-child(2):before { content: “خدمات پایه”; }
table tbody tr:nth-child(4) td:nth-child(3):before { content: “خدمات جامع”; }

table tbody tr:nth-child(5) td:nth-child(1):before { content: “جلسات مشاوره”; }
table tbody tr:nth-child(5) td:nth-child(2):before { content: “خدمات پایه”; }
table tbody tr:nth-child(5) td:nth-child(3):before { content: “خدمات جامع”; }

table tbody tr:nth-child(6) td:nth-child(1):before { content: “ویرایش و بازنگری”; }
table tbody tr:nth-child(6) td:nth-child(2):before { content: “خدمات پایه”; }
table tbody tr:nth-child(6) td:nth-child(3):before { content: “خدمات جامع”; }

/* Manually add data-label attributes to the table for mobile display */
/* This needs to be done on the HTML itself, but for simulation, I’ll describe it:

خلاصه و محدود خلاصه و محدود جامع و عمیق، با دسترسی به پایگاه‌های داده معتبر

*/
/* To make the table fully responsive for mobile, each

needs a data-label attribute
corresponding to its header. Since I can’t modify the user’s HTML post-generation,
I’ll add a general CSS rule and mention the manual addition for best results.
*/
table td:nth-of-type(1):before { content: “ویژگی”; }
table td:nth-of-type(2):before { content: “خدمات پایه”; }
table td:nth-of-type(3):before { content: “خدمات جامع”; }

/* General styling for list items for better mobile readability */
ul[style*=”list-style-type: none”] li {
padding: 10px;
margin-bottom: 10px;
}
}

// This script dynamically adds data-label attributes for responsive table display.
// It should be placed in a tag at the end of the body or in the head.
document.addEventListener(‘DOMContentLoaded’, function() {
const table = document.querySelector(‘table’);
if (table) {
const headers = Array.from(table.querySelectorAll(‘thead th’)).map(th => th.textContent);
table.querySelectorAll(‘tbody tr’).forEach(row => {
row.querySelectorAll(‘td’).forEach((td, index) => {
td.setAttribute(‘data-label’, headers[index]);
});
});
}
});