/* تنظیمات عمومی برای پاسخگویی و زیبایی بصری */
body {
font-family: ‘Vazirmatn’, sans-serif; /* فونت مناسب فارسی، اگر نصب نباشد از Sans-serif استفاده می‌کند */
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #f8f9fa;
direction: rtl; /* برای نمایش صحیح فارسی */
text-align: right; /* تراز راست برای متن */
}

.article-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* هدینگ‌ها */
h1 {
font-size: 2.8em; /* سایز بزرگتر برای H1 */
font-weight: 800; /* ضخامت بیشتر */
color: #2c3e50;
text-align: center;
margin-bottom: 1.5em;
padding-bottom: 0.5em;
border-bottom: 3px solid #3498db;
}

h2 {
font-size: 2.2em; /* سایز برای H2 */
font-weight: 700; /* ضخامت */
color: #34495e;
border-bottom: 2px solid #3498db;
padding-bottom: 0.6em;
margin-top: 2.5em;
margin-bottom: 1.2em;
}

h3 {
font-size: 1.7em; /* سایز برای H3 */
font-weight: 600; /* ضخامت */
color: #2980b9;
margin-top: 2em;
margin-bottom: 1em;
position: relative;
padding-right: 25px; /* فضا برای آیکون یا نقطه */
}

h3::before {
content: “💡”; /* یک آیکون جذاب */
position: absolute;
right: 0;
color: #e67e22; /* رنگ آیکون */
font-size: 0.8em;
top: 0.1em;
}

/* پاراگراف‌ها */
p {
margin-bottom: 1.2em;
font-size: 1.1em;
color: #444;
}

/* لیست‌ها */
ul {
list-style: none; /* حذف نشانگر پیش‌فرض */
padding: 0;
margin: 1.5em 0;
}

ul li {
position: relative;
padding-right: 30px; /* فضای بیشتر برای نشانگر سفارشی */
margin-bottom: 0.8em;
font-size: 1.05em;
color: #555;
}

ul li::before {
content: “✅”; /* نشانگر سفارشی با آیکون */
position: absolute;
right: 0;
color: #27ae60;
font-size: 0.9em;
top: 0.1em;
}

/* جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 1em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden; /* برای گرد شدن گوشه‌های جدول */
}

th, td {
border: 1px solid #e0e0e0;
padding: 15px;
text-align: right;
font-weight: normal; /* برای td */
}

th {
background-color: #3498db;
color: white;
font-weight: bold;
font-size: 1.1em;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

/* اینفوگرافیک‌ها و بلوک‌های اطلاعاتی */
.infographic-box {
background-color: #e8f6ff; /* آبی روشن */
border-right: 6px solid #3498db; /* نوار آبی در سمت راست */
padding: 2em;
margin: 2.5em 0;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: flex-end; /* تراز راست */
text-align: right;
}

.infographic-box h3 {
color: #2c3e50;
margin-top: 0;
margin-bottom: 1em;
border-bottom: none;
padding-bottom: 0;
font-size: 1.8em;
font-weight: 700;
}

.infographic-box h3::before {
content: “”; /* حذف آیکون پیش‌فرض برای هدینگ داخل باکس */
}

.infographic-item {
display: flex;
align-items: flex-start; /* آیتم‌ها از بالا تراز شوند */
margin-bottom: 1em;
width: 100%;
}

.infographic-icon {
font-size: 2em;
color: #e67e22; /* رنگ نارنجی برای آیکون‌ها */
margin-left: 15px; /* فاصله از متن */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}

.infographic-text {
flex-grow: 1;
font-size: 1.1em;
color: #333;
}

.guarantee-box {
background-color: #eafaf1; /* سبز روشن */
border-right: 6px solid #2ecc71; /* نوار سبز */
}

.guarantee-box .infographic-icon {
color: #2ecc71; /* رنگ سبز برای آیکون‌ها */
}

.important-notice {
background-color: #fff3cd; /* زرد روشن برای توجه */
border-right: 6px solid #ffc107;
padding: 1.5em;
margin: 2em 0;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
color: #664d03;
}

.important-notice .icon {
font-size: 2em;
color: #ffc107;
margin-left: 15px;
flex-shrink: 0;
}

/* رسپانسیو بودن برای دستگاه‌های مختلف */
@media (max-width: 768px) {
.article-container {
margin: 10px;
padding: 15px;
border-radius: 5px;
}

h1 {
font-size: 2em;
margin-bottom: 1em;
}

h2 {
font-size: 1.6em;
margin-top: 2em;
margin-bottom: 1em;
}

h3 {
font-size: 1.3em;
margin-top: 1.5em;
margin-bottom: 0.8em;
padding-right: 20px;
}

h3::before {
font-size: 0.7em;
top: 0.2em;
}

p, ul li, .infographic-text {
font-size: 1em;
}

th, td {
padding: 10px;
font-size: 0.9em;
}

table {
display: block; /* برای اسکرول افقی در موبایل */
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* برای اسکرول روان در iOS */
}

.infographic-box {
padding: 1.5em;
margin: 2em 0;
}

.infographic-box h3 {
font-size: 1.5em;
}

.infographic-icon {
font-size: 1.8em;
margin-left: 10px;
}

.important-notice {
padding: 1em;
}

.important-notice .icon {
font-size: 1.8em;
margin-left: 10px;
}
}

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

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.2em;
}

p, ul li, .infographic-text {
font-size: 0.95em;
}

th, td {
padding: 8px;
font-size: 0.85em;
}

.infographic-box h3 {
font-size: 1.3em;
}
}

/* تنظیمات برای تبلت و مانیتورهای بزرگتر (تلویزیون) */
@media (min-width: 769px) and (max-width: 1200px) {
.article-container {
max-width: 800px;
}
}

@media (min-width: 1201px) {
.article-container {
max-width: 950px;
}
}