/* Global Styles for Readability and Responsiveness */
body, p, h1, h2, h3, h4, div, table, th, td, ul, li {
font-family: ‘Segoe UI’, ‘Helvetica Neue’, Arial, sans-serif;
line-height: 1.7;
color: #34495E; /* Darker Grey for body text */
direction: rtl; /* Right-to-left for Persian */
text-align: right; /* Align text to the right for RTL */
}

/* Basic Responsive Container – Adjusts width based on screen size */
.container {
max-width: 100%; /* For full width on very small screens */
padding: 0 15px; /* Default padding for smaller screens */
margin: auto;
box-sizing: border-box; /* Include padding in element’s total width/height */
}
@media (min-width: 600px) { /* Tablets and larger */
.container {
max-width: 90%;
padding: 0 20px;
}
}
@media (min-width: 900px) { /* Laptops and larger */
.container {
max-width: 800px; /* Optimal reading width for content */
padding: 0;
}
}
@media (min-width: 1200px) { /* Large screens/TVs */
.container {
max-width: 960px; /* Slightly wider for better use of space */
}
}

/* Heading Styles – Defined with specific sizes and weights for visual impact */
h1 {
font-size: 2.5em; /* Larger size for primary heading */
color: #2C3E50; /* Dark Blue/Grey */
text-align: center;
margin-bottom: 40px;
line-height: 1.3;
font-weight: 700; /* Extra bold */
padding: 25px 15px;
background-color: #ECF0F1; /* Light Grey background */
border-bottom: 4px solid #3498DB; /* Vibrant Blue accent line */
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
border-radius: 5px; /* Slightly rounded corners */
}
h2 {
font-size: 1.9em; /* Prominent size for main sections */
color: #3498DB; /* Vibrant Blue */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #ECF0F1; /* Light separator line */
padding-bottom: 12px;
font-weight: 600; /* Semi-bold */
}
h3 {
font-size: 1.4em; /* Clear distinction for sub-sections */
color: #2C3E50; /* Dark Blue/Grey */
margin-top: 35px;
margin-bottom: 18px;
font-weight: 600; /* Semi-bold */
}
h4 { /* Used for infographic item titles */
font-size: 1.2em;
color: #2C3E50;
margin-top: 0;
margin-bottom: 10px;
font-weight: 700;
}

/* Paragraphs and Lists */
p {
margin-bottom: 1.2em;
font-size: 1.05em;
}
ul {
margin-right: 25px; /* Indent for RTL */
margin-bottom: 1.5em;
padding: 0; /* Remove default padding */
list-style: none; /* Remove default list style */
}
li {
margin-bottom: 0.8em;
position: relative;
padding-right: 30px; /* Space for custom bullet */
}
li::before { /* Custom bullet point for aesthetic */
content: ‘✓’; /* Unicode checkmark */
color: #2ECC71; /* Green accent */
font-weight: bold;
position: absolute;
right: 0;
top: 0;
}
a {
color: #3498DB; /* Link color */
text-decoration: none; /* No underline by default */
transition: color 0.3s ease;
}
a:hover {
color: #2C3E50; /* Darker on hover */
text-decoration: underline;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse; /* Ensure borders are merged */
margin: 40px 0;
background-color: #ffffff;
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* More prominent shadow */
border-radius: 8px; /* Rounded table corners */
overflow: hidden; /* Hide overflowing content, especially rounded corners */
}
th, td {
border: 1px solid #ECF0F1; /* Light Grey border */
padding: 14px 18px;
text-align: right; /* RTL support */
}
th {
background-color: #3498DB; /* Vibrant Blue header */
color: white;
font-weight: 700;
font-size: 1.15em;
white-space: nowrap; /* Prevent text wrapping in headers */
}
tr:nth-child(even) {
background-color: #F8F8F8; /* Light stripe for readability */
}
tr:hover {
background-color: #EFEFEF;
}
/* Responsive Table */
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block; /* Make table elements behave like blocks */
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px; /* Hide table header on small screens */
}
tr {
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
td {
border: none;
border-bottom: 1px solid #ECF0F1;
position: relative;
padding-right: 50%; /* Space for pseudo-element label */
text-align: right;
}
td:before { /* Create a label for each cell using data-label attribute */
position: absolute;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
content: attr(data-label); /* Use attribute value as content */
color: #3498DB;
}
/* Specific labels for cells – this requires manual data-label attribute in HTML */
td:nth-of-type(1):before { content: “رویکرد پژوهشی:”; }
td:nth-of-type(2):before { content: “ویژگی‌های اصلی:”; }
}

/* Infographic Alternative Styles (Card-like design) */
.infographic-section {
margin: 60px 0;
text-align: center;
background-color: #ECF0F1; /* Light Grey background */
padding: 40px 25px;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0,0,0,0.1); /* More pronounced shadow */
}
.infographic-grid {
display: grid;
grid-template-columns: 1fr; /* Single column on small screens */
gap: 30px; /* Space between cards */
margin-top: 30px;
}
@media (min-width: 600px) { /* Two columns on medium screens */
.infographic-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
@media (min-width: 900px) { /* Three columns on larger screens */
.infographic-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.infographic-item {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0,0,0,0.08); /* Card shadow */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
text-align: right; /* RTL support */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end; /* Align content to the right for RTL */
}
.infographic-item:hover {
transform: translateY(-8px); /* Lift effect on hover */
box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
}
.infographic-icon {
font-size: 3em; /* Larger icons */
color: #2ECC71; /* Green accent */
margin-bottom: 20px;
line-height: 1; /* Adjust line height for icons */
}
.infographic-item p {
font-size: 0.98em;
line-height: 1.6;
color: #555;
margin-bottom: 0;
}

/* Highlight Box for important notes */
.highlight-box {
background-color: #f0f8ff; /* Light blue tint */
border-right: 5px solid #3498DB; /* Blue border on right for emphasis */
padding: 20px 25px;
margin: 35px 0;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
text-align: right; /* RTL */
}
.highlight-box p {
margin: 0;
font-weight: 500;
font-size: 1.05em;
line-height: 1.5;
}
.highlight-box strong {
color: #2C3E50; /* Stronger color for emphasis */
}