/* Base styles for readability and design */
body {
font-family: ‘Vazirmatn’, ‘Iranian Sans’, ‘Tahoma’, sans-serif; /* Primary Persian font with fallbacks */
line-height: 1.8;
color: #333; /* Dark gray for main text */
background-color: #fcfcfc; /* Light cream background */
margin: 0;
padding: 0;
direction: rtl;
text-align: justify;
font-size: 1.1rem; /* Base font size, responsive */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 1000px;
margin: 2rem auto; /* Center container with vertical margin */
padding: 1.8rem;
background-color: #ffffff;
border-radius: 12px; /* Soft rounded corners */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Subtle shadow for depth */
border: 1px solid #e8e8e8; /* Light border */
}
p {
margin-bottom: 1.2rem;
text-align: justify;
line-height: 1.9;
}
ul, ol {
margin-bottom: 1.2rem;
padding-right: 25px; /* Adjust padding for RTL lists */
list-style-position: outside;
}
li {
margin-bottom: 0.7rem;
line-height: 1.7;
}
a {
color: #2e8b57; /* Forest green for links */
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #3cb371; /* Lighter green on hover */
text-decoration: underline;
}
strong {
font-weight: 700;
color: #1a1a1a; /* Very dark gray for strong text */
}

/* Headings – Specific styling for size, thickness, and color */
h1 {
font-size: 2.8rem; /* Responsive font size */
font-weight: 800; /* Extra bold */
color: #228b22; /* Forest Green */
text-align: center;
margin-bottom: 2.5rem;
line-height: 1.3;
border-bottom: 3px solid #3cb371; /* Green border for visual separation */
padding-bottom: 1rem;
}
h2 {
font-size: 2.2rem;
font-weight: 700;
color: #4a4a4a; /* Dark gray */
margin-top: 2.5rem;
margin-bottom: 1.5rem;
padding-right: 18px; /* Padding for the right border effect */
border-right: 6px solid #8fbc8f; /* Dark Sea Green border */
line-height: 1.4;
}
h3 {
font-size: 1.7rem;
font-weight: 600;
color: #556b2f; /* Dark Olive Green */
margin-top: 2rem;
margin-bottom: 1rem;
padding-right: 12px; /* Slight padding for visual alignment */
line-height: 1.5;
}

/* Table styles for educational content */
table {
width: 100%;
border-collapse: collapse;
margin: 2.5rem 0;
background-color: #fdfefd;
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to content */
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}
th, td {
border: 1px solid #e1eedf; /* Light green border */
padding: 16px;
text-align: right;
vertical-align: top;
}
th {
background-color: #8fbc8f; /* Dark Sea Green header */
color: white;
font-weight: bold;
font-size: 1.2rem;
}
td {
background-color: #ffffff;
font-size: 1rem;
}
tr:nth-child(even) td {
background-color: #f6fdf6; /* Lighter green tint for even rows */
}

