“`html

@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: 700;
font-style: normal;
}
body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
margin: 0;
padding: 20px;
background-color: #fbfdff; /* Very light blue-grey */
overflow-x: hidden; /* Prevent horizontal scroll */
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e0e0e0;
}
h1 {
font-size: 2.5em; /* Larger for H1 */
font-weight: 900; /* Extra bold */
color: #0056b3; /* Professional blue */
text-align: center;
margin-bottom: 35px;
line-height: 1.4;
letter-spacing: -0.5px;
}
h2 {
font-size: 1.8em; /* H2 size */
font-weight: 800; /* Extra bold */
color: #004085; /* Darker blue */
margin-top: 45px;
margin-bottom: 25px;
border-bottom: 3px solid #0056b3;
padding-bottom: 10px;
position: relative;
}
h2::before {
content: ‘🔹’; /* Decorative element */
position: absolute;
right: -25px;
top: -5px;
font-size: 0.8em;
color: #28a745; /* Green accent */
}
h3 {
font-size: 1.4em; /* H3 size */
font-weight: 700; /* Bold */
color: #212529; /* Dark grey */
margin-top: 35px;
margin-bottom: 20px;
border-right: 4px solid #28a745; /* Green accent border */
padding-right: 12px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #e6ffee; /* Very light green background */
border-radius: 0 8px 8px 0;
}
p {
margin-bottom: 1em;
text-align: justify;
hyphens: auto; /* For better text justification */
}
strong {
color: #0056b3; /* Highlight important text */
}
ul {
list-style-type: none; /* Remove default bullet */
padding-right: 0;
}
ul li {
position: relative;
padding-right: 25px;
margin-bottom: 10px;
text-align: justify;
}
ul li::before {
content: ‘✅’; /* Custom bullet point */
position: absolute;
right: 0;
color: #28a745; /* Green checkmark */
font-size: 1em;
top: 4px;
}
ol {
padding-right: 20px;
list-style-type: decimal; /* Use standard numbering */
}
ol li {
margin-bottom: 10px;
text-align: justify;
}
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.95em;
text-align: right;
border-radius: 8px;
overflow: hidden; /* For rounded corners to work */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
table th, table td {
padding: 14px 18px;
border: 1px solid #dee2e6;
}
table th {
background-color: #0056b3;
color: #ffffff;
font-weight: bold;
font-size: 1.1em;
}
table tr:nth-child(even) {
background-color: #f8f9fa; /* Zebra striping */
}
table tr:hover {
background-color: #e9ecef; /* Hover effect */
}

/* Infographic/Visual Elements */
.infographic-block {
background-color: #e6f7ff; /* Light blue background */
border: 2px solid #a8d7ff; /* Blue border */
border-radius: 12px;
padding: 20px;
margin: 30px 0;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.infographic-block h3 {
color: #004085;
margin-top: 0;
border-right: none;
background-color: transparent;
padding: 0;
text-align: center;
border-bottom: 2px dashed #a8d7ff;
padding-bottom: 10px;
margin-bottom: 20px;
}
.infographic-item {
display: flex;
align-items: center;
margin-bottom: 15px;
font-size: 1.05em;
}
.infographic-item span {
font-size: 1.8em;
margin-left: 15px;
color: #28a745;
}
.infographic-item p {
margin: 0;
text-align: right;
}

/* Table of Contents */
.toc {
background-color: #f0f8ff; /* Lighter blue background */
border: 1px solid #cceeff;
border-radius: 10px;
padding: 25px 20px;
margin: 30px 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
.toc h3 {
text-align: center;
color: #004085;
margin-bottom: 20px;
border-bottom: 1px dashed #cceeff;
padding-bottom: 10px;
background-color: transparent;
border-right: none;
}
.toc ul {
list-style-type: none;
padding: 0;
}
.toc ul li {
margin-bottom: 8px;
padding-right: 0; /* Remove custom bullet padding for TOC */
}
.toc ul li::before {
content: ‘📌’; /* Custom bullet for TOC */
color: #28a745;
font-size: 0.9em;
position: relative;
top: 2px;
margin-left: 8px;
}
.toc a {
color: #0056b3;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.toc a:hover {
color: #007bff;
text-decoration: underline;
}
.toc .sub-item {
padding-right: 25px; /* Indent sub-items */
}
.toc .sub-item::before {
content: ‘▪️’;
color: #0056b3;
}
.faq-section {
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 10px;
padding: 25px;
margin-top: 40px;
box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}
.faq-question {
font-weight: bold;
color: #004085;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
}
.faq-question::before {
content: ‘❓’;
margin-left: 10px;
font-size: 1.2em;
}
.faq-answer {
margin-bottom: 20px;
padding-right: 30px;
border-right: 2px solid #28a745;
padding-top: 5px;
padding-bottom: 5px;
background-color: #e6ffee;
border-radius: 0 5px 5px 0;
}
.faq-answer p {
margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.container {
padding: 15px;
}
h1 {
font-size: 2em;
margin-bottom: 25px;
}
h2 {
font-size: 1.6em;
margin-top: 35px;
margin-bottom: 20px;
}
h3 {
font-size: 1.2em;
margin-top: 25px;
margin-bottom: 15px;
padding-right: 10px;
}
table th, table td {
padding: 10px 12px;
font-size: 0.9em;
}
.infographic-block {
padding: 15px;
margin: 20px 0;
}
.infographic-item {
font-size: 1em;
flex-direction: row-reverse; /* For better mobile display of icon and text */
}
.infographic-item span {
margin-right: 10px;
margin-left: 0;
}
ul li {
padding-right: 20px;
}
ul li::before {
top: 2px;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8em;
margin-bottom: 20px;
}
h2 {
font-size: 1.4em;
margin-top: 30px;
margin-bottom: 15px;
}
h3 {
font-size: 1.1em;
margin-top: 20px;
margin-bottom: 10px;
}
.infographic-item span {
font-size: 1.5em;
}
}

<!–
نکته مهم برای کپی در ویرایشگر بلوک یا کلاسیک:
این کد HTML شامل استایل‌های داخلی (Inline Styles و CSS در تگ ) است که طراحی منحصر به فرد و رنگ‌بندی زیبا را برای شما فراهم می‌کند.
پس از کپی کردن این کد در ویرایشگر بلوک یا کلاسیک وب‌سایت خود، مطمئن شوید که ویرایشگر شما قابلیت رندر کردن HTML و CSS را به درستی دارد.
برای بهترین نمایش، ممکن است لازم باشد آن را در حالت ویرایشگر “HTML” یا “متنی” (Text Editor) جایگذاری کنید تا استایل‌ها حفظ شوند.
پاسخگویی (Responsive) برای موبایل، تبلت، لپ‌تاپ و تلویزیون نیز از طریق media queries در CSS داخلی لحاظ شده است.
برای افزودن Structured Data (مانند FAQ Schema یا Article Schema) به صورت واقعی، باید کد JSON-LD را در بخش یا صفحه وب‌سایت خود اضافه کنید که از طریق خود محتوای مقاله امکان‌پذیر نیست و باید در سیستم مدیریت محتوای (CMS) شما پیکربندی شود.
–>

“`