/* Global Styles for Readability and Responsiveness */
body, html {
margin: 0;
padding: 0;
font-family: ‘Vazirmatn’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; /* استفاده از فونت استاندارد و وزیری برای فارسی */
line-height: 1.8; /* افزایش خطوط برای خوانایی بهتر */
color: #333;
background-color: #fcfcfc;
direction: rtl; /* برای پشتیبانی از زبان فارسی */
text-align: right; /* برای پشتیبانی از زبان فارسی */
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px 30px; /* افزایش پدینگ برای زیبایی */
background-color: #fff;
border-radius: 12px; /* گردتر کردن لبه‌ها */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* سایه عمیق‌تر و زیباتر */
border: 1px solid #eee; /* خط دور برای تمایز */
}
/* Headings */
h1 {
font-size: 2.6em; /* بزرگ‌تر کردن H1 */
color: #1A5276; /* آبی تیره */
font-weight: 800; /* ضخیم‌تر */
margin-bottom: 30px;
border-bottom: 4px solid #E8F6F3; /* خط زیرین سبزآبی روشن */
padding-bottom: 20px;
text-align: center;
line-height: 1.3;
}
h2 {
font-size: 2em; /* بزرگ‌تر کردن H2 */
color: #0E6C7B; /* فیروزه‌ای */
font-weight: 700;
margin-top: 45px; /* فاصله بیشتر از بالا */
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #F0F8FF; /* خط زیرین آبی کمرنگ */
text-align: right;
}
h3 {
font-size: 1.6em; /* بزرگ‌تر کردن H3 */
color: #2E8B57; /* سبز دریایی */
font-weight: 600;
margin-top: 35px;
margin-bottom: 15px;
text-align: right;
}
/* Paragraphs and Lists */
p {
margin-bottom: 1.5em; /* فاصله بیشتر بین پاراگراف‌ها */
text-align: justify;
}
ul, ol {
margin-bottom: 1.5em;
padding-right: 30px; /* برای راست‌چین کردن لیست‌ها */
padding-left: 0;
}
li {
margin-bottom: 0.8em;
padding-right: 5px; /* فاصله از آیکون لیست */
list-style-position: inside; /* قرارگیری دایره لیست درون */
text-align: justify;
}
/* Custom List Style for better visuals */
ul li::before {
content: “•”; /* دایره پیش‌فرض */
color: #FFB74D; /* رنگ طلایی */
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: 5px;
margin-left: -1em; /* برای همترازی با متن */
}

/* Table Styling */
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 35px 0;
font-size: 1em; /* اندازه فونت جدول کمی بزرگتر */
min-width: 400px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); /* سایه عمیق‌تر */
border-radius: 10px; /* لبه‌های گردتر */
overflow: hidden;
}
.styled-table thead tr {
background-color: #0E6C7B; /* فیروزه‌ای */
color: #ffffff;
text-align: right; /* راست‌چین کردن هدر */
}
.styled-table th,
.styled-table td {
padding: 15px 20px; /* پدینگ بیشتر */
border: 1px solid #ddd;
}
.styled-table tbody tr {
border-bottom: 1px solid #eeeeee;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f8f8f8; /* رنگ روشن‌تر برای ردیف‌های زوج */
}
.styled-table tbody tr:last-of-type {
border-bottom: 3px solid #0E6C7B; /* خط ضخیم‌تر در انتهای جدول */
}
.styled-table ul {
list-style-type: none; /* حذف لیست استایل پیش‌فرض برای آیتم‌های جدول */
padding: 0;
margin: 0;
}
.styled-table ul li::before {
content: “▪”; /* مربع برای لیست‌های داخل جدول */
color: #2E8B57; /* سبز دریایی */
}

/* Infographic Styling (Text-based visual) */
.infographic-box {
background-color: #E8F6F3; /* سبزآبی روشن */
border-right: 8px solid #FFB74D; /* خط عمودی طلایی برای تمایز در راست‌چین */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
text-align: right;
}
.infographic-title {
font-size: 1.8em;
color: #1A5276;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px dashed #B2DFDB; /* خط چین برای جداکننده عنوان */
padding-bottom: 10px;
}
.infographic-item {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
flex-direction: row-reverse; /* برای راست‌چین کردن آیکون و متن */
}
.infographic-icon {
font-size: 1.4em;
color: #0E6C7B; /* فیروزه‌ای */
margin-left: 15px; /* فاصله از متن در راست‌چین */
margin-right: 0;
line-height: 1.6;
font-weight: bold;
background-color: #D4EEFF; /* پس‌زمینه روشن برای آیکون */
padding: 8px 12px;
border-radius: 50%; /* دایره‌ای کردن پس‌زمینه */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}
.infographic-text {
flex: 1;
font-size: 1.1em;
color: #444;
}
.infographic-text strong {
color: #1A5276;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px;
}
h1 {
font-size: 2.2em;
margin-bottom: 20px;
padding-bottom: 15px;
}
h2 {
font-size: 1.7em;
margin-top: 35px;
margin-bottom: 15px;
}
h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}
p {
margin-bottom: 1.2em;
}
.styled-table {
font-size: 0.9em;
}
.styled-table th,
.styled-table td {
padding: 10px 12px;
}
.infographic-box {
padding: 20px;
margin: 30px 0;
}
.infographic-title {
font-size: 1.6em;
margin-bottom: 15px;
}
.infographic-item {
flex-direction: column; /* در موبایل آیکون بالا، متن پایین */
align-items: center;
text-align: center;
}
.infographic-icon {
margin-left: 0;
margin-bottom: 10px;
padding: 6px 10px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8em;
padding-bottom: 10px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.1em;
}
.styled-table {
display: block;
overflow-x: auto; /* اسکرول افقی برای جدول در موبایل */
white-space: nowrap;
}
.styled-table thead, .styled-table tbody, .styled-table th, .styled-table td, .styled-table tr {
display: block;
}
.styled-table tr {
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.styled-table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50%;
text-align: right;
}
.styled-table td::before {
content: attr(data-label);
position: absolute;
right: 6px;
top: 6px;
font-weight: bold;
width: 45%;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #1A5276;
}
.infographic-title {
font-size: 1.4em;
}
.infographic-text {
font-size: 1em;
}
}

“`