“`html

/*
این کدهای CSS به صورت داخلی (inline) و یا در یک تگ در بالای محتوا قرار می‌گیرند.
هدف این است که پس از کپی در ویرایشگر بلوک یا کلاسیک، استایل‌ها به درستی اعمال شوند و محتوا رسپانسیو باشد.
رنگ‌بندی انتخابی: آبی تیره و سبز ملایم، برای القای حس اعتماد، تخصص و پویایی.
*/

/* استایل‌های پایه برای کل بدنه – برای اطمینان از خوانایی */
body {
font-family: ‘B Nazanin’, ‘Vazirmatn’, sans-serif; /* فونت‌های پیشنهادی، در سایت شما باید وجود داشته باشند */
line-height: 1.7;
color: #333; /* رنگ متن اصلی */
margin: 0;
padding: 0;
background-color: #f8fbfd; /* پس‌زمینه بسیار روشن برای کل صفحه */
direction: rtl; /* جهت‌دهی راست به چپ برای فارسی */
text-align: right; /* تراز بندی متن به راست */
}

/* کانتینر اصلی محتوا برای رسپانسیو بودن و نمایش زیبا در همه دستگاه‌ها */
.container {
max-width: 900px; /* حداکثر عرض محتوا */
margin: 20px auto; /* فاصله از بالا و پایین و وسط چین کردن */
padding: 25px 30px; /* فضای داخلی */
background-color: #ffffff; /* پس‌زمینه سفید برای محتوا */
border-radius: 12px; /* گوشه‌های گرد */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* سایه ملایم */
overflow: hidden; /* برای اطمینان از نمایش صحیح border-radius */
}

/* استایل هدینگ H1 – بزرگترین و پررنگ‌ترین */
h1 {
font-size: 2.8rem; /* اندازه فونت نسبی برای رسپانسیو بودن */
font-weight: 800; /* ضخامت بسیار زیاد */
color: #0d47a1; /* آبی تیره */
text-align: center; /* وسط چین */
margin-bottom: 35px; /* فاصله از پایین */
padding-bottom: 18px; /* پدینگ از پایین */
border-bottom: 4px solid #e0e0e0; /* خط جداکننده خاکستری */
}

/* استایل هدینگ H2 – متوسط و پررنگ */
h2 {
font-size: 2.2rem;
font-weight: 700;
color: #1565c0; /* آبی متوسط */
margin-top: 50px; /* فاصله از بالا */
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom: 2px solid #e3f2fd; /* خط جداکننده آبی روشن */
}

/* استایل هدینگ H3 – کوچکتر و پررنگ */
h3 {
font-size: 1.7rem;
font-weight: 600;
color: #1976d2; /* آبی روشن‌تر */
margin-top: 35px;
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px dashed #bbdefb; /* خط جداکننده نقطه‌چین آبی */
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 1.5em; /* فاصله خطی */
font-size: 1.08rem; /* اندازه فونت کمی بزرگتر برای خوانایی */
line-height: 1.8; /* ارتفاع خط بیشتر */
text-align: justify; /* تراز دو طرفه برای زیبایی متن */
}

/* استایل لیست‌ها */
ul, ol {
margin-bottom: 1.5em;
padding-right: 25px; /* پدینگ از راست برای بولت‌ها */
font-size: 1.05rem;
line-height: 1.7;
}

li {
margin-bottom: 0.9em;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 40px 0; /* فاصله از بالا و پایین */
background-color: #fdfdfd; /* پس‌زمینه سفید مایل به کرم */
border-radius: 10px; /* گوشه‌های گرد */
overflow: hidden; /* برای اعمال border-radius به محتوا */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06); /* سایه ملایم */
}

th, td {
padding: 18px 22px; /* پدینگ داخلی سلول‌ها */
text-align: right; /* تراز به راست */
border-bottom: 1px solid #eee; /* خط جداکننده افقی */
font-size: 1.0rem;
}

th {
background-color: #e3f2fd; /* آبی روشن برای سرتیتر جدول */
color: #1565c0; /* آبی متوسط برای متن سرتیتر */
font-weight: 600;
text-transform: uppercase; /* حروف بزرگ */
}

tr:nth-child(even) { /* ردیف‌های زوج */
background-color: #f9fdfd; /* پس‌زمینه کمی متفاوت */
}

tr:hover { /* هاور روی ردیف‌ها */
background-color: #f0f8ff; /* افکت هاور آبی ملایم */
}

/* استایل بلوک اینفوگرافیک جایگزین */
.infographic-block {
background-color: #e8f5e9; /* پس‌زمینه سبز روشن */
border-right: 6px solid #4caf50; /* خط عمودی سبز پررنگ در سمت راست */
padding: 30px;
margin: 45px 0;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
text-align: right;
}

.infographic-block h3 {
color: #2e7d32; /* سبز تیره برای عنوان */
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
font-size: 2rem;
text-align: right;
}

.infographic-block ul {
list-style: none; /* حذف بولت‌های پیش‌فرض */
padding: 0;
margin-top: 25px;
}

.infographic-block ul li {
position: relative;
padding-right: 40px; /* فضای کافی برای آیکون سفارشی */
margin-bottom: 18px;
font-size: 1.15rem;
color: #388e3c; /* سبز متوسط برای متن */
text-align: right;
}

.infographic-block ul li::before {
content: ‘✅’; /* آیکون تایید سفارشی */
position: absolute;
right: 0;
color: #4caf50;
font-size: 1.4rem;
top: 0;
}

/* استایل بلاک‌های FAQ */
.faq-item {
margin-bottom: 25px;
background-color: #fdfdfd;
padding: 20px 25px;
border-radius: 10px;
border: 1px solid #e0e0e0; /* حاشیه ملایم */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.faq-item h3 {
font-size: 1.4em; /* کمی کوچکتر از H3 اصلی */
font-weight: 600;
color: #1976d2;
margin-top: 0;
margin-bottom: 12px;
padding-bottom: 0;
border-bottom: none;
}

.faq-item p {
font-size: 1.02rem;
line-height: 1.7;
margin-bottom: 0;
}

/* رسپانسیو بودن برای موبایل و تبلت */
@media (max-width: 768px) {
.container {
margin: 15px;
padding: 20px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 25px;
padding-bottom: 12px;
}
h2 {
font-size: 1.8rem;
margin-top: 40px;
margin-bottom: 20px;
}
h3 {
font-size: 1.4rem;
margin-top: 30px;
margin-bottom: 15px;
}
p, ul, ol, th, td, .faq-item p {
font-size: 1.0rem;
}
th, td {
padding: 15px 18px;
}
.infographic-block {
padding: 25px;
margin: 35px 0;
}
.infographic-block h3 {
font-size: 1.7rem;
}
.infographic-block ul li {
font-size: 1.05rem;
padding-right: 35px;
}
.infographic-block ul li::before {
font-size: 1.3rem;
}
.faq-item {
padding: 18px 20px;
}
.faq-item h3 {
font-size: 1.25em;
}
}

@media (max-width: 480px) {
.container {
margin: 10px;
padding: 15px;
}
h1 {
font-size: 1.8rem;
margin-bottom: 18px;
padding-bottom: 10px;
}
h2 {
font-size: 1.5rem;
margin-top: 30px;
margin-bottom: 18px;
}
h3 {
font-size: 1.2rem;
margin-top: 25px;
margin-bottom: 12px;
}
p, ul, ol, th, td, .faq-item p {
font-size: 0.95rem;
}
th, td {
padding: 12px 15px;
}
.infographic-block {
padding: 20px;
margin: 30px 0;
}
.infographic-block h3 {
font-size: 1.5rem;
}
.infographic-block ul li {
font-size: 1.0rem;
padding-right: 30px;
}
.infographic-block ul li::before {
font-size: 1.2rem;
top: 1px; /* تنظیم مجدد برای صفحه نمایش کوچک */
}
.faq-item {
padding: 15px 18px;
}
.faq-item h3 {
font-size: 1.15em;
}
}

“`