/* Base styles */
:root {
–primary-text-color: #222831; /* Dark Blue-Gray */
–secondary-color: #00ADB5; /* Teal/Cyan */
–accent-color: #FFC107; /* Amber/Gold for subtle emphasis */
–background-color: #F8F8F8; /* Very Light Gray */
–container-bg-color: #FFFFFF; /* White for content area */
–border-color: #E0E0E0; /* Lighter Gray for borders */
–light-text-color: #777; /* Medium Gray for descriptions */
–hover-bg-color: #F0FBFB; /* Lightest teal for hover effects */
}

body {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif;
line-height: 1.8; /* Increased for better readability */
color: var(–primary-text-color);
background-color: var(–background-color);
margin: 0;
padding: 0;
direction: rtl; /* Ensure right-to-left for Persian content */
box-sizing: border-box;
-webkit-font-smoothing: antialiased; /* Better font rendering */
-moz-osx-font-smoothing: grayscale;
}

.container {
max-width: 1000px; /* Slightly wider for modern displays */
margin: 35px auto;
padding: 30px 35px;
background-color: var(–container-bg-color);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* More pronounced shadow */
border-radius: 16px; /* Smoother corners */
}

/* Headings – Enhanced Styling */
h1, h2, h3 {
color: var(–primary-text-color);
margin-top: 45px;
margin-bottom: 22px;
font-weight: 800; /* Extra bold for impact */
line-height: 1.35;
}

h1 {
font-size: 3.2em; /* Very large size */
color: var(–secondary-color);
text-align: center;
padding-bottom: 20px;
border-bottom: 4px solid var(–secondary-color);
margin-bottom: 50px;
letter-spacing: -0.03em; /* Tighter letter spacing for large titles */
text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow */
}

h2 {
font-size: 2.3em; /* Medium-large size */
color: var(–primary-text-color);
background-color: #E0F7FA; /* Lighter teal background */
padding: 15px 25px;
border-radius: 10px;
border-right: 6px solid var(–secondary-color); /* Distinct right border */
margin-top: 55px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
position: relative;
z-index: 1;
}
h2::before { /* Decorative element for H2 */
content: “◆”;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(–secondary-color);
font-size: 0.8em;
opacity: 0.7;
}

h3 {
font-size: 1.8em; /* Medium size */
color: var(–secondary-color); /* H3 uses secondary color */
border-bottom: 2px dashed #B2DFDB; /* Lighter, dashed border */
padding-bottom: 10px;
margin-top: 35px;
margin-bottom: 18px;
font-weight: 700;
}

p {
margin-bottom: 1.4em; /* More space between paragraphs */
font-size: 1.08em; /* Slightly larger text */
text-align: justify;
line-height: 1.9; /* Generous line height */
}

ul, ol {
margin-bottom: 1.4em;
padding-right: 30px; /* More padding for lists */
font-size: 1.05em;
}

li {
margin-bottom: 0.8em;
line-height: 1.7;
padding-right: 5px; /* Small indentation for list items */
}
li::before { /* Custom bullet point for ul */
content: “▪”;
color: var(–secondary-color);
display: inline-block;
width: 1em;
margin-right: -1em;
position: relative;
left: -10px;
}
ol li::before { content: none; } /* Remove custom bullet for ordered lists */

strong {
color: var(–primary-text-color);
font-weight: 700;
}

a {
color: var(–secondary-color);
text-decoration: none;
transition: color 0.3s ease, border-bottom 0.3s ease;
border-bottom: 1px dashed var(–secondary-color);
padding-bottom: 1px;
}
a:hover {
color: #008C94; /* Darker teal on hover */
border-bottom: 1px solid #008C94;
}

/* Table of Contents – Enhanced */
.toc {
background-color: #F0F8F9; /* Very light teal background */
border: 1px solid #B2DFDB; /* Light teal border */
border-radius: 12px;
padding: 25px;
margin: 40px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.toc h3 {
margin-top: 0;
border-bottom: 3px solid var(–secondary-color);
padding-bottom: 12px;
color: var(–primary-text-color);
font-size: 2em;
text-align: center;
font-weight: 800;
letter-spacing: -0.02em;
}
.toc ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
.toc li {
margin-bottom: 10px;
font-size: 1.15em;
}
.toc li a {
color: var(–primary-text-color);
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 8px 15px;
border-radius: 8px;
border-bottom: none; /* Remove default link border */
}
.toc li a:hover {
color: var(–secondary-color);
background-color: var(–hover-bg-color);
transform: translateX(5px); /* Slight hover animation */
}
.toc li ul {
padding-right: 25px;
margin-top: 8px;
font-size: 0.98em;
list-style: none; /* Sub-list also uses custom bullet */
}
.toc li ul li::before {
content: “•”; /* Custom bullet for sub-list */
color: var(–accent-color);
font-size: 1.2em;
top: 0; /* Align with text */
}
.toc li ul li a {
padding: 6px 12px;
}

/* Educational Table – Enhanced */
.edu-table {
width: 100%;
border-collapse: separate; /* Allows border-radius on cells */
border-spacing: 0;
margin: 40px 0;
font-size: 1.05em;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden; /* Ensures rounded corners apply to content */
}

.edu-table th, .edu-table td {
border: 1px solid #CFD8DC; /* Lighter border color for cells */
padding: 16px 20px;
text-align: right;
line-height: 1.6;
}

.edu-table th {
background-color: var(–secondary-color);
color: white;
font-weight: 700;
font-size: 1.15em;
text-align: center;
border-bottom: 2px solid var(–secondary-color);
}

.edu-table tr:nth-child(even) {
background-color: #FDFDFD; /* Slightly off-white for even rows */
}

.edu-table tr:hover {
background-color: #E0F7FA; /* Light teal on hover */
cursor: default;
}
.edu-table td strong {
color: var(–secondary-color);
}

/* Infographic Replacement – Highly Designed */
.infographic-block {
background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 100%); /* Gradient background */
border-left: 8px solid var(–secondary-color);
padding: 30px;
margin: 50px 0;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
display: flex;
flex-wrap: wrap;
gap: 25px; /* More space between items */
justify-content: center;
position: relative;
z-index: 1;
overflow: hidden; /* Contain inner elements */
}

