/*
این بخش شامل استایل‌های کلی و رسپانسیو برای نمایش بهتر در انواع دستگاه‌هاست.
برخی از ویرایشگرهای بلوک ممکن است تگ را حذف کنند، اما استایل‌های حیاتی مستقیماً به تگ‌های HTML در متن (inline) اعمال شده‌اند تا در هر صورت نمایش صحیح تضمین شود.
*/
:root {
–primary-blue: #0d47a1; /* Deep Blue */
–light-blue: #e3f2fd; /* Very Light Blue */
–medium-blue: #1976d2; /* Medium Blue */
–dark-gray: #424242;
–light-gray-bg: #f8f8f8;
–green-accent: #4caf50;
–light-green-bg: #e8f5e9;
–dark-green: #2e7d32;
–medium-green-icon: #66bb6a;
–orange-accent: #e65100;
–light-orange-bg: #fff3e0;
–table-header-bg: #bbdefb;
–table-header-text: #1a237e;
–table-row-even: #f5f5f5;
–faq-bg: #f0f4c3;
–faq-text: #558b2f;
}

body, div, h1, h2, h3, p, ul, ol, li, table, thead, tbody, tr, th, td {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif; /* فونت وزیرمتن برای خوانایی بهتر فارسی */
direction: rtl; /* جهت متن راست به چپ */
text-align: right; /* تراز راست برای کل متن */
}

.main-container {
max-width: 900px; /* حداکثر عرض برای خوانایی بهتر در دسکتاپ */
margin: 0 auto; /* قرارگیری در مرکز صفحه */
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
border-radius: 12px;
}

/* Base styling for text elements */
p {
margin-bottom: 1.2em;
line-height: 2;
color: var(–dark-gray);
font-size: 1.05em;
}

ul, ol {
margin-bottom: 1.2em;
padding-right: 25px; /* برای لیست‌های راست به چپ */
}

li {
margin-bottom: 0.8em;
line-height: 1.9;
color: var(–dark-gray);
}

a {
color: var(–medium-blue);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(–primary-blue);
}

/* Section specific styling */
.section-block {
padding: 30px 25px;
margin-bottom: 25px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.section-block.alt-bg {
background-color: var(–light-gray-bg);
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners for content */
}

th, td {
padding: 18px 12px;
text-align: center;
border-bottom: 1px solid #e0e0e0;
font-size: 1em;
}

th {
background-color: var(–table-header-bg);
color: var(–table-header-text);
font-weight: 700;
}

tr:nth-child(even) {
background-color: var(–table-row-even);
}

/* Infographic Styling */
.infographic-block {
background-color: var(–light-green-bg);
border: 2px solid var(–green-accent);
border-radius: 15px;
padding: 35px 30px;
margin: 40px 0;
text-align: center;
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.15);
}

.infographic-title {
font-size: 2em;
font-weight: 800;
color: var(–dark-green);
margin-bottom: 25px;
border-bottom: 3px dashed #c8e6c9;
padding-bottom: 15px;
}

.infographic-item {
display: flex;
align-items: center;
justify-content: flex-end; /* برای چینش راست به چپ */
margin-bottom: 18px;
background-color: #ffffff;
padding: 18px 25px;
border-radius: 12px;
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.infographic-item:hover {
transform: translateY(-7px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.infographic-icon {
font-size: 2.2em;
color: var(–medium-green-icon);
margin-left: 20px; /* فاصله از متن برای راست به چپ */
}

.infographic-text {
font-size: 1.2em;
color: var(–dark-gray);
font-weight: 600;
text-align: right;
flex-grow: 1; /* اجازه می‌دهد متن فضای باقی‌مانده را پر کند */
}

/* CTA Styling */
.cta-block {
background-color: var(–light-orange-bg);
border: 1px solid #ffcc80;
border-radius: 10px;
padding: 30px 25px;
margin-top: 40px;
text-align: center;
font-size: 1.15em;
color: var(–orange-accent);
font-weight: 600;
box-shadow: 0 4px 10px rgba(255, 152, 0, 0.1);
}

.cta-block p {
margin-bottom: 15px;
line-height: 1.8;
}

.faq-item {
margin-bottom: 20px;
padding: 20px;
background-color: var(–faq-bg);
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.faq-item h3 {
color: var(–faq-text);
margin-top: 0;
margin-bottom: 10px;
font-size: 1.3em;
}
.faq-item p {
margin-bottom: 0;
font-size: 1em;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.main-container {
padding: 15px;
}
h1 {
font-size: 2em !important;
padding: 25px 15px !important;
}
h2 {
font-size: 1.8em !important;
}
h3 {
font-size: 1.3em !important;
}
p, li {
font-size: 1em;
line-height: 1.8;
}
.section-block {
padding: 20px 15px;
margin-bottom: 20px;
}
th, td {
padding: 12px 8px;
font-size: 0.9em;
}
.infographic-block {
padding: 25px 20px;
margin: 30px 0;
}
.infographic-title {
font-size: 1.7em;
margin-bottom: 20px;
}
.infographic-item {
flex-direction: column; /* Stack icon and text on small screens */
align-items: center;
text-align: center;
padding: 15px;
}
.infographic-icon {
margin-left: 0;
margin-bottom: 10px;
font-size: 2em;
}
.infographic-text {
font-size: 1.05em;
text-align: center;
}
.cta-block {
padding: 20px 15px;
font-size: 1.05em;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.7em !important;
padding: 20px 10px !important;
margin-bottom: 20px !important;
}
h2 {
font-size: 1.5em !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
}
h3 {
font-size: 1.1em !important;
margin-top: 15px !important;
margin-bottom: 8px !important;
}
p, li, .infographic-text, .cta-block p {
font-size: 0.95em;
line-height: 1.7;
}
.infographic-title {
font-size: 1.5em;
}
.infographic-icon {
font-size: 1.8em;
}
}