“`html

/* ——————————————- */
/* Base Styles: Global settings for font, colors, and box-model */
/* ——————————————- */
body {
font-family: ‘Vazirmatn’, ‘Iranian Sans’, ‘Tahoma’, sans-serif; /* Prioritize Persian fonts, then common sans-serif */
line-height: 1.75; /* Enhanced readability with more line spacing */
color: #343a40; /* Dark charcoal for primary text for soft contrast */
background-color: #f8f9fa; /* Very light gray for a clean background */
margin: 0;
padding: 20px;
box-sizing: border-box; /* Ensures padding/border are included in element’s total width/height */
direction: rtl; /* Set base direction to Right-to-Left for Persian content */
text-align: right; /* Default text alignment for RTL */
}

/* ——————————————- */
/* Article Container: Centralizes content and adds visual appeal */
/* ——————————————- */
.article-container {
max-width: 960px; /* Wider container for better desktop experience */
margin: 0 auto; /* Center the article */
background-color: #ffffff; /* Pure white background for the content block */
padding: 40px 50px; /* Generous padding */
border-radius: 12px; /* Softly rounded corners */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Subtle, elegant shadow */
overflow: hidden; /* Ensures any internal elements don’t spill out */
}

/* ——————————————- */
/* Heading Styles: Distinctive typography for hierarchy */
/* ——————————————- */
h1 {
font-size: 3em; /* Large and prominent */
font-weight: 900; /* Extra bold for strong impact */
color: #004085; /* Deep, authoritative blue */
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 4px solid #0056b3; /* Thick underline for emphasis */
text-align: center;
line-height: 1.2;
}

h2 {
font-size: 2.4em; /* Noticeably smaller than H1, yet strong */
font-weight: 800; /* Very bold */
color: #0056b3; /* Primary accent blue */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #e9ecef; /* Lighter, subtle underline */
line-height: 1.3;
}

h3 {
font-size: 1.9em; /* Clear sub-section indicator */
font-weight: 700; /* Bold */
color: #007B8A; /* Elegant teal secondary accent */
margin-top: 35px;
margin-bottom: 20px;
line-height: 1.4;
}

/* ——————————————- */
/* Paragraph & List Styles: Readability and structure */
/* ——————————————- */
p {
margin-bottom: 1.5em; /* More space between paragraphs */
text-align: justify; /* Justified text for a clean, professional block */
}

ul, ol {
margin-bottom: 1.5em;
padding-right: 25px; /* Adjust padding for RTL lists */
list-style-position: outside; /* Bullet points outside text block */
}

li {
margin-bottom: 0.8em;
}

/* ——————————————- */
/* Table Styles: Structured, easy-to-read data presentation */
/* ——————————————- */
table {
width: 100%;
border-collapse: collapse; /* Clean table borders */
margin: 40px 0;
font-size: 1em;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Gentle shadow for table */
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners apply to content */
}

th, td {
padding: 18px 25px;
text-align: right; /* Align text to the right for RTL */
border: 1px solid #e0e0e0; /* Light border for cells */
}

th {
background-color: #e3f2fd; /* Very light blue for header background */
color: #004085; /* Dark blue text for headers */
font-weight: 700;
text-align: center; /* Center header text for better aesthetics */
}

tr:nth-child(even) {
background-color: #f8f9fa; /* Subtle zebra striping for improved readability */
}

/* ——————————————- */
/* Infographic Simulation Styles: Visually engaging summary */
/* ——————————————- */
.infographic-block {
background-color: #e6f7e9; /* Light, calming green background */
border-right: 8px solid #38c172; /* Stronger green accent bar on the right (RTL) */
padding: 30px 35px;
margin: 50px 0;
border-radius: 10px;
display: flex;
flex-direction: column; /* Stack items vertically */
gap: 25px; /* Space between infographic items */
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.infographic-item {
display: flex;
align-items: flex-start; /* Align icon and text at the top */
gap: 20px;
font-size: 1.15em;
color: #343a40;
}

.infographic-icon {
font-size: 2.8em; /* Larger, more prominent icons */
color: #28a745; /* Vibrant green icon color */
flex-shrink: 0; /* Prevent icon from shrinking on smaller screens */
line-height: 1; /* Align icon better */
}

.infographic-text-content {
flex-grow: 1;
}

.infographic-title {
font-weight: 700;
color: #0056b3; /* Primary accent blue for titles */
font-size: 1.25em; /* Larger title within infographic item */
margin-bottom: 0.5em;
display: block; /* Ensure title is on its own line */
}

.infographic-description p {
margin-bottom: 0; /* No extra margin for paragraphs within description */
text-align: right; /* Ensure description text is right-aligned */
}

/* ——————————————- */
/* Call to Action (CTA) Link Styling: Clear and attractive prompt */
/* ——————————————- */
.cta-link {
display: block; /* Occupy full width to center effectively */
width: fit-content; /* Adjust width to content */
margin: 50px auto; /* Center horizontally with good vertical spacing */
padding: 18px 35px;
background-color: #28a745; /* Strong green for action, stands out */
color: #ffffff;
text-decoration: none;
border-radius: 10px;
font-size: 1.25em;
font-weight: 700;
text-align: center;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Pronounced shadow */
}

.cta-link:hover {
background-color: #218838; /* Darker green on hover */
transform: translateY(-3px); /* Slight lift effect */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* More intense shadow on hover */
}

/* ——————————————- */
/* Blockquote Style: Emphasizes important text */
/* ——————————————- */
blockquote {
background-color: #f0f8ff; /* Lightest blue background */
border-right: 6px solid #007bff; /* Vibrant blue border on the right (RTL) */
margin: 30px 0;
padding: 25px 30px;
font-style: italic;
color: #5a6268; /* Slightly lighter gray for italic text */
border-radius: 6px;
line-height: 1.8;
font-size: 1.05em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ——————————————- */
/* Responsive Adjustments: Ensuring optimal display on all devices */
/* ——————————————- */
@media (max-width: 992px) { /* Tablets and smaller laptops */
.article-container {
padding: 30px 40px;
max-width: 90%; /* Allow container to take more width on medium screens */
}
h1 {
font-size: 2.5em;
margin-bottom: 25px;
}
h2 {
font-size: 2em;
margin-top: 40px;
}
h3 {
font-size: 1.6em;
margin-top: 30px;
}
.cta-link {
font-size: 1.15em;
padding: 15px 30px;
}
}

@media (max-width: 768px) { /* Larger mobile phones and tablets in portrait */
body {
padding: 15px;
}
.article-container {
padding: 25px 30px;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
h1 {
font-size: 2em;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom-width: 3px;
}
h2 {
font-size: 1.7em;
margin-top: 35px;
margin-bottom: 20px;
}
h3 {
font-size: 1.4em;
margin-top: 28px;
}
th, td {
padding: 15px 20px;
}
.infographic-block {
padding: 25px 25px;
margin: 40px 0;
border-right-width: 6px;
}
.infographic-item {
flex-direction: column; /* Stack icon and text vertically */
align-items: flex-end; /* Align to the right for RTL */
gap: 10px;
}
.infographic-icon {
margin-bottom: 5px; /* Space between icon and text */
font-size: 2.2em;
}
.infographic-title {
text-align: right;
}
.cta-link {
font-size: 1.05em;
padding: 12px 25px;
margin: 40px auto;
}
}

@media (max-width: 480px) { /* Small mobile phones */
body {
padding: 10px;
}
.article-container {
padding: 20px 20px;
border-radius: 0; /* Remove border-radius for full-width feel */
box-shadow: none; /* Remove shadow on very small screens */
}
h1 {
font-size: 1.7em;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom-width: 2px;
}
h2 {
font-size: 1.4em;
margin-top: 30px;
margin-bottom: 15px;
}
h3 {
font-size: 1.2em;
margin-top: 22px;
margin-bottom: 12px;
}
p {
margin-bottom: 1.2em;
}
ul, ol {
padding-right: 20px;
}
th, td {
padding: 10px 15px;
font-size: 0.9em;
}
.infographic-block {
padding: 20px;
margin: 30px 0;
border-right-width: 4px;
}
.infographic-icon {
font-size: 1.8em;
}
.infographic-title {
font-size: 1.1em;
}
.cta-link {
font-size: 0.95em;
padding: 10px 20px;
margin: 30px auto;
border-radius: 6px;
}
blockquote {
padding: 18px 20px;
margin: 20px 0;
}
}

“`