<!– NOTE TO USER:
برای اینکه این مقاله به بهترین شکل و با طراحی منحصر به فردی که درخواست کردید، در ویرایشگر بلوک یا ویرایشگر کلاسیک شما نمایش داده شود، لطفا ابتدا بلوک CSS زیر را در قسمت CSS سفارشی (Custom CSS) وب‌سایت خود یا در بخش مربوط به ویرایشگر بلوک (مانند بلوک HTML سفارشی در گوتنبرگ و قرار دادن آن در بخش …) قرار دهید.

این CSS شامل تنظیمات فونت، سایز، رنگ، ضخامت و واکنش‌گرا (responsive) بودن برای هدینگ‌ها (H1, H2, H3)، متن عادی، جداول و بخش اینفوگرافیک است تا همه چیز برای موبایل، تبلت، لپ‌تاپ و تلویزیون بهینه باشد و ظاهر زیبا و حرفه‌ای داشته باشد. پس از اعمال CSS، متن مقاله را که در ادامه می‌آید، در ویرایشگر خود کپی و پیست کنید.

**رنگ‌بندی انتخابی:**
* **عناوین اصلی (H1):** نیلی تیره (Dark Indigo) – حس اقتدار و تخصص
* **عناوین بخش (H2):** آبی تیره (Deep Blue) – انسجام و جدیت
* **عناوین فرعی (H3):** آبی نفتی (Navy Blue) – سلسله مراتب بصری
* **متن اصلی:** خاکستری تیره (Dark Gray) – خوانایی بالا
* **رنگ‌های تاکیدی/اینفوگرافیک:** فیروزه‌ای/آبی روشن (Teal/Aqua) و سبز ملایم (Light Green) – برای جذابیت و برجسته‌سازی
* **پس‌زمینه:** سفید یا شیری بسیار روشن – پاکیزگی و تمرکز

با اعمال این CSS، نیازی به تنظیمات دستی اندازه فونت یا ضخامت برای هدینگ‌ها نخواهید داشت و آن‌ها به صورت خودکار شناسایی شده و به بهترین شکل نمایش داده می‌شوند.
–>

/* Suggested CSS for Block Editor / Website – Please adapt as needed */

