“`html

/* General Styles for Responsiveness and Aesthetics */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* A widely available font for consistency */
line-height: 1.8;
color: #333;
background-color: #f8f9fa; /* Light grey background for readability */
margin: 0;
padding: 0;
direction: rtl; /* Ensure right-to-left for Persian */
text-align: right; /* Default text alignment */
}

.article-container {
max-width: 960px; /* Max width for large screens */
margin: 0 auto; /* Center the container */
padding: 25px 30px; /* Generous padding */
background-color: #fff; /* White background for content */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Modern, subtle shadow */
border-radius: 15px; /* Softly rounded corners */
overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Headings */
h1, h2, h3 {
font-weight: bold;
color: #0056b3; /* A professional deep blue */
margin-top: 2.5em;
margin-bottom: 1em;
line-height: 1.4;
text-align: right;
}

h1 {
font-size: clamp(2.5rem, 5.5vw, 4rem); /* Responsive font size for H1 */
text-align: center;
color: #003366; /* Darker blue for primary title */
margin-top: 1.5em;
margin-bottom: 1.2em;
padding-bottom: 0.7em;
border-bottom: 4px solid #007bff; /* Distinctive underline for H1 */
}

h2 {
font-size: clamp(2rem, 4.5vw, 3rem); /* Responsive font size for H2 */
color: #007bff; /* Vibrant blue for H2 */
border-bottom: 2px solid #e9ecef; /* Subtle underline for H2 */
padding-bottom: 0.5em;
margin-top: 3em;
}

h3 {
font-size: clamp(1.5rem, 3.5vw, 2.2rem); /* Responsive font size for H3 */
color: #0056b3; /* Slightly darker blue for H3 */
margin-top: 2.5em;
padding-right: 15px; /* Indent and create visual separation */
border-right: 5px solid #007bff; /* Emphasized left border for RTL */
background-color: #f0f8ff; /* Very light background for H3 */
padding-top: 8px;
padding-bottom: 8px;
border-radius: 5px;
}

/* Paragraphs */
p {
font-size: 1.15rem; /* Enhanced paragraph size for readability */
margin-bottom: 1.8em;
color: #444;
text-align: justify; /* Justify text for a clean, professional look */
line-height: 1.9;
}

/* Lists */
ul, ol {
font-size: 1.1rem;
margin-bottom: 1.8em;
padding-right: 30px; /* Indent for lists */
color: #444;
list-style-position: inside; /* Ensures bullets/numbers are inside padding */
}
ul li, ol li {
margin-bottom: 1em;
padding-right: 10px; /* Small additional indent for list items */
}
ul { list-style-type: ‘— ‘; /* Custom dash bullet for UL */ }
ol { list-style-type: decimal; }
ul li::marker { color: #007bff; font-weight: bold; } /* Color custom bullet */
ol li::marker { color: #007bff; font-weight: bold; } /* Color numeric marker */

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 2.5em 0;
font-size: 1.1rem;
background-color: #fefefe;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to content */
}

table thead {
background-color: #007bff;
color: #fff;
}

table th, table td {
padding: 18px 15px;
border: 1px solid #dee2e6;
text-align: center;
}

table tbody tr:nth-child(even) {
background-color: #f2f7fa; /* Light blue tint for even rows */
}

table tbody tr:hover {
background-color: #e0f2f7; /* Hover effect */
transition: background-color 0.3s ease;
}

/* Infographic Styles */
.infographic-container {
margin: 4em auto;
padding: 40px;
background: linear-gradient(135deg, #e0f7fa 0%, #ccebf2 100%); /* Elegant gradient background */
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
text-align: center;
max-width: 750px;
overflow: hidden;
position: relative;
}
.infographic-title {
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: #004d99;
margin-bottom: 2em;
font-weight: bold;
padding-bottom: 15px;
border-bottom: 2px dashed #a7d9f7; /* Dashed line for a softer look */
}
.infographic-step {
display: flex;
align-items: center;
justify-content: flex-end; /* Align right for RTL */
margin-bottom: 35px;
position: relative;
}
.infographic-step:nth-child(even) { /* Alternate alignment for visual appeal */
flex-direction: row-reverse;
justify-content: flex-start;
}
.infographic-step-icon {
background-color: #007bff;
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: bold;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
z-index: 2; /* Ensure icon is above connector */
}
.infographic-step:nth-child(odd) .infographic-step-icon {
margin-left: 25px; /* Space between icon and text for odd steps */
}
.infographic-step:nth-child(even) .infographic-step-icon {
margin-right: 25px; /* Space between icon and text for even steps */
}
.infographic-step-text {
background-color: #fff;
padding: 20px 30px;
border-radius: 12px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
flex-grow: 1;
text-align: right;
font-size: 1.15rem;
color: #333;
line-height: 1.7;
max-width: calc(100% – 100px); /* Adjust max-width considering icon */
}
.infographic-connector {
position: absolute;
height: calc(100% + 35px); /* Connects current step to the next */
width: 4px;
background-color: #a7d9f7; /* Lighter blue for connector */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.infographic-step:last-child .infographic-connector {
display: none; /* Hide connector for the last step */
}

/* FAQ Section */
.faq-item {
background-color: #eef7fc; /* Light blue background for FAQ items */
border-radius: 12px;
padding: 25px;
margin-bottom: 2em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border-right: 6px solid #007bff; /* Distinctive border for FAQ */
}
.faq-question {
font-weight: bold;
color: #0056b3;
font-size: 1.25rem;
margin-bottom: 1em;
line-height: 1.5;
}
.faq-answer {
color: #555;
font-size: 1.1rem;
line-height: 1.8;
text-align: justify;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
.article-container {
padding: 20px 25px;
margin: 15px auto;
}
}
@media (max-width: 768px) {
.article-container {
padding: 15px 20px;
margin: 10px;
border-radius: 10px;
}
h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-top: 1em; margin-bottom: 0.8em; padding-bottom: 0.4em; }
h2 { font-size: clamp(1.6rem, 5vw, 2.5rem); margin-top: 2em; margin-bottom: 0.7em; padding-bottom: 0.3em; }
h3 { font-size: clamp(1.3rem, 4vw, 2rem); margin-top: 1.8em; padding-right: 10px; border-right-width: 4px; }
p, ul, ol, table, .infographic-step-text, .faq-answer {
font-size: 1.05rem;
line-height: 1.7;
}
table th, table td {
padding: 12px 10px;
}
.infographic-container {
padding: 30px 20px;
margin: 3em auto;
}
.infographic-step, .infographic-step:nth-child(even) {
flex-direction: column; /* Stack elements on small screens */
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.infographic-step-icon {
margin: 0 0 15px 0 !important; /* Center and provide bottom margin */
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.infographic-step-text {
margin: 0; /* Remove side margins when stacked */
text-align: center;
padding: 15px 20px;
max-width: 100%;
}
.infographic-connector {
left: 50%;
top: 50px; /* Position below the icon for stacked layout */
transform: translateX(-50%);
height: calc(100% – 50px); /* Adjust height for stacked */
}
.faq-item {
padding: 20px;
border-right-width: 5px;
}
.faq-question { font-size: 1.15rem; }
}
@media (max-width: 480px) {
.article-container {
padding: 10px 15px;
margin: 5px;
}
h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 5vw, 1.8rem); padding-right: 8px; border-right-width: 3px; }
p, ul, ol, table, .infographic-step-text, .faq-answer {
font-size: 1rem;
line-height: 1.6;
}
table th, table td {
padding: 8px 6px;
}
.infographic-container {
padding: 20px 15px;
margin: 2.5em auto;
}
.infographic-step-icon {
width: 45px;
height: 45px;
font-size: 1.3rem;
margin-bottom: 10px !important;
}
.infographic-step-text {
padding: 12px 15px;
}
.faq-item {
padding: 15px;
border-right-width: 4px;
}
.faq-question { font-size: 1.05rem; margin-bottom: 0.8em; }
.faq-answer { font-size: 0.95rem; }
}

“`