/* تنظیمات پایه برای رندر بهتر در ویرایشگرها و اطمینان از رسپانسیو بودن */
html, body {
margin: 0;
padding: 0;
box-sizing: border-box; /* برای محاسبه درست ابعاد */
}
.container {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* فونت استاندارد و خوانا */
line-height: 1.7; /* فاصله خطوط برای خوانایی بهتر */
color: #333; /* رنگ متن اصلی */
max-width: 1000px; /* حداکثر عرض محتوا */
margin: 20px auto; /* فاصله از بالا و پایین و مرکز صفحه */
padding: 20px;
background-color: #fff; /* پس‌زمینه سفید برای محتوا */
border-radius: 10px; /* گوشه‌های گرد */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* سایه ملایم */
direction: rtl; /* جهت متن از راست به چپ */
text-align: right; /* تراز متن به راست */
}
h1, h2, h3 {
color: #0A3D62; /* رنگ آبی تیره برای عناوین */
font-weight: bold; /* عناوین پررنگ */
margin-top: 1.5em;
margin-bottom: 0.8em;
padding-bottom: 5px;
border-bottom: 2px solid #D1E7F0; /* خط زیر عناوین */
}
h1 {
font-size: 38px; /* سایز بزرگ برای عنوان اصلی */
text-align: center;
border-bottom: 3px solid #0A3D62;
padding-bottom: 15px;
margin-bottom: 25px;
color: #0A3D62;
}
h2 {
font-size: 30px; /* سایز H2 */
color: #1B6592; /* آبی کمی روشن‌تر */
border-bottom: 2px solid #B0D7EE;
}
h3 {
font-size: 24px; /* سایز H3 */
color: #2D8ABF; /* آبی روشن‌تر */
border-bottom: 1px dashed #D1E7F0;
}
p {
margin-bottom: 1em;
text-align: justify; /* تراز پاراگراف‌ها به صورت Justify */
}
ul, ol {
margin-right: 20px; /* فاصله از راست برای لیست‌ها */
margin-bottom: 1em;
padding-right: 0; /* حذف padding پیش‌فرض مرورگرها */
list-style-position: inside; /* موقعیت نشانگر لیست */
}
li {
margin-bottom: 0.5em;
}
a {
color: #007bff; /* رنگ لینک آبی */
text-decoration: none; /* حذف زیرخط لینک */
}
a:hover {
text-decoration: underline; /* نمایش زیرخط هنگام هاور */
}
table {
width: 100%;
border-collapse: collapse; /* ادغام borderها */
margin: 25px 0;
font-size: 16px;
text-align: right; /* تراز متن جدول به راست */
}
table th, table td {
border: 1px solid #ddd; /* border سلول‌ها */
padding: 12px 15px;
}
table th {
background-color: #E6F3F9; /* پس‌زمینه آبی روشن برای هدر جدول */
color: #0A3D62;
font-weight: bold;
}
table tr:nth-child(even) {
background-color: #f9f9f9; /* رنگ متناوب برای ردیف‌ها */
}
.highlight-box {
background-color: #E8F5E9; /* سبز روشن برای باکس‌های تأکید */
border-right: 5px solid #4CAF50; /* border سمت راست سبز پررنگ */
padding: 15px 20px;
margin: 25px 0;
border-radius: 8px;
font-style: italic;
color: #388E3C;
text-align: right;
}
.infographic-block {
display: flex; /* استفاده از Flexbox برای چیدمان */
flex-wrap: wrap; /* امکان شکستن به خطوط جدید */
justify-content: center; /* تراز مرکزی آیتم‌ها */
gap: 20px; /* فاصله بین آیتم‌ها */
margin: 30px 0;
text-align: center;
}
.infographic-item {
flex: 1 1 280px; /* انعطاف‌پذیری آیتم‌ها (رشد، کوچک شدن، حداقل عرض 280px) */
background-color: #F0F8FF; /* آبی روشن (Alice Blue) */
border: 1px solid #D1E7F0;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: transform 0.3s ease; /* انیمیشن نرم برای هاور */
}
.infographic-item:hover {
transform: translateY(-5px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.infographic-icon {
font-size: 45px;
color: #0A3D62;
margin-bottom: 15px;
display: block;
}
.infographic-title {
font-size: 22px;
font-weight: bold;
color: #1B6592;
margin-bottom: 10px;
}
.infographic-description {
font-size: 16px;
color: #555;
}
.toc { /* Table of Contents */
background-color: #fcfafa;
border: 1px solid #eee;
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
text-align: right;
}
.toc h3 {
color: #0A3D62;
margin-top: 0;
border-bottom: 1px solid #D1E7F0;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 24px;
}
.toc ul {
list-style: none; /* حذف نشانگر لیست */
padding: 0;
margin: 0;
}
.toc li {
margin-bottom: 8px;
}
.toc li a {
color: #2D8ABF;
font-weight: 500;
display: block;
padding: 5px 0;
transition: color 0.2s ease;
}
.toc li a:hover {
color: #0A3D62;
text-decoration: none;
}

/* تنظیمات رسپانسیو برای موبایل، تبلت و تلویزیون */
@media (max-width: 768px) {
.container {
margin: 10px auto;
padding: 15px;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 20px;
}
.infographic-item {
flex: 1 1 100%; /* آیتم‌ها روی صفحات کوچک‌تر به صورت عمودی چیده شوند */
max-width: 90%;
margin: 0 auto;
}
}
@media (max-width: 480px) {
h1 {
font-size: 28px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
table {
font-size: 14px;
}
table th, table td {
padding: 8px 10px;
}
.infographic-item {
padding: 20px;
}
}
/* برای نمایش در تلویزیون یا صفحه‌های بزرگتر */
@media (min-width: 1200px) {
.container {
max-width: 1200px; /* افزایش عرض برای صفحات بزرگتر */
}
}