“`html

/* CSS Reset and Base Styles */
body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* A modern Farsi font, fallback to common ones */
line-height: 1.7;
color: #333333; /* Dark grey for main text */
background-color: #f8f8f8; /* Very light grey background */
margin: 0;
padding: 0;
direction: rtl; /* Ensure right-to-left for Farsi */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
border-radius: 12px;
overflow: hidden; /* Clear floats/margins */
}

/* Heading Styles */
h1, h2, h3 {
color: #2a4d69; /* Primary dark blue/teal */
font-weight: 800; /* Extra bold */
margin-top: 2.5em;
margin-bottom: 1em;
padding-bottom: 0.4em;
position: relative;
}

h1 {
font-size: clamp(2rem, 4.5vw, 3rem); /* Responsive H1 size */
text-align: center;
border-bottom: 5px solid #2a4d69; /* Strong border for H1 */
padding-bottom: 0.8em;
margin-top: 0;
background-color: #e6edf2; /* Light background for the title area */
padding-top: 0.8em;
border-radius: 10px 10px 0 0;
}

h2 {
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
border-bottom: 2px solid #72b1bb; /* Accent color border for H2 */
}
h2::after { /* Decorative element for H2 */
content: ”;
position: absolute;
right: 0;
bottom: -2px;
width: 30px;
height: 2px;
background-color: #2a4d69;
}

h3 {
font-size: clamp(1.2rem, 2.8vw, 1.8rem);
color: #4a6c8b; /* Slightly lighter blue for H3 */
border-bottom: 1px dashed #c0d6df; /* Light dashed border for H3 */
font-weight: 700; /* Bold */
}

/* Paragraph and List Styles */
p {
margin-bottom: 1.2em;
text-align: justify;
font-size: clamp(0.95rem, 1.8vw, 1.1rem);
}

ul {
list-style: none;
padding-right: 0;
margin-bottom: 2em;
}

ul li {
margin-bottom: 1em;
padding-right: 2.2em;
position: relative;
line-height: 1.8;
font-size: clamp(0.9rem, 1.7vw, 1.05rem);
}

ul li::before {
content: ‘✅’; /* Checkmark icon */
position: absolute;
right: 0;
font-size: 1.2em;
color: #72b1bb; /* Accent color */
top: 0;
}

ol {
padding-right: 25px;
margin-bottom: 2em;
}
ol li {
margin-bottom: 0.8em;
font-size: clamp(0.9rem, 1.7vw, 1.05rem);
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 2.5em 0;
font-size: clamp(0.85rem, 1.6vw, 1rem);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
border-radius: 8px;
overflow: hidden; /* For rounded corners */
}

th, td {
border: 1px solid #c0d6df; /* Light blue-grey border */
padding: 14px 18px;
text-align: right;
}

th {
background-color: #2a4d69; /* Primary dark blue for header */
color: #ffffff;
font-weight: 700;
text-align: center;
}

tr:nth-child(even) {
background-color: #f2f7f9; /* Subtle zebra striping */
}

tr:hover {
background-color: #e6f0f3;
transition: background-color 0.3s ease;
}

/* Infographic Styling */
.infographic-card {
background-color: #c0d6df; /* Light blue-grey background */
border-radius: 15px;
padding: 25px;
margin: 3em 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column; /* Stacks items vertically on small screens */
gap: 20px;
align-items: center;
text-align: center;
}

.infographic-card > h3 { /* Style for the H3 inside the infographic */
color: #2a4d69;
margin-top: 0;
border-bottom: none;
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 800;
margin-bottom: 1.5em;
}

.infographic-item {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 320px; /* Max width for individual items */
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infographic-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.infographic-item .icon {
font-size: 3em;
margin-bottom: 15px;
color: #72b1bb; /* Accent color for icons */
}
.infographic-item strong {
color: #2a4d69;
font-size: 1.2em;
margin-bottom: 8px;
display: block; /* Ensures bold text is on its own line */
}
.infographic-item p {
font-size: 0.95em;
color: #555555;
margin-bottom: 0;
line-height: 1.6;
}

/* Responsive Infographic Layout for larger screens */
@media (min-width: 600px) {
.infographic-card {
flex-direction: row; /* Arranges items horizontally */
flex-wrap: wrap;
justify-content: center;
}
.infographic-item {
flex: 1; /* Distributes space evenly */
min-width: 280px; /* Minimum width for items before wrapping */
margin: 10px; /* Adds space between items */
}
}

/* FAQ Styling */
.faq-item {
margin-bottom: 1.8em;
padding: 20px;
background-color: #f2f7f9; /* Light background for FAQ items */
border-radius: 10px;
border-right: 6px solid #72b1bb; /* Accent border on the right */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.faq-item strong {
color: #2a4d69;
display: block;
margin-bottom: 0.8em;
font-size: clamp(1.05rem, 2vw, 1.25rem);
font-weight: 700;
}
.faq-item p {
margin-bottom: 0;
font-size: clamp(0.9rem, 1.7vw, 1.05rem);
}

/* Horizontal Rule Style */
hr {
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(42, 77, 105, 0.75), rgba(0, 0, 0, 0));
margin: 4em 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px;
}
h1 { font-size: 1.8rem; padding-bottom: 0.6em; }
h2 { font-size: 1.5rem; margin-top: 2em; }
h3 { font-size: 1.2rem; margin-top: 1.5em; }

/* Make table columns stack on small screens */
table, th, td {
display: block;
width: 100%;
box-sizing: border-box;
}
thead {
display: none; /* Hide table header on small screens */
}
tr {
margin-bottom: 1.5em;
display: block;
border: 1px solid #c0d6df;
border-radius: 8px;
overflow: hidden;
}
td {
text-align: right;
border: none; /* Remove internal borders */
padding: 10px 15px;
position: relative;
}
td::before { /* Add pseudo-element for column name */
content: attr(data-label);
font-weight: bold;
color: #2a4d69;
display: block;
margin-bottom: 5px;
font-size: 0.9em;
}
tr:nth-child(even) td {
background-color: #fdfdfd; /* Ensure alternating rows don’t look weird when stacked */
}
.infographic-card {
padding: 15px;
}
.infographic-item {
max-width: 100%;
}
}

“`