“`html

<!– CSS for responsiveness – This part would typically be in a tag in the or an external CSS file –>

@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/misc/web/vazirmatn-vf-wght-subset.woff2’) format(‘woff2’);
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: ‘Estedad’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/estedad@v1.0.0/misc/web/estedad-vf-subset.woff2’) format(‘woff2’);
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: ‘IRANSans’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/fonts/woff2/Sahel-Bold.woff2’) format(‘woff2’); /* Example, use correct font path */
font-weight: bold;
font-display: swap;
}
@font-face {
font-family: ‘IRANSans’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/fonts/woff2/Sahel.woff2’) format(‘woff2’); /* Example, use correct font path */
font-weight: normal;
font-display: swap;
}

body {
margin: 0;
padding: 0;
background-color: #F8F9FA; /* Light background for the whole page */
}

/* Base styling for the main container */
div[style*=”font-family: ‘Vazirmatn'”] {
width: 100%; /* Make it fill available width */
margin: 0; /* Remove default margin */
padding: 15px; /* Adjust padding for smaller screens */
box-sizing: border-box; /* Include padding in width */
}

/* Responsive adjustments for headings */
h1[style*=”font-size: 2.5em”] {
font-size: 2em !important; /* Smaller on mobile */
}
h2[style*=”font-size: 1.8em”] {
font-size: 1.5em !important; /* Smaller on mobile */
}
h3[style*=”font-size: 1.3em”] {
font-size: 1.15em !important; /* Smaller on mobile */
}

/* Adjust padding and margins for smaller screens */
p {
margin-bottom: 1em !important;
font-size: 0.95em !important;
}
ul li {
margin-bottom: 0.5em !important;
font-size: 0.9em !important;
}

/* Table responsiveness */
table {
display: block;
width: 100%;
overflow-x: auto; /* Enable horizontal scrolling for tables on small screens */
-webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
}
thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #D6E0EF;
margin-bottom: 10px;
}
td {
border: none;
border-bottom: 1px solid #D6E0EF;
position: relative;
padding-left: 50% !important; /* Space for the “label” before content */
text-align: right !important; /* Default for RTL */
font-size: 0.9em !important;
}
td:before {
content: attr(data-label); /* Use data-label for content */
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
color: #1E3F66;
text-align: left;
}
/* Specific table adjustments for better mobile readability */
td ul {
margin-right: 0px !important;
padding-right: 0px !important;
}
td ul li {
font-size: 0.85em !important;
}

/* Adjust Infographic-like blocks for mobile */
div[style*=”display: flex; flex-wrap: wrap;”] {
flex-direction: column; /* Stack items vertically on small screens */
}
div[style*=”flex: 1 1 300px;”] {
margin-bottom: 15px; /* Add spacing between stacked blocks */
width: 100%; /* Make each block full width */
}

/* Adjust bullet points with icons */
ul[style*=”list-style-type: none”] li {
flex-direction: column; /* Stack icon and text for better flow on mobile */
align-items: flex-start !important; /* Align to start */
}
ul[style*=”list-style-type: none”] li span[style*=”font-size: 1.5em”] {
margin-bottom: 5px; /* Space between icon and text */
margin-left: 0 !important; /* Remove left margin */
}
ul[style*=”list-style-type: none”] li div {
text-align: right; /* Ensure text alignment is right for RTL */
}

/* Tablet and larger screens */
@media (min-width: 768px) {
div[style*=”font-family: ‘Vazirmatn'”] {
padding: 30px;
}
h1[style*=”font-size: 2.5em”] {
font-size: 2.2em !important;
}
h2[style*=”font-size: 1.8em”] {
font-size: 1.6em !important;
}
h3[style*=”font-size: 1.3em”] {
font-size: 1.2em !important;
}
p {
font-size: 1em !important;
}
ul li {
font-size: 0.95em !important;
}

/* Reset table for larger screens */
table, thead, tbody, th, td, tr {
display: table;
}
thead tr {
position: relative;
top: auto;
left: auto;
}
th, td {
display: table-cell;
text-align: right; /* Adjust as per your RTL needs */
padding-left: 15px !important;
}
td:before {
content: none;
}

/* Reset Infographic-like blocks for larger screens */
div[style*=”display: flex; flex-wrap: wrap;”] {
flex-direction: row; /* Back to row layout */
}
div[style*=”flex: 1 1 300px;”] {
margin-bottom: 0;
width: auto;
}

/* Reset bullet points with icons */
ul[style*=”list-style-type: none”] li {
flex-direction: row; /* Back to row layout */
align-items: center !important;
}
ul[style*=”list-style-type: none”] li span[style*=”font-size: 1.5em”] {
margin-left: 10px !important;
margin-bottom: 0;
}
}

/* Laptop and larger screens */
@media (min-width: 1024px) {
div[style*=”font-family: ‘Vazirmatn'”] {
max-width: 900px; /* Max width for desktop */
padding: 40px;
}
h1[style*=”font-size: 2.5em”] {
font-size: 2.5em !important;
}
h2[style*=”font-size: 1.8em”] {
font-size: 1.8em !important;
}
h3[style*=”font-size: 1.3em”] {
font-size: 1.3em !important;
}
p {
font-size: 1.05em !important;
}
ul li {
font-size: 1em !important;
}
}

// This script is to dynamically add data-label attributes to table cells for mobile responsiveness
// This makes the table headers appear as labels next to each cell’s content on smaller screens
document.addEventListener(‘DOMContentLoaded’, function() {
var table = document.querySelector(‘table’);
if (table) {
var headers = Array.from(table.querySelectorAll(‘thead th’)).map(th => th.textContent.trim());
table.querySelectorAll(‘tbody tr’).forEach(function(row) {
row.querySelectorAll(‘td’).forEach(function(cell, index) {
if (headers[index]) {
cell.setAttribute(‘data-label’, headers[index] + ‘:’);
}
});
});
}
});

“`