/* این استایل‌ها برای نمایش بهتر در محیط کلی و ویرایشگر بلوک طراحی شده‌اند.
معمولاً ویرایشگر بلوک استایل‌های داخلی خود را دارد، اما این‌ها به عنوان یک پایه زیبا عمل می‌کنند
و تضمین می‌کنند که طراحی منحصر به فرد مورد نظر، حتی در صورت کپی مستقیم به بخش HTML ویرایشگر، حفظ شود. */
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت‌های جایگزین برای پشتیبانی بهتر و خوانایی بالا */
line-height: 1.7;
color: #333;
background-color: #f9fafa; /* پس‌زمینه ملایم */
margin: 0;
padding: 0;
direction: rtl; /* برای پشتیبانی کامل از راست به چپ */
text-align: justify; /* تراز متن برای ظاهری حرفه‌ای */
}
.container {
max-width: 900px; /* عرض بهینه برای مطالعه روی دسکتاپ و تبلت */
margin: 30px auto; /* قرارگیری در مرکز صفحه */
padding: 25px 30px;
background-color: #fff;
border-radius: 12px; /* گوشه‌های گرد برای ظاهری مدرن */
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08); /* سایه ظریف برای عمق */
}
h1, h2, h3 {
color: #1a4d7d; /* رنگ آبی تیره برای عناوین */
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #e0e0e0; /* خط زیرین ملایم برای جداسازی */
}
h1 {
font-size: 2.6em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 700; /* ضخامت بالا */
text-align: center;
color: #0d365b; /* آبی تیره تر برای برجسته‌سازی بیشتر */
border-bottom: 3px solid #0d365b; /* خط زیرین ضخیم‌تر و همرنگ */
padding-bottom: 20px;
margin-top: 0;
margin-bottom: 40px;
line-height: 1.3;
}
h2 {
font-size: 2.1em;
font-weight: 600;
color: #1a4d7d;
border-bottom: 2px solid #b0c4de; /* آبی روشن تر برای خط زیرین */
padding-bottom: 12px;
margin-top: 50px; /* فاصله بیشتر از بخش قبلی */
line-height: 1.4;
}
h3 {
font-size: 1.6em;
font-weight: 500;
color: #2e6091; /* آبی متوسط */
margin-top: 35px;
border-bottom: none; /* بدون خط زیرین برای سادگی */
padding-bottom: 0;
line-height: 1.5;
}
p {
margin-bottom: 1.2em;
line-height: 1.8; /* فاصله خطوط بیشتر برای خوانایی */
}
ul, ol {
margin-bottom: 1.2em;
padding-right: 25px; /* تورفتگی برای لیست‌ها */
line-height: 1.8;
}
li {
margin-bottom: 0.7em;
}
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.98em;
text-align: right;
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای اعمال border-radius به محتوا */
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); /* سایه زیبا */
}
table th, table td {
padding: 14px 20px;
border: 1px solid #e0e0e0; /* خطوط جدول ملایم */
}
table th {
background-color: #1a4d7d; /* پس‌زمینه آبی تیره برای سرستون‌ها */
color: #ffffff;
font-weight: 600;
text-align: center; /* متن سرستون‌ها در مرکز */
}
table tr:nth-child(even) {
background-color: #f6f9fc; /* رنگ متناوب برای ردیف‌ها */
}
table tr:hover {
background-color: #eef2f6; /* هایلایت شدن ردیف هنگام هاور */
}

