“`html

/* Global Styles for a clean, academic, and responsive look */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* A widely readable Farsi-friendly font */
line-height: 1.7; /* Increased line height for better readability */
color: #333; /* Darker grey for main text for good contrast */
background-color: #f8f9fa; /* Very light grey background */
margin: 0;
padding: 0;
direction: rtl; /* Right-to-left for Farsi */
text-align: justify;
}
/* Main content wrapper for consistent margins and background */
.article-container {
max-width: 960px; /* Optimal width for readability on larger screens */
margin: 30px auto; /* Centered with vertical margin */
padding: 30px;
background-color: white; /* White background for the content area */
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Soft shadow for depth */
border-radius: 12px; /* Slightly rounded corners */
overflow-wrap: break-word; /* Ensures long words break and don’t overflow */
}

/* Headings Styling */
h1 {
font-size: 2.8em; /* Prominent size for main title */
font-weight: 800; /* Extra bold */
color: #004aad; /* Deep professional blue */
text-align: center;
margin-bottom: 40px;
padding: 20px 0;
border-bottom: 4px solid #3498db; /* Lighter blue accent line */
line-height: 1.3;
}
h2 {
font-size: 2.2em; /* Large but subordinate to H1 */
font-weight: 700; /* Bold */
color: #004aad; /* Deep professional blue */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px dashed #aeb6bf; /* Subtle dashed line */
position: relative;
}
h2::before {
content: ‘▪’; /* Decorative bullet */
color: #3498db;
position: absolute;
right: -15px; /* Adjust position for RTL */
top: 0;
font-size: 0.8em;
}
h3 {
font-size: 1.6em; /* Clear and readable */
font-weight: 600; /* Semi-bold */
color: #3498db; /* Lighter blue for sub-sections */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 15px; /* Indent for visual hierarchy */
border-right: 5px solid #004aad; /* Strong vertical line accent */
}

/* Paragraphs and Lists */
p {
margin-bottom: 1.5em; /* More space between paragraphs */
text-align: justify; /* Justified text for a clean block look */
}
ul, ol {
margin-bottom: 1.5em;
padding-right: 30px; /* Indent for lists */
line-height: 1.8;
}
li {
margin-bottom: 0.8em;
}
strong {
color: #004aad; /* Emphasize important text */
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.95em;
text-align: right;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Soft shadow for tables */
border-radius: 8px; /* Rounded corners for table */
overflow: hidden; /* Ensures rounded corners are applied */
}
table th, table td {
border: 1px solid #e0e6ea; /* Lighter border for cells */
padding: 15px 20px;
}
table th {
background-color: #3498db; /* Lighter blue background for headers */
color: white;
font-weight: bold;
text-align: center; /* Center header text */
}
table tr:nth-child(even) {
background-color: #f2f4f6; /* Very light grey for even rows */
}
table tr:hover {
background-color: #e8f5fa; /* Light hover effect */
}

/* Infographic Block Styling */
.infographic-block {
background-color: #eef7fc; /* Lightest blue background for the infographic */
border: 1px solid #aeb6bf; /* Medium grey border */
border-radius: 10px;
padding: 30px;
margin: 40px auto;
max-width: 850px; /* Slightly wider for infographic */
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
gap: 20px;
}
.infographic-title {
font-size: 1.9em;
font-weight: 700;
color: #004aad;
text-align: center;
margin-bottom: 25px;
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
.infographic-item {
display: flex;
align-items: center;
justify-content: flex-end; /* Align to right for RTL */
gap: 20px;
text-align: right;
padding: 15px;
background-color: white; /* White background for each item */
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.2s ease-in-out;
}
.infographic-item:hover {
transform: translateY(-3px); /* Subtle lift on hover */
}
.infographic-icon {
font-size: 2.2em; /* Larger icons */
color: white;
font-weight: bold;
background-color: #3498db; /* Lighter blue for icon background */
border-radius: 50%;
width: 55px; /* Larger icon circle */
height: 55px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* Prevents icon from shrinking */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.infographic-text {
flex-grow: 1;
font-size: 1.15em; /* Readable text size */
color: #333;
line-height: 1.5;
}
.infographic-text strong {
color: #004aad; /* Bold important text within infographic */
}

/* Responsive Adjustments (Mobile, Tablet, Laptop, TV) */
@media (max-width: 1024px) { /* Laptops and smaller */
.article-container {
margin: 20px auto;
padding: 25px;
max-width: 90%;
}
h1 { font-size: 2.4em; margin-bottom: 30px; }
h2 { font-size: 1.9em; margin-top: 40px; margin-bottom: 20px; }
h3 { font-size: 1.4em; margin-top: 30px; margin-bottom: 15px; }
.infographic-block { padding: 25px; max-width: 95%; }
.infographic-title { font-size: 1.7em; }
.infographic-icon { width: 50px; height: 50px; font-size: 2em; }
.infographic-text { font-size: 1.1em; }
}

@media (max-width: 768px) { /* Tablets and smaller */
.article-container {
margin: 15px auto;
padding: 20px;
}
h1 { font-size: 2em; margin-bottom: 25px; }
h2 { font-size: 1.7em; margin-top: 35px; margin-bottom: 18px; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 12px; }
p { text-align: right; /* On small screens, justified can look broken with short lines */ }
ul, ol { padding-right: 20px; }

/* Responsive Table */
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #e0e6ea;
margin-bottom: 15px;
border-radius: 8px; /* Rounded corners for each row on mobile */
overflow: hidden;
}
td {
border: none;
border-bottom: 1px solid #f2f4f6;
position: relative;
padding-right: 50%;
text-align: right;
}
td:last-child {
border-bottom: none;
}
td:before {
position: absolute;
top: 15px; /* Adjust vertical alignment */
right: 15px;
width: 45%;
padding-right: 0;
white-space: nowrap;
content: attr(data-label); /* Uses data-label for column headers */
font-weight: bold;
color: #004aad; /* Make label prominent */
}

/* Responsive Infographic */
.infographic-block {
padding: 20px;
gap: 15px;
margin: 30px auto;
}
.infographic-title { font-size: 1.5em; margin-bottom: 20px; }
.infographic-item {
flex-direction: column; /* Stack items vertically */
align-items: flex-end; /* Align text to right for RTL */
text-align: right;
gap: 8px;
padding: 12px;
}
.infographic-icon {
margin-left: auto; /* Push icon to the right */
margin-right: 0;
width: 45px; height: 45px; font-size: 1.8em;
}
.infographic-text {
width: 100%;
font-size: 1em;
}
}

@media (max-width: 480px) { /* Smartphones */
.article-container {
padding: 15px;
margin: 10px auto;
}
h1 { font-size: 1.8em; margin-bottom: 20px; padding: 10px 0; }
h2 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; padding-bottom: 10px; }
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; padding-right: 10px; }
.infographic-title { font-size: 1.3em; margin-bottom: 15px; padding-bottom: 10px; }
.infographic-icon { width: 40px; height: 40px; font-size: 1.6em; }
.infographic-text { font-size: 0.95em; }
}

“`