/*
* Style Block for Responsive and Beautiful Design
* This entire block should be copied along with the HTML content.
*/

/* General Body/Container Styles */
.thesis-support-container {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif;
direction: rtl;
text-align: justify;
color: #333;
line-height: 1.8;
max-width: 100%; /* Ensures responsiveness */
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Headings */
.thesis-support-container h1 {
font-size: 2.8em;
font-weight: 800;
color: #004D40; /* Dark Teal */
text-align: center;
margin-bottom: 40px;
line-height: 1.3;
padding-bottom: 15px;
border-bottom: 3px solid #00796B; /* Medium Teal */
}

.thesis-support-container h2 {
font-size: 2.2em;
font-weight: 700;
color: #00695C; /* Medium Dark Teal */
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #A7FFEB; /* Light Aqua */
position: relative;
padding-right: 15px;
}
.thesis-support-container h2::before {
content: “💡”; /* Icon for H2 */
position: absolute;
right: 0;
top: 0;
font-size: 0.8em;
color: #FFC107; /* Amber */
}

.thesis-support-container h3 {
font-size: 1.7em;
font-weight: 600;
color: #26A69A; /* Light Teal */
margin-top: 35px;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 1px dashed #B2DFDB; /* Lighter Teal */
position: relative;
padding-right: 15px;
}
.thesis-support-container h3::before {
content: “✔️”; /* Icon for H3 */
position: absolute;
right: 0;
top: 0;
font-size: 0.8em;
color: #4CAF50; /* Green */
}

/* Paragraphs */
.thesis-support-container p {
font-size: 1.1em;
margin-bottom: 1.5em;
text-align: justify;
}

/* Lists */
.thesis-support-container ul,
.thesis-support-container ol {
margin-right: 25px;
margin-bottom: 1.5em;
line-height: 1.8;
list-style-position: inside; /* Ensures bullets/numbers are inside padding */
}
.thesis-support-container ul li {
margin-bottom: 0.8em;
padding-right: 5px;
position: relative;
}
.thesis-support-container ul li::marker {
color: #00796B; /* Matching list marker color */
font-size: 1.1em;
}
.thesis-support-container ol li {
margin-bottom: 0.8em;
padding-right: 5px;
}
.thesis-support-container ol li::marker {
color: #FF7043; /* Orange accent for ordered lists */
font-weight: bold;
}

/* Links */
.thesis-support-container a {
color: #00796B; /* Medium Teal */
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.thesis-support-container a:hover {
color: #004D40; /* Darker Teal on hover */
text-decoration: underline;
}

/* Table Styles */
.thesis-support-container table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1.05em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners apply to content */
}

.thesis-support-container th,
.thesis-support-container td {
border: 1px solid #E0F2F1; /* Lightest Teal border */
padding: 15px;
text-align: right;
}

.thesis-support-container th {
background-color: #00796B; /* Medium Teal for header */
color: white;
font-weight: bold;
text-align: center;
}

.thesis-support-container tr:nth-child(even) {
background-color: #F5F5F5; /* Light grey for even rows */
}

.thesis-support-container tr:hover {
background-color: #E0F2F1; /* Lighter Teal on hover */
}

/* Infographic Alternative Styles */
.infographic-section {
margin: 40px 0;
padding: 25px;
background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%); /* Gradient background */
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}

.infographic-section h3 {
color: #004D40; /* Dark Teal */
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
font-size: 1.8em;
}

.infographic-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 30px;
}

.infographic-card {
flex: 1 1 280px; /* Allows cards to shrink/grow but maintains min width */
background-color: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
min-height: 180px; /* Ensure cards have some height */
display: flex;
flex-direction: column;
justify-content: center;
}

.infographic-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.infographic-card .icon {
font-size: 3em;
margin-bottom: 15px;
color: #FFC107; /* Amber accent */
line-height: 1; /* Align icon better */
}
.infographic-card .icon.green { color: #4CAF50; }
.infographic-card .icon.blue { color: #2196F3; }
.infographic-card .icon.purple { color: #9C27B0; }

.infographic-card strong {
display: block;
font-size: 1.3em;
color: #00695C; /* Medium Dark Teal */
margin-bottom: 10px;
}

.infographic-card p {
font-size: 1em;
color: #555;
margin-bottom: 0;
}

/* FAQ Section */
.faq-section {
margin-top: 60px;
padding: 25px;
background-color: #E0F2F1; /* Lightest Teal */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.faq-section h2 {
color: #004D40;
border-bottom: 2px solid #00796B;
padding-bottom: 15px;
margin-bottom: 30px;
}
.faq-section h2::before {
content: “❓”;
color: #004D40;
}

.faq-item {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dotted #B2DFDB;
}

.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
}

.faq-question {
font-weight: bold;
color: #00695C; /* Medium Dark Teal */
font-size: 1.2em;
margin-bottom: 10px;
}

.faq-answer {
color: #444;
font-size: 1.05em;
padding-right: 15px;
position: relative;
}
.faq-answer::before {
content: “▪”;
position: absolute;
right: 0;
color: #FF7043; /* Orange accent */
font-size: 1.2em;
line-height: 1;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
.thesis-support-container h1 { font-size: 2.4em; }
.thesis-support-container h2 { font-size: 1.9em; }
.thesis-support-container h3 { font-size: 1.5em; }
.thesis-support-container p { font-size: 1em; }
.infographic-card { flex: 1 1 250px; }
}

@media (max-width: 768px) {
.thesis-support-container { padding: 15px; }
.thesis-support-container h1 { font-size: 2em; margin-bottom: 30px;}
.thesis-support-container h2 { font-size: 1.7em; margin-top: 40px;}
.thesis-support-container h3 { font-size: 1.3em; margin-top: 30px;}
.thesis-support-container th, .thesis-support-container td { padding: 10px; font-size: 0.95em; }
.infographic-cards { flex-direction: column; align-items: center; }
.infographic-card { flex: 0 0 90%; max-width: 400px; } /* Stack cards on small screens */
}

@media (max-width: 480px) {
.thesis-support-container { padding: 10px; }
.thesis-support-container h1 { font-size: 1.8em; }
.thesis-support-container h2 { font-size: 1.5em; }
.thesis-support-container h3 { font-size: 1.2em; }
.thesis-support-container p { font-size: 0.95em; }
.thesis-support-container ul, .thesis-support-container ol { margin-right: 15px; }
.thesis-support-container th, .thesis-support-container td { padding: 8px; font-size: 0.9em; }
.infographic-card .icon { font-size: 2.5em; }
.infographic-card strong { font-size: 1.1em; }
.faq-question { font-size: 1.1em; }
.faq-answer { font-size: 1em; }
}

/* Font import for Vazirmatn (best practice is external, but for copy-paste, inline import or system font is safer) */
@import url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Recoloured/Vazirmatn-Variable_wght.ttf’);