“`html

/*
این کدهای CSS به منظور اطمینان از نمایش صحیح و زیبا در ویرایشگرهای بلوک و کلاسیک وردپرس،
و همچنین ریسپانسیو بودن برای موبایل، تبلت، لپ‌تاپ و تلویزیون تعبیه شده‌اند.
لطفاً توجه داشته باشید که این استایل‌ها به صورت عمومی برای محتوای درون تگ div با کلاس container اعمال می‌شوند.
در صورت کپی به ویرایشگرهای بلوک، ممکن است نیاز باشد این استایل‌ها به صورت دستی
در قسمت CSS سفارشی (Custom CSS) قالب یا برگه اضافه شوند تا کاملاً مطابق تصویر عمل کنند.
با این حال، ساختار HTML به گونه‌ای طراحی شده که حتی بدون این استایل‌ها نیز خوانا و منظم باشد.
*/
body {
font-family: ‘Vazirmatn’, sans-serif; /* فونت مناسب فارسی، می‌توانید فونت دلخواه را جایگزین کنید */
margin: 0;
padding: 0;
background-color: #F8F9FA; /* رنگ پس‌زمینه کلی صفحه برای یک ظاهر تمیز */
direction: rtl; /* جهت متن از راست به چپ برای زبان فارسی */
text-align: right; /* تراز بندی متن به راست */
}

.container {
max-width: 1200px; /* حداکثر عرض محتوا برای جلوگیری از کشیدگی بیش از حد در نمایشگرهای بزرگ */
margin: 0 auto; /* قرارگیری محتوا در مرکز صفحه */
padding: 25px 35px; /* فاصله داخلی برای زیبایی و خوانایی */
background-color: #FFFFFF; /* رنگ پس‌زمینه مقاله */
border-radius: 15px; /* گوشه‌های گرد برای ظاهر مدرن */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* سایه ظریف برای عمق بخشیدن */
overflow: hidden; /* جلوگیری از سرریز شدن محتوا */
}

/* استایل‌های هدینگ‌ها برای نمایش با سایز و ضخامت مشخص */
h1 {
font-size: 2.8em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار پررنگ */
color: #2C3E50; /* رنگ تیره و جذاب */
text-align: center; /* عنوان در مرکز */
margin-bottom: 40px; /* فاصله از پاراگراف بعدی */
line-height: 1.3; /* ارتفاع خط برای خوانایی بهتر */
padding-top: 20px; /* فاصله از بالای container */
}

h2 {
font-size: 2.2em; /* سایز مناسب برای عناوین اصلی بخش‌ها */
font-weight: 700; /* پررنگ */
color: #34495E; /* رنگ آبی تیره */
border-bottom: 3px solid #ECF0F1; /* خط زیرین برای تفکیک */
padding-bottom: 15px; /* فاصله متن از خط زیرین */
margin-top: 50px; /* فاصله از بخش قبلی */
margin-bottom: 25px; /* فاصله از پاراگراف بعدی */
line-height: 1.4;
}

h3 {
font-size: 1.7em; /* سایز برای عناوین فرعی */
font-weight: 600; /* متوسط پررنگ */
color: #5D6D7E; /* رنگ خاکستری مایل به آبی */
margin-top: 35px;
margin-bottom: 20px;
line-height: 1.5;
}

p {
font-size: 1.15em; /* سایز متن پاراگراف */
line-height: 2; /* ارتفاع خط زیاد برای خوانایی بهتر در متون فارسی */
color: #333; /* رنگ متن */
margin-bottom: 18px;
text-align: justify; /* تراز بندی دو طرفه برای ظاهر حرفه‌ای */
}

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

li {
font-size: 1.1em;
line-height: 1.8;
color: #444;
margin-bottom: 10px;
}

/* استایل‌های جدول */
table {
width: 100%; /* عرض کامل جدول */
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 30px 0; /* فاصله از بالا و پایین */
font-size: 1.05em;
text-align: right;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه برای جدول */
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* ضروری برای اعمال border-radius به جدول */
}

th, td {
padding: 15px 20px; /* فاصله داخلی خانه‌ها */
border: 1px solid #EAECEE; /* خطوط جداکننده خانه‌ها */
}

th {
background-color: #3498DB; /* رنگ پس‌زمینه سربرگ جدول */
color: white; /* رنگ متن سربرگ */
font-weight: 600;
text-align: center; /* متن سربرگ در مرکز */
}

td {
background-color: #fcfcfc; /* پس‌زمینه سفید مایل به خاکستری برای خانه‌ها */
color: #333;
}

tr:nth-child(even) td {
background-color: #F7F9FB; /* رنگ متفاوت برای سطرهای زوج برای خوانایی بهتر */
}

/* استایل‌های اینفوگرافیک (جایگزین بصری زیبا) */
.infographic-box {
background-color: #EBF5FB; /* پس‌زمینه آبی روشن برای باکس اینفوگرافیک */
border: 2px solid #85C1E9; /* حاشیه آبی */
border-radius: 20px; /* گوشه‌های گردتر */
padding: 35px;
margin: 45px 0;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.infographic-title {
font-size: 2em;
font-weight: 700;
color: #2874A6;
margin-bottom: 30px;
position: relative;
padding-bottom: 15px;
}
.infographic-title::after {
content: ”;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 80px;
height: 4px;
background-color: #2874A6; /* خط زیر عنوان اینفوگرافیک */
border-radius: 2px;
}

.infographic-grid {
display: flex; /* نمایش به صورت فلکس برای چیدمان شبکه ای */
flex-wrap: wrap; /* اجازه می‌دهد آیتم‌ها در صفحات کوچک به خط بعدی بروند */
justify-content: center; /* تراز بندی آیتم‌ها در مرکز */
gap: 30px; /* فاصله بین آیتم‌های شبکه */
margin-top: 35px;
}

.infographic-item {
flex: 1 1 320px; /* flex-grow, flex-shrink, flex-basis: آیتم‌ها رشد می‌کنند، کوچک می‌شوند و پایه عرض ۳۲۰px دارند */
background-color: #FFFFFF;
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
text-align: right;
position: relative;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* انیمیشن هنگام هاور */
min-width: 280px; /* حداقل عرض برای جلوگیری از فشرده شدن زیاد */
}

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

.infographic-icon {
font-size: 3em; /* سایز بزرگ برای آیکون‌های ایموجی */
color: #2ECC71; /* رنگ سبز برای آیکون‌ها (نماد موفقیت) */
margin-bottom: 20px;
text-align: center;
display: block; /* برای اطمینان از قرارگیری آیکون در مرکز */
}

.infographic-item h4 {
font-size: 1.5em;
color: #34495E;
font-weight: 600;
margin-bottom: 12px;
text-align: center;
}

.infographic-item p {
font-size: 1.05em;
line-height: 1.9;
color: #555;
text-align: justify;
}

/* فهرست مطالب (Table of Contents) */
.table-of-contents {
background-color: #FDFEFE; /* پس‌زمینه سفید مایل به آبی */
border: 1px solid #EAECEE;
border-radius: 10px;
padding: 30px;
margin: 35px 0;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.table-of-contents h3 {
color: #2C3E50;
margin-top: 0;
margin-bottom: 25px;
text-align: center;
font-size: 1.8em;
border-bottom: 1px dashed #ECF0F1; /* خط چین زیر عنوان فهرست */
padding-bottom: 12px;
}

.table-of-contents ul {
list-style-type: none; /* حذف نشانه‌گذاری پیش‌فرض لیست */
padding-right: 0;
}

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

.table-of-contents ul li a {
color: #3498DB; /* رنگ آبی برای لینک‌ها */
text-decoration: none; /* حذف خط زیر لینک */
transition: color 0.3s ease; /* انیمیشن تغییر رنگ */
display: block;
padding: 6px 0;
}

.table-of-contents ul li a:hover {
color: #2874A6; /* رنگ آبی تیره‌تر هنگام هاور */
text-decoration: underline; /* نمایش خط زیر هنگام هاور */
}

/*
تنظیمات ریسپانسیو برای نمایش در دستگاه‌های مختلف
(موبایل، تبلت، لپ‌تاپ، تلویزیون)
*/
@media (max-width: 992px) { /* برای تبلت‌ها و لپ‌تاپ‌های کوچک */
.container {
padding: 20px 25px;
border-radius: 10px;
}
h1 { font-size: 2.4em; margin-bottom: 35px; }
h2 { font-size: 2em; margin-top: 40px; }
h3 { font-size: 1.6em; margin-top: 30px; }
p { font-size: 1.1em; line-height: 1.9; }
th, td { padding: 12px 18px; }
.infographic-box { padding: 30px; margin: 40px 0; border-radius: 15px; }
.infographic-title { font-size: 1.8em; margin-bottom: 25px; }
.infographic-grid { gap: 25px; }
.infographic-item { flex-basis: 45%; } /* دو آیتم در یک ردیف */
.infographic-icon { font-size: 2.8em; }
.infographic-item h4 { font-size: 1.4em; }
.infographic-item p { font-size: 1em; }
.table-of-contents { padding: 25px; margin: 30px 0; }
.table-of-contents h3 { font-size: 1.6em; }
}

@media (max-width: 768px) { /* برای موبایل‌ها و تبلت‌های کوچک‌تر */
.container {
padding: 15px 20px;
border-radius: 8px; /* گوشه‌های کمتر گرد در موبایل */
box-shadow: none; /* حذف سایه در موبایل برای بهبود عملکرد */
}
h1 { font-size: 2em; margin-bottom: 30px; }
h2 { font-size: 1.8em; margin-top: 35px; padding-bottom: 12px; }
h3 { font-size: 1.4em; margin-top: 28px; }
p { font-size: 1em; line-height: 1.8; }
ul { padding-right: 20px; }
li { font-size: 1em; margin-bottom: 8px; }
th, td { padding: 10px 15px; font-size: 0.95em; }
.infographic-box { padding: 25px; margin: 35px 0; border-radius: 12px; }
.infographic-title { font-size: 1.6em; margin-bottom: 20px; }
.infographic-grid { flex-direction: column; gap: 20px; } /* آیتم‌ها زیر هم قرار می‌گیرند */
.infographic-item { flex-basis: 100%; padding: 25px; } /* عرض کامل */
.infographic-icon { font-size: 2.5em; margin-bottom: 15px; }
.infographic-item h4 { font-size: 1.3em; }
.infographic-item p { font-size: 0.95em; line-height: 1.7; }
.table-of-contents { padding: 20px; margin: 25px 0; }
.table-of-contents h3 { font-size: 1.4em; }
.table-of-contents ul li { font-size: 1.05em; }
}

@media (max-width: 480px) { /* برای موبایل‌های کوچک */
h1 { font-size: 1.7em; margin-bottom: 25px; }
h2 { font-size: 1.5em; margin-top: 30px; }
h3 { font-size: 1.2em; margin-top: 22px; }
p { font-size: 0.95em; line-height: 1.7; }
th, td { padding: 8px 10px; font-size: 0.9em; }
.infographic-box { padding: 20px; margin: 30px 0; }
.infographic-title { font-size: 1.4em; margin-bottom: 18px; }
.infographic-grid { gap: 15px; }
.infographic-item { padding: 20px; }
.infographic-icon { font-size: 2.2em; }
.infographic-item h4 { font-size: 1.15em; }
.infographic-item p { font-size: 0.9em; line-height: 1.6; }
.table-of-contents { padding: 15px; margin: 20px 0; }
.table-of-contents h3 { font-size: 1.2em; }
.table-of-contents ul li { font-size: 0.95em; }
}

“`