/* تنظیمات عمومی بدنه برای خوانایی بهتر و ظاهر پیش‌فرض */
body {
font-family: ‘Arial’, ‘Tahoma’, ‘Vazirmatn’, sans-serif; /* فونت‌های فارسی و انگلیسی */
line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
color: #333333; /* رنگ متن تیره */
margin: 0;
padding: 0;
background-color: #f8f8f8; /* رنگ پس‌زمینه روشن */
direction: rtl; /* راست به چپ برای متن فارسی */
text-align: right; /* تراز راست برای متن */
}

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

/* استایل‌های تیترها */
h1 {
font-size: 2.5em; /* اندازه بزرگ برای H1 */
font-weight: bold; /* ضخیم */
color: #004d40; /* رنگ آبی اقیانوسی تیره */
text-align: center;
margin-bottom: 30px;
border-bottom: 3px solid #81c784; /* خط زیرین با رنگ سبز دریایی */
padding-bottom: 15px;
line-height: 1.2;
}

h2 {
font-size: 2em; /* کوچکتر از H1 */
font-weight: bold;
color: #005f52; /* آبی اقیانوسی کمی روشن‌تر */
margin-top: 40px;
margin-bottom: 20px;
border-right: 6px solid #ffab40; /* خط حاشیه نارنجی */
padding-right: 15px;
padding-left: 0; /* برای راست به چپ */
text-align: right;
}

h3 {
font-size: 1.5em; /* کوچکتر از H2 */
font-weight: bold;
color: #00796b; /* آبی اقیانوسی روشن‌تر */
margin-top: 30px;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px dashed #e0e0e0; /* خط زیرین نقطه‌چین */
text-align: right;
}

p {
margin-bottom: 15px;
text-align: justify; /* تراز دو طرفه برای پاراگراف‌ها */
}

ul, ol {
margin-bottom: 15px;
padding-right: 25px; /* برای راست به چپ */
padding-left: 0;
list-style-position: inside; /* قرارگیری نشانگر لیست داخل کادر */
}

li {
margin-bottom: 8px;
text-align: justify;
}

/* استایل‌های جدول */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* سایه برای جدول */
border-radius: 8px;
overflow: hidden; /* اطمینان از اعمال border-radius به گوشه‌ها */
direction: rtl; /* راست به چپ برای محتوای جدول */
}

.styled-table thead tr {
background-color: #004d40; /* پس‌زمینه سرتیتر جدول */
color: #ffffff; /* رنگ متن سرتیتر */
text-align: right; /* تراز راست سرتیتر */
}

.styled-table th,
.styled-table td {
padding: 12px 15px;
border: 1px solid #dddddd; /* مرز بین خانه‌ها */
text-align: right; /* تراز راست محتوای خانه */
}

.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3; /* رنگ روشن برای ردیف‌های زوج */
}

.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #004d40; /* مرز ضخیم‌تر برای آخرین ردیف */
}

.styled-table tbody tr:hover {
background-color: #e0f2f1; /* تغییر رنگ در هاور */
}

/* بخش اینفوگرافیک‌مانند */
.infographic-section {
background-color: #e0f7fa; /* پس‌زمینه فیروزه‌ای روشن */
padding: 30px 20px;
border-radius: 10px;
margin-top: 40px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.infographic-section h2 {
color: #004d40;
border-right: none;
text-align: center;
margin-bottom: 30px;
padding-right: 0;
}

.infographic-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px; /* فاصله بین آیتم‌ها */
}

.infographic-step {
background-color: #ffffff;
border: 2px solid #81c784;
border-radius: 12px;
padding: 20px;
flex: 1 1 calc(33% – 50px); /* 3 آیتم در هر ردیف در صفحات بزرگتر */
min-width: 280px; /* حداقل عرض برای هر آیتم */
max-width: 350px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* انیمیشن نرم */
}

.infographic-step:hover {
transform: translateY(-5px); /* حرکت به بالا در هاور */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.infographic-step .icon {
font-size: 2.5em;
color: #004d40;
margin-bottom: 10px;
display: block; /* برای اینکه در یک خط جدا باشد */
}

.infographic-step h3 {
color: #005f52;
font-size: 1.3em;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: none;
text-align: center;
}

.infographic-step p {
font-size: 0.95em;
color: #555555;
text-align: center;
}

/* تنظیمات ریسپانسیو */
@media (max-width: 768px) {
h1 {
font-size: 1.8em;
margin-bottom: 20px;
padding-bottom: 10px;
}

h2 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
}

h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}

.container {
padding: 15px;
border-radius: 0; /* حذف گوشه‌های گرد در موبایل */
box-shadow: none; /* حذف سایه در موبایل */
}

.styled-table {
font-size: 0.85em;
}

.styled-table th, .styled-table td {
padding: 8px 10px;
}

.infographic-step {
flex: 1 1 calc(48% – 20px); /* 2 آیتم در هر ردیف در صفحات متوسط */
max-width: none;
min-width: unset;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.1em;
}

.infographic-step {
flex: 1 1 90%; /* 1 آیتم در هر ردیف در صفحات کوچک */
margin: 0 auto; /* مرکز قرار دادن آیتم تکی */
}
}

/* بخش سوالات متداول */
.faq-item {
margin-bottom: 20px;
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 5px;
padding: 15px;
}
.faq-question {
font-weight: bold;
color: #00796b;
margin-bottom: 5px;
}
.faq-answer {
color: #555;
}

/* جعبه فراخوان اقدام (CTA Box) – بدون تبلیغات مستقیم */
.cta-box {
background-color: #e0f2f1; /* پس‌زمینه فیروزه‌ای روشن */
border: 2px solid #004d40; /* مرز آبی اقیانوسی */
padding: 20px;
margin-top: 40px;
border-radius: 10px;
text-align: center;
font-size: 1.1em;
color: #004d40;
}
.cta-box p {
margin-bottom: 10px;
}
.cta-box strong {
color: #00796b;
}