“`html

/*
* CSS برای اطمینان از نمایش صحیح و رسپانسیو در ویرایشگر بلوک و مرورگرها
* توصیه می‌شود این بخش در فایل CSS اصلی سایت یا در صفحه قرار گیرد.
*/
body {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* فونت مناسب فارسی و انگلیسی */
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
color: #333333; /* رنگ متن تیره برای کنتراست خوب */
margin: 0;
padding: 0;
background-color: #f4f7f6; /* پس‌زمینه کلی ملایم */
direction: rtl; /* جهت متن راست به چپ برای فارسی */
text-align: right; /* هم‌ترازی متن به راست */
}
.container {
max-width: 900px; /* حداکثر عرض محتوا */
margin: 20px auto; /* مرکز قرار دادن در صفحه */
padding: 20px 30px;
background-color: #ffffff; /* پس‌زمینه سفید برای محتوای اصلی */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* سایه ملایم برای جلوه سه‌بعدی */
border-radius: 8px; /* گوشه‌های گرد */
}
h1 {
font-size: 2.5em; /* اندازه بزرگ برای عنوان اصلی */
color: #003366; /* آبی تیره برای عناوین اصلی */
text-align: center;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 2px solid #20B2AA; /* خط زیرین با رنگ آکسان */
font-weight: bold;
}
h2 {
font-size: 1.8em; /* اندازه مناسب برای عناوین H2 */
color: #003366;
margin-top: 40px;
margin-bottom: 15px;
border-right: 5px solid #20B2AA; /* خط عمودی برای زیبایی و تفکیک */
padding-right: 15px; /* فاصله از خط عمودی */
font-weight: bold;
}
h3 {
font-size: 1.3em; /* اندازه برای عناوین H3 */
color: #004488;
margin-top: 30px;
margin-bottom: 10px;
font-weight: bold;
}
p {
margin-bottom: 15px;
text-align: justify; /* هم‌ترازی دو طرفه برای پاراگراف‌ها */
}
ul, ol {
margin-bottom: 15px;
padding-right: 25px; /* فاصله از سمت راست برای لیست‌ها */
list-style-position: inside; /* برای نمایش نقطه‌ها/اعداد داخل حاشیه */
}
li {
margin-bottom: 8px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background-color: #f8fcfb; /* پس‌زمینه ملایم برای جداول */
}
th, td {
border: 1px solid #d4e0da; /* حاشیه ملایم جدول */
padding: 12px 15px;
text-align: right;
}
th {
background-color: #003366;
color: #ffffff;
font-weight: bold;
}
td {
background-color: #ffffff;
}
.infobox {
background-color: #e6f7f6; /* پس‌زمینه آبی/سبز روشن برای باکس‌های اطلاعاتی */
border-right: 5px solid #20B2AA; /* خط کناری آبی فیروزه‌ای */
padding: 20px;
margin: 25px 0;
border-radius: 5px;
}
.infobox h3 {
color: #003366;
margin-top: 0;
}
.callout {
background-color: #f0f8ff; /* پس‌زمینه آبی روشن برای باکس‌های ویژه */
border: 1px solid #cceeff;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
text-align: right;
font-style: italic;
color: #004488;
}
.section-separator {
border-top: 1px dashed #cccccc; /* خط جداکننده نقطه‌چین */
margin: 40px 0;
}
.highlight-text {
color: #20B2AA; /* رنگ متن برجسته */
font-weight: bold;
}

/* عناصر اینفوگرافیک‌مانند */
.flow-chart-step {
background-color: #f8fcfb; /* پس‌زمینه روشن برای مراحل */
border: 1px solid #20B2AA;
padding: 15px 20px;
margin-bottom: 15px;
border-radius: 8px;
display: flex; /* برای چیدمان افقی آیکون و متن */
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.flow-chart-step .icon {
font-size: 1.8em; /* اندازه آیکون */
margin-right: 15px; /* فاصله از متن */
color: #003366;
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}
.flow-chart-step .content {
flex-grow: 1;
}
.flow-chart-step h4 {
margin-top: 0;
margin-bottom: 5px;
color: #003366;
font-size: 1.1em;
font-weight: bold;
}
.arrow {
text-align: center;
font-size: 2em;
color: #20B2AA;
margin: 10px 0;
}

/* تنظیمات رسپانسیو */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px;
}
h1 {
font-size: 1.8em; /* کوچکتر شدن فونت عنوان در موبایل */
margin-bottom: 20px;
}
h2 {
font-size: 1.5em;
margin-top: 30px;
}
h3 {
font-size: 1.1em;
}
th, td {
padding: 10px;
display: block; /* نمایش بلوکی سلول‌های جدول در صفحات کوچک */
width: 100%;
box-sizing: border-box; /* برای در نظر گرفتن padding و border در عرض */
}
th {
text-align: center;
}
td:before { /* افزودن عنوان به سلول‌های جدول در حالت موبایل */
content: attr(data-label) “: “; /* استفاده از data-label برای نمایش عنوان ستون */
font-weight: bold;
display: block;
margin-bottom: 5px;
color: #003366;
}
.flow-chart-step {
flex-direction: column; /* چیدمان عمودی آیکون و متن در مراحل */
text-align: center;
}
.flow-chart-step .icon {
margin: 0 0 10px 0; /* تنظیم فاصله آیکون در حالت عمودی */
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
.container {
padding: 10px;
}
}

“`