“`html

/* General Body & Typography */
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/misc/web/Vazirmatn-Regular.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/misc/web/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: 700;
font-style: normal;
}

body {
font-family: ‘Vazirmatn’, ‘BlinkMacSystemFont’, ‘Segoe UI’, ‘Roboto’, ‘Oxygen’, ‘Ubuntu’, ‘Cantarell’, ‘Fira Sans’, ‘Droid Sans’, ‘Helvetica Neue’, sans-serif;
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #f9f9f9;
direction: rtl;
text-align: right;
}

/* Container for overall responsiveness */
.container {
max-width: 900px;
margin: 2rem auto;
padding: 1.5rem;
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 12px;
}

/* Headings */
h1, h2, h3 {
color: #2C3E50;
margin-top: 2.5rem;
margin-bottom: 1rem;
line-height: 1.4;
font-weight: 700;
}

h1 {
font-size: 2.6rem; /* Base 16px * 2.6 = 41.6px */
text-align: center;
border-bottom: 3px solid #3498DB;
padding-bottom: 1rem;
margin-top: 0;
}

h2 {
font-size: 2rem; /* Base 16px * 2 = 32px */
border-bottom: 2px solid #ECF0F1;
padding-bottom: 0.5rem;
color: #34495E;
}

h3 {
font-size: 1.6rem; /* Base 16px * 1.6 = 25.6px */
color: #2980B9;
margin-top: 2rem;
margin-bottom: 0.8rem;
}

/* Paragraphs and Lists */
p {
margin-bottom: 1.2rem;
font-size: 1.05rem;
color: #34495E;
}

ul {
list-style: none; /* Remove default bullet */
padding-right: 0;
margin-bottom: 1.5rem;
}

ul li {
position: relative;
padding-right: 1.8rem;
margin-bottom: 0.8rem;
font-size: 1.05rem;
color: #333;
}

ul li::before {
content: ‘✅’; /* Custom bullet point */
position: absolute;
right: 0;
top: 0;
font-size: 1.1rem;
line-height: 1.8;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
font-size: 1rem;
text-align: right;
}

table caption {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 1rem;
color: #2C3E50;
}

th, td {
border: 1px solid #BDC3C7;
padding: 1rem 1.2rem;
}

th {
background-color: #3498DB;
color: #fff;
font-weight: bold;
white-space: nowrap; /* Prevent wrapping on short headers */
}

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

tr:hover {
background-color: #EBF5FB;
}

/* Infographic-like Sections */
.info-box {
background-color: #EBF5FB; /* Light blue background */
border-right: 5px solid #3498DB; /* Blue accent border */
padding: 1.5rem;
margin: 2.5rem 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
line-height: 1.8;
}
.info-box h3 {
color: #2C3E50;
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.info-box ul {
list-style: none;
padding-right: 0;
margin-bottom: 0;
}
.info-box ul li {
padding-right: 2rem;
margin-bottom: 0.7rem;
color: #34495E;
}
.info-box ul li::before {
content: ‘💡’; /* Lightbulb icon for tips */
right: 0;
font-size: 1.3rem;
line-height: 1.6;
}

.checklist-box {
background-color: #F0FBF0; /* Light green background */
border-right: 5px solid #27AE60; /* Green accent border */
padding: 1.5rem;
margin: 2.5rem 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.checklist-box h3 {
color: #27AE60;
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.checklist-box ul {
list-style: none;
padding-right: 0;
margin-bottom: 0;
}
.checklist-box ul li {
padding-right: 2rem;
margin-bottom: 0.7rem;
color: #34495E;
}
.checklist-box ul li::before {
content: ‘✔️’; /* Checkmark icon */
right: 0;
font-size: 1.3rem;
line-height: 1.6;
color: #27AE60;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.container {
margin: 1rem auto;
padding: 1rem;
border-radius: 0; /* Remove border-radius on small screens for full width look */
box-shadow: none;
}
h1 {
font-size: 2rem;
margin-top: 1rem;
}
h2 {
font-size: 1.6rem;
margin-top: 2rem;
}
h3 {
font-size: 1.3rem;
margin-top: 1.5rem;
}
p, ul li, table, th, td {
font-size: 0.95rem;
}
table {
display: block;
overflow-x: auto; /* Enable horizontal scrolling for tables */
white-space: nowrap;
}
th, td {
padding: 0.8rem;
}
.info-box, .checklist-box {
padding: 1rem;
margin: 2rem 0;
}
.info-box h3, .checklist-box h3 {
font-size: 1.3rem;
}
}

@media (max-width: 480px) {
body {
line-height: 1.6;
}
h1 {
font-size: 1.8rem;
padding-bottom: 0.8rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.15rem;
}
p, ul li, table, th, td {
font-size: 0.9rem;
}
ul li {
padding-right: 1.5rem;
margin-bottom: 0.5rem;
}
ul li::before {
font-size: 1rem;
line-height: 1.6;
}
.info-box, .checklist-box {
margin: 1.5rem 0;
}
}

“`