“`html

/* ——————————————- */
/* Global & Responsive Base Styles */
/* ——————————————- */
body {
font-family: ‘Segoe UI’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
line-height: 1.7;
color: #343A40; /* Dark grey for readability */
background-color: #F8F9FA; /* Light grey background */
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden; /* Prevents horizontal scroll on small screens */
}

.article-container {
max-width: 900px; /* Optimal reading width for desktops */
margin: 30px auto; /* Center on larger screens, provide margin */
padding: 25px;
background-color: #FFFFFF; /* White background for content */
border-radius: 12px; /* Soft 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;
}

/* Responsive adjustments for smaller screens (tablets, mobiles) */
@media (max-width: 768px) {
.article-container {
margin: 15px; /* Smaller margins on tablets */
padding: 15px;
border-radius: 8px;
}
}
@media (max-width: 480px) {
.article-container {
margin: 10px; /* Even smaller margins on mobile phones */
padding: 10px;
border-radius: 5px;
}
h1 { font-size: 2em !important; } /* Adjust H1 size for mobile */
h2 { font-size: 1.6em !important; } /* Adjust H2 size for mobile */
h3 { font-size: 1.3em !important; } /* Adjust H3 size for mobile */
p, ul, ol, table, .infographic-text { font-size: 1em !important; } /* Adjust base font size for mobile */
}

/* ——————————————- */
/* Heading Styles (H1, H2, H3) */
/* ——————————————- */
h1 {
font-size: 2.5em; /* Larger size for main title */
font-weight: 700; /* Bold */
color: #0056B3; /* Dark blue */
margin-bottom: 25px;
text-align: center;
line-height: 1.3;
word-break: break-word; /* Prevents overflow for long titles on small screens */
}
h2 {
font-size: 2em;
font-weight: 600;
color: #0056B3;
margin-top: 35px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid #E0E0E0; /* Subtle separator */
}
h3 {
font-size: 1.5em;
font-weight: 500;
color: #007BFF; /* Medium blue */
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
border-right: 4px solid #007BFF; /* Accent border */
}

/* ——————————————- */
/* Paragraph and List Styles */
/* ——————————————- */
p {
margin-bottom: 15px;
font-size: 1.1em;
line-height: 1.8;
}
ul, ol {
margin-bottom: 15px;
padding-right: 25px; /* Indent for RTL lists */
font-size: 1.05em;
}
li {
margin-bottom: 8px;
line-height: 1.6;
}

/* ——————————————- */
/* Table Styles */
/* ——————————————- */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1.05em;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Shadow for table */
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to corners */
}
th, td {
border: 1px solid #E0E0E0; /* Light grey borders */
padding: 15px;
text-align: right; /* RTL alignment */
}
th {
background-color: #E9ECEF; /* Light header background */
color: #343A40;
font-weight: 600;
font-size: 1.1em;
text-align: center; /* Center align table headers */
}
td {
text-align: right; /* Align table data to right */
}
tr:nth-child(even) {
background-color: #F8F9FA; /* Zebra striping for rows */
}
tr:hover {
background-color: #F0F2F5; /* Hover effect */
}

/* ——————————————- */
/* Infographic Style (Textual/Symbolic) */
/* ——————————————- */
.infographic-box {
background-color: #D6EAF8; /* Light blue background */
border: 2px solid #007BFF; /* Blue border */
border-radius: 15px;
padding: 25px;
margin: 40px 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
text-align: center;
color: #004085; /* Darker blue text */
}
.infographic-box h3 {
color: #004085;
font-size: 1.8em;
margin-top: 0;
margin-bottom: 20px;
border-right: none; /* Override general H3 style for infographic title */
padding-right: 0;
text-align: center;
}
.infographic-item {
display: flex; /* Use flexbox for icon and text alignment */
align-items: center; /* Vertically center items */
margin-bottom: 15px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}
.infographic-item:hover {
transform: translateY(-3px); /* Lift effect on hover */
}
.infographic-icon {
font-size: 2em;
color: #007BFF;
margin-left: 15px; /* Space between icon and text for RTL */
min-width: 40px; /* Ensure icon has enough space */
text-align: center;
}
.infographic-text {
font-size: 1.1em;
font-weight: 500;
flex-grow: 1; /* Allows text to take available space */
text-align: right;
}

/* Responsive infographic for mobile */
@media (max-width: 480px) {
.infographic-item {
flex-direction: column; /* Stack icon and text vertically */
text-align: center;
padding: 15px 10px;
}
.infographic-icon {
margin: 0 0 10px 0; /* Adjust margin for vertical stacking */
}
}

/* ——————————————- */
/* General Utility Classes */
/* ——————————————- */
.highlight {
color: #007BFF;
font-weight: 600;
}
.note {
background-color: #FFF3CD; /* Light yellow background */
border-right: 5px solid #FFC107; /* Orange accent border */
padding: 15px;
margin: 25px 0;
border-radius: 8px;
color: #664D03; /* Dark yellow text */
font-size: 1em;
}

“`