/* طراحی اینفوگرافیک زیبا */
.infographic-box {
background-color: #e6f7ff; /* رنگ آبی بسیار روشن و آرامش‌بخش */
border-right: 8px solid #0056b3; /* نوار آبی پررنگ در سمت راست برای برجسته‌سازی */
padding: 30px;
margin: 45px 0; /* فاصله کافی از متن اطراف */
border-radius: 15px; /* گوشه‌های گرد برای اینفوگرافیک */
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.09); /* سایه عمیق‌تر برای تاکید */
line-height: 1.9;
position: relative;
overflow: hidden;
font-size: 1.08em;
color: #2c3e50; /* رنگ متن داخلی */
}
.infographic-box::before {
content: ‘💡’; /* آیکون زیبا و مرتبط با ایده/نکات */
font-size: 3.2em; /* سایز بزرگ آیکون */
position: absolute;
top: 20px;
left: 20px; /* قرارگیری آیکون در گوشه */
opacity: 0.15; /* شفافیت برای ظاهری ملایم */
z-index: 1; /* اطمینان از قرارگیری در پس‌زمینه */
}
.infographic-box h3 {
color: #0056b3; /* رنگ آبی پررنگ برای عنوان اینفوگرافیک */
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
position: relative; /* برای اینکه h3 روی آیکون باشد */
z-index: 2;
}
.infographic-box ul {
list-style: none; /* حذف بولت‌های پیش‌فرض */
padding-right: 0;
margin-top: 20px;
}
.infographic-box ul li {
position: relative;
padding-right: 40px; /* فضای کافی برای آیکون تیک */
margin-bottom: 15px;
font-weight: 500;
color: #34495e;
}
.infographic-box ul li::before {
content: ‘✔️’; /* آیکون تیک زیبا */
position: absolute;
right: 0;
color: #28a745; /* رنگ سبز برای تاکید بر تایید */
font-size: 1.4em;
top: 0;
line-height: 1.8;
}
.infographic-box p {
text-align: center;
font-style: italic;
color: #6c757d;
margin-top: 25px;
}

/* تنظیمات رسپانسیو برای موبایل، تبلت، لپ‌تاپ و تلویزیون */
@media (max-width: 992px) { /* برای تبلت‌ها و لپ‌تاپ‌های کوچک */
.container {
margin: 20px auto;
padding: 20px;
max-width: 95%;
}
h1 { font-size: 2.2em; margin-bottom: 30px; }
h2 { font-size: 1.8em; margin-top: 40px; }
h3 { font-size: 1.4em; margin-top: 25px; }
.infographic-box { padding: 25px; margin: 35px 0; font-size: 1em; }
.infographic-box::before { font-size: 2.8em; top: 15px; left: 15px; }
table th, table td { padding: 12px 15px; font-size: 0.9em; }
}

@media (max-width: 768px) { /* برای تبلت‌ها و موبایل‌های بزرگ */
.container {
margin: 15px;
padding: 18px;
border-radius: 10px;
box-shadow: 0 2px 15px rgba(0,0,0,0.07);
}
h1 { font-size: 1.9em; margin-bottom: 25px; padding-bottom: 15px; }
h2 { font-size: 1.6em; margin-top: 30px; padding-bottom: 8px; }
h3 { font-size: 1.3em; margin-top: 20px; }
p, li { font-size: 0.95em; line-height: 1.7; }
.infographic-box { padding: 20px; margin: 30px 0; border-right-width: 6px; font-size: 0.95em; border-radius: 12px; }
.infographic-box::before { font-size: 2.5em; top: 10px; left: 10px; }
.infographic-box ul li { padding-right: 35px; margin-bottom: 10px; }
.infographic-box ul li::before { font-size: 1.2em; }
table { border-radius: 8px; margin: 25px 0; }
table th, table td { padding: 10px 12px; font-size: 0.85em; }
}

@media (max-width: 480px) { /* برای موبایل‌های کوچک */
.container {
margin: 10px;
padding: 15px;
border-radius: 8px;
}
h1 { font-size: 1.6em; margin-bottom: 20px; padding-bottom: 10px; }
h2 { font-size: 1.4em; margin-top: 25px; padding-bottom: 6px; }
h3 { font-size: 1.15em; margin-top: 18px; }
p, li { font-size: 0.9em; line-height: 1.6; }
ul, ol { padding-right: 18px; }
.infographic-box { padding: 18px; margin: 25px 0; border-right-width: 5px; font-size: 0.9em; border-radius: 10px; }
.infographic-box::before { font-size: 2em; top: 8px; left: 8px; }
.infographic-box ul li { padding-right: 30px; margin-bottom: 8px; }
.infographic-box ul li::before { font-size: 1.1em; top: 0; line-height: 1.6; }
table { margin: 20px 0; border-radius: 6px; }
table th, table td { padding: 8px 10px; font-size: 0.8em; }
}

“`