“`html

/* تنظیمات عمومی و ریسپانسیو */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif;
line-height: 1.7;
color: #333;
margin: 0;
padding: 0;
background-color: #f8f9fa; /* رنگ زمینه روشن */
direction: rtl; /* برای زبان فارسی */
text-align: right;
}

.container {
max-width: 960px;
margin: 30px auto;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* سایه جذاب‌تر */
}

/* رنگ‌بندی و استایل هدینگ‌ها */
h1 {
font-size: 2.8em;
font-weight: 800; /* بسیار ضخیم */
color: #004d99; /* آبی تیره و حرفه‌ای */
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #0056b3; /* خط زیرین برای H1 */
line-height: 1.3;
}

h2 {
font-size: 2.2em;
font-weight: 700; /* ضخیم */
color: #0056b3; /* آبی اصلی */
margin-top: 40px;
margin-bottom: 20px;
padding-right: 15px;
border-right: 5px solid #28a745; /* خط سبز برای تأکید */
line-height: 1.4;
}

h3 {
font-size: 1.7em;
font-weight: 600; /* نیمه ضخیم */
color: #0069d9; /* آبی کمی روشن‌تر */
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
line-height: 1.5;
}

p {
margin-bottom: 1em;
font-size: 1.05em;
line-height: 1.8;
}

ul {
list-style-type: disc;
margin-right: 25px;
margin-bottom: 1em;
padding: 0;
}

ul li {
margin-bottom: 0.8em;
font-size: 1.05em;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1.05em;
}

th, td {
border: 1px solid #dee2e6;
padding: 12px 15px;
text-align: right;
}

th {
background-color: #e9ecef; /* زمینه روشن برای هدر جدول */
color: #495057;
font-weight: 600;
}

tr:nth-child(even) {
background-color: #f2f2f2; /* برای خوانایی بهتر ردیف‌های زوج */
}

/* استایل اینفوگرافیک جایگزین */
.infographic-box {
background-color: #e6f7ff; /* آبی بسیار روشن */
border: 2px solid #99daff; /* حاشیه آبی ملایم */
border-radius: 10px;
padding: 25px;
margin: 35px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: flex;
flex-wrap: wrap; /* برای ریسپانسیو بودن */
gap: 20px; /* فاصله بین آیتم‌ها */
}

.infographic-item {
flex: 1 1 calc(50% – 20px); /* دو ستون در دسکتاپ، یک ستون در موبایل */
min-width: 280px; /* حداقل عرض آیتم برای جلوگیری از کوچک شدن زیاد */
background-color: #fff;
border: 1px solid #cceeff;
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infographic-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.infographic-item span.icon {
font-size: 2.5em;
display: block;
margin-bottom: 10px;
color: #007bff; /* رنگ آیکون */
}

.infographic-item h4 {
font-size: 1.3em;
color: #0056b3;
margin-top: 0;
margin-bottom: 10px;
}

.infographic-item p {
font-size: 1em;
line-height: 1.6;
color: #555;
}

/* بخش فهرست مطالب */
.table-of-contents {
background-color: #f0f8ff; /* آبی بسیار روشن */
border: 1px solid #d0e8f8;
border-radius: 8px;
padding: 20px 25px;
margin-bottom: 30px;
font-size: 1.05em;
}

.table-of-contents h3 {
color: #0056b3;
margin-top: 0;
border-right: none;
padding-right: 0;
text-align: center;
}

.table-of-contents ul {
list-style-type: none;
padding-right: 0;
margin-right: 0;
}

.table-of-contents ul li {
margin-bottom: 10px;
font-size: 1.05em;
}

.table-of-contents ul li a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}

.table-of-contents ul li a:hover {
color: #0056b3;
text-decoration: underline;
}

/* بخش پرسش‌های متداول */
.faq-section {
background-color: #f7fcfb; /* سبزآبی بسیار روشن */
border: 1px solid #e0f2f1;
border-radius: 10px;
padding: 25px;
margin-top: 40px;
}

.faq-item {
margin-bottom: 20px;
border-bottom: 1px dashed #e0e0e0;
padding-bottom: 15px;
}

.faq-item:last-child {
border-bottom: none;
padding-bottom: 0;
}

.faq-question {
font-weight: 700;
color: #218838; /* سبز تیره */
font-size: 1.15em;
margin-bottom: 8px;
cursor: pointer; /* نشانگر قابل کلیک */
}

.faq-answer {
color: #555;
font-size: 1.05em;
padding-right: 15px;
}

/* Media Queries برای ریسپانسیو بودن */
@media (max-width: 768px) {
.container {
margin: 15px auto;
padding: 15px;
}
h1 {
font-size: 2em;
margin-bottom: 20px;
padding-bottom: 10px;
}
h2 {
font-size: 1.7em;
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
}
h3 {
font-size: 1.4em;
margin-top: 25px;
margin-bottom: 10px;
}
p, ul li, table, th, td, .table-of-contents, .faq-item {
font-size: 1em;
}
.infographic-item {
flex: 1 1 100%; /* یک ستون در موبایل */
min-width: unset;
}
.infographic-item span.icon {
font-size: 2em;
}
.infographic-box {
padding: 15px;
gap: 15px;
}
.faq-question {
font-size: 1.1em;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.7em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
}

“`