“`html

/* تنظیمات پایه برای رندر بهتر در ویرایشگرها و تطبیق با دستگاه‌های مختلف */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap’); /* فونت فارسی Vazirmatn برای خوانایی بهتر */

body {
font-family: ‘Vazirmatn’, Arial, sans-serif; /* استفاده از فونت وزیری برای متن فارسی */
direction: rtl; /* راست به چپ برای زبان فارسی */
text-align: right;
margin: 0;
padding: 0;
background-color: #F8F9FA; /* پس‌زمینه بسیار روشن و آرامش‌بخش */
color: #343A40; /* رنگ متن خاکستری تیره برای خوانایی بالا */
line-height: 1.8; /* فاصله خطوط مناسب برای مطالعه */
font-size: 1.1em; /* سایز فونت پایه */
-webkit-font-smoothing: antialiased; /* بهبود رندر فونت در مرورگرهای وب‌کیت */
-moz-osx-font-smoothing: grayscale; /* بهبود رندر فونت در مرورگرهای موزیلا */
}

.container {
max-width: 1200px; /* حداکثر عرض محتوا برای جلوگیری از کشیدگی بیش از حد */
margin: 0 auto; /* قرارگیری در مرکز صفحه */
padding: 30px; /* فضای داخلی برای زیبایی و خوانایی */
background-color: #FFFFFF; /* پس‌زمینه سفید برای بخش اصلی مقاله */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* سایه ظریف برای جلوه عمق */
border-radius: 12px; /* گوشه‌های گرد برای طراحی مدرن */
overflow: hidden; /* جلوگیری از سرریز محتوا */
}

/* استایل هدینگ‌ها (H1, H2, H3) با سایز و ضخامت مشخص */
h1 {
font-size: 3em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* ضخامت بیشتر برای جلب توجه */
color: #0056B3; /* رنگ آبی تیره و حرفه‌ای */
text-align: center;
margin-bottom: 50px;
padding-bottom: 25px;
border-bottom: 4px solid #17A2B8; /* خط زیرین با رنگ فیروزه‌ای برای جلوه */
line-height: 1.2;
}

h2 {
font-size: 2.4em; /* سایز مناسب برای عناوین بخش‌های اصلی */
font-weight: 700; /* ضخامت خوب برای تاکید */
color: #0056B3;
margin-top: 60px;
margin-bottom: 30px;
border-right: 6px solid #17A2B8; /* خط عمودی در سمت راست برای تفکیک */
padding-right: 20px;
line-height: 1.3;
background-color: #E6F7F9; /* پس‌زمینه روشن برای H2 */
padding-top: 10px;
padding-bottom: 10px;
border-radius: 0 8px 8px 0; /* گوشه‌های گرد در سمت راست */
}

h3 {
font-size: 1.8em; /* سایز متوسط برای زیربخش‌ها */
font-weight: 600; /* ضخامت مناسب */
color: #343A40;
margin-top: 40px;
margin-bottom: 20px;
padding-right: 15px;
border-right: 4px solid #DEE2E6; /* خط عمودی خاکستری روشن */
line-height: 1.4;
}

p {
margin-bottom: 1.5em; /* فاصله مناسب بین پاراگراف‌ها */
text-align: justify; /* تراز از دو طرف برای زیبایی بصری */
}

ul {
list-style-type: none; /* حذف نشانگر پیش‌فرض لیست */
padding-right: 0;
margin-right: 15px; /* کمی تورفتگی برای لیست‌ها */
}

ul li {
margin-bottom: 12px;
position: relative;
padding-right: 30px; /* فضای لازم برای نشانگر سفارشی */
}

ul li::before {
content: ‘2022’; /* نشانگر دایره‌ای سفارشی */
color: #17A2B8; /* رنگ فیروزه‌ای برای نشانگر */
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: -1em;
position: absolute;
right: 0;
top: 0;
font-size: 1.2em;
}

/* استایل‌دهی جدول آموزشی */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌های جدول */
margin: 35px 0;
font-size: 1em;
min-width: 450px; /* حداقل عرض برای نمایش مناسب روی لپ‌تاپ */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* سایه جذاب برای جدول */
border-radius: 10px;
overflow: hidden;
}

.styled-table thead tr {
background-color: #0056B3; /* رنگ آبی تیره برای سربرگ جدول */
color: #ffffff;
text-align: right;
font-weight: 600;
}

.styled-table th,
.styled-table td {
padding: 15px 20px;
border: 1px solid #DEE2E6; /* خطوط جداکننده خاکستری روشن */
}

.styled-table tbody tr {
border-bottom: 1px solid #DDDDDD;
}

.styled-table tbody tr:nth-of-type(even) {
background-color: #F3F3F3; /* رنگ متناوب برای ردیف‌ها */
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #0056B3; /* خط پایانی پررنگ‌تر */
}

/* استایل‌دهی برای اینفوگرافیک جایگزین */
.infographic-container {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
flex-wrap: wrap; /* امکان شکستن و قرارگیری در سطر جدید */
justify-content: center; /* تراز مرکزی */
gap: 30px; /* فاصله بین آیتم‌ها */
margin: 50px 0;
}

.infographic-step {
background-color: #E6F7F9; /* پس‌زمینه فیروزه‌ای روشن */
border: 2px solid #17A2B8; /* حاشیه فیروزه‌ای */
border-radius: 15px; /* گوشه‌های گرد */
padding: 30px;
flex: 1 1 calc(33% – 60px); /* سه آیتم در هر سطر روی نمایشگرهای بزرگ */
min-width: 300px; /* حداقل عرض قبل از شکستن سطر */
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12); /* سایه عمیق‌تر برای برجستگی */
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن نرم هنگام هاور */
position: relative;
}

.infographic-step:hover {
transform: translateY(-8px); /* حرکت به سمت بالا هنگام هاور */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* سایه بیشتر هنگام هاور */
}

.infographic-step-number {
background-color: #0056B3; /* رنگ آبی تیره برای شماره */
color: #FFFFFF;
border-radius: 50%; /* دایره کامل */
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8em;
font-weight: bold;
margin: 0 auto 20px auto;
border: 4px solid #17A2B8; /* حاشیه فیروزه‌ای برجسته */
}

.infographic-step h4 {
color: #0056B3;
font-size: 1.6em;
margin-top: 15px;
margin-bottom: 15px;
font-weight: 700;
}

.infographic-step p {
font-size: 1.05em;
line-height: 1.7;
text-align: center;
margin-bottom: 0;
}

/* تنظیمات رسپانسیو برای موبایل، تبلت، لپ‌تاپ و تلویزیون */
@media (max-width: 1024px) { /* لپ‌تاپ‌های کوچک و تبلت‌های افقی */
.container {
padding: 25px;
margin: 15px;
}
h1 {
font-size: 2.5em;
margin-bottom: 40px;
padding-bottom: 20px;
}
h2 {
font-size: 2em;
margin-top: 50px;
margin-bottom: 25px;
padding-right: 18px;
}
h3 {
font-size: 1.5em;
margin-top: 35px;
margin-bottom: 18px;
padding-right: 12px;
}
.infographic-step {
flex: 1 1 calc(50% – 40px); /* دو ستون روی تبلت‌ها */
}
}

@media (max-width: 768px) { /* تبلت‌ها و موبایل‌های بزرگ */
body {
font-size: 1em;
}
.container {
padding: 20px;
margin: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
h1 {
font-size: 2em;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom-width: 3px;
}
h2 {
font-size: 1.8em;
margin-top: 40px;
margin-bottom: 20px;
padding-right: 15px;
border-right-width: 5px;
}
h3 {
font-size: 1.4em;
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
border-right-width: 3px;
}
ul li {
padding-right: 25px;
margin-bottom: 10px;
}
ul li::before {
font-size: 1.1em;
}
.infographic-step {
flex: 1 1 calc(100% – 20px); /* یک ستون روی موبایل */
min-width: unset;
padding: 25px;
}
.infographic-step-number {
width: 55px;
height: 55px;
font-size: 1.6em;
border-width: 3px;
}
.infographic-step h4 {
font-size: 1.4em;
}
.infographic-step p {
font-size: 0.95em;
}

/* مدیریت جدول در موبایل: تبدیل به کارت‌های عمودی */
.styled-table {
font-size: 0.9em;
display: block;
overflow-x: auto; /* برای جداول بزرگتر از عرض صفحه */
white-space: nowrap; /* جلوگیری از شکستن محتوای سلول‌ها */
width: 100%;
border-radius: 8px;
}
.styled-table thead {
display: none; /* مخفی کردن سربرگ جدول */
}
.styled-table tbody, .styled-table tr {
display: block; /* نمایش ردیف‌ها و بدنه جدول به صورت بلوک */
width: 100%;
}
.styled-table tr {
margin-bottom: 15px;
border: 1px solid #DDDDDD;
border-radius: 8px;
overflow: hidden;
background-color: #FFFFFF;
}
.styled-table td {
display: block; /* نمایش سلول‌ها به صورت بلوک */
text-align: right;
border-bottom: 1px solid #EEEEEE;
position: relative;
padding-right: 55%; /* فضای کافی برای برچسب */
white-space: normal; /* اجازه شکستن متن در سلول‌ها */
}
.styled-table td:last-child {
border-bottom: 0;
}
.styled-table td::before {
content: attr(data-label); /* نمایش برچسب از ویژگی data-label */
position: absolute;
right: 10px;
top: 15px;
width: 50%;
font-weight: bold;
color: #0056B3;
text-align: right;
font-size: 0.9em;
}
}

@media (max-width: 480px) { /* موبایل‌های کوچک */
h1 {
font-size: 1.8em;
margin-bottom: 25px;
padding-bottom: 12px;
line-height: 1.2;
}
h2 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 18px;
padding-right: 12px;
}
h3 {
font-size: 1.2em;
margin-top: 25px;
margin-bottom: 12px;
padding-right: 8px;
}
.container {
padding: 15px;
margin: 5px;
border-radius: 6px;
}
body {
font-size: 0.95em;
}
.infographic-step {
padding: 20px;
}
.infographic-step-number {
width: 45px;
height: 45px;
font-size: 1.4em;
margin-bottom: 15px;
}
.infographic-step h4 {
font-size: 1.2em;
}
.infographic-step p {
font-size: 0.9em;
}
.styled-table td {
padding-right: 60%; /* افزایش فضای برچسب در موبایل‌های کوچکتر */
}
.styled-table td::before {
width: 55%;
}
}

@media (min-width: 1201px) { /* تلویزیون و مانیتورهای بزرگ */
.container {
padding: 40px;
max-width: 1400px;
}
h1 {
font-size: 3.5em;
margin-bottom: 60px;
}
h2 {
font-size: 2.8em;
margin-top: 70px;
}
h3 {
font-size: 2em;
}
body {
font-size: 1.2em;
}
.infographic-step {
flex: 1 1 calc(25% – 60px); /* چهار ستون در نمایشگرهای بسیار بزرگ */
min-width: 250px;
}
}

“`