/* Responsive Styling for various devices */
/* General styles for readability and aesthetics */
body {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* Fallback fonts */
line-height: 1.7;
color: #34495E;
background-color: #F8F9FA;
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Main Container */
div[style*=”max-width: 100%”] {
max-width: 900px; /* Optimal width for readability on larger screens */
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
background-color: #FFFFFF; /* White background for main content */
border-radius: 10px; /* Slightly rounded corners */
}

/* Headings */
h1 {
font-size: 2.5em; /* Default large size */
font-weight: bold;
text-align: center;
color: #2C3E50; /* Dark blue/navy */
margin-bottom: 40px;
padding: 15px 0;
border-bottom: 3px solid #3498DB; /* Accent blue underline */
}

h2 {
font-size: 2em; /* Slightly smaller than H1 */
font-weight: bold;
color: #3498DB; /* Accent blue */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #ECF0F1; /* Light grey underline */
padding-bottom: 10px;
}

h3 {
font-size: 1.4em;
font-weight: bold;
color: #2C3E50; /* Dark blue/navy */
margin-top: 30px;
margin-bottom: 15px;
}

h4 {
font-size: 1.2em;
color: #3498DB;
margin-top: 0;
margin-bottom: 10px;
}

p {
margin-bottom: 20px;
text-align: justify; /* Justify text for a clean look */
}

ul, ol {
margin-bottom: 20px;
padding-left: 20px;
}

li {
margin-bottom: 8px;
}

/* Table of Contents */
div[style*=”border-left: 5px solid #F39C12″] { /* TOC specific div */
background-color: #ECF0F1; /* Light grey background */
padding: 25px;
border-radius: 10px;
margin-bottom: 30px;
border-left: 5px solid #F39C12; /* Gold accent border */
}
div[style*=”border-left: 5px solid #F39C12″] h2 {
color: #3498DB; /* Blue for TOC heading */
border-bottom: none;
margin-bottom: 15px;
}
div[style*=”border-left: 5px solid #F39C12″] a {
color: #34495E; /* Dark grey for links */
text-decoration: none;
transition: color 0.3s ease;
}
div[style*=”border-left: 5px solid #F39C12″] a:hover {
color: #3498DB; /* Accent blue on hover */
}

/* Example Topics Section */
div[style*=”border-left: 5px solid #3498DB”] { /* Example Topics specific div */
background-color: #E8F6F8; /* Lighter blue background */
padding: 25px;
border-radius: 10px;
margin-top: 40px;
margin-bottom: 40px;
border-left: 5px solid #3498DB; /* Accent blue border */
}
div[style*=”border-left: 5px solid #3498DB”] h3 {
color: #2C3E50;
margin-top: 0;
}

/* Infographic Replacement Section */
div[style*=”border: 1px solid #F39C12″] { /* Infographic div */
background-color: #FDF3E6; /* Light yellow/gold background */
padding: 25px;
border-radius: 10px;
margin-top: 40px;
margin-bottom: 40px;
border: 1px solid #F39C12; /* Gold border */
}
div[style*=”display: flex”] { /* Flex container for infographic items */
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
div[style*=”box-shadow: 0 4px 8px rgba(0,0,0,0.1)”] { /* Infographic item */
flex: 1 1 300px; /* Allows items to shrink on smaller screens */
padding: 15px;
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-top: 4px solid; /* Varies per item: #F39C12 or #3498DB */
}
div[style*=”box-shadow: 0 4px 8px rgba(0,0,0,0.1)”] p {
font-size: 0.95em;
line-height: 1.6;
text-align: justify;
}
div[style*=”box-shadow: 0 4px 8px rgba(0,0,0,0.1)”] strong {
color: #2C3E50;
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
background-color: #FFFFFF;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow-x: auto; /* Enable horizontal scrolling for tables on small screens */
display: block; /* Make table responsive */
}
caption {
caption-side: top;
text-align: center;
font-size: 1.3em;
font-weight: bold;
color: #2C3E50;
padding: 10px 0;
}
th, td {
padding: 12px;
border: 1px solid #ddd;
text-align: right; /* RTL support */
}
thead tr {
background-color: #3498DB; /* Accent blue header */
color: #FFFFFF;
}
tbody tr:nth-child(even) { /* Zebra striping */
background-color: #ECF0F1; /* Light grey for even rows */
}
tbody tr:nth-child(odd) {
background-color: #FFFFFF;
}

/* Responsive Adjustments */
@media (max-width: 768px) { /* Tablets and smaller laptops */
h1 { font-size: 2em; margin-bottom: 30px; }
h2 { font-size: 1.8em; margin-top: 40px; margin-bottom: 20px; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 10px; }
div[style*=”max-width: 100%”] { padding: 15px; }
.infographic-item { flex: 1 1 100%; } /* Full width for infographic items */
table {
font-size: 0.9em; /* Smaller font in tables */
}
th, td {
padding: 8px; /* Smaller padding in tables */
}
}

@media (max-width: 480px) { /* Mobile phones */
h1 { font-size: 1.8em; padding: 10px 0; margin-bottom: 25px; }
h2 { font-size: 1.6em; margin-top: 30px; margin-bottom: 15px; }
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; }
div[style*=”max-width: 100%”] { padding: 10px; }
p, li { font-size: 0.95em; }
div[style*=”border-left: 5px solid #F39C12″],
div[style*=”border-left: 5px solid #3498DB”],
div[style*=”border: 1px solid #F39C12″] {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
}
table {
width: 100%;
display: block; /* Ensures table scrolls horizontally if content is too wide */
overflow-x: auto;
}
}

@media (min-width: 1200px) { /* Large screens (TVs, large monitors) */
div[style*=”max-width: 100%”] {
max-width: 1000px; /* Slightly wider for very large displays */
}
h1 { font-size: 3em; }
h2 { font-size: 2.2em; }
}