/* Base Reset & Core Typography */
body {
margin: 0;
padding: 0;
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* فونت‌های پیش‌فرض برای نمایش فارسی */
line-height: 1.8;
color: #333333;
background-color: #F8F8F8; /* رنگ پس‌زمینه کلی برای آرامش بصری */
direction: rtl; /* جهت متن از راست به چپ */
text-align: justify; /* تراز کردن متن برای خوانایی بیشتر */
-webkit-font-smoothing: antialiased; /* نمایش روان‌تر فونت در وب‌کیت */
-moz-osx-font-smoothing: grayscale; /* نمایش روان‌تر فونت در فایرفاکس */
}

/* Main Container for Responsiveness and Centering */
.container {
max-width: 1000px; /* حداکثر عرض برای دسکتاپ و تلویزیون */
margin: 25px auto; /* فاصله از بالا و پایین و قرارگیری در مرکز */
padding: 25px 30px; /* فاصله داخلی برای محتوا */
background-color: #ffffff; /* پس‌زمینه سفید برای محتوای اصلی */
border-radius: 12px; /* گوشه‌های گرد برای زیبایی */
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); /* سایه ظریف برای عمق بخشیدن */
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
box-sizing: border-box; /* اطمینان از اینکه padding در محاسبه عرض لحاظ شود */
}

/* Heading Styles */
h1 {
font-size: 2.8em; /* اندازه فونت بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار پررنگ */
color: #2C3E50; /* رنگ سرمه‌ای تیره برای قدرت و جدیت */
text-align: center; /* تراز میانی */
margin-bottom: 35px; /* فاصله از پاراگراف بعدی */
line-height: 1.3; /* ارتفاع خط برای خوانایی بهتر */
border-bottom: 4px solid #3498DB; /* خط آبی زیر عنوان برای تأکید */
padding-bottom: 18px; /* فاصله بین متن و خط زیرین */
}

h2 {
font-size: 2.3em; /* اندازه فونت بزرگ‌تر برای عناوین اصلی بخش‌ها */
font-weight: 700; /* پررنگ */
color: #34495E; /* رنگ خاکستری-آبی تیره */
margin-top: 50px; /* فاصله از بخش قبلی */
margin-bottom: 25px; /* فاصله از محتوای بعدی */
padding-right: 18px; /* فاصله از مرز راست */
border-right: 7px solid #3498DB; /* خط آبی ضخیم در سمت راست برای برجسته‌سازی */
line-height: 1.4;
background-color: #F8FCFD; /* پس‌زمینه کمی روشن برای تمایز */
padding-top: 8px;
padding-bottom: 8px;
border-radius: 5px; /* گوشه‌های گرد برای نوار عنوان */
}

h3 {
font-size: 1.9em; /* اندازه فونت متوسط برای زیربخش‌ها */
font-weight: 600; /* نیمه‌پررنگ */
color: #4A6572; /* رنگ خاکستری-آبی متوسط */
margin-top: 40px;
margin-bottom: 20px;
padding-right: 12px;
border-right: 5px solid #AEC6CF; /* خط آبی روشن‌تر در سمت راست */
line-height: 1.5;
}

/* Paragraphs and Text */
p {
margin-bottom: 1.8em; /* فاصله بین پاراگراف‌ها */
font-size: 1.1em; /* اندازه فونت استاندارد برای متن */
line-height: 2.0; /* ارتفاع خط بیشتر برای خوانایی بهتر متن طولانی */
text-align: justify;
color: #333333;
}

/* Lists */
ul {
list-style-type: none; /* حذف نشانگر پیش‌فرض لیست */
padding-right: 25px; /* فاصله از راست برای محتویات لیست */
margin-bottom: 1.8em;
}

ul li {
position: relative; /* برای قرار دادن نشانگر سفارشی */
padding-right: 30px; /* فاصله برای نشانگر */
margin-bottom: 12px; /* فاصله بین آیتم‌های لیست */
font-size: 1.05em;
line-height: 1.9;
}

