/* تنظیمات پایه برای فونت، رنگ و جهت‌دهی */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif;
line-height: 1.8; /* افزایش فاصله خطوط برای خوانایی بهتر */
color: #34495E; /* رنگ متن اصلی: خاکستری تیره مایل به آبی */
background-color: #ECF0F1; /* رنگ پس‌زمینه کلی: خاکستری بسیار روشن */
margin: 0;
padding: 0;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 25px;
background-color: #FFFFFF; /* رنگ پس‌زمینه محتوا: سفید */
border-radius: 12px; /* گردی گوشه‌ها برای ظاهر نرم‌تر */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* سایه جذاب */
box-sizing: border-box; /* برای محاسبه درست padding و border */
}

/* استایل هدینگ‌ها */
h1 {
font-size: 2.8em; /* سایز بزرگتر برای H1 */
font-weight: bold;
color: #2C3E50; /* رنگ آبی تیره/خاکستری برای H1 */
text-align: center;
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 3px solid #3498DB; /* خط آبی روشن برای جداسازی */
}
h2 {
font-size: 2.2em; /* سایز مناسب برای H2 */
font-weight: bold;
color: #2C3E50;
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom: 1px solid #BDC3C7; /* خط باریک خاکستری */
}
h3 {
font-size: 1.7em; /* سایز برای H3 */
font-weight: bold;
color: #34495E;
margin-top: 35px;
margin-bottom: 18px;
}

/* پاراگراف‌ها و لیست‌ها */
p {
margin-bottom: 1.2em;
text-align: justify; /* تراز کردن متن از دو طرف */
}
ul, ol {
margin-bottom: 1.2em;
padding-right: 25px; /* تنظیم برای زبان RTL */
list-style-type: disc; /* نوع گلوله برای لیست‌ها */
}
li {
margin-bottom: 0.7em;
}

/* استایل جدول آموزشی */
.table-responsive {
overflow-x: auto; /* فعال کردن اسکرول افقی برای جداول در موبایل */
-webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
margin: 30px 0;
}
table {
width: 100%;
min-width: 600px; /* حداقل عرض برای جلوگیری از فشرده شدن بیش از حد در موبایل */
border-collapse: collapse;
font-size: 0.95em;
text-align: right;
background-color: #FFFFFF;
border-radius: 8px;
overflow: hidden; /* برای نمایش گردی گوشه ها */
}
table th, table td {
border: 1px solid #BDC3C7; /* مرزهای خاکستری روشن */
padding: 14px 18px;
}
table thead tr {
background-color: #3498DB; /* سربرگ آبی */
color: #FFFFFF;
text-align: right;
}
table tbody tr:nth-of-type(even) {
background-color: #F8F8F8; /* رنگ متناوب سطرها */
}
table tbody tr:hover {
background-color: #F0F0F0; /* تغییر رنگ سطر هنگام هاور */
}

/* شبیه‌سازی اینفوگرافیک زیبا */
.infographic-block {
background-color: #E8F8F5; /* پس‌زمینه ملایم اینفوگرافیک */
border-radius: 15px;
padding: 40px;
margin: 50px 0;
display: flex;
flex-wrap: wrap; /* اجازه به آیتم‌ها برای شکسته شدن در خطوط جدید */
justify-content: space-around; /* توزیع فضا بین آیتم‌ها */
gap: 25px; /* فاصله بین آیتم‌ها */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.infographic-item {
background-color: #FFFFFF;
border-radius: 10px;
padding: 25px;
flex: 1 1 calc(33% – 50px); /* سه آیتم در هر ردیف، با توجه به gap */
min-width: 280px; /* حداقل عرض قبل از شکستن به خط جدید */
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن نرم */
border: 1px solid #BDC3C7; /* حاشیه ملایم */
}
.infographic-item:hover {
transform: translateY(-8px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* سایه عمیق‌تر هنگام هاور */
}
.infographic-icon {
font-size: 3.5em; /* سایز بزرگ آیکون */
color: #3498DB; /* رنگ آبی برای آیکون‌ها */
margin-bottom: 20px;
display: block; /* برای اینکه margin-bottom درست کار کند */
}
.infographic-title {
font-size: 1.3em;
font-weight: bold;
color: #2C3E50;
margin-bottom: 12px;
}
.infographic-description {
font-size: 1em;
color: #555;
line-height: 1.6;
}

/* جعبه اطلاعات/نکته */
.info-box {
background-color: #E8F8F5; /* پس‌زمینه سبزآبی روشن */
border-right: 6px solid #2ECC71; /* نوار سبز رنگ برای تاکید */
padding: 20px 25px;
margin: 30px 0;
border-radius: 8px;
font-size: 1em;
color: #2C3E50;
text-align: right;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.info-box strong {
color: #2ECC71; /* رنگ سبز پررنگ برای متن مهم */
}

/* واکنش‌گرا برای موبایل، تبلت، لپ‌تاپ و تلویزیون */
@media (max-width: 1024px) { /* لپ‌تاپ و تبلت‌های بزرگ */
.container {
margin: 20px auto;
max-width: 95%;
padding: 20px;
}
h1 { font-size: 2.4em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.4em; }
.infographic-item {
flex: 1 1 calc(50% – 40px); /* دو آیتم در هر ردیف */
min-width: 320px;
}
}

@media (max-width: 768px) { /* تبلت و موبایل‌های بزرگ */
.container {
margin: 15px;
padding: 18px;
border-radius: 10px;
}
h1 { font-size: 2em; margin-bottom: 25px; padding-bottom: 12px; }
h2 { font-size: 1.7em; margin-top: 35px; margin-bottom: 20px; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 12px; }
p { font-size: 0.95em; }
.infographic-block {
padding: 30px;
gap: 20px;
margin: 40px 0;
}
.infographic-item {
flex: 1 1 100%; /* یک آیتم در هر ردیف (stack) */
min-width: auto;
padding: 20px;
}
.infographic-icon { font-size: 3em; margin-bottom: 15px; }
.infographic-title { font-size: 1.2em; }
.infographic-description { font-size: 0.9em; }
table { min-width: 500px; } /* حفظ حداقل عرض برای جدول */
table th, table td { padding: 10px 12px; }
.info-box { padding: 15px 20px; font-size: 0.9em; }
}

@media (max-width: 480px) { /* موبایل‌های کوچک */
.container {
margin: 10px;
padding: 15px;
border-radius: 8px;
}
h1 { font-size: 1.8em; margin-bottom: 20px; padding-bottom: 10px; }
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; }
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; }
ul, ol { padding-right: 18px; }
.infographic-block { padding: 20px; margin: 30px 0; }
.infographic-item { padding: 18px; }
.infographic-icon { font-size: 2.5em; margin-bottom: 10px; }
.infographic-title { font-size: 1.1em; }
.infographic-description { font-size: 0.85em; }
table { min-width: 400px; } /* حفظ حداقل عرض برای جدول */
table th, table td { padding: 8px 10px; }
.info-box { padding: 12px 15px; font-size: 0.85em; }
}