/*
* طراحی منحصر به فرد و رسپانسیو برای مقاله “نگارش پایان نامه با نمونه کار در حوزه هوش تجاری”
* این استایل‌ها برای نمایش بهینه در ویرایشگرهای بلوک، دسکتاپ، لپ‌تاپ، تبلت و موبایل طراحی شده‌اند.
* برای حفظ ظاهر و قابلیت شناسایی هدینگ‌ها، هم از کلاس‌ها و هم از استایل‌های inline برای عناصر کلیدی استفاده شده است.
*/

/* — General Article Container Styling — */
.article-container {
font-family: ‘B Nazanin’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت اصلی فارسی با فونت‌های جایگزین */
direction: rtl; /* جهت متن از راست به چپ برای فارسی */
text-align: justify; /* تراز کردن متن به صورت justify */
max-width: 960px; /* حداکثر عرض مقاله برای خوانایی بهتر در نمایشگرهای بزرگ */
margin: 30px auto; /* قرار دادن مقاله در مرکز صفحه */
padding: 35px;
background-color: #ffffff; /* پس‌زمینه سفید برای محتوا */
border-radius: 15px; /* گوشه‌های گرد برای زیبایی */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* سایه ظریف برای عمق دادن */
line-height: 1.9; /* فاصله خطوط برای خوانایی بهتر */
color: #2c3e50; /* رنگ متن اصلی (آبی تیره متمایل به خاکستری) */
}

/* — Responsive Adjustments (Mobile, Tablet, Laptop, TV) — */
/* لپ‌تاپ‌های کوچک و تبلت‌های بزرگ */
@media (max-width: 1200px) {
.article-container {
max-width: 90%;
padding: 30px;
}
}
/* تبلت‌ها و دسکتاپ‌های کوچک */
@media (max-width: 992px) {
.article-container {
max-width: 92%;
padding: 25px;
margin: 25px auto;
}
}
/* تبلت‌های پرتره و موبایل‌های بزرگ */
@media (max-width: 768px) {
.article-container {
max-width: 95%;
margin: 20px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
h1 { font-size: 2.4em !important; margin-bottom: 30px !important; padding-bottom: 12px !important; }
h2 { font-size: 1.9em !important; margin-top: 40px !important; margin-bottom: 20px !important; padding-right: 12px !important; }
h3 { font-size: 1.5em !important; margin-top: 30px !important; margin-bottom: 18px !important; padding-right: 8px !important; }
p, ul li { font-size: 0.98em; line-height: 1.8; }
}
/* موبایل‌ها */
@media (max-width: 480px) {
.article-container {
max-width: 100%;
margin: 0;
padding: 15px;
border-radius: 0;
box-shadow: none;
line-height: 1.7;
}
h1 { font-size: 2em !important; margin-bottom: 25px !important; padding-bottom: 10px !important; border-bottom-width: 2px !important;}
h2 { font-size: 1.6em !important; margin-top: 35px !important; margin-bottom: 15px !important; padding-right: 10px !important; border-right-width: 4px !important;}
h3 { font-size: 1.3em !important; margin-top: 25px !important; margin-bottom: 15px !important; padding-right: 6px !important; border-right-width: 2px !important;}
.infographic-block {
gap: 15px;
padding: 15px;
}
.infographic-item {
flex-basis: 100%; /* آیتم‌ها در موبایل زیر هم قرار می‌گیرند */
min-width: unset;
padding: 15px;
}
.infographic-item-icon {
font-size: 2em;
width: 50px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
}
.infographic-item h4 {
font-size: 1.1em;
}
.styled-table thead tr {
font-size: 0.9em;
}
.styled-table th, .styled-table td {
padding: 10px 12px;
font-size: 0.9em;
}
}

/* — Heading Styles — */
h1 {
font-family: ‘B Nazanin’, ‘Impact’, ‘Arial Black’, sans-serif;
font-size: 3em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* ضخامت فوق‌العاده */
color: #0a4f91; /* آبی تیره و قدرتمند */
text-align: center;
margin-bottom: 45px;
padding-bottom: 18px;
border-bottom: 4px solid #d0e9ff; /* خط جداکننده زیر عنوان */
}

h2 {
font-family: ‘B Nazanin’, ‘Georgia’, ‘serif’;
font-size: 2.4em;
font-weight: 700; /* ضخامت زیاد */
color: #007bff; /* آبی روشن‌تر برای زیرعنوان‌های اصلی */
margin-top: 60px;
margin-bottom: 30px;
padding-right: 18px;
border-right: 6px solid #a3d3ff; /* خط کناری برای زیبایی و جداسازی */
line-height: 1.3;
}

h3 {
font-family: ‘B Nazanin’, ‘Verdana’, ‘sans-serif’;
font-size: 1.8em;
font-weight: 600; /* ضخامت متوسط */
color: #0056b3; /* آبی میانه برای زیرعنوان‌های فرعی */
margin-top: 40px;
margin-bottom: 22px;
padding-right: 12px;
border-right: 4px solid #e7f3ff; /* خط کناری ظریف‌تر */
}

/* — Paragraph & List Styles — */
p {
margin-bottom: 1.2em;
line-height: 2;
font-size: 1.05em;
text-align: justify;
}

ul {
margin-right: 25px; /* تورفتگی از راست */
margin-bottom: 1.5em;
padding-right: 0;
list-style-type: ‘✔ ‘; /* بولت پوینت‌های خاص برای زیبایی */
color: #333;
}
ul li {
margin-bottom: 0.8em;
line-height: 1.8;
font-size: 1.02em;
padding-right: 5px; /* فاصله متن از بولت */
}

/* — Table Styles (Educational Table) — */
.styled-table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 40px 0;
font-size: 1.05em;
text-align: right;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); /* سایه برای جدول */
border-radius: 10px;
overflow: hidden; /* اطمینان از اعمال border-radius به گوشه‌ها */
}
.styled-table th, .styled-table td {
padding: 16px 22px;
border: 1px solid #e0e6eb; /* خطوط جداکننده خانه‌ها */
}
.styled-table thead tr {
background-color: #007bff; /* رنگ آبی برای هدر جدول */
color: #ffffff;
text-align: center;
font-weight: 700;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f8fbff; /* رنگ پس‌زمینه متناوب برای ردیف‌ها */
}
.styled-table tbody tr:hover {
background-color: #eaf6ff; /* تغییر رنگ هنگام هاور */
cursor: pointer;
}

