“`html

/*
* Style Block for Responsive, Human-Readable, and Visually Appealing Content
* Designed to be pasted directly into block/classic editors.
* All styles are self-contained.
*/

/* Base Styles: Ensures readability and responsiveness across all devices */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* Professional Persian & Latin font stack */
line-height: 1.8; /* Enhanced readability for long texts */
color: #333; /* Dark grey for primary text, easy on eyes */
margin: 0; /* Remove default body margin */
padding: 20px; /* Padding around the content for aesthetic spacing */
background-color: #f8f9fa; /* Very light grey background for a clean look */
display: flex; /* Use flexbox for centering the main content block */
justify-content: center; /* Center the article horizontally */
}

/* Article Container: Defines the main content area */
.article-container {
max-width: 900px; /* Optimal width for readability on large screens */
width: 100%; /* Ensures the container is fully responsive */
background-color: #ffffff; /* White background for the article content */
padding: 30px; /* Inner padding for content */
border-radius: 8px; /* Slightly rounded corners for a modern feel */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
box-sizing: border-box; /* Ensures padding is included in width calculation */
}

/* Heading Styles: Distinctive and hierarchical visual styling */
h1, h2, h3 {
font-weight: bold; /* All headings are bold */
color: #2c3e50; /* Dark blue-grey, professional and clear */
margin-top: 2rem; /* Spacing above headings */
margin-bottom: 1rem; /* Spacing below headings */
line-height: 1.4; /* Good line height for heading readability */
}

h1 {
font-size: 2.2rem; /* Largest for the main title */
text-align: center; /* Center alignment for the primary title */
color: #1a4e6e; /* Even darker blue for strong emphasis */
margin-top: 0; /* No top margin for the very first element */
padding-bottom: 15px; /* Spacing below the title */
border-bottom: 2px solid #e0e0e0; /* A subtle separator line */
}

h2 {
font-size: 1.8rem; /* Medium size for main sections */
color: #2980b9; /* A vibrant, professional blue */
border-bottom: 1px solid #e0e0e0; /* Lighter separator for H2s */
padding-bottom: 8px; /* Spacing below the H2 text */
margin-top: 2.5rem; /* More space above H2 to distinguish sections */
}

h3 {
font-size: 1.4rem; /* Smaller size for sub-sections */
color: #34495e; /* Darker grey, distinct from body text */
margin-top: 2rem; /* Spacing above H3 */
}

/* Paragraph Styles */
p {
margin-bottom: 1rem; /* Consistent spacing between paragraphs */
font-size: 1.05rem; /* Slightly larger than base for better readability */
text-align: justify; /* Justified text for a clean block appearance */
}

/* List Styles */
ul {
list-style: disc inside; /* Default disc bullet points */
padding-right: 20px; /* Indent for RTL lists */
margin-bottom: 1rem; /* Spacing below lists */
font-size: 1.05rem; /* Consistent font size with paragraphs */
}

ul li {
margin-bottom: 0.5rem; /* Spacing between list items */
}

/* Table Styles: Clean, readable, and responsive */
table {
width: 100%; /* Full width within its container */
border-collapse: collapse; /* Collapse borders for a cleaner look */
margin: 1.5rem 0; /* Vertical spacing for the table */
font-size: 1rem; /* Standard font size for table content */
text-align: right; /* Default text alignment for RTL */
}

th, td {
border: 1px solid #dee2e6; /* Light grey borders */
padding: 12px 15px; /* Ample padding for readability */
}

th {
background-color: #e9ecef; /* Light grey background for table headers */
font-weight: bold; /* Bold header text */
color: #495057; /* Darker text for headers */
text-align: center; /* Center header text for better presentation */
}

td {
background-color: #fdfefe; /* Slightly off-white for table cells */
}

/* Responsive Table on Small Screens (Mobile-first approach) */
@media screen and (max-width: 600px) {
table {
border: 0; /* Remove outer border */
}
table thead {
display: none; /* Hide table headers on small screens */
}
table tr {
margin-bottom: 10px; /* Space between rows (now blocks) */
display: block; /* Each row becomes a block */
border: 1px solid #dee2e6; /* Border around each row-block */
border-radius: 5px; /* Rounded corners for row-blocks */
}
table td {
display: block; /* Each cell becomes a block */
text-align: right; /* Right align cell content */
border-bottom: 1px dotted #dee2e6; /* Dotted separator between cells */
position: relative; /* For positioning the data-label */
padding-right: 50%; /* Space for the data-label */
font-size: 0.95rem; /* Slightly smaller font for table data */
}
table td:last-child {
border-bottom: 0; /* No border for the last cell in a row */
}
table td::before { /* Pseudo-element for showing header as a label */
content: attr(data-label); /* Get content from data-label attribute */
position: absolute;
right: 15px; /* Position the label */
width: 45%; /* Width for the label */
padding-left: 10px; /* Spacing for the label */
font-weight: bold; /* Bold label text */
text-align: left; /* Label text aligned left */
color: #555; /* Darker grey for labels */
}
}

/* Infographic-like Block: Visually engaging information box */
.infographic-box {
background-color: #e6f7ff; /* Light blue background, gentle and inviting */
border-right: 5px solid #007bff; /* Prominent blue accent border on the right (RTL) */
padding: 25px 30px; /* Ample padding inside the box */
margin: 2.5rem 0; /* Vertical spacing around the box */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Soft shadow */
}

.infographic-box h3 {
color: #0056b3; /* Darker blue for the infographic title */
margin-top: 0; /* No top margin for the H3 within the box */
margin-bottom: 1rem; /* Spacing below the H3 */
font-size: 1.6rem; /* Larger font for the infographic title */
text-align: center; /* Center align title */
border-bottom: none; /* No border for this H3 */
}

.infographic-box ul {
list-style: none; /* Remove default list style to use custom icons */
padding-right: 0; /* Remove default padding */
margin-top: 1.5rem; /* Spacing above the list */
}

.infographic-box ul li {
font-size: 1.1rem; /* Slightly larger font for list items */
margin-bottom: 1rem; /* Spacing between list items */
display: flex; /* Use flexbox for icon and text alignment */
align-items: flex-start; /* Align icon and text at the start */
color: #444; /* Darker grey for list item text */
}

.infographic-box ul li::before {
content: attr(data-icon); /* Use data-icon attribute for emoji icons */
margin-left: 10px; /* Space between icon and text */
font-size: 1.4rem; /* Larger font for icons */
line-height: 1; /* Align icon vertically */
color: #28a745; /* Green color for checkmarks/positive icons */
}

/* Responsive Adjustments for Tablets and Laptops */
@media (max-width: 768px) {
body {
padding: 15px; /* Reduce body padding */
}
.article-container {
padding: 20px; /* Reduce container padding */
}
h1 { font-size: 1.8rem; } /* Scale down H1 */
h2 { font-size: 1.5rem; } /* Scale down H2 */
h3 { font-size: 1.2rem; } /* Scale down H3 */
p, ul, table { font-size: 0.95rem; } /* Slightly smaller text */
.infographic-box h3 { font-size: 1.4rem; } /* Scale down infographic title */
.infographic-box ul li { font-size: 1rem; } /* Scale down infographic list items */
.infographic-box ul li::before { font-size: 1.2rem; } /* Scale down infographic icons */
}

/* Responsive Adjustments for Mobile Phones */
@media (max-width: 480px) {
body {
padding: 10px; /* Further reduce body padding */
}
.article-container {
padding: 15px; /* Further reduce container padding */
border-radius: 5px; /* Slightly smaller border-radius */
}
h1 { font-size: 1.6rem; padding-bottom: 10px; } /* More scaling for H1 */
h2 { font-size: 1.3rem; margin-top: 2rem; padding-bottom: 5px; } /* More scaling for H2 */
h3 { font-size: 1.1rem; margin-top: 1.5rem; } /* More scaling for H3 */
p, ul, table { font-size: 0.9rem; } /* Further smaller text */
.infographic-box { padding: 20px; margin: 2rem 0; } /* Adjust infographic box padding */
.infographic-box h3 { font-size: 1.2rem; } /* Scale down infographic title */
.infographic-box ul li { font-size: 0.95rem; } /* Scale down infographic list items */
.infographic-box ul li::before { font-size: 1.1rem; } /* Scale down infographic icons */
}

“`