/* Import Vazirmatn font from Google Fonts */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap’);

/* Base styles */
body { margin: 0; padding: 0; }
div { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; margin-bottom: 0.8em; line-height: 1.3; font-family: ‘Vazirmatn’, sans-serif; }
p { margin-bottom: 1em; font-family: ‘Vazirmatn’, sans-serif; }
ul, ol { margin-bottom: 1em; padding-right: 20px; list-style-position: inside; }
a { color: #28a745; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Responsive adjustments for typography and spacing */
.container {
max-width: 900px;
margin: auto;
background-color: #ffffff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
.container { padding: 15px !important; border-radius: 8px !important; }
h1 { font-size: 2rem !important; }
h2 { font-size: 1.6rem !important; margin-top: 2rem !important; }
h3 { font-size: 1.3rem !important; margin-top: 1.8rem !important; }
p { font-size: 0.95rem !important; }
.infographic-item {
flex-basis: 100% !important;
margin-bottom: 20px !important;
}
.responsive-table {
display: block;
overflow-x: auto;
white-space: nowrap; /* Ensures table cells don’t wrap prematurely */
-webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
}
.responsive-table table {
width: 100%;
min-width: 500px; /* Minimum width for table on small screens */
}
.toc { padding: 15px !important; }
.toc h3 { font-size: 1.2rem !important; }
.toc ul li a { font-size: 0.95rem !important; }
.faq-item { padding: 15px !important; }
.faq-item h4 { font-size: 1.05rem !important; }
.faq-item p { font-size: 0.9rem !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
.container { padding: 25px !important; }
h1 { font-size: 2.2rem !important; }
h2 { font-size: 1.8rem !important; }
h3 { font-size: 1.4rem !important; }
.infographic-item { flex-basis: 48% !important; }
}

/* Specific styles for infographic and cards */
.section-title {
text-align: center;
margin-bottom: 40px;
color: #1e7e34;
}
.infographic-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
margin-bottom: 40px;
}
.infographic-item {
background-color: #e6ffe6; /* Light green background */
border: 1px solid #c3e6cb;
border-radius: 10px;
padding: 25px;
text-align: center;
flex: 1; /* Allow items to grow */
min-width: 280px; /* Minimum width for items */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
color: #1e7e34;
position: relative;
overflow: hidden;
}
.infographic-item::before {
content: ”;
position: absolute;
top: -15px;
right: -15px; /* Adjusted for RTL */
width: 30px;
height: 30px;
background-color: #28a745;
border-radius: 50%;
opacity: 0.1;
z-index: 0;
}
.infographic-item::after {
content: ”;
position: absolute;
bottom: -10px;
left: -10px; /* Adjusted for RTL */
width: 20px;
height: 20px;
background-color: #28a745;
border-radius: 50%;
opacity: 0.15;
z-index: 0;
}
.infographic-item:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.infographic-item .icon {
font-size: 3rem;
margin-bottom: 15px;
color: #28a745;
position: relative;
z-index: 1;
}
.infographic-item h4 {
font-size: 1.25rem;
font-weight: bold;
color: #218838;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.infographic-item p {
font-size: 0.95rem;
line-height: 1.6;
color: #343a40;
position: relative;
z-index: 1;
}

/* Table styles */
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
text-align: right;
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to content */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
font-family: ‘Vazirmatn’, sans-serif;
}
.styled-table thead tr {
background-color: #28a745;
color: #ffffff;
text-align: right;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
border: 1px solid #dddddd;
vertical-align: top; /* Align content to the top */
}
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #28a745;
}
.styled-table tbody tr:hover {
background-color: #e6ffe6;
}

/* Table of Contents style */
.toc {
background-color: #eaf7ed;
border-right: 5px solid #28a745; /* Adjusted for RTL */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
}
.toc h3 {
font-size: 1.3rem;
color: #218838;
margin-top: 0;
margin-bottom: 15px;
text-align: right;
}
.toc ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc ul li {
margin-bottom: 8px;
}
.toc ul li a {
color: #343a40;
font-size: 1rem;
transition: color 0.2s ease-in-out;
display: block;
padding: 5px 0;
border-bottom: 1px dashed #c8e6c9;
}
.toc ul li a:hover {
color: #28a745;
text-decoration: none;
padding-right: 5px;
}
.toc ul li:last-child a {
border-bottom: none;
}

/* FAQ Section */
.faq-item {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 15px;
padding: 20px;
transition: box-shadow 0.2s ease-in-out;
}
.faq-item:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.faq-item h4 {
color: #218838;
font-size: 1.15rem;
margin-top: 0;
margin-bottom: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none; /* Prevent text selection on FAQ title */
}
.faq-item p {
color: #555;
margin-top: 10px;
font-size: 0.95rem;
}
/* Visual for collapsible FAQ, but content will be fully visible on copy-paste */
.faq-item h4::after {
content: ‘▼’; /* Represents an expand icon */
font-weight: bold;
font-size: 1rem;
color: #28a745;
margin-right: 10px;
display: inline-block; /* Always show visual indicator */
transform: rotate(-90deg); /* Point left for RTL – like an arrow to expand */
transition: transform 0.2s ease-in-out;
}
/* A subtle animation for the arrow, though it’s static in this non-JS version */
.faq-item:hover h4::after {
transform: rotate(0deg); /* Simulate expanded state */
}
.rtl-ul { list-style-position: inside; padding-right: 25px; }