“`html

/* Basic Reset & Font for the container’s content */
@font-face {
font-family: ‘B Nazanin’;
src: url(‘https://raw.githubusercontent.com/rastikerdar/vazirmatn/master/fonts/webfonts/Vazirmatn-Regular.woff2’) format(‘woff2’); /* Using a common open-source Persian font as a fallback/example */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘B Nazanin’;
src: url(‘https://raw.githubusercontent.com/rastikerdar/vazirmatn/master/fonts/webfonts/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: bold;
font-style: normal;
}

.article-wrapper { /* Main wrapper for the entire article to apply general styles */
font-family: ‘B Nazanin’, ‘Vazirmatn’, ‘Arial’, sans-serif; /* Prioritize B Nazanin, then Vazirmatn, then Arial */
line-height: 1.8;
color: #333333;
direction: rtl; /* Set overall text direction to Right-to-Left */
text-align: right; /* Default text alignment */
background-color: #F8F8F8; /* Light background for the wrapper */
padding: 20px 0; /* Padding for spacing from screen edges */
}

/* Container for content – responsive */
.container-article {
max-width: 1000px;
margin: 0 auto;
padding: 25px 20px;
background-color: #FFFFFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
border-radius: 10px;
overflow-x: hidden; /* Prevent horizontal scroll from overflow content */
border: 1px solid #E0E0E0;
}

/* Headings Styling */
h1 {
font-family: ‘B Nazanin’, ‘Vazirmatn’, ‘Arial’, sans-serif;
font-size: 38px; /* Larger for H1 */
font-weight: bold;
color: #2C3E50; /* Dark Blue/Grey */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #3498DB; /* Blue underline */
position: relative;
}
h1::after {
content: ”;
position: absolute;
bottom: -3px;
left: 50%; /* Centered underline */
transform: translateX(-50%);
width: 80px;
height: 3px;
background-color: #2ECC71; /* Green accent */
}

h2 {
font-family: ‘B Nazanin’, ‘Vazirmatn’, ‘Arial’, sans-serif;
font-size: 30px; /* H2 size */
font-weight: bold;
color: #2C3E50;
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #DDDDDD;
position: relative;
text-align: right;
}
h2::before {
content: ‘▪’; /* Bullet point icon for H2 */
color: #3498DB;
margin-right: 10px; /* Space from text in RTL */
font-size: 1.2em;
vertical-align: middle;
display: inline-block;
}

h3 {
font-family: ‘B Nazanin’, ‘Vazirmatn’, ‘Arial’, sans-serif;
font-size: 24px; /* H3 size */
font-weight: bold;
color: #34495E; /* Slightly lighter dark blue */
margin-top: 35px;
margin-bottom: 15px;
text-align: right;
border-right: 4px solid #2ECC71; /* Green sidebar accent for RTL */
padding-right: 15px;
padding-left: 5px; /* Small padding on left to balance */
}

p {
text-align: justify;
margin-bottom: 15px;
font-size: 17px;
}

ul, ol {
padding-right: 25px; /* Indentation for lists */
margin-bottom: 20px;
text-align: right;
}
li {
margin-bottom: 10px;
font-size: 17px;
}
ul li::before {
content: ‘•’;
color: #3498DB;
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: -1em; /* Position bullet correctly for RTL */
}
ul li {
padding-right: 1em; /* Space for bullet */
padding-left: 0;
}

a {
color: #3498DB;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #2C3E50;
text-decoration: underline;
}

/* Table of Contents Styling */
.toc {
background-color: #ECF0F1; /* Light grey */
border: 1px solid #BDC3C7;
border-radius: 8px;
padding: 20px 25px;
margin: 30px 0;
text-align: right;
}
.toc h2 {
font-size: 26px;
color: #2C3E50;
margin-top: 0;
border-bottom: 1px solid #BDC3C7;
padding-bottom: 10px;
margin-bottom: 15px;
text-align: right;
}
.toc h2::before { /* Remove bullet for TOC H2 */
content: none;
}
.toc ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc li {
margin-bottom: 8px;
font-size: 16px;
}
.toc li a {
color: #34495E;
display: block;
padding: 5px 0;
position: relative;
padding-right: 15px; /* Space for arrow icon */
}
.toc li a:hover {
color: #3498DB;
}
.toc li a::before {
content: ‘◀’; /* Right arrow for RTL */
font-size: 0.8em;
position: absolute;
right: 0;
top: 8px;
color: #3498DB;
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 16px;
text-align: right;
direction: rtl; /* Ensure table content is RTL */
}
th, td {
border: 1px solid #DDDDDD;
padding: 12px 15px;
}
th {
background-color: #3498DB;
color: white;
font-weight: bold;
font-size: 18px;
}
tr:nth-child(even) {
background-color: #F2F2F2; /* Zebra striping */
}
tr:hover {
background-color: #E6F3FF; /* Hover effect */
}

/* Infographic / Stylized Block */
.infographic-block {
background-color: #F0F8FF; /* Light blue background */
border-right: 5px solid #3498DB; /* Accent border on right for RTL */
padding: 25px;
margin: 40px 0;
border-radius: 8px;
position: relative;
overflow: hidden;
text-align: right;
direction: rtl;
}
.infographic-block h3 {
color: #2C3E50;
margin-top: 0;
margin-bottom: 20px;
font-size: 26px;
border-right: none; /* Override general H3 border */
padding-right: 0;
}
.infographic-step {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
gap: 15px; /* Spacing between icon and text */
flex-direction: row-reverse; /* Icon on the right for RTL */
}
.infographic-step:last-child {
margin-bottom: 0;
}
.infographic-icon {
background-color: #2ECC71; /* Green icon background */
color: white;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: bold;
flex-shrink: 0; /* Prevent icon from shrinking */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin-left: 15px; /* Space from content in RTL */
}
.infographic-content {
flex-grow: 1;
padding-top: 5px; /* Align text better with icon */
}
.infographic-content h4 {
font-family: ‘B Nazanin’, ‘Vazirmatn’, ‘Arial’, sans-serif;
color: #3498DB;
font-size: 20px;
margin: 0 0 5px 0;
font-weight: bold;
}
.infographic-content p {
margin: 0;
font-size: 16px;
color: #555555;
text-align: right;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) { /* Adjust for larger tablets/laptops */
.container-article {
margin: 0 15px;
padding: 20px;
}
}

@media (max-width: 768px) { /* Tablets and smaller laptops */
.container-article {
padding: 15px;
border-radius: 5px;
}
h1 {
font-size: 30px;
margin-bottom: 30px;
}
h2 {
font-size: 24px;
margin-top: 40px;
margin-bottom: 20px;
}
h3 {
font-size: 20px;
margin-top: 30px;
margin-bottom: 12px;
padding-right: 10px;
}
p, li, .infographic-content p {
font-size: 15px;
}
.toc h2 {
font-size: 22px;
}
.infographic-step {
flex-direction: column; /* Stack icon and text on small screens */
align-items: center; /* Center items when stacked */
text-align: center;
}
.infographic-icon {
margin-bottom: 10px;
margin-left: 0; /* No left margin when stacked */
}
.infographic-content {
padding-top: 0;
}
table thead {
display: none; /* Hide header on mobile for better readability */
}
table, tbody, tr, td {
display: block; /* Make table elements stack */
width: 100%;
}
td {
border: none;
border-bottom: 1px solid #DDDDDD;
position: relative;
padding-right: 50%; /* Space for pseudo-element header in RTL */
padding-left: 15px;
text-align: right;
}
td::before {
content: attr(data-label); /* Use data-label for pseudo-header */
position: absolute;
right: 15px; /* Position pseudo-header on the right for RTL */
width: calc(50% – 30px);
font-weight: bold;
color: #2C3E50;
text-align: right;
}
}

@media (max-width: 480px) { /* Mobile phones */
.article-wrapper {
padding: 10px 0;
}
.container-article {
margin: 0 10px;
padding: 10px;
}
h1 {
font-size: 26px;
margin-bottom: 25px;
}
h2 {
font-size: 20px;
margin-top: 30px;
margin-bottom: 15px;
}
h3 {
font-size: 18px;
margin-top: 25px;
margin-bottom: 10px;
padding-right: 8px;
}
p, li, .infographic-content p {
font-size: 14px;
}
.toc h2 {
font-size: 20px;
}
.toc {
padding: 15px;
margin: 20px 0;
}
.infographic-icon {
width: 40px;
height: 40px;
font-size: 20px;
}
.infographic-block {
padding: 15px;
margin: 30px 0;
}
.infographic-block h3 {
font-size: 22px;
margin-bottom: 15px;
}
.infographic-content h4 {
font-size: 18px;
}
}

/* Print styles */
@media print {
.article-wrapper {
background-color: #FFFFFF;
padding: 0;
}
.container-article {
box-shadow: none;
border-radius: 0;
border: none;
padding: 0;
margin: 0;
}
h1, h2, h3 {
color: #000;
border-bottom: 1px solid #DDD !important;
}
h1::after {
background-color: #BBB !important;
}
h2::before {
color: #555 !important;
}
h3 {
border-right: 2px solid #BBB !important;
}
a {
text-decoration: underline;
color: #000;
}
.toc, .infographic-block {
border: 1px solid #DDD;
background-color: #F7F7F7;
page-break-inside: avoid;
}
th {
background-color: #EEE !important;
color: #000 !important;
}
tr:nth-child(even) {
background-color: #FDFDFD !important;
}
}

“`