“`html

/*
این کدهای CSS به منظور نمایش بهتر مقاله در محیط‌های مختلف (وب، ویرایشگر بلوک) و پیاده‌سازی درخواست شما برای سایز و ضخامت فونت هدینگ‌ها و طراحی منحصر به فرد است.
پس از کپی در ویرایشگر بلوک، ممکن است برخی ویرایشگرها تمام استایل‌ها را حفظ نکنند، اما ساختار HTML (تگ‌های h1, h2, h3, p, ul, table, div) تضمین کننده نمایش صحیح و سئو فرندلی محتوا خواهد بود.
*/
body {
font-family: ‘Tahoma’, sans-serif;
line-height: 1.8;
color: #333;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
border-radius: 8px;
box-sizing: border-box; /* برای رسپانسیو بودن بهتر */
}
.container {
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
}
h1 {
font-size: 2.8em; /* سایز بزرگ برای هدینگ اصلی */
color: #0056b3; /* آبی حرفه‌ای */
text-align: center;
margin-bottom: 40px;
font-weight: 800; /* ضخیم‌تر */
line-height: 1.3;
}
h2 {
font-size: 2.2em; /* سایز متوسط برای هدینگ‌های اصلی بخش */
color: #004085; /* آبی تیره‌تر */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #e0e0e0; /* خط زیرین برای جداکننده */
padding-bottom: 10px;
font-weight: 700; /* ضخیم */
line-height: 1.4;
}
h3 {
font-size: 1.8em; /* سایز کوچک‌تر برای زیربخش‌ها */
color: #0056b3;
margin-top: 35px;
margin-bottom: 20px;
font-weight: 600; /* نیمه‌ضخیم */
line-height: 1.5;
}
p {
margin-bottom: 1em;
text-align: justify;
}
ul, ol {
margin-bottom: 1em;
padding-right: 25px; /* برای لیست‌ها */
}
li {
margin-bottom: 0.7em;
}
strong {
color: #004085; /* رنگ آبی تیره برای متن‌های مهم */
}
em {
color: #555; /* رنگ خاکستری برای تاکیدات */
}
a {
color: #007bff; /* رنگ لینک استاندارد */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* استایل برای جدول */
.table-container {
margin: 30px 0;
overflow-x: auto; /* برای نمایش بهتر در موبایل */
}
table {
width: 100%;
border-collapse: collapse;
margin: 0;
background-color: #f8f8f8;
border: 1px solid #ddd;
}
th, td {
border: 1px solid #ddd;
padding: 12px 15px;
text-align: right;
vertical-align: top;
}
th {
background-color: #e0f2f7; /* سربرگ آبی روشن */
font-weight: bold;
color: #004085;
}
tr:nth-child(even) {
background-color: #f2f2f2; /* ردیف‌های زوج */
}
tr:hover {
background-color: #e6f7ff; /* هاور روی ردیف‌ها */
}

/* استایل برای اینفوگرافیک شبیه‌سازی شده */
.infographic-box {
background-color: #eef7ff; /* پس‌زمینه آبی بسیار روشن */
border-left: 5px solid #0056b3; /* خط کناری آبی */
padding: 25px;
margin: 40px 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* سایه ملایم */
}
.infographic-box h3 {
color: #004085;
text-align: center;
margin-top: 0;
font-size: 2em;
border-bottom: none; /* بدون خط زیرین */
}
.infographic-box ul {
list-style: none;
padding: 0;
display: flex; /* برای نمایش در کنار هم */
flex-wrap: wrap; /* برای شکستن به خط بعد در صورت نیاز */
justify-content: center; /* تراز وسط */
}
.infographic-box li {
background-color: #ffffff;
border: 1px solid #cceeff;
margin: 10px;
padding: 15px 20px;
border-radius: 10px;
width: calc(33% – 40px); /* 3 آیتم در هر ردیف در صفحات بزرگتر */
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
font-size: 1.1em;
color: #333;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
transition: transform 0.3s ease;
}
.infographic-box li:hover {
transform: translateY(-5px); /* افکت هاور */
}
.infographic-box li strong {
display: block;
margin-bottom: 8px;
font-size: 1.2em;
color: #0056b3;
}
.infographic-box li::before {
content: “✨”; /* آیکون تزئینی */
display: block;
font-size: 1.5em;
margin-bottom: 10px;
}

/* استایل برای مطالعه موردی */
.case-study {
background-color: #fff9e6; /* پس‌زمینه زرد روشن */
border-left: 5px solid #ffcc00; /* خط کناری زرد */
padding: 25px;
margin: 40px 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.case-study h3 {
color: #c29100; /* زرد تیره‌تر */
text-align: center;
margin-top: 0;
border-bottom: none;
}
.case-study ol {
padding-right: 20px;
}
.case-study ol li {
margin-bottom: 0.8em;
}

/* استایل برای بخش سوالات متداول */
.faq-section {
background-color: #f0f8ff; /* آبی روشن */
border-top: 2px dashed #b3d9ff;
padding: 25px;
margin: 40px 0;
border-radius: 8px;
}
.faq-section h3 {
color: #004085;
text-align: center;
border-bottom: none;
}
.faq-item {
margin-bottom: 20px;
border-bottom: 1px dotted #cceeff;
padding-bottom: 15px;
}
.faq-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.faq-item strong {
display: block;
margin-bottom: 8px;
font-size: 1.15em;
color: #0056b3;
}

/* استایل برای بخش تماس */
.contact-info {
background-color: #e6ffe6; /* سبز روشن */
border-top: 3px solid #4CAF50;
padding: 30px;
margin-top: 60px;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.contact-info p {
font-size: 1.15em;
margin-bottom: 10px;
color: #333;
}
.contact-info a {
color: #007bff;
text-decoration: none;
font-weight: bold;
}
.contact-info a:hover {
text-decoration: underline;
}
.contact-info strong {
color: #218838; /* سبز تیره برای هایلایت */
font-size: 1.2em;
}
.cta-button {
display: inline-block;
background-color: #007bff;
color: white;
padding: 15px 30px;
border-radius: 5px;
text-decoration: none;
font-size: 1.2em;
margin-top: 20px;
transition: background-color 0.3s ease, transform 0.3s ease;
font-weight: bold;
}
.cta-button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.cta-button:active {
transform: translateY(0);
}

/* رسپانسیو بودن: تنظیمات برای موبایل، تبلت و صفحات بزرگتر */
@media (max-width: 768px) {
h1 { font-size: 2.2em; margin-bottom: 30px; }
h2 { font-size: 1.8em; margin-top: 40px; margin-bottom: 20px; }
h3 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; }
.infographic-box li {
width: calc(50% – 20px); /* 2 آیتم در هر ردیف در تبلت */
margin: 8px;
padding: 12px 15px;
}
body { padding: 15px; }
th, td { padding: 10px; }
.contact-info p { font-size: 1.05em; }
.cta-button { padding: 12px 25px; font-size: 1.1em; }
}

@media (max-width: 480px) {
h1 { font-size: 1.8em; margin-bottom: 25px; }
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 10px; }
.infographic-box li {
width: calc(100% – 20px); /* 1 آیتم در هر ردیف در موبایل */
margin: 8px 0;
padding: 10px 15px;
}
body { padding: 10px; }
.container { padding: 15px; }
th, td { padding: 8px; font-size: 0.9em; }
.contact-info p { font-size: 1em; }
.cta-button { padding: 10px 20px; font-size: 1em; }
ul, ol { padding-right: 18px; }
}

/* برای تلویزیون یا صفحات بسیار بزرگ */
@media (min-width: 1200px) {
body { max-width: 1100px; padding: 30px; }
h1 { font-size: 3.2em; }
h2 { font-size: 2.6em; }
h3 { font-size: 2.1em; }
.infographic-box li {
width: calc(25% – 40px); /* 4 آیتم در هر ردیف */
}
}

“`