/* Global Styles for Responsiveness and Aesthetics */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif;
line-height: 1.7;
color: #333333;
background-color: #fcfcfc;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
direction: rtl; /* Right-to-left for Persian content */
text-align: right;
}
h1, h2, h3 {
color: #1a4a75; /* Deep blue for headings */
line-height: 1.5;
margin-top: 2em;
margin-bottom: 0.8em;
}
p {
margin-bottom: 1em;
text-align: justify;
}
ul, ol {
margin-bottom: 1em;
padding-right: 20px;
}
li {
margin-bottom: 0.5em;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.section-box {
background-color: #f8faff; /* Light blue background for sections */
border-radius: 8px;
padding: 25px 30px;
margin-bottom: 2em;
border-right: 5px solid #3498db; /* Accent border */
}
.info-card {
background-color: #eaf6fd; /* Lighter blue for info cards */
border-left: 5px solid #3498db;
padding: 15px 20px;
margin: 1.5em 0;
border-radius: 8px;
font-size: 0.95em;
line-height: 1.6;
}
.highlight-text {
color: #2c7ac4;
font-weight: bold;
}
.bullet-point-item {
margin-bottom: 10px;
padding-right: 15px;
position: relative;
}
.bullet-point-item::before {
content: ‘▪’; /* Custom bullet point */
color: #3498db;
position: absolute;
right: 0;
top: 0;
font-weight: bold;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
background-color: #fefefe;
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to contents */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
th, td {
border: 1px solid #e0e0e0;
padding: 14px 18px;
text-align: right;
font-size: 0.95em;
}
th {
background-color: #3498db;
color: #ffffff;
font-weight: bold;
text-align: center;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f0f8ff; /* Light hover effect */
}

/* Infographic-like Section (Process Steps) */
.process-steps {
display: flex;
flex-wrap: wrap; /* Allows items to wrap on smaller screens */
gap: 25px; /* Space between cards */
margin-top: 2em;
justify-content: center;
}
.step-card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
padding: 20px 25px;
flex: 1 1 calc(50% – 25px); /* Two columns on larger screens */
min-width: 280px; /* Minimum width for each card */
box-sizing: border-box;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.step-number {
font-size: 2.2em;
font-weight: bold;
color: #3498db;
margin-bottom: 10px;
display: block;
}
.step-title {
font-size: 1.3em;
font-weight: bold;
color: #1a4a75;
margin-bottom: 10px;
}
.step-description {
font-size: 0.95em;
color: #555555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.container {
margin: 10px auto;
padding: 15px;
border-radius: 8px;
}
h1 { font-size: 1.8em !important; }
h2 { font-size: 1.5em !important; }
h3 { font-size: 1.2em !important; }
th, td {
padding: 10px 12px;
font-size: 0.9em;
}
.section-box {
padding: 20px;
}
.process-steps {
flex-direction: column; /* Stack steps vertically on small screens */
gap: 15px;
}
.step-card {
flex: 1 1 100%; /* Full width on small screens */
min-width: unset;
}
}
@media (max-width: 480px) {
.container {
padding: 10px;
}
h1 { font-size: 1.6em !important; }
h2 { font-size: 1.3em !important; }
h3 { font-size: 1.1em !important; }
.step-title { font-size: 1.1em; }
.step-number { font-size: 1.8em; }
}