“`html

/* Reset & Base Styles */
body {
margin: 0;
padding: 0;
background-color: #f8f8f8; /* Light grey background for the page */
direction: rtl; /* Right-to-left for Persian */
text-align: right; /* Align text right for Persian */
}

/* Main Article Container */
.article-container {
font-family: ‘Arial’, ‘Tahoma’, ‘Vazirmatn’, sans-serif; /* Fallback fonts */
line-height: 1.7;
color: #2c3e50; /* Dark blue-grey for main text */
max-width: 900px; /* Max width for readability */
margin: 20px auto; /* Center the container with margin */
padding: 30px;
background-color: #ffffff; /* White background for the article content */
border-radius: 12px; /* Soft rounded corners */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
box-sizing: border-box; /* Ensures padding doesn’t add to total width */
overflow-x: hidden; /* Prevents horizontal scroll on small screens for elements like the table */
}

/* Headings */
.article-container h1,
.article-container h2,
.article-container h3 {
color: #34495e; /* Slightly darker blue-grey for headings */
margin-top: 35px;
margin-bottom: 20px;
line-height: 1.3;
text-align: right; /* Align headings right */
}

.article-container h1 {
font-size: 2.5em; /* Approximately 40px */
font-weight: 700; /* Bold */
text-align: center;
color: #2c3e50;
padding-bottom: 15px;
border-bottom: 3px solid #3498db; /* Blue accent border */
margin-top: 0;
}

.article-container h2 {
font-size: 1.9em; /* Approximately 30.4px */
font-weight: 600; /* Semi-bold */
color: #3498db; /* Vibrant blue for H2 */
border-right: 6px solid #2980b9; /* Stronger blue left border */
padding-right: 15px;
margin-bottom: 25px;
text-align: right;
}

.article-container h3 {
font-size: 1.4em; /* Approximately 22.4px */
font-weight: 600;
color: #34495e;
border-bottom: 1px dashed #e0e0e0; /* Subtle dashed border */
padding-bottom: 8px;
margin-bottom: 15px;
text-align: right;
}

/* Paragraphs */
.article-container p {
margin-bottom: 1em;
text-align: justify; /* Justify text for clean look */
}

/* Lists */
.article-container ul {
list-style-type: disc; /* Standard disc bullets */
margin-right: 25px; /* Adjust for RTL */
margin-bottom: 1em;
padding: 0;
}
.article-container ul li {
margin-bottom: 0.5em;
text-align: justify;
}

/* Table Styles */
.article-container table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Soft shadow for table */
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to content */
}

.article-container th,
.article-container td {
border: 1px solid #e0e0e0; /* Light grey border */
padding: 15px;
text-align: right;
}

.article-container th {
background-color: #3498db; /* Blue header background */
color: #ffffff; /* White text for header */
font-weight: 700;
font-size: 1.1em;
text-align: center;
}

.article-container tr:nth-child(even) {
background-color: #f9f9f9; /* Zebra striping for rows */
}

.article-container tr:hover {
background-color: #f0f8ff; /* Light blue on hover */
}

/* “Infographic” Alternative Styling */
.infographic-section {
margin: 40px 0;
padding: 30px;
background-color: #ecf0f1; /* Very light grey-blue background */
border-radius: 12px;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05); /* Inner shadow */
text-align: center;
}
.infographic-section h2 {
color: #2c3e50;
border-right: none; /* No border for this H2 */
padding-right: 0;
text-align: center;
margin-bottom: 30px;
font-size: 2em;
border-bottom: 2px solid #bdc3c7; /* Subtle bottom border */
padding-bottom: 10px;
}
.infographic-cards {
display: flex;
flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
justify-content: center; /* Center cards horizontally */
gap: 25px; /* Space between cards */
}
.infographic-card {
background-color: #ffffff;
border-radius: 10px;
padding: 25px;
flex: 1; /* Allows cards to grow and shrink */
min-width: 280px; /* Minimum width before wrapping */
max-width: 380px; /* Max width for larger screens */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); /* Card shadow */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
text-align: center;
}
.infographic-card:hover {
transform: translateY(-8px); /* Lift card on hover */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
}
.infographic-card .icon {
font-size: 3.5em; /* Icon size */
margin-bottom: 15px;
color: #27ae60; /* Emerald green for icons */
display: block; /* Ensures icon is on its own line */
}
.infographic-card h4 {
font-size: 1.3em;
font-weight: 700;
color: #34495e;
margin-bottom: 10px;
}
.infographic-card p {
font-size: 0.95em;
color: #555;
text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 768px) { /* Tablets and smaller laptops */
.article-container {
padding: 20px;
margin: 15px;
}
.article-container h1 {
font-size: 2em !important; /* Smaller H1 for mobile */
padding-bottom: 10px;
}
.article-container h2 {
font-size: 1.6em !important; /* Smaller H2 */
margin-bottom: 20px;
padding-right: 10px;
}
.article-container h3 {
font-size: 1.2em !important; /* Smaller H3 */
}
.infographic-section h2 {
font-size: 1.7em;
}
.infographic-cards {
flex-direction: column; /* Stack cards vertically on small screens */
align-items: center; /* Center stacked cards */
}
.infographic-card {
min-width: 90%; /* Take almost full width */
}
.article-container th,
.article-container td {
padding: 12px 8px; /* Smaller padding for table cells */
font-size: 0.9em;
}
}

@media (max-width: 480px) { /* Mobile phones */
.article-container {
padding: 15px;
margin: 10px;
}
.article-container h1 {
font-size: 1.8em !important;
}
.article-container h2 {
font-size: 1.4em !important;
padding-right: 8px;
border-right-width: 4px;
}
.article-container h3 {
font-size: 1.1em !important;
}
.infographic-card .icon {
font-size: 3em;
}
.article-container table {
font-size: 0.85em; /* Even smaller table text */
}
}

“`