ul li:before {
content: “✔️”; /* نشانگر سفارشی با ایموجی تیک */
color: #28a745; /* رنگ سبز برای تیک */
font-weight: bold;
position: absolute;
right: 0;
top: 0;
font-size: 1.2em;
}

ol {
padding-right: 25px;
margin-bottom: 1.8em;
list-style-position: inside; /* اعداد لیست درون محتوا قرار گیرند */
list-style-type: decimal; /* لیست عددی */
}

ol li {
margin-bottom: 12px;
font-size: 1.05em;
line-height: 1.9;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse; /* حذف خطوط بین سلول‌ها */
margin: 35px 0;
font-size: 1em;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); /* سایه برای جدول */
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* اطمینان از نمایش صحیح گوشه‌های گرد */
}

table th, table td {
padding: 18px 22px; /* فاصله داخلی سلول‌ها */
border: 1px solid #E0E0E0; /* خطوط جداکننده سلول‌ها */
text-align: right; /* تراز راست */
}

table th {
background-color: #3498DB; /* پس‌زمینه آبی برای هدر جدول */
color: #ffffff; /* متن سفید */
font-weight: bold;
font-size: 1.15em;
}

table tr:nth-child(even) {
background-color: #F9F9F9; /* رنگ متناوب برای ردیف‌ها */
}

table tr:hover {
background-color: #F1F8FB; /* تغییر رنگ هنگام هاور بر روی ردیف */
}

/* Links */
a {
color: #3498DB; /* رنگ آبی برای لینک‌ها */
text-decoration: none; /* حذف خط زیر لینک */
transition: color 0.3s ease; /* انیمیشن نرم برای تغییر رنگ */
}

a:hover {
color: #2980B9; /* رنگ آبی تیره‌تر هنگام هاور */
text-decoration: underline; /* خط زیرین هنگام هاور */
}

/* Infographic Simulation Section */
.infographic-section {
margin: 45px 0;
padding: 35px;
background-color: #DDEBF1; /* پس‌زمینه آبی روشن برای بخش اینفوگرافیک */
border-radius: 12px;
text-align: center;
box-shadow: 0 3px 18px rgba(0, 0, 0, 0.08);
}

.infographic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* گرید واکنش‌گرا */
gap: 28px; /* فاصله بین آیتم‌های گرید */
margin-top: 30px;
}

.infographic-item {
background-color: #ffffff;
padding: 28px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن هاور */
border-top: 5px solid #AEC6CF; /* خط رنگی در بالا */
}

.infographic-item:hover {
transform: translateY(-10px); /* حرکت به سمت بالا هنگام هاور */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* سایه قوی‌تر هنگام هاور */
}

.infographic-icon {
font-size: 3.2em; /* اندازه بزرگ برای ایموجی */
margin-bottom: 18px;
color: #2980B9; /* رنگ آبی برای آیکون‌ها */
}

.infographic-title {
font-size: 1.5em;
font-weight: 700;
color: #34495E;
margin-bottom: 12px;
}

.infographic-description {
font-size: 1.05em;
color: #555555;
line-height: 1.8;
}

