/* Base styles for all devices */
body {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
color: #333333;
direction: rtl;
text-align: right;
margin: 0;
padding: 0;
background-color: #f0f2f5;
}
.article-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 12px;
overflow-x: hidden; /* Prevent horizontal scroll for overflow content */
}

/* Headings */
h1 {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-size: 36px;
color: #004d40; /* Dark Teal */
text-align: center;
margin-bottom: 40px;
line-height: 1.4;
font-weight: 700;
border-bottom: 4px solid #80cbc4; /* Lighter Teal */
padding-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
h2 {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-size: 28px;
color: #004d40;
border-bottom: 2px solid #80cbc4;
padding-bottom: 12px;
margin-top: 45px;
margin-bottom: 25px;
font-weight: 600;
position: relative;
}
h2::after {
content: ‘✨’;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #80cbc4;
}
h3 {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-size: 22px;
color: #00695c; /* Slightly lighter teal */
margin-top: 35px;
margin-bottom: 18px;
font-weight: 600;
padding-right: 15px;
position: relative;
}
h3::before {
content: ‘▪’;
position: absolute;
right: 0;
color: #80cbc4;
font-size: 1.2em;
top: 2px;
}

/* Paragraphs and Lists */
p {
margin-bottom: 15px;
text-align: justify;
line-height: 1.9;
}
ul, ol {
margin-bottom: 15px;
padding-right: 25px;
line-height: 1.9;
}
li {
margin-bottom: 8px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 16px;
line-height: 1.7;
}
th, td {
border: 1px solid #e0f2f1; /* Very light teal border */
padding: 12px 15px;
text-align: right;
}
th {
background-color: #e0f2f1;
color: #004d40;
font-weight: 600;
}
tr:nth-child(even) {
background-color: #f5fcfb; /* Slightly off-white for even rows */
}

/* Infographic-like section */
.infographic-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 40px 0;
padding: 25px;
background-color: #e0f2f1; /* Light teal background */
border-radius: 12px;
box-shadow: inset 0 0 15px rgba(0, 77, 64, 0.1);
}
.infographic-step {
background-color: #ffffff;
border: 1px solid #b2dfdb;
border-radius: 10px;
padding: 20px;
flex: 1 1 calc(33% – 40px); /* 3 items per row on larger screens */
min-width: 280px; /* Minimum width for each step */
text-align: center;
box-shadow: 0 4px 8px rgba(0, 77, 64, 0.08);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.infographic-step:hover {
transform: translateY(-8px);
box-shadow: 0 8px 16px rgba(0, 77, 64, 0.15);
}
.infographic-step span.icon {
font-size: 3.5em;
display: block;
margin-bottom: 15px;
color: #00897b; /* Medium teal for icons */
line-height: 1;
}
.infographic-step h4 {
font-size: 20px;
color: #004d40;
margin-bottom: 10px;
font-weight: 700;
line-height: 1.4;
}
.infographic-step p {
font-size: 15px;
color: #555555;
text-align: center;
line-height: 1.7;
}
.infographic-arrow {
font-size: 3em;
color: #004d40;
align-self: center;
margin: 0 -10px;
display: flex;
align-items: center;
justify-content: center;
}
.infographic-arrow.vertical {
display: none; /* Hidden on large screens */
flex-direction: column;
margin: 10px 0;
font-size: 2.5em;
height: auto;
}

/* FAQ Section */
.faq-item {
margin-bottom: 25px;
padding: 20px;
background-color: #fbfdfd; /* Very light, almost white */
border: 1px solid #e0f2f1;
border-radius: 10px;
}
.faq-question {
font-size: 19px;
color: #004d40;
font-weight: 600;
margin-bottom: 10px;
position: relative;
padding-right: 30px;
}
.faq-question::before {
content: ‘❓’;
position: absolute;
right: 0;
font-size: 1.2em;
top: -2px;
}
.faq-answer {
font-size: 16px;
color: #555555;
line-height: 1.8;
text-align: justify;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.article-container {
padding: 15px;
border-radius: 0;
box-shadow: none;
}
h1 {
font-size: 28px;
margin-bottom: 30px;
padding-bottom: 15px;
}
h2 {
font-size: 24px;
margin-top: 35px;
margin-bottom: 20px;
}
h3 {
font-size: 20px;
margin-top: 25px;
margin-bottom: 15px;
}
p, ul, ol, th, td, .faq-answer {
font-size: 15px;
line-height: 1.7;
}
.infographic-step {
flex: 1 1 100%; /* 1 item per row on smaller screens */
}
.infographic-arrow {
display: none; /* Hide horizontal arrows on small screens */
}
.infographic-block {
flex-direction: column;
}
.infographic-arrow.vertical {
display: flex; /* Show vertical arrows */
}
}

@media (max-width: 480px) {
h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
.infographic-step h4 {
font-size: 18px;
}
}