.infographic-block::before {
content: “💡 مسیر پیش‌پردازش داده در داده‌کاوی: از خام تا آماده 💡”;
display: block;
width: 100%;
text-align: center;
font-size: 2em; /* Larger title */
font-weight: 800;
color: var(–primary-text-color);
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 3px dashed var(–secondary-color); /* More prominent dashed border */
text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.02);
}

.infographic-item {
background-color: var(–container-bg-color);
border: 1px solid #B2DFDB; /* Light teal border */
border-radius: 10px;
padding: 20px 25px;
text-align: center;
flex: 1 1 calc(33% – 25px); /* 3 items per row on large screens */
min-width: 300px; /* Minimum width before wrapping */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.4s ease, box-shadow 0.4s ease; /* Smoother transitions */
position: relative;
}

.infographic-item:hover {
transform: translateY(-8px) scale(1.02); /* More dynamic hover effect */
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
}

.infographic-item .icon {
font-size: 3em; /* Larger icons */
margin-bottom: 12px;
color: var(–secondary-color);
display: block;
line-height: 1; /* Align icon vertically */
}

.infographic-item .title {
font-weight: 800;
font-size: 1.3em;
color: var(–primary-text-color);
margin-bottom: 10px;
text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.02);
}

.infographic-item .description {
font-size: 1em;
color: var(–light-text-color);
line-height: 1.6;
}

/* Conclusion – Enhanced */
.conclusion {
background-color: #E6F7F8; /* Light teal background */
border-top: 5px solid var(–secondary-color);
padding: 30px;
margin-top: 60px;
border-radius: 0 0 16px 16px; /* Match container border-radius */
text-align: center;
font-size: 1.2em;
font-weight: 500;
color: var(–primary-text-color);
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
}
.conclusion p {
margin-bottom: 0; /* No extra margin for last paragraph */
line-height: 1.7;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
.container {
max-width: 90%;
margin: 30px auto;
padding: 25px 30px;
}
h1 { font-size: 2.8em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
.infographic-item {
flex: 1 1 calc(50% – 25px); /* 2 items per row on tablets */
}
}

@media (max-width: 768px) {
.container {
margin: 25px auto;
padding: 20px 25px;
border-radius: 12px;
}
h1 { font-size: 2.4em; margin-bottom: 35px;}
h2 { font-size: 1.9em; padding: 12px 20px; border-right-width: 5px;}
h3 { font-size: 1.5em; }
p { font-size: 1.0em; margin-bottom: 1.2em; line-height: 1.7;}
ul, ol, li { font-size: 1.0em; }
.toc h3 { font-size: 1.8em; }
.toc li { font-size: 1.05em; }
.infographic-block {
padding: 25px;
gap: 20px;
}
.infographic-block::before {
font-size: 1.7em;
margin-bottom: 25px;
padding-bottom: 15px;
}
.infographic-item {
flex: 1 1 100%; /* 1 item per row on mobile */
max-width: 100%;
min-width: unset; /* Allow it to shrink */
}
.infographic-item .icon { font-size: 2.5em; }
.infographic-item .title { font-size: 1.2em; }
.infographic-item .description { font-size: 0.95em; }
.edu-table th, .edu-table td {
padding: 14px 18px;
font-size: 0.9em;
}
.conclusion { font-size: 1.05em; padding: 25px;}
}

@media (max-width: 480px) {
.container {
margin: 15px;
padding: 15px 18px;
border-radius: 10px;
}
h1 { font-size: 2em; padding-bottom: 15px; margin-bottom: 28px;}
h2 { font-size: 1.7em; padding: 10px 15px; border-right-width: 4px;}
h3 { font-size: 1.3em; }
p { line-height: 1.6; }
li::before { left: -5px; } /* Adjust custom bullet position */
.toc h3 { font-size: 1.6em; }
.toc li { font-size: 0.98em; }
.infographic-block {
padding: 20px;
gap: 15px;
border-left-width: 6px;
}
.infographic-block::before {
font-size: 1.4em;
margin-bottom: 20px;
padding-bottom: 12px;
}
.infographic-item {
padding: 18px 20px;
}
.infographic-item .icon { font-size: 2.2em; }
.infographic-item .title { font-size: 1.1em; }
.infographic-item .description { font-size: 0.9em; }
.edu-table th, .edu-table td {
padding: 10px 12px;
font-size: 0.85em;
}
.conclusion { font-size: 1em; padding: 20px;}
}

/* Styles for very large screens like TVs – ensure content doesn’t stretch too thin */
@media (min-width: 1920px) {
.container {
max-width: 1200px; /* Max width for readability on very large screens */
padding: 40px 60px;
}
h1 { font-size: 3.8em; }
h2 { font-size: 2.6em; }
h3 { font-size: 2em; }
p, ul, ol, li { font-size: 1.15em; }
.infographic-block::before { font-size: 2.4em; }
.infographic-item .icon { font-size: 3.5em; }
.infographic-item .title { font-size: 1.4em; }
.infographic-item .description { font-size: 1.05em; }
.conclusion { font-size: 1.3em; }
}