/* Global Styles for responsiveness and base design */
body {
font-family: ‘Vazirmatn’, sans-serif; /* A popular, readable Persian font */
line-height: 1.7;
color: #333333;
background-color: #F8F8F8;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
direction: rtl; /* Ensure Right-to-Left for Persian text */
text-align: right; /* Default text alignment for RTL */
}

/* Main content wrapper for responsiveness and centering */
.content-wrapper {
max-width: 900px; /* Optimal width for readability on larger screens */
margin: 40px auto; /* Centered with top/bottom margin */
padding: 25px 30px; /* Inner padding */
background-color: #FFFFFF;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
border-radius: 12px; /* Soft rounded corners */
box-sizing: border-box; /* Include padding in width calculation */
}

@media (max-width: 960px) {
.content-wrapper {
margin: 20px auto;
padding: 20px;
max-width: 95%; /* Adjust for smaller screens */
}
}

@media (max-width: 600px) {
.content-wrapper {
margin: 10px auto;
padding: 15px;
border-radius: 0; /* Full width on very small screens, no rounded corners */
box-shadow: none; /* No shadow on mobile for clean look */
}
}

/* Heading Styles */
h1, h2, h3 {
color: #004080; /* Deep blue for headings */
font-weight: 700; /* Bold by default */
margin-top: 2.5em; /* More space above headings */
margin-bottom: 0.8em;
line-height: 1.3;
}

/* Specific styles for H1, H2, H3 as requested for actual tags with size and thickness */
h1 {
font-size: 2.5em; /* Larger for H1 */
text-align: center; /* Center main title */
margin-top: 0.5em; /* Less margin for the very first heading */
margin-bottom: 1em;
padding-bottom: 0.5em;
border-bottom: 2px solid #EEEEEE; /* Subtle separator */
}

h2 {
font-size: 1.9em;
border-right: 5px solid #28A745; /* Green accent border */
padding-right: 15px;
margin-right: -25px; /* Adjust to extend border slightly outside padding on desktop */
}

@media (max-width: 600px) {
h2 {
font-size: 1.6em;
padding-right: 10px;
margin-right: -15px; /* Adjust for mobile */
}
}

h3 {
font-size: 1.4em;
color: #0056B3; /* Slightly lighter blue */
margin-bottom: 0.6em;
padding-bottom: 5px;
border-bottom: 1px dashed #EEEEEE; /* Dashed separator */
}

/* Paragraph styles */
p {
margin-bottom: 1.2em;
text-align: justify; /* Justify text for better readability */
}

/* List styles */
ul {
list-style-type: disc;
padding-right: 25px; /* RTL padding for bullet points */
margin-bottom: 1.5em;
}

ol {
list-style-type: decimal;
padding-right: 25px; /* RTL padding for numbered lists */
margin-bottom: 1.5em;
}

li {
margin-bottom: 0.7em;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 0.95em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
border-radius: 8px; /* Rounded corners for the table */
overflow: hidden; /* Ensures rounded corners are visible */
}

table th, table td {
padding: 15px 20px;
text-align: right; /* RTL text alignment */
border-bottom: 1px solid #EEEEEE;
}

table th {
background-color: #004080; /* Header background */
color: #FFFFFF; /* Header text color */
font-weight: 600;
position: sticky; /* Sticky header for long tables */
top: 0;
}

table tbody tr:nth-child(even) {
background-color: #FDFDFD; /* Slightly different background for even rows */
}

table tbody tr:hover {
background-color: #F0F8FF; /* Light blue on hover */
}

/* Infographic Alternative Styles */
.infographic-container {
display: flex;
flex-wrap: wrap; /* Allows items to wrap on smaller screens */
justify-content: center; /* Center items when they wrap */
gap: 25px; /* Space between infographic items */
margin: 3em 0;
padding: 20px;
background-color: #E0F7FA; /* Light blue background for the infographic section */
border-radius: 12px;
text-align: center;
}

.info-box {
flex: 1 1 280px; /* Flex item that grows/shrinks, base width 280px */
background-color: #FFFFFF;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
transform: translateY(-8px); /* Subtle lift effect on hover */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.info-box .icon {
font-size: 3.5em;
color: #28A745; /* Accent color for icons */
margin-bottom: 0.6em;
}

.info-box h4 {
color: #004080;
font-size: 1.25em;
margin-bottom: 0.5em;
font-weight: 600;
}

.info-box p {
font-size: 0.95em;
color: #555555;
text-align: center;
margin-bottom: 0;
}

/* Call to Action/Highlight Boxes (subtle) */
.highlight-box {
background-color: #E6F7ED; /* Light green background */
border-right: 5px solid #28A745; /* Accent border on the right */
padding: 20px;
margin: 2.5em 0;
border-radius: 8px;
color: #216F3E; /* Darker green text */
}

.highlight-box p {
margin: 0;
}

/* Table of Contents */
.table-of-contents {
background-color: #F5F9FC; /* Light blue-grey */
border-right: 4px solid #0056B3;
padding: 20px 25px;
margin: 2em 0;
border-radius: 8px;
}

.table-of-contents h3 {
color: #004080;
margin-top: 0;
font-size: 1.3em;
border-bottom: 1px solid #D0DCE7;
padding-bottom: 10px;
margin-bottom: 15px;
}

.table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}

.table-of-contents ul li {
margin-bottom: 10px;
}

.table-of-contents ul li a {
color: #0056B3;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}

.table-of-contents ul li a:hover {
color: #28A745;
text-decoration: underline;
}

/* FAQ Section Styles */
.faq-item {
margin-bottom: 2em;
border-bottom: 1px dashed #EEEEEE;
padding-bottom: 1.5em;
}

.faq-item:last-child {
border-bottom: none; /* No border for the last FAQ item */
padding-bottom: 0;
}

.faq-question {
font-weight: 600;
color: #004080;
font-size: 1.15em;
margin-bottom: 0.8em;
}

.faq-answer {
color: #555555;
text-align: justify;
}

/* General responsive adjustments */
img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5em auto;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}