/* Basic Reset & Font */
body {
font-family: ‘Arial’, ‘Helvetica Neue’, ‘Helvetica’, sans-serif; /* A universal, clean font */
line-height: 1.7;
color: #2C3E50; /* Dark Slate Blue for main text */
background-color: #F8F9FA; /* Light grayish-white background */
margin: 0;
padding: 0;
box-sizing: border-box; /* Include padding and border in element’s total width and height */
}

/* Main Container for Content */
.container {
max-width: 960px; /* Optimal reading width for desktops/laptops */
margin: 40px auto; /* Center the container, add vertical spacing */
padding: 20px 25px;
background-color: #FFFFFF; /* White background for the content area */
border-radius: 12px; /* Softly rounded corners */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
direction: rtl; /* Right-to-left for Persian text */
text-align: right; /* Align text to the right */
}

/* Heading Styles */
h1, h2, h3 {
color: #34495E; /* Wet Asphalt for general headings */
font-weight: bold;
margin-top: 35px;
margin-bottom: 20px;
line-height: 1.4;
}

h1 {
font-size: 2.8em; /* Large size for the main title */
text-align: center;
margin-bottom: 40px;
color: #2C3E50; /* Darker color for H1 */
padding-bottom: 15px;
border-bottom: 2px solid #ECF0F1; /* A subtle separator line */
}

h2 {
font-size: 2.2em; /* Prominent size for main sections */
padding-bottom: 10px;
border-bottom: 1px solid #ECF0F1; /* Lighter separator for H2s */
}

h3 {
font-size: 1.6em; /* Clear distinction for sub-sections */
color: #3498DB; /* Bright Blue accent for H3s */
}

p {
margin-bottom: 1em;
text-align: justify; /* Justify text for a clean, block-like appearance */
}

ul, ol {
margin-bottom: 1em;
padding-right: 20px; /* Indent lists for readability */
}

li {
margin-bottom: 0.5em;
}

a {
color: #3498DB; /* Bright Blue for links */
text-decoration: none;
transition: color 0.3s ease; /* Smooth color change on hover */
}

a:hover {
color: #2980B9; /* Slightly darker blue on hover */
text-decoration: underline;
}

/* Table Styling for Data Presentation */
table {
width: 100%;
border-collapse: collapse; /* Remove double borders */
margin: 30px 0;
background-color: #FFFFFF;
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners for table content */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft shadow for tables */
}

th, td {
padding: 15px;
border: 1px solid #ECF0F1; /* Light borders for cells */
text-align: right;
}

th {
background-color: #3498DB; /* Blue header background */
color: #FFFFFF;
font-weight: bold;
font-size: 1.1em;
}

tr:nth-child(even) {
background-color: #FDFEFE; /* Very light gray for even rows to improve readability */
}

/* Infographic-like Section Styling (Visual Representation of Key Points) */
.infographic-box {
background-color: #EBF5FB; /* Lighter blue background for the entire infographic box */
border-radius: 10px;
padding: 25px;
margin: 40px 0;
display: flex; /* Use flexbox for flexible layout of items */
flex-direction: column; /* Stack items vertically */
gap: 20px; /* Space between items */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.infographic-item {
display: flex;
align-items: flex-start; /* Align icon and text at the top */
gap: 15px; /* Space between icon and text */
background-color: #FFFFFF;
padding: 18px 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
border-right: 5px solid #3498DB; /* Accent border on the right */
}

.infographic-icon {
font-size: 2.2em; /* Large icon size */
color: #3498DB; /* Blue icon color */
line-height: 1; /* Adjust line height for icons */
}

.infographic-content strong {
display: block; /* Make the strong text a block element for better spacing */
font-size: 1.3em;
color: #2C3E50;
margin-bottom: 5px;
}

.infographic-content p {
margin: 0; /* Remove default paragraph margin */
font-size: 0.95em;
color: #5D6D7E; /* Slightly lighter text color for description */
}

/* Table of Contents Styling */
.toc {
background-color: #FDFEFE; /* Very light background for ToC */
border: 1px solid #ECF0F1;
border-radius: 8px;
padding: 20px 25px;
margin-bottom: 35px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.toc strong {
display: block;
font-size: 1.4em;
color: #2C3E50;
margin-bottom: 15px;
border-bottom: 1px dashed #ECF0F1; /* Dashed line separator */
padding-bottom: 10px;
}

.toc ul {
list-style: none; /* Remove default list bullets */
padding: 0;
margin: 0;
}

.toc li {
margin-bottom: 10px;
}

.toc a {
font-size: 1.1em;
color: #5D6D7E; /* Muted link color */
transition: color 0.3s ease, padding-right 0.3s ease; /* Smooth transition for hover effect */
padding-right: 5px;
display: block; /* Make the link take full width */
}

.toc a:hover {
color: #3498DB; /* Bright blue on hover */
padding-right: 10px; /* Slight right shift on hover */
}

/* Responsive Adjustments for Mobile, Tablet, Laptop, TV */
/* Tablets and small laptops (max-width 768px) */
@media (max-width: 768px) {
.container {
margin: 20px auto;
padding: 15px;
}
h1 { font-size: 2.2em; margin-bottom: 30px; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
.infographic-item {
flex-direction: column; /* Stack icon and text vertically */
text-align: center;
border-right: none; /* Remove right border */
border-top: 5px solid #3498DB; /* Add top border for accent */
}
.infographic-icon { margin-bottom: 10px; }
.infographic-content strong { font-size: 1.2em; }
.toc strong { font-size: 1.2em; }
.toc a { font-size: 1em; }
}

/* Mobile phones (max-width 480px) */
@media (max-width: 480px) {
.container {
margin: 10px auto;
padding: 10px;
border-radius: 8px;
}
h1 { font-size: 1.8em; margin-bottom: 25px; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
p { font-size: 0.95em; }
th, td { padding: 10px; font-size: 0.9em; } /* Smaller padding and font for table on mobile */
.infographic-box { padding: 15px; }
.infographic-item { padding: 12px 15px; }
.infographic-icon { font-size: 1.8em; }
}

/* Print styles */
@media print {
body { background-color: #fff; }
.container {
box-shadow: none;
border: none;
margin: 0;
padding: 0;
max-width: none;
width: 100%;
}
h1, h2, h3, p, ul, ol, table, .infographic-box { color: #000 !important; background-color: #fff !important; }
a { text-decoration: underline; color: #000; }
.infographic-box, .toc { border: 1px solid #eee; page-break-inside: avoid; }
th { background-color: #eee !important; color: #000 !important; }
.infographic-item { border: 1px solid #eee; border-right: 5px solid #999; }
}