“`html

/* Global Resets and Base Styles for Responsiveness and Aesthetics */
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7;
color: #333;
margin: 0;
padding: 0;
background-color: #f8f8f8; /* Soft background */
direction: rtl; /* Right-to-left for Persian */
text-align: right; /* Align text to the right */
}

.container {
max-width: 900px;
margin: 40px auto;
padding: 20px 30px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.container {
margin: 20px auto;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
h1 { font-size: 1.8rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }
.info-card { flex-direction: column; padding: 15px; margin-bottom: 20px; }
.info-card div { margin-bottom: 10px; width: 100%; }
.styled-list li { padding-right: 25px; }
.styled-list li::before { top: 8px; }
}

@media (max-width: 480px) {
.container {
margin: 10px auto;
padding: 10px 15px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
h1 { font-size: 1.6rem !important; }
h2 { font-size: 1.4rem !important; }
h3 { font-size: 1.15rem !important; }
p { font-size: 0.95rem; }
.table-wrapper { overflow-x: auto; } /* Allow horizontal scroll for tables on small screens */
table { width: 100%; min-width: 300px; } /* Ensure table doesn’t get too narrow */
}

/* Heading Styles */
h1, h2, h3 {
color: #2c3e50; /* Dark blue/charcoal for headings */
margin-top: 1.5em;
margin-bottom: 0.8em;
font-weight: 700;
line-height: 1.3;
}

h1 {
font-size: 2.5rem; /* ~40px */
border-bottom: 3px solid #3498db; /* Accent blue underline */
padding-bottom: 15px;
text-align: center;
margin-bottom: 30px;
color: #1a293a;
}

h2 {
font-size: 2rem; /* ~32px */
color: #34495e; /* Slightly lighter than H1 */
border-right: 5px solid #2ecc71; /* Green accent on the right */
padding-right: 15px;
margin-top: 40px;
margin-bottom: 20px;
}

h3 {
font-size: 1.5rem; /* ~24px */
color: #34495e;
border-bottom: 1px dashed #e0e0e0;
padding-bottom: 8px;
margin-top: 25px;
margin-bottom: 15px;
}

p {
margin-bottom: 1em;
text-align: justify;
text-justify: inter-word;
}

/* Styled Lists (Bullet Points) */
.styled-list {
list-style: none; /* Remove default bullet */
padding: 0;
margin: 1em 0;
}

.styled-list li {
position: relative;
padding-right: 35px; /* Space for custom bullet */
margin-bottom: 10px;
line-height: 1.8;
}

.styled-list li::before {
content: “•”; /* Custom bullet character */
color: #3498db; /* Accent color */
font-size: 1.2em;
position: absolute;
right: 0;
top: 5px;
font-weight: bold;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 0.95em;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners apply to content */
}

th, td {
border: 1px solid #e0e0e0;
padding: 12px 15px;
text-align: right;
}

th {
background-color: #f0f8ff; /* Light blue header */
color: #2c3e50;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #fcfcfc;
}

/* “Infographic” and Highlight Boxes */
.highlight-box {
background-color: #e8f5e9; /* Light green background */
border-right: 6px solid #4caf50; /* Green accent border */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
gap: 15px;
}

.highlight-item {
display: flex;
align-items: center;
gap: 15px;
}

.highlight-icon {
font-size: 1.8rem;
color: #2e7d32; /* Darker green */
line-height: 1;
}

.highlight-text {
font-weight: 600;
color: #333;
}

/* FAQ Section Styling */
.faq-section {
background-color: #f4f8ff; /* Very light blue */
border-radius: 10px;
padding: 25px;
margin-top: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.faq-item {
margin-bottom: 20px;
border-bottom: 1px dotted #d0e0f0;
padding-bottom: 15px;
}

.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.faq-question {
font-weight: 700;
color: #2c3e50;
margin-bottom: 8px;
font-size: 1.15rem;
}

.faq-answer {
color: #555;
text-align: justify;
}

/* Placeholder for Table of Contents – Visual Only */
.table-of-contents {
background-color: #fcf8e3; /* Light yellow background */
border: 1px solid #faebcc;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.table-of-contents h3 {
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid #faebcc;
padding-bottom: 10px;
color: #8a6d3b; /* Brownish color */
text-align: center;
}
.table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
.table-of-contents li {
margin-bottom: 8px;
position: relative;
padding-right: 15px;
}
.table-of-contents li::before {
content: “▪”; /* Small square bullet */
color: #8a6d3b;
position: absolute;
right: 0;
top: 0;
}
.table-of-contents a {
color: #337ab7; /* Standard link blue */
text-decoration: none;
}
.table-of-contents a:hover {
text-decoration: underline;
}

“`