“`html

/* تنظیمات پایه برای خوانایی کلی و واکنش‌گرا بودن (Responsive) */
.article-container {
max-width: 900px;
margin: 30px auto;
padding: 40px;
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* فونت‌های جایگزین برای پشتیبانی گسترده */
direction: rtl; /* برای متن فارسی */
text-align: right; /* برای متن فارسی */
line-height: 1.7;
color: #333;
}

/* واکنش‌گرایی برای موبایل، تبلت و لپ‌تاپ‌های کوچک */
@media (max-width: 768px) {
.article-container {
margin: 15px;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
h1 { font-size: 2.2em !important; }
h2 { font-size: 1.7em !important; }
h3 { font-size: 1.2em !important; }
p, li { font-size: 1em !important; }
.guarantee-section h2 { font-size: 1.8em !important; }
.guarantee-section p { font-size: 1.1em !important; }
.infographic-item { flex-direction: column; align-items: center; text-align: center; border-right: none !important; border-bottom: 4px solid #4CAF50; }
.infographic-icon { margin-left: 0 !important; margin-bottom: 10px !important; }
.infographic-content h3, .infographic-content p { text-align: center !important; }
}

@media (max-width: 480px) {
.article-container {
margin: 10px;
padding: 20px;
border-radius: 8px;
}
h1 { font-size: 1.8em !important; }
h2 { font-size: 1.5em !important; }
h3 { font-size: 1.1em !important; }
p, li { font-size: 0.95em !important; }
.guarantee-section h2 { font-size: 1.5em !important; }
.guarantee-section p { font-size: 1em !important; }
}

/* استایل‌های پاراگراف و لیست */
p {
font-size: 1.1em;
line-height: 1.8;
margin-bottom: 1.2em;
color: #333;
text-align: justify;
}
ul, ol {
margin-bottom: 1.5em;
padding-right: 20px;
}
li {
margin-bottom: 0.8em;
line-height: 1.7;
color: #444;
}

/* استایل‌های جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 1em;
text-align: right;
}
th, td {
border: 1px solid #ddd;
padding: 12px 15px;
}
th {
background-color: #E6F3F7; /* هدر آبی روشن */
font-weight: bold;
color: #2D95BD;
}
td {
background-color: #fcfcfc;
}

/* بخش اینفوگرافیک مفهومی */
.infographic-section {
background-color: #F0F8FA; /* پس‌زمینه آبی بسیار روشن */
padding: 30px;
border-radius: 12px;
margin: 2.5em 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.infographic-item {
display: flex;
align-items: flex-start; /* ترازبندی عناصر به بالا */
margin-bottom: 25px;
padding: 15px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
border-right: 4px solid #4CAF50; /* خط سبز برای تاکید بر هر گام */
}
.infographic-item:last-child {
margin-bottom: 0;
}
.infographic-icon {
font-size: 2.2em;
margin-left: 15px;
color: #2D95BD; /* رنگ آیکون */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
line-height: 1; /* برای ترازبندی عمودی بهتر */
}
.infographic-content h3 {
font-size: 1.3em;
color: #1C658C;
margin-top: 0;
margin-bottom: 0.5em;
font-weight: 600;
}
.infographic-content p {
font-size: 1em;
line-height: 1.7;
color: #555;
margin-bottom: 0;
}

/* بخش “تضمینی” با استایل متمایز */
.guarantee-section {
background: linear-gradient(135deg, #1C658C 0%, #2D95BD 100%); /* گرادیان آبی */
color: #fff;
padding: 35px;
border-radius: 15px;
text-align: center;
margin: 3em 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.guarantee-section h2 {
color: #fff !important; /* رنگ سفید برای عنوان داخل این بخش */
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0.8em !important;
font-size: 2em !important;
}
.guarantee-section p {
color: #F0F8FA !important; /* رنگ آبی بسیار روشن برای متن */
font-size: 1.2em !important;
line-height: 1.9 !important;
margin-bottom: 0 !important;
}

“`