“`html

@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap’);

body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f8f8f8;
margin: 0;
padding: 0;
direction: rtl; /* برای پشتیبانی از زبان فارسی راست به چپ */
overflow-x: hidden; /* جلوگیری از اسکرول افقی در دستگاه‌های کوچک */
}

.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
box-sizing: border-box; /* شامل پدینگ در محاسبه عرض */
}

/* تنظیمات واکنش‌گرا برای صفحه نمایش‌های کوچکتر */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px;
border-radius: 8px;
}
body {
line-height: 1.6;
}
/* اندازه فونت هدینگ‌ها برای موبایل و تبلت */
h1 { font-size: 1.8em !important; }
h2 { font-size: 1.5em !important; }
h3 { font-size: 1.2em !important; }
}

@media (max-width: 480px) {
.container {
margin: 5px;
padding: 10px;
border-radius: 5px;
}
h1 { font-size: 1.6em !important; }
h2 { font-size: 1.3em !important; }
h3 { font-size: 1.1em !important; }
}

/* استایل‌های عمومی هدینگ‌ها */
h1, h2, h3 {
color: #1A2A4B; /* آبی تیره برای هدینگ‌ها */
margin-bottom: 1rem;
margin-top: 2.5rem;
text-align: right;
}

p {
margin-bottom: 1em;
text-align: justify;
}

ul, ol {
margin-bottom: 1em;
padding-right: 20px;
text-align: right;
list-style-position: inside; /* لیست‌ها از سمت راست شروع شوند */
}

li {
margin-bottom: 0.5em;
}

/* استایل‌دهی جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.95em;
text-align: right;
direction: rtl;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden; /* اطمینان از اعمال border-radius به همه گوشه‌ها */
}
table thead tr {
background-color: #0056b3; /* آبی متوسط برای سربرگ جدول */
color: #ffffff;
text-align: right;
}
table th, table td {
padding: 12px 15px;
border: 1px solid #ddd;
}
table tbody tr {
border-bottom: 1px solid #eee;
}
table tbody tr:nth-of-type(even) {
background-color: #f3f3f3; /* خاکستری روشن برای ردیف‌های زوج */
}
table tbody tr:last-of-type {
border-bottom: 2px solid #0056b3; /* آبی متوسط برای حاشیه ردیف آخر */
}
/* جدول واکنش‌گرا */
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto; /* فعال کردن اسکرول افقی برای جداول */
white-space: nowrap; /* جلوگیری از شکستن محتوا */
}
table thead {
display: none; /* پنهان کردن سربرگ در صفحه نمایش‌های کوچک */
}
table tbody, table tr, table td {
display: block;
width: 100%;
}
table tr {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
table td {
text-align: right;
padding-left: 50%; /* فضا برای برچسب عنصر شبه */
position: relative;
white-space: normal; /* محتوا بتواند بشکند */
}
/* اضافه کردن برچسب به سلول‌ها برای زمینه بهتر در صفحه نمایش‌های کوچک */
table td:before {
content: attr(data-label);
position: absolute;
right: 15px;
width: 45%;
padding-left: 10px;
font-weight: bold;
color: #0056b3;
}
}

/* استایل‌دهی فهرست مطالب */
.toc {
border: 1px solid #e0e0e0;
padding: 15px 20px;
margin: 30px 0;
background-color: #fbfbfb;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.toc h3 {
margin-top: 0.5rem;
margin-bottom: 1rem;
color: #0056b3;
font-size: 1.3em;
font-weight: 600;
}
.toc ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc ul li {
margin-bottom: 8px;
}
.toc ul li a {
color: #444;
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
}
.toc ul li a:hover {
color: #0056b3;
text-decoration: underline;
}

/* استایل‌دهی شبیه‌سازی اینفوگرافیک */
.infographic-section {
background-color: #eef7ff; /* روشن‌ترین آبی */
border-radius: 10px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
text-align: center;
}
.infographic-section h2 {
color: #0056b3;
margin-top: 0;
margin-bottom: 25px;
font-size: 2em !important; /* اعمال سایز فونت به صورت inline */
}
.challenge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 30px;
}
.challenge-item {
background-color: #ffffff;
border: 1px solid #d0e0f0;
border-radius: 12px;
padding: 20px;
text-align: right;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.challenge-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.challenge-item .icon {
font-size: 2.2em;
color: #0056b3;
margin-bottom: 10px;
display: block;
text-align: center;
}
.challenge-item h4 {
font-size: 1.2em;
color: #1A2A4B;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.challenge-item p {
font-size: 0.95em;
color: #555;
text-align: justify;
}

/* استایل‌دهی بخش سوالات متداول (FAQ) */
.faq-section {
margin-top: 40px;
border-top: 2px dashed #e0e0e0;
padding-top: 30px;
}
.faq-item {
background-color: #fefefe;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
overflow: hidden;
}
.faq-question {
padding: 15px 20px;
background-color: #f5f5f5;
color: #1A2A4B;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color: #e0e0e0;
}
.faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, padding 0.4s ease-out;
color: #444;
background-color: #fff;
text-align: justify;
}
.faq-answer p {
padding: 15px 0; /* فقط زمانی که پاسخ قابل مشاهده است پدینگ اعمال شود */
margin: 0;
}
.faq-item.active .faq-answer {
max-height: 200px; /* اندازه قابل تنظیم */
padding-bottom: 15px;
}
.faq-question .arrow {
transform: rotate(90deg); /* فلش به سمت راست */
transition: transform 0.3s ease;
font-size: 1.2em;
}
.faq-item.active .faq-question .arrow {
transform: rotate(-90deg); /* فلش به سمت پایین */
}

/* برجسته‌سازی و تاکید عمومی */
strong {
font-weight: 600;
color: #1A2A4B;
}

/* خطوط جداکننده */
hr {
border: 0;
border-top: 1px solid #eee;
margin: 40px 0;
}

document.querySelectorAll(‘.faq-question’).forEach(item => {
item.addEventListener(‘click’, event => {
const parent = item.closest(‘.faq-item’);
parent.classList.toggle(‘active’);
const answer = parent.querySelector(‘.faq-answer’);
if (parent.classList.contains(‘active’)) {
answer.style.maxHeight = answer.scrollHeight + “px”;
} else {
answer.style.maxHeight = null;
}
});
});

“`