@font-face {
font-family: ‘IRANSans’;
src: url(‘https://cdn.fontcdn.ir/Font/Persian/IRANSans/IRANSans.eot’);
src: url(‘https://cdn.fontcdn.ir/Font/Persian/IRANSans/IRANSans.eot?#iefix’) format(’embedded-opentype’),
url(‘https://cdn.fontcdn.ir/Font/Persian/IRANSans/IRANSans.woff2’) format(‘woff2’),
url(‘https://cdn.fontcdn.ir/Font/Persian/IRANSans/IRANSans.woff’) format(‘woff’),
url(‘https://cdn.fontcdn.ir/Font/Persian/IRANSans/IRANSans.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
direction: rtl; /* Persian language direction */
text-align: right;
margin: 0;
padding: 0;
}

h1, h2, h3 { color: #0056b3; margin-top: 1.8em; margin-bottom: 0.8em; font-family: ‘IRANSans’, ‘Arial’, sans-serif; }
h1 { font-size: 2.8em; font-weight: bold; text-align: center; line-height: 1.3; color: #004085; }
h2 { font-size: 2.1em; font-weight: bold; border-bottom: 3px solid #28a745; padding-bottom: 8px; color: #0056b3; }
h3 { font-size: 1.6em; font-weight: bold; color: #007bff; }
p { margin-bottom: 1.2em; text-align: justify; }
ul { margin-bottom: 1.5em; padding-right: 25px; list-style-type: disc; }
ol { margin-bottom: 1.5em; padding-right: 25px; list-style-type: decimal; }
li { margin-bottom: 0.7em; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; margin: 30px 0; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
th, td { border: 1px solid #dee2e6; padding: 15px; text-align: right; font-size: 1.05em; }
th { background-color: #e9ecef; font-weight: bold; color: #495057; border-bottom: 2px solid #28a745; }
tr:nth-child(even) { background-color: #f8f9fa; }
tr:hover { background-color: #e2f0fb; }

.container-main { max-width: 1100px; margin: auto; padding: 0 20px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.highlight-box { background-color: #e6f7ff; border-right: 6px solid #007bff; padding: 20px; margin: 30px 0; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.toc { background-color: #f0f8ff; border: 1px solid #a8d9ff; padding: 20px; margin: 30px 0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.toc h3 { text-align: center; color: #0056b3; margin-top: 0; margin-bottom: 15px; border-bottom: 1px dashed #a8d9ff; padding-bottom: 10px; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 8px; font-size: 1.1em; }
.toc a { display: block; padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s ease; }
.toc a:hover { background-color: #d1ecf1; text-decoration: none; }

.infographic-container {
display: flex;
flex-direction: column; /* Default for mobile */
gap: 25px;
margin: 40px 0;
padding: 15px;
border: 2px dashed #a8d9ff;
background-color: #f0f8ff;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}
.infographic-item {
background-color: #ffffff;
border: 1px solid #b3e0ff;
border-radius: 12px;
padding: 20px 25px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
text-align: center;
flex-grow: 1; /* Allows items to grow */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infographic-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.infographic-item h3 {
color: #0056b3;
margin-top: 0;
margin-bottom: 10px;
font-size: 1.5em;
}
.infographic-item p {
margin-bottom: 0;
font-size: 1.05em;
line-height: 1.6;
}
.infographic-arrow {
text-align: center;
font-size: 2.5em;
color: #28a745;
margin: 10px 0;
display: block;
font-weight: bold;
}
.infographic-arrow::before {
content: “↓”; /* Down arrow for mobile */
}

/* Responsive adjustments */
@media (min-width: 768px) {
h1 { font-size: 3.5em; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.8em; }
.container-main { padding: 30px; }
.infographic-container {
flex-direction: row; /* Row for desktop */
justify-content: space-around;
align-items: stretch; /* Stretch items to have same height */
padding: 25px;
}
.infographic-item {
flex-basis: 30%; /* Adjust basis for 3 items */
}
.infographic-arrow {
margin: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
.infographic-arrow::before {
content: “→”; /* Right arrow for desktop */
}
}

@media (max-width: 480px) {
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
.container-main { padding: 15px; }
.highlight-box, .toc { padding: 15px; margin: 20px 0; }
table, th, td { font-size: 0.9em; padding: 10px; }
.infographic-item { padding: 15px 20px; }
}