“`html

/* Variables برای استفاده آسان از رنگ‌ها و مقادیر */
:root {
–primary-text-color: #333; /* رنگ متن اصلی */
–heading-color: #2A4D69; /* رنگ عنوان‌ها (آبی تیره مایل به خاکستری) */
–background-light-grey: #F8F8F8; /* رنگ پس‌زمینه روشن */
–background-white: #FFFFFF; /* رنگ پس‌زمینه سفید */
–accent-color: #69B3CD; /* رنگ تاکید (آبی روشن) */
–border-light-color: #EEE; /* رنگ خطوط روشن */
–paragraph-line-height: 1.8; /* ارتفاع خطوط پاراگراف */
–max-content-width: 900px; /* حداکثر عرض محتوا */
}

/* Styles کلی بدنه صفحه */
body {
font-family: ‘Vazirmatn’, sans-serif;
margin: 0;
padding: 0;
background-color: var(–background-light-grey);
color: var(–primary-text-color);
line-height: var(–paragraph-line-height);
font-size: 16px; /* اندازه فونت پایه برای خوانایی */
direction: rtl; /* جهت نوشتار راست به چپ */
text-align: right; /* تراز متن به راست */
}

/* Container اصلی محتوا */
.container {
max-width: var(–max-content-width);
margin: 20px auto;
padding: 20px;
background-color: var(–background-white);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* سایه جذاب برای جعبه محتوا */
border-radius: 12px; /* گوشه‌های گرد */
}

/* استایل هدینگ‌ها */
h1 {
font-size: 2.4em; /* حدود 38px */
font-weight: 700; /* ضخامت فونت */
color: var(–heading-color);
margin-bottom: 30px;
text-align: center; /* تراز وسط */
line-height: 1.3;
}

h2 {
font-size: 1.8em; /* حدود 28px */
font-weight: 600;
color: var(–heading-color);
margin-top: 40px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid var(–accent-color); /* خط زیر عنوان H2 */
line-height: 1.4;
}

h3 {
font-size: 1.35em; /* حدود 22px */
font-weight: 500;
color: var(–heading-color);
margin-top: 30px;
margin-bottom: 15px;
line-height: 1.5;
}

p {
margin-bottom: 1em;
line-height: var(–paragraph-line-height);
text-align: justify; /* تراز دو طرفه برای پاراگراف‌ها */
}

ul {
list-style-type: square; /* نوع لیست */
margin-right: 20px; /* فاصله از راست برای RTL */
margin-bottom: 1em;
padding-right: 0; /* حذف پدینگ پیش‌فرض */
}

li {
margin-bottom: 0.8em;
line-height: var(–paragraph-line-height);
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* خطوط جدول به هم چسبیده */
margin: 30px 0;
font-size: 0.95em;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* سایه ظریف برای جدول */
border-radius: 8px; /* گوشه‌های گرد */
overflow: hidden; /* برای نمایش صحیح گوشه‌های گرد با border-collapse */
}

table th, table td {
border: 1px solid var(–border-light-color);
padding: 12px 15px;
text-align: right;
}

table th {
background-color: var(–accent-color);
color: var(–background-white);
font-weight: 600;
}

table tr:nth-child(even) {
background-color: #FDFDFD; /* رنگ متناوب برای ردیف‌ها */
}

/* جایگزین اینفوگرافیک با استایل‌های زیبا */
.infographic-container {
margin: 40px 0;
padding: 25px;
background-color: #f0f8ff; /* یک آبی بسیار روشن برای پس‌زمینه */
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
text-align: center; /* تراز میانی برای عنوان کلی */
position: relative;
overflow: hidden;
border: 1px solid #e0efff; /* حاشیه کمرنگ */
}

.infographic-container::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px; /* نوار رنگی بالا */
background: linear-gradient(to right, var(–accent-color), #69B3CD, #8ECDEA);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.infographic-title {
font-size: 1.6em;
font-weight: 600;
color: var(–heading-color);
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}

.infographic-title::after {
content: ”;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* تراز وسط برای خط زیر عنوان */
width: 60px;
height: 3px;
background-color: var(–accent-color);
border-radius: 2px;
}

.infographic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* گرید واکنش‌گرا */
gap: 25px;
margin-top: 30px;
}

.infographic-item {
background-color: var(–background-white);
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* انیمیشن هنگام هاور */
border-top: 4px solid var(–accent-color); /* نوار رنگی بالا */
text-align: right; /* تراز راست برای متن آیتم‌ها */
}

.infographic-item:hover {
transform: translateY(-5px); /* حرکت به سمت بالا هنگام هاور */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.infographic-icon {
font-size: 2.2em;
color: var(–accent-color);
margin-bottom: 10px;
line-height: 1;
text-align: center; /* تراز وسط برای آیکون */
display: block;
}

.infographic-item-title {
font-size: 1.15em;
font-weight: 600;
color: var(–heading-color);
margin-bottom: 10px;
}

.infographic-item p {
font-size: 0.95em;
line-height: 1.7;
color: #555;
margin-bottom: 0;
text-align: justify;
}

/* واکنش‌گرا برای دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ، تلویزیون) */
@media (max-width: 768px) { /* تبلت و لپ‌تاپ‌های کوچک */
.container {
margin: 10px auto;
padding: 15px;
border-radius: 0; /* حذف گوشه‌های گرد در موبایل برای تمام عرض */
box-shadow: none; /* حذف سایه در موبایل */
}

h1 {
font-size: 2em;
margin-bottom: 20px;
}

h2 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 15px;
}

h3 {
font-size: 1.2em;
margin-top: 25px;
margin-bottom: 10px;
}

body {
font-size: 15px;
}

.infographic-grid {
grid-template-columns: 1fr; /* یک ستون در صفحه کوچک */
}

table th, table td {
padding: 10px;
}
}

@media (max-width: 480px) { /* موبایل */
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.1em;
}
body {
font-size: 14px;
}
.infographic-container {
padding: 15px;
}
.infographic-title {
font-size: 1.4em;
}
}

@media (min-width: 1200px) { /* صفحه نمایش‌های بزرگتر مانند تلویزیون */
.container {
max-width: 1100px; /* افزایش عرض محتوا */
}
h1 {
font-size: 2.8em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
body {
font-size: 17px;
}
}

/* استایل‌های پرینت */
@media print {
body {
background-color: #fff;
color: #000;
font-family: ‘Times New Roman’, serif;
}
.container {
box-shadow: none;
margin: 0;
padding: 0;
border-radius: 0;
}
h1, h2, h3 {
color: #000;
border-bottom: 1px solid #ccc !important;
padding-bottom: 5px !important;
}
.infographic-container, .infographic-item {
box-shadow: none;
background-color: #fff !important;
border: 1px dashed #ccc !important;
}
table th {
background-color: #eee !important;
color: #333 !important;
}
}

“`