“`html

/*
این کدهای CSS برای ارائه یک ظاهر زیبا و ریسپانسیو طراحی شده‌اند.
می‌توانید آن‌ها را در بخش سفارشی‌سازی CSS قالب سایت خود، یا در یک بلوک HTML سفارشی قرار دهید.
اگر از ویرایشگر بلوک وردپرس استفاده می‌کنید، می‌توانید این کدها را در یک بلوک “HTML سفارشی” (Custom HTML) در ابتدای مقاله قرار دهید.
برای بهترین نمایش، از فونت فارسی مناسب (مانند Vazirmatn یا IRANSans) در CSS سایت خود استفاده کنید.
*/

/* Global Styles for Readability and Base Design */
body {
font-family: ‘Vazirmatn’, sans-serif; /* توصیه: از یک فونت فارسی خوانا مانند Vazirmatn استفاده کنید */
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #f8f8f8; /* یک پس‌زمینه ملایم */
direction: rtl; /* برای پشتیبانی کامل از زبان فارسی */
text-align: right; /* برای راست‌چین کردن متن */
}

/* Main Container for Content – Ensures Responsiveness */
.container-thesis {
max-width: 900px;
margin: 20px auto;
padding: 20px 30px; /* Padding for inner content */
background-color: #fff;
border-radius: 12px; /* گوشه‌های گرد برای زیبایی */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* سایه جذاب */
}

/* Heading Styles – Distinct and Hierarchical */
h1 {
font-size: 2.8em; /* اندازه بزرگ برای عنوان اصلی */
font-weight: 800; /* بسیار ضخیم */
color: #1A237E; /* سرمه‌ای تیره برای عنوان اصلی */
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 4px solid #C5CAE9; /* خط زیرین برای جداکننده */
line-height: 1.3;
}

h2 {
font-size: 2.2em;
font-weight: 700; /* ضخیم */
color: #3949AB; /* سرمه‌ای متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom: 2px solid #E8EAF6; /* خط زیرین نازک‌تر */
position: relative;
}
h2::before { /* یک عنصر تزئینی کوچک برای H2 */
content: ‘▪’;
color: #7986CB;
position: absolute;
right: 0px;
top: 0px;
font-size: 0.8em;
}

h3 {
font-size: 1.6em;
font-weight: 600; /* نیمه‌ضخیم */
color: #5C6BC0; /* آبی بنفش ملایم */
margin-top: 35px;
margin-bottom: 18px;
padding-right: 10px;
border-right: 4px solid #9FA8DA; /* خط عمودی برای H3 */
}

p {
margin-bottom: 1.6em;
text-align: justify;
}

ul, ol {
margin-bottom: 1.8em;
padding-right: 28px;
list-style-position: inside; /* فهرست‌ها داخل بلوک متن */
}

li {
margin-bottom: 0.9em;
padding-right: 5px; /* فاصله برای بولت‌ها */
}

/* Table Styles – Clean and Readable */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1em;
min-width: 320px;
background-color: #fdfefe;
border-radius: 10px;
overflow: hidden; /* برای نمایش گوشه‌های گرد */
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

table thead tr {
background-color: #7986CB; /* آبی بنفش برای سربرگ */
color: #ffffff;
text-align: right;
}

table th,
table td {
padding: 14px 18px;
border: 1px solid #E8EAF6;
}

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

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

table tbody tr:hover { /* افکت هاور برای ردیف‌ها */
background-color: #EFEFFB;
}

table tbody tr:last-of-type {
border-bottom: 2px solid #7986CB;
}

/* Infographic / Highlight Box Styles – Visually Appealing Section */
.infographic-box {
background-color: #E8EAF6; /* پس‌زمینه آبی بنفش روشن */
border-right: 8px solid #3949AB; /* نوار کناری پررنگ */
padding: 25px 30px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}

.infographic-box h3 {
color: #1A237E;
margin-top: 0;
font-size: 2em;
border-right: none; /* حذف خط عمودی H3 داخل این باکس */
border-bottom: 1px dashed #A7B1E3; /* خط زیرین نقطه‌چین */
padding-bottom: 12px;
margin-bottom: 20px;
text-align: center;
padding-right: 0;
}
.infographic-box h3 span { /* برای آیکون کنار عنوان باکس */
margin-left: 10px;
font-size: 1.2em;
vertical-align: middle;
color: #3949AB;
}

.infographic-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
padding-right: 5px;
}

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

.infographic-item p {
margin: 0;
font-size: 1.15em;
color: #424242;
text-align: justify;
}

/* Responsive Adjustments for Various Devices */
@media (max-width: 992px) { /* Tablets and smaller laptops */
.container-thesis {
margin: 15px auto;
padding: 20px 25px;
}
h1 { font-size: 2.5em; margin-bottom: 35px; }
h2 { font-size: 2em; margin-top: 45px; }
h3 { font-size: 1.5em; margin-top: 30px; }
.infographic-box h3 { font-size: 1.8em; }
.infographic-item span.icon { font-size: 1.8em; margin-left: 12px; }
.infographic-item p { font-size: 1.1em; }
}

@media (max-width: 768px) { /* Medium Tablets and Large Phones */
.container-thesis {
margin: 10px;
padding: 15px 20px;
}
h1 { font-size: 2em; margin-bottom: 30px; padding-bottom: 15px; }
h2 { font-size: 1.8em; margin-top: 40px; margin-bottom: 20px; }
h3 { font-size: 1.4em; margin-top: 25px; margin-bottom: 15px; }
table { font-size: 0.9em; margin: 20px 0; }
table th, table td { padding: 10px 12px; }
.infographic-box { padding: 20px 25px; margin: 30px 0; }
.infographic-box h3 { font-size: 1.6em; margin-bottom: 15px; }
.infographic-item span.icon { font-size: 1.6em; margin-left: 10px; }
.infographic-item p { font-size: 1em; }
ul, ol { padding-right: 20px; }
}

@media (max-width: 480px) { /* Small Phones */
.container-thesis {
padding: 10px 15px;
margin: 5px;
border-radius: 8px;
}
h1 { font-size: 1.8em; text-align: right; border-bottom: 2px solid #C5CAE9; padding-bottom: 10px;}
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; padding-bottom: 8px;}
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; padding-right: 8px; border-right-width: 3px;}
table { font-size: 0.85em; }
table th, table td { padding: 8px 10px; }
.infographic-box { padding: 15px 20px; margin: 25px 0; border-right-width: 5px;}
.infographic-box h3 { font-size: 1.4em; }
.infographic-item { flex-direction: column; align-items: flex-end;} /* stack icon and text */
.infographic-item span.icon { margin-left: 0; margin-bottom: 5px; font-size: 1.4em; }
.infographic-item p { font-size: 0.95em; text-align: right;}
ul, ol { padding-right: 15px; }
}

/* Optional: Hide specific elements on very small screens if desired */
@media (max-width: 320px) {
h2::before { display: none; } /* Hide decorative element */
}

“`