/* — Infographic Block Styles — */
.infographic-block {
display: flex;
flex-wrap: wrap; /* اجازه شکست خط برای آیتم‌ها */
gap: 30px; /* فاصله بین آیتم‌های اینفوگرافیک */
margin: 50px 0;
padding: 30px;
background-color: #e9f5ff; /* پس‌زمینه آبی روشن برای کل بلوک */
border-radius: 12px;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05); /* سایه داخلی برای عمق بیشتر */
justify-content: center; /* مرکز قرار دادن آیتم‌ها */
align-items: stretch; /* هم‌راستا کردن ارتفاع آیتم‌ها */
}

.infographic-item {
flex: 1 1 calc(33% – 30px); /* 3 آیتم در هر ردیف، با احتساب فاصله */
min-width: 280px; /* حداقل عرض آیتم قبل از شکست خط */
background-color: #ffffff;
border: 1px solid #c2e0ff; /* حاشیه آبی روشن */
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); /* سایه برای هر آیتم */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن برای هاور */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #333;
}

.infographic-item:hover {
transform: translateY(-7px); /* حرکت به سمت بالا هنگام هاور */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* سایه عمیق‌تر هنگام هاور */
}

.infographic-item-icon {
font-size: 3em; /* سایز بزرگ برای آیکون */
color: #007bff; /* رنگ آبی برای آیکون */
margin-bottom: 20px;
display: flex; /* برای مرکز کردن بهتر آیکون */
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
border-radius: 50%; /* دایره‌ای کردن آیکون */
background-color: #dbeaff; /* پس‌زمینه آبی روشن‌تر برای آیکون */
border: 2px solid #a3d3ff; /* حاشیه برای آیکون */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}

.infographic-item h4 {
font-size: 1.4em;
font-weight: 700;
color: #0a4f91; /* آبی تیره برای عنوان آیتم */
margin-top: 0;
margin-bottom: 12px;
line-height: 1.4;
}

.infographic-item p {
font-size: 0.98em;
color: #555;
line-height: 1.8;
text-align: center;
margin-bottom: 0;
}

/* Responsive for infographic items */
@media (max-width: 992px) {
.infographic-item {
flex: 1 1 calc(50% – 25px); /* 2 آیتم در هر ردیف روی تبلت */
}
}
@media (max-width: 480px) {
.infographic-item {
flex: 1 1 100%; /* 1 آیتم در هر ردیف روی موبایل */
padding: 20px;
}
}

/* — Separator Line — */
.separator {
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 123, 255, 0.4), rgba(0, 0, 0, 0)); /* خط جداکننده گرادیان */
margin: 60px 0;
}

/* — General Text & Link Styles (optional, for robustness) — */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

“`