/* Table of Contents Styling */
.table-of-contents {
background-color: #F4F7F9; /* پس‌زمینه آبی روشن‌تر */
border-right: 6px solid #AEC6CF; /* خط آبی روشن در سمت راست */
padding: 22px 30px;
margin: 35px 0;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.table-of-contents h3 {
color: #34495E;
margin-top: 0;
margin-bottom: 18px;
border-right: none;
padding-right: 0;
font-size: 1.7em;
text-align: right;
}

.table-of-contents ul {
list-style-type: none;
padding-right: 0;
margin-bottom: 0;
}

.table-of-contents ul li {
margin-bottom: 10px;
font-size: 1.05em;
}

.table-of-contents ul li:before {
content: “▪”; /* نشانگر متفاوت برای فهرست مطالب */
color: #4A6572;
font-size: 1em;
}

.table-of-contents a {
color: #4A6572;
font-weight: 500;
line-height: 1.7;
}

.table-of-contents a:hover {
color: #3498DB;
}

/* Responsive Adjustments for Various Devices */
@media (max-width: 1200px) { /* برای لپ‌تاپ‌های بزرگ‌تر */
.container {
max-width: 900px;
padding: 20px 25px;
}
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
p, ul li, ol li, .infographic-description, table th, table td { font-size: 1em; }
.infographic-icon { font-size: 3em; }
.infographic-title { font-size: 1.4em; }
}

@media (max-width: 768px) { /* برای تبلت‌ها و لپ‌تاپ‌های کوچک‌تر */
.container {
margin: 15px auto;
padding: 20px;
border-radius: 10px;
}
h1 {
font-size: 2.2em;
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom-width: 3px;
}
h2 {
font-size: 1.9em;
margin-top: 40px;
margin-bottom: 20px;
padding-right: 15px;
border-right-width: 5px;
}
h3 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 18px;
padding-right: 10px;
border-right-width: 4px;
}
p, ul li, ol li, .infographic-description {
font-size: 0.95em;
line-height: 1.8;
}
ul li:before { font-size: 1.1em; }
.infographic-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* ستون‌های کمتر */
gap: 20px;
}
.infographic-icon { font-size: 2.8em; }
.infographic-title { font-size: 1.3em; }
table {
border-radius: 8px;
margin: 30px 0;
}
table th, table td {
padding: 15px 18px;
font-size: 0.95em;
}
.table-of-contents {
padding: 18px 22px;
margin: 25px 0;
}
.table-of-contents h3 { font-size: 1.5em; }
.table-of-contents ul li { font-size: 0.95em; }
}

@media (max-width: 480px) { /* برای موبایل‌ها */
.container {
margin: 10px auto;
padding: 15px;
border-radius: 8px;
}
h1 {
font-size: 1.9em;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom-width: 2px;
}
h2 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
border-right-width: 4px;
}
h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 12px;
padding-right: 8px;
border-right-width: 3px;
}
p, ul li, ol li, .infographic-description, table th, table td {
font-size: 0.9em;
line-height: 1.7;
}
ul li:before { font-size: 1em; }
.infographic-grid {
grid-template-columns: 1fr; /* تنها یک ستون برای نمایش بهتر در موبایل */
gap: 18px;
}
.infographic-item { padding: 20px; }
.infographic-icon { font-size: 2.5em; margin-bottom: 12px; }
.infographic-title { font-size: 1.2em; margin-bottom: 8px; }
table {
border-radius: 5px;
margin: 25px 0;
}
table th, table td {
padding: 12px 15px;
font-size: 0.9em;
}
.table-of-contents {
padding: 15px 18px;
margin: 20px 0;
border-right-width: 4px;
}
.table-of-contents h3 { font-size: 1.3em; margin-bottom: 12px; }
.table-of-contents ul li { font-size: 0.9em; margin-bottom: 8px; }
}

@media (min-width: 1400px) { /* برای تلویزیون‌ها و نمایشگرهای بسیار بزرگ */
.container {
max-width: 1200px;
padding: 40px 50px;
}
h1 { font-size: 3.5em; margin-bottom: 45px; padding-bottom: 20px; border-bottom-width: 5px;}
h2 { font-size: 2.8em; margin-top: 60px; margin-bottom: 30px; padding-right: 20px; border-right-width: 8px; }
h3 { font-size: 2.2em; margin-top: 45px; margin-bottom: 25px; padding-right: 15px; border-right-width: 6px; }
p, ul li, ol li, .infographic-description, table th, table td { font-size: 1.2em; line-height: 2.1; }
.infographic-icon { font-size: 3.8em; margin-bottom: 20px;}
.infographic-title { font-size: 1.6em; }
.infographic-description { font-size: 1.1em; }
.table-of-contents h3 { font-size: 1.9em; }
.table-of-contents ul li { font-size: 1.1em; }
}

“`