@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap’);
body {
margin: 0;
padding: 0;
background-color: #f8f9fa; /* Light background for the page */
}
.container {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif;
direction: rtl;
text-align: right;
}
h1, h2, h3 {
color: #2c3e50; /* Darker blue-gray for headings */
margin-top: 35px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid #3498db; /* Accent blue underline */
text-align: right;
line-height: 1.4;
}
h1 {
font-size: 2.4em; /* Larger for H1 */
font-weight: 700;
border-bottom-color: #2c3e50;
}
h2 {
font-size: 2em; /* Smaller than H1 */
font-weight: 700;
border-bottom-color: #bdc3c7; /* Lighter underline for H2 */
}
h3 {
font-size: 1.5em; /* Smaller than H2 */
font-weight: 700;
color: #34495e; /* Slightly different shade for H3 */
border-bottom: none; /* No underline for H3, just bold */
margin-bottom: 15px;
padding-bottom: 0;
}
p {
margin-bottom: 15px;
text-align: justify;
font-size: 1.1em;
}
ul {
list-style-type: disc;
padding-right: 25px;
margin-bottom: 15px;
}
ul li {
margin-bottom: 8px;
font-size: 1.05em;
text-align: right;
}
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 1.05em;
text-align: right;
}
table thead tr {
background-color: #3498db; /* Accent blue for table header */
color: #ffffff;
text-align: right;
}
table th, table td {
padding: 12px 15px;
border: 1px solid #ddd; /* Light gray border */
}
table tbody tr:nth-of-type(even) {
background-color: #f2f2f2; /* zebra striping */
}
table tbody tr:hover {
background-color: #f5f5f5;
}

/* Infographic Styling */
.infographic-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 40px 0;
padding: 20px;
background-color: #ecf0f1; /* Light grey background for infographic */
border-radius: 10px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}
.infographic-item {
flex: 1 1 280px; /* Allows items to grow/shrink, minimum 280px */
background-color: #ffffff;
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.infographic-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.infographic-icon {
font-size: 3em;
color: #3498db; /* Accent blue for icons */
margin-bottom: 15px;
line-height: 1;
}
.infographic-text {
font-size: 1.2em;
font-weight: 600;
color: #2c3e50;
text-align: center;
}
/* Connectors for infographic (simplified for copy-paste) */
.infographic-section .infographic-item:not(:last-child)::after {
content: ‘◀’; /* Arrow pointing right for RTL */
position: absolute;
top: 50%;
left: -30px; /* Position to the left */
transform: translateY(-50%) rotate(180deg); /* Rotate for correct direction */
font-size: 2.5em;
color: #bdc3c7;
z-index: 1;
display: none; /* Hide by default, show on larger screens */
}
/* Mobile adjustments */
@media (max-width: 768px) {
.container {
padding: 10px;
margin: 10px auto;
}
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
p, ul li, table, .infographic-text { font-size: 1em; }
.infographic-section {
flex-direction: column;
gap: 15px;
padding: 15px;
}
.infographic-item {
flex: 1 1 100%;
padding: 20px;
min-height: 120px;
}
.infographic-icon { font-size: 2.5em; margin-bottom: 10px; }
.infographic-section .infographic-item:not(:last-child)::after {
content: ‘▼’; /* Down arrow for vertical flow */
left: 50%;
top: auto;
bottom: -35px; /* Position below */
transform: translateX(-50%);
}
table th, table td {
padding: 8px 10px;
}
}
/* Desktop/Tablet adjustments for infographic arrows */
@media (min-width: 769px) {
.infographic-section {
justify-content: space-between;
flex-wrap: nowrap; /* Keep items on one line if possible */
}
.infographic-item:not(:last-child)::before {
content: ‘◀’; /* Arrow pointing left to connect items logically in RTL */
position: absolute;
top: 50%;
left: -30px; /* Position to the left of the current item */
transform: translateY(-50%);
font-size: 2.5em;
color: #bdc3c7;
z-index: 1;
}
.infographic-item:first-child::before {
display: none; /* No arrow before the first item */
}
}