“`html

/*
این بلوک CSS برای اطمینان از نمایش صحیح و رسپانسیو بودن مقاله در انواع دستگاه‌ها (موبایل، تبلت، لپ‌تاپ، تلویزیون) و همچنین ایجاد یک طراحی منحصر به فرد با رنگ‌بندی زیبا تعبیه شده است.
استفاده از واحدهای نسبی مانند em، rem، % و vw/vh و همچنین media queries، تضمین کننده رسپانسیو بودن است.
رنگ‌بندی با دقت برای خوانایی و جذابیت بصری انتخاب شده است.
*/
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت با پشتیبانی خوب فارسی */
line-height: 1.7; /* افزایش فاصله خطوط برای خوانایی بهتر */
color: #333333; /* رنگ متن اصلی */
margin: 0;
padding: 0;
background-color: #fcfcfc; /* رنگ پس‌زمینه کلی صفحه */
direction: rtl; /* برای راست‌چین کردن محتوای فارسی */
text-align: right; /* تراز راست برای متن */
}

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

/* استایل‌های هدینگ برای رسپانسیو بودن و نمایش زیبا */
h1, h2, h3 {
color: #264653; /* رنگ تیره برای هدینگ‌ها */
margin-top: 2.2em;
margin-bottom: 0.8em;
font-weight: bold;
line-height: 1.3;
}

h1 {
font-size: 2.8em; /* سایز بزرگ برای H1 */
text-align: center;
padding-bottom: 25px;
border-bottom: 4px solid #2A9D8F; /* خط سبز زیر H1 */
margin-bottom: 40px;
color: #264653;
}

h1 span {
color: #2A9D8F; /* رنگ سبز برای بخش تضمین در عنوان */
}

h2 {
font-size: 2.1em; /* سایز مناسب برای H2 */
padding-top: 15px;
padding-bottom: 10px;
border-bottom: 2px dotted #E0FBFC; /* خط نقطه‌چین زیر H2 */
margin-top: 2.5em;
margin-bottom: 1.2em;
}

h3 {
font-size: 1.6em; /* سایز مناسب برای H3 */
margin-top: 1.8em;
margin-bottom: 1em;
color: #2A9D8F; /* رنگ سبز برای H3 */
}

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

ul, ol {
margin-bottom: 1.2em;
padding-right: 25px; /* پدینگ برای لیست‌ها */
list-style-type: square; /* نوع بولت برای لیست‌ها */
}

li {
margin-bottom: 0.7em;
}

/* استایل‌های بخش‌های با پس‌زمینه رنگی برای طراحی زیبا */
.section-bg-light {
background-color: #E0FBFC; /* پس‌زمینه آبی روشن */
padding: 30px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* سایه عمیق‌تر */
}

.section-bg-dark {
background-color: #264653; /* پس‌زمینه سبز تیره */
color: #fff; /* متن سفید */
padding: 30px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.highlight-text {
color: #2A9D8F; /* رنگ سبز برای هایلایت کردن متن */
font-weight: bold;
}

.section-bg-dark .highlight-text {
color: #66CCFF; /* رنگ آبی روشن برای هایلایت در بخش تیره */
}

/* استایل‌ اینفوگرافیک (جایگزین متنی) */
.info-block-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* ستون‌های رسپانسیو */
gap: 25px; /* فاصله بین بلوک‌ها */
margin-top: 35px;
margin-bottom: 35px;
}

.info-block-item {
background-color: #ffffff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن نرم */
border: 1px solid #eee; /* خط دور بلوک */
}

.info-block-item:hover {
transform: translateY(-8px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* سایه عمیق‌تر هنگام هاور */
}

.info-block-icon {
font-size: 3em; /* سایز بزرگ برای آیکون */
margin-bottom: 15px;
color: #2A9D8F; /* رنگ آیکون */
}

.info-block-title {
font-weight: bold;
color: #264653;
margin-bottom: 10px;
font-size: 1.3em;
}

.info-block-item p {
font-size: 0.95em;
color: #555;
line-height: 1.5;
text-align: center;
}

/* استایل جدول رسپانسیو */
.responsive-table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
margin-bottom: 30px;
display: block; /* برای اسکرول افقی در موبایل */
overflow-x: auto; /* فعال کردن اسکرول افقی */
-webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* پنهان کردن گوشه‌های تیز جدول */
}

.responsive-table th, .responsive-table td {
border: 1px solid #e0e0e0; /* خطوط جدول */
padding: 15px;
text-align: right;
white-space: nowrap; /* جلوگیری از شکستن متن در سلول‌ها */
}

.responsive-table th {
background-color: #2A9D8F; /* پس‌زمینه سبز برای هدر جدول */
color: white;
font-weight: bold;
font-size: 1.1em;
}

.responsive-table tr:nth-child(even) {
background-color: #f7f7f7; /* رنگ پس‌زمینه برای سطرهای زوج */
}

.responsive-table tr:hover {
background-color: #eef7f7; /* رنگ پس‌زمینه هنگام هاور روی سطر */
}

/* Media Queries برای رسپانسیو بودن در دستگاه‌های مختلف */
@media (max-width: 992px) { /* تبلت و لپ‌تاپ کوچک */
.container {
padding: 20px;
margin: 15px;
}
h1 { font-size: 2.5em !important; padding-bottom: 20px; margin-bottom: 30px; }
h2 { font-size: 1.8em !important; margin-top: 2em; margin-bottom: 1em; }
h3 { font-size: 1.4em !important; margin-top: 1.5em; }
.section-bg-light, .section-bg-dark { padding: 25px; margin-bottom: 25px; }
.info-block-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.info-block-item { padding: 20px; }
.info-block-icon { font-size: 2.8em; margin-bottom: 12px; }
}

@media (max-width: 768px) { /* تبلت و موبایل بزرگ */
.container {
padding: 15px;
margin: 10px;
}
h1 { font-size: 2.2em !important; padding-bottom: 15px; margin-bottom: 25px; }
h2 { font-size: 1.6em !important; margin-top: 1.8em; margin-bottom: 0.9em; }
h3 { font-size: 1.3em !important; margin-top: 1.4em; }
ul, ol { padding-right: 20px; }
.section-bg-light, .section-bg-dark { padding: 20px; margin-bottom: 20px; }
.info-block-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.info-block-item { padding: 18px; }
.info-block-icon { font-size: 2.5em; margin-bottom: 10px; }
.responsive-table th, .responsive-table td { padding: 10px; font-size: 0.9em; }
}

@media (max-width: 480px) { /* موبایل کوچک */
.container {
padding: 10px;
margin: 5px;
}
h1 { font-size: 1.8em !important; padding-bottom: 12px; margin-bottom: 20px; }
h2 { font-size: 1.4em !important; margin-top: 1.5em; margin-bottom: 0.8em; }
h3 { font-size: 1.1em !important; margin-top: 1.2em; }
ul, ol { padding-right: 15px; }
.section-bg-light, .section-bg-dark { padding: 15px; margin-bottom: 15px; }
.info-block-grid { grid-template-columns: 1fr; gap: 15px; } /* یک ستون در موبایل‌های خیلی کوچک */
.info-block-item { padding: 15px; }
.info-block-icon { font-size: 2.2em; margin-bottom: 8px; }
.info-block-title { font-size: 1.1em; }
.responsive-table th, .responsive-table td { padding: 8px; font-size: 0.85em; }
}

/* فونت Vazirmatn برای پشتیبانی بهتر از زبان فارسی */
@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;
}

“`