/* Infographic simulation using CSS and flexbox */
.infographic {
background-color: #e6ffe6; /* Lightest green background */
border: 2px solid #a0d8a0;
border-radius: 15px;
padding: 3rem;
margin: 3.5rem 0;
text-align: center;
overflow: hidden;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.infographic h3 {
color: #2e8b57;
font-size: 2.2rem;
margin-top: 0;
margin-bottom: 2rem;
border: none;
padding-right: 0;
}
.infographic p {
color: #555;
margin-bottom: 2.5rem;
}
.infographic .step-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Allows steps to wrap on smaller screens */
gap: 2.5rem; /* Space between steps */
margin-top: 2rem;
}
.infographic .step {
flex: 1 1 280px; /* Flex item grows/shrinks, min width 280px */
background-color: #ffffff;
border: 1px solid #c8e6c9;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.infographic .step:hover {
transform: translateY(-10px); /* Lift on hover */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.infographic .step-icon {
font-size: 3.5rem;
color: #2e8b57;
margin-bottom: 1.2rem;
display: block;
}
.infographic .step h4 {
color: #3a3a3a;
font-size: 1.5rem;
margin-top: 0.8rem;
margin-bottom: 1rem;
font-weight: 600;
}
.infographic .step p {
font-size: 0.98rem;
color: #666;
line-height: 1.7;
text-align: center;
margin-bottom: 0;
}
/* Arrow for infographic flow on larger screens (RTL) */
.infographic .step-container > .step:not(:first-child)::before {
content: ‘⬅️’; /* Unicode arrow pointing left */
position: absolute;
right: 100%; /* Position to the right of the current step, pointing left towards previous */
top: 50%;
transform: translateY(-50%);
font-size: 2.8rem;
color: #6cb66c; /* Green arrow color */
display: none; /* Hidden by default, shown with media query */
z-index: 10;
width: 40px; /* Space for the arrow */
text-align: center;
}

/* Responsive Adjustments for all devices */
@media (min-width: 768px) {
.infographic .step-container > .step:not(:first-child)::before {
display: block; /* Show arrows on wider screens */
}
}
@media (max-width: 1024px) {
.container {
margin: 1.5rem auto;
padding: 1.5rem;
}
h1 { font-size: 2.4rem; padding-bottom: 0.9rem; margin-bottom: 2rem; }
h2 { font-size: 1.9rem; margin-top: 2rem; margin-bottom: 1.3rem; padding-right: 15px; border-right-width: 5px; }
h3 { font-size: 1.6rem; margin-top: 1.8rem; margin-bottom: 0.9rem; padding-right: 10px; }
body { font-size: 1rem; }
.infographic {
padding: 2.5rem;
margin: 3rem 0;
}
.infographic h3 { font-size: 2rem; margin-bottom: 1.5rem; }
.infographic .step-icon { font-size: 3rem; margin-bottom: 1rem; }
.infographic .step h4 { font-size: 1.3rem; }
.infographic .step p { font-size: 0.9rem; }
table, th, td { padding: 14px; }
th { font-size: 1.1rem; }
}
@media (max-width: 768px) {
.container {
margin: 1rem auto;
padding: 1.2rem;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
h1 { font-size: 2rem; padding-bottom: 0.8rem; margin-bottom: 1.8rem; border-bottom-width: 2px; }
h2 { font-size: 1.7rem; margin-top: 1.8rem; margin-bottom: 1.2rem; padding-right: 12px; border-right-width: 4px; }
h3 { font-size: 1.4rem; margin-top: 1.5rem; margin-bottom: 0.8rem; padding-right: 8px;}
body { font-size: 0.95rem; line-height: 1.7; }
table, th, td { font-size: 0.88rem; padding: 12px; }
th { font-size: 1.05rem; }
.infographic {
padding: 2rem;
margin: 2rem 0;
border-radius: 10px;
}
.infographic h3 { font-size: 1.8rem; margin-bottom: 1.2rem; }
.infographic .step-icon { font-size: 2.5rem; margin-bottom: 0.9rem; }
.infographic .step h4 { font-size: 1.2rem; }
.infographic .step p { font-size: 0.85rem; }
.infographic .step-container {
flex-direction: column; /* Stack steps vertically on small screens */
gap: 1.8rem;
}
.infographic .step-container > .step:not(:first-child)::before {
display: none; /* Hide arrows when stacked vertically */
}
}
@media (max-width: 480px) {
.container {
margin: 0.8rem auto;
padding: 1rem;
border-radius: 8px;
box-shadow: none; /* Remove shadow on very small screens for cleaner look */
}
h1 { font-size: 1.6rem; padding-bottom: 0.7rem; margin-bottom: 1.4rem; border-bottom-width: 2px; }
h2 { font-size: 1.4rem; margin-top: 1.5rem; margin-bottom: 1rem; padding-right: 10px; border-right-width: 3px; }
h3 { font-size: 1.2rem; margin-top: 1.2rem; margin-bottom: 0.7rem; padding-right: 6px; }
body { font-size: 0.88rem; line-height: 1.6; }
p { margin-bottom: 0.9rem; }
ul, ol { padding-right: 20px; margin-bottom: 0.9rem; }
li { margin-bottom: 0.6rem; }
table, th, td { font-size: 0.8rem; padding: 10px; }
th { font-size: 1rem; }
.infographic {
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 8px;
}
.infographic h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.infographic .step-icon { font-size: 2.2rem; margin-bottom: 0.8rem; }
.infographic .step h4 { font-size: 1.1rem; }
.infographic .step p { font-size: 0.8rem; }
}