“`html

/* تنظیمات پایه: فونت، جهت متن، و رنگ‌ها */
body {
font-family: ‘B Nazanin’, ‘Tahoma’, Arial, sans-serif;
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #f4f7f6; /* پس‌زمینه کلی ملایم */
direction: rtl; /* جهت متن راست به چپ برای کل صفحه */
text-align: right; /* تراز متن راست چین به صورت پیش‌فرض */
}

/* کانتینر اصلی مقاله برای مرکز قرار گرفتن و محدود کردن عرض */
.article-container {
max-width: 900px;
margin: 20px auto;
padding: 25px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
overflow-x: hidden; /* جلوگیری از اسکرول افقی برای عناصر ریسپانسیو */
direction: rtl;
}

/* استایل‌دهی به هدینگ‌ها */
h1 {
font-size: 2.8em; /* سایز بزرگتر برای عنوان اصلی */
font-weight: bold;
color: #0056b3; /* آبی حرفه‌ای برای عنوان */
text-align: center;
margin-bottom: 35px;
line-height: 1.3;
padding-bottom: 18px;
border-bottom: 3px solid #e0e0e0;
}

h2 {
font-size: 2em; /* هدینگ‌های بخش اصلی */
font-weight: bold;
color: #28a745; /* سبز برای بخش‌های اصلی */
margin-top: 45px;
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom: 2px solid #e9ecef;
position: relative;
padding-right: 20px; /* فضای بیشتر برای آیکون */
}
h2::before {
content: “💡”; /* آیکون قبل از هدینگ */
position: absolute;
right: 0;
top: 2px;
font-size: 0.8em;
color: #28a745;
line-height: 1; /* اطمینان از هم‌ترازی آیکون */
}

h3 {
font-size: 1.5em; /* هدینگ‌های زیربخش */
font-weight: bold;
color: #007bff; /* آبی دیگر برای زیربخش‌ها */
margin-top: 35px;
margin-bottom: 18px;
padding-right: 12px;
border-right: 4px solid #007bff;
}

/* استایل‌دهی به پاراگراف‌ها */
p {
margin-bottom: 1.2em;
text-align: justify; /* تراز متن از دو طرف */
line-height: 2; /* فاصله خطوط برای خوانایی بهتر */
font-size: 1.08em;
color: #444;
}

/* استایل‌دهی به لیست‌ها */
ul {
list-style-type: disc; /* نوع گلوله لیست */
margin-right: 28px; /* فاصله از راست برای نمایش گلوله */
margin-bottom: 1.5em;
padding: 0;
}

li {
margin-bottom: 0.8em;
line-height: 1.8;
padding-right: 8px;
color: #444;
}

/* استایل‌دهی به جدول آموزشی */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 35px 0;
font-size: 1.05em;
direction: rtl; /* جهت راست به چپ برای محتوای جدول */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
border-radius: 10px;
overflow: hidden; /* برای نمایش border-radius روی جدول */
}

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

th {
background-color: #007bff; /* رنگ پس‌زمینه سربرگ */
color: white;
font-weight: bold;
text-align: center;
vertical-align: middle;
}

tr:nth-child(even) {
background-color: #f8f9fa; /* رنگ‌بندی سطرهای زوج */
}

tr:hover {
background-color: #e2f0ff; /* افکت هاور روی سطرها */
}

/* استایل‌دهی جایگزین اینفوگرافیک (کارت‌های اطلاعاتی) */
.infographic-section {
display: flex;
flex-wrap: wrap; /* امکان شکست خط کارت‌ها در صفحات کوچک */
gap: 25px; /* فاصله بین کارت‌ها */
margin-top: 40px;
margin-bottom: 40px;
justify-content: center; /* مرکز قرار گرفتن کارت‌ها */
}

.info-card {
background-color: #eaf7ed; /* پس‌زمینه سبز روشن */
border: 1px solid #d4edda;
border-radius: 12px;
padding: 25px;
flex: 1; /* امکان رشد کارت‌ها برای پر کردن فضا */
min-width: 300px; /* حداقل عرض قبل از شکست خط */
max-width: 48%; /* برای دو ستون روی صفحه بزرگ */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
text-align: center;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
direction: rtl;
display: flex;
flex-direction: column;
align-items: center;
}

.info-card:hover {
transform: translateY(-7px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.info-card h4 {
color: #28a745;
font-size: 1.4em;
margin-top: 0;
margin-bottom: 12px;
font-weight: bold;
}

.info-card p {
font-size: 1em;
line-height: 1.8;
color: #555;
text-align: justify;
}

.info-card .icon {
font-size: 2.5em;
color: #28a745;
margin-bottom: 15px;
line-height: 1;
}

/* بخش پرسش و پاسخ متداول (FAQ) */
.faq-section {
margin-top: 40px;
}
.faq-item {
margin-bottom: 25px;
border-bottom: 1px dashed #e0e0e0;
padding-bottom: 20px;
}
.faq-question {
font-weight: bold;
color: #0056b3;
font-size: 1.25em;
margin-bottom: 10px;
position: relative;
padding-right: 25px;
}
.faq-question::before {
content: “❓”;
position: absolute;
right: 0;
top: 0;
font-size: 0.8em;
color: #0056b3;
}
.faq-answer {
color: #555;
text-align: justify;
line-height: 1.9;
font-size: 1.05em;
}

/* ریسپانسیو: تنظیمات برای نمایش در موبایل، تبلت و … */
@media (max-width: 768px) {
h1 {
font-size: 2.2em;
margin-bottom: 25px;
padding-bottom: 12px;
}
h2 {
font-size: 1.7em;
margin-top: 35px;
margin-bottom: 20px;
}
h2::before {
top: 0px; /* تنظیم مجدد برای صفحه کوچکتر */
}
h3 {
font-size: 1.3em;
margin-top: 30px;
margin-bottom: 15px;
}
.article-container {
margin: 10px auto;
padding: 18px;
border-radius: 10px;
}
p, ul, li, .faq-answer {
font-size: 1em;
line-height: 1.8;
}
/* ریسپانسیو کردن جدول برای نمایش بهتر در موبایل */
table {
display: block;
overflow-x: auto; /* امکان اسکرول افقی برای جدول */
white-space: nowrap; /* جلوگیری از شکستن محتوای سلول‌ها */
-webkit-overflow-scrolling: touch; /* اسکرول نرم‌تر در iOS */
border-radius: 8px; /* حفظ گردی گوشه‌ها */
}
th, td {
min-width: 150px; /* حداقل عرض برای هر ستون */
box-sizing: border-box; /* شامل padding و border در عرض */
white-space: normal; /* بازگرداندن شکست خط برای محتوای سلول */
}
/* کارت‌های اینفوگرافیک به صورت ستونی در موبایل */
.infographic-section {
flex-direction: column; /* چیدمان ستونی کارت‌ها */
gap: 20px;
}
.info-card {
min-width: unset; /* حذف حداقل عرض */
max-width: 100%; /* گرفتن کل عرض */
padding: 20px;
}
.info-card h4 {
font-size: 1.3em;
}
.info-card .icon {
font-size: 2em;
}
.faq-question {
font-size: 1.1em;
padding-right: 20px;
}
}

/* تنظیمات برای صفحه‌های بسیار کوچک (موبایل‌های قدیمی‌تر) */
@media (max-width: 480px) {
h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
.article-container { padding: 12px; }
p, ul, li, .faq-answer { font-size: 0.95em; line-height: 1.7; }
th, td { padding: 10px 12px; min-width: 120px; }
}

“`