/* H1 – Main Title */
h1.main-title {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
font-size: 36px; /* Larger for desktop */
font-weight: bold;
color: #1a237e; /* Dark Indigo */
text-align: center;
margin-bottom: 40px;
padding: 20px 15px;
background: linear-gradient(to right, #e3f2fd, #bbdefb); /* Light blue gradient */
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
line-height: 1.3;
}
@media (max-width: 768px) {
h1.main-title {
font-size: 28px;
padding: 15px 10px;
}
}
@media (max-width: 480px) {
h1.main-title {
font-size: 24px;
padding: 12px 8px;
}
}

/* H2 – Section Titles */
h2.section-title {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
font-size: 28px; /* Larger for desktop */
font-weight: bold;
color: #283593; /* Deep Blue */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 3px solid #90caf9; /* Light blue accent */
line-height: 1.4;
}
@media (max-width: 768px) {
h2.section-title {
font-size: 24px;
margin-top: 40px;
margin-bottom: 20px;
}
}
@media (max-width: 480px) {
h2.section-title {
font-size: 20px;
margin-top: 30px;
margin-bottom: 15px;
}
}

/* H3 – Sub-section Titles */
h3.sub-section-title {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
font-size: 22px; /* Larger for desktop */
font-weight: bold;
color: #303f9f; /* Navy Blue */
margin-top: 35px;
margin-bottom: 18px;
padding-left: 10px;
border-left: 4px solid #64b5f6; /* Medium blue accent */
line-height: 1.5;
}
@media (max-width: 768px) {
h3.sub-section-title {
font-size: 19px;
margin-top: 30px;
margin-bottom: 15px;
}
}
@media (max-width: 480px) {
h3.sub-section-title {
font-size: 17px;
margin-top: 25px;
margin-bottom: 12px;
}
}

/* General Body Text */
p {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
font-size: 17px; /* Default body font size */
line-height: 1.8;
color: #333333;
margin-bottom: 1em;
text-align: justify;
}
@media (max-width: 768px) {
p {
font-size: 16px;
line-height: 1.7;
}
}
@media (max-width: 480px) {
p {
font-size: 15px;
line-height: 1.6;
}
}

/* Lists */
ul, ol {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
font-size: 17px;
line-height: 1.8;
color: #333333;
margin-bottom: 1em;
padding-left: 25px;
}
ul li, ol li {
margin-bottom: 0.5em;
}
@media (max-width: 768px) {
ul, ol {
font-size: 16px;
line-height: 1.7;
}
}
@media (max-width: 480px) {
ul, ol {
font-size: 15px;
line-height: 1.6;
}
}

/* Table Styling */
table {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 16px;
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
}
table th, table td {
padding: 15px;
text-align: right; /* RTL */
border-bottom: 1px solid #e0e0e0;
}
table th {
background-color: #e3f2fd; /* Light blue header */
color: #1a237e;
font-weight: bold;
font-size: 17px;
}
table tr:last-child td {
border-bottom: none;
}
table tbody tr:hover {
background-color: #f5f5f5;
}
@media (max-width: 768px) {
table {
font-size: 15px;
}
table th, table td {
padding: 12px;
}
}
@media (max-width: 480px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
table thead, table tbody, table th, table td, table tr {
display: block;
}
table th {
text-align: center; /* Adjust for mobile stacked view if needed */
border-bottom: none;
padding-top: 10px;
padding-bottom: 5px;
}
table td {
border-bottom: 1px solid #e0e0e0;
text-align: right;
padding-left: 10px;
padding-right: 10px;
}
table tr {
margin-bottom: 10px;
border: 1px solid #e0e0e0;
border-radius: 5px;
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
table tr:last-child {
margin-bottom: 0;
}
}

/* Infographic / Highlight Box */
.infographic-box {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
background: linear-gradient(135deg, #e0f7fa, #b2ebf2); /* Light cyan gradient */
border-left: 8px solid #00bcd4; /* Teal accent */
padding: 25px;
margin: 40px 0;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
font-size: 18px;
line-height: 1.8;
color: #1e5a60; /* Darker teal text */
direction: rtl; /* Ensure RTL for content inside */
text-align: right;
}
.infographic-box h4 {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif;
font-size: 24px;
color: #00838f; /* Even darker teal */
margin-bottom: 15px;
font-weight: bold;
text-align: center;
}
.infographic-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.infographic-box ul li {
position: relative;
padding-right: 35px;
margin-bottom: 15px;
}
.infographic-box ul li::before {
content: ‘🔹’; /* Diamond bullet */
position: absolute;
right: 0;
color: #00bcd4; /* Teal bullet */
font-size: 20px;
top: 0;
}
@media (max-width: 768px) {
.infographic-box {
padding: 20px;
font-size: 17px;
margin: 30px 0;
}
.infographic-box h4 {
font-size: 22px;
}
}
@media (max-width: 480px) {
.infographic-box {
padding: 15px;
font-size: 16px;
margin: 25px 0;
border-left: 5px solid #00bcd4;
}
.infographic-box h4 {
font-size: 20px;
}
.infographic-box ul li::before {
font-size: 18px;
}
}

/* General Layout for Responsiveness */
body {
font-family: ‘Vazirmatn’, ‘B Homa’, Arial, sans-serif; /* Suggesting a modern Persian font */
direction: rtl; /* Right-to-left for Persian */
text-align: right;
margin: 0;
padding: 20px; /* General padding for content */
background-color: #f8f8f8; /* Light background */
box-sizing: border-box; /* Include padding in element’s total width and height */
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px 40px;
border-radius: 15px;
box-shadow: 0 0 25px rgba(0,0,0,0.05);
}
@media (max-width: 1024px) {
.container {
padding: 25px 30px;
}
}
@media (max-width: 768px) {
body {
padding: 15px;
}
.container {
padding: 20px 25px;
border-radius: 10px;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.container {
padding: 15px 20px;
border-radius: 8px;
}
}