/* General Body Styles for responsiveness and base font */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* Fallback fonts for Persian text */
line-height: 1.7;
color: #333333;
margin: 0;
padding: 0;
background-color: #f8f9fa; /* Light background for the overall page */
direction: rtl; /* Ensure right-to-left for Persian content */
text-align: right; /* Default text alignment for the body */
}

/* Container for the entire article to control max-width and centering */
.article-container {
max-width: 900px; /* Optimal max-width for readability on large screens */
margin: 0 auto; /* Center the container horizontally */
padding: 20px; /* Padding around the content */
background-color: #ffffff; /* White background for the article content area */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
border-radius: 8px; /* Rounded corners for the container */
overflow-x: hidden; /* Prevent horizontal scroll for overflowing content */
}

/* Base Heading Styles */
h1, h2, h3 {
color: #2c3e50; /* Darker blue for general headings */
margin-top: 30px; /* Space above headings */
margin-bottom: 15px; /* Space below headings */
padding-bottom: 5px; /* Padding below heading text */
border-bottom: 2px solid rgba(0, 86, 179, 0.1); /* Light blue border for separation */
}

/* Specific H1 Style */
h1 {
font-size: 36px;
font-weight: bold;
color: #0056b3; /* Primary blue for the main title */
text-align: center; /* Center align the main title */
border-bottom: 3px solid #0056b3; /* Thicker primary blue border */
padding-bottom: 15px;
margin-bottom: 30px;
}

/* Specific H2 Style */
h2 {
font-size: 28px;
font-weight: bold;
color: #0056b3; /* Primary blue for H2 headings */
border-bottom: 2px solid #0056b3; /* Primary blue border */
padding-bottom: 8px;
}

/* Specific H3 Style */
h3 {
font-size: 22px;
font-weight: bold;
color: #34495e; /* Slightly lighter blue for H3 headings */
border-bottom: 1px dashed #dcdcdc; /* Lighter dashed border for H3 */
padding-bottom: 5px;
margin-top: 25px;
}

/* Paragraph Styles */
p {
margin-bottom: 1em; /* Space between paragraphs */
text-align: justify; /* Justify text for better readability */
line-height: 1.8; /* Increased line height for comfort */
}

/* Unordered List Styles */
ul {
list-style-type: none; /* Remove default bullet points */
padding-right: 20px; /* Padding for custom bullets */
margin-right: 0;
}

ul li {
position: relative; /* For positioning custom bullets */
margin-bottom: 10px;
padding-right: 25px; /* Space for custom bullet */
line-height: 1.6;
}

ul li::before {
content: “•”; /* Custom bullet point character */
color: #28a745; /* Accent green for bullets */
font-weight: bold;
position: absolute;
right: 0;
top: 0;
}

/* Table Styles */
table {
width: 100%; /* Full width table */
border-collapse: collapse; /* Collapse table borders */
margin: 25px 0; /* Space above and below table */
font-size: 16px;
text-align: right; /* Right align table content */
}

table thead tr {
background-color: #0056b3; /* Primary blue for table header */
color: #ffffff; /* White text in header */
text-align: right;
}

table th, table td {
padding: 12px 15px; /* Padding inside table cells */
border: 1px solid #dddddd; /* Light gray border for cells */
}

table tbody tr {
border-bottom: 1px solid #dddddd; /* Light gray border for rows */
}

table tbody tr:nth-of-type(even) {
background-color: #f3f3f3; /* Zebra stripping for rows */
}

table tbody tr:last-of-type {
border-bottom: 2px solid #0056b3; /* Primary blue border for the last row */
}

/* Infographic Alternative Styles */
.infographic-container {
margin: 40px 0;
padding: 25px;
background-color: #e6f2ff; /* Light blue background for the infographic section */
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow-x: auto; /* Allow horizontal scroll on small screens if content overflows */
}

.infographic-title {
font-size: 24px;
font-weight: bold;
color: #0056b3;
text-align: center;
margin-bottom: 25px;
border-bottom: 1px dashed #0056b3;
padding-bottom: 10px;
}

.infographic-flow {
display: flex; /* Use flexbox for horizontal layout */
flex-wrap: wrap; /* Allow steps to wrap to the next line on smaller screens */
justify-content: center; /* Center the steps */
gap: 20px; /* Space between infographic steps */
padding: 10px;
}

.infographic-step {
background-color: #ffffff;
border: 2px solid #0056b3;
border-radius: 8px;
padding: 20px;
text-align: center;
min-width: 180px; /* Minimum width for each step */
max-width: 250px; /* Max width to prevent overly wide boxes */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effects */
position: relative;
flex-grow: 1; /* Allow items to grow and fill available space */
flex-basis: calc(33% – 20px); /* Approximately 3 items per row, accounting for gap */
}

.infographic-step:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.infographic-step-icon {
font-size: 36px;
color: #28a745; /* Accent green for icons */
margin-bottom: 10px;
display: block;
}
.infographic-step-text {
font-weight: bold;
color: #333333;
font-size: 18px;
}

/* Arrow styling for desktop/tablet layout (horizontal flow) */
.infographic-flow .infographic-step + .infographic-step::before {
content: “←”; /* Left arrow for RTL flow */
position: absolute;
left: -35px; /* Position to the left of the current step */
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: #0056b3;
z-index: 1;
display: none; /* Hidden by default, shown by media query for larger screens */
}

/* Media queries for responsiveness */
@media (min-width: 768px) {
/* Show horizontal arrows on larger screens */
.infographic-flow .infographic-step + .infographic-step::before {
display: block;
}
}

@media (max-width: 767px) {
/* Adjust font sizes for smaller screens */
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
.article-container { padding: 15px; } /* Reduce padding on small screens */

/* Stack infographic steps vertically on small screens */
.infographic-flow {
flex-direction: column;
align-items: center; /* Center items when stacked */
}
.infographic-step {
width: 90%; /* Full width for steps on small screens */
max-width: 300px;
flex-basis: auto; /* Reset flex-basis for stacking */
}
/* Remove horizontal arrows for vertical flow */
.infographic-flow .infographic-step + .infographic-step::before {
content: none;
}
/* Add down arrow between vertically stacked steps */
.infographic-flow .infographic-step:not(:last-child)::after {
content: “↓”; /* Down arrow */
font-size: 40px;
color: #0056b3;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
/* Two items per row on tablets */
.infographic-step {
flex-basis: calc(50% – 15px);
}
}

/* FAQ Section Styling */
.faq-item {
margin-bottom: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #fdfdfd;
padding: 15px;
}
.faq-question {
font-weight: bold;
color: #0056b3;
font-size: 18px;
margin-bottom: 10px;
padding-right: 30px; /* Space for custom question mark icon */
position: relative;
}
.faq-question::before {
content: “❓”; /* Question mark icon */
position: absolute;
right: 0;
top: 0;
font-size: 22px;
color: #28a745; /* Accent green for the icon */
}
.faq-answer {
color: #555;
text-align: justify;
}

/* Conclusion Styling */
.conclusion {
margin-top: 40px;
padding: 25px;
background-color: #e6ffe6; /* Light green background for conclusion */
border-radius: 10px;
border: 1px solid #28a745; /* Accent green border */
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
}
.conclusion p {
font-weight: 500;
color: #2c3e50;
}