@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap’);
/* Reset و استایل‌های پایه */
.article-main-wrapper {
box-sizing: border-box;
font-family: ‘Vazirmatn’, sans-serif;
color: #333;
font-size: 16px; /* Base font size */
padding: 20px;
}

/* استایل هدینگ‌ها برای ریسپانسیو بودن و نمایش درست در انواع دستگاه‌ها */
.article-main-wrapper h1 {
font-size: clamp(28px, 5vw, 42px); /* حداقل 28px، 5% عرض Viewport، حداکثر 42px */
font-weight: 700;
color: #1A237E; /* Indigo */
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #00BCD4; /* Teal accent */
}
.article-main-wrapper h2 {
font-size: clamp(24px, 4vw, 36px); /* حداقل 24px، 4% عرض Viewport، حداکثر 36px */
font-weight: 700;
color: #0D47A1; /* Dark Blue */
margin-top: 40px;
margin-bottom: 20px;
padding-left: 15px;
border-right: 5px solid #00BCD4; /* Teal accent for RTL */
background-color: #e3f2fd; /* Light blue background */
padding-top: 8px;
padding-bottom: 8px;
border-radius: 0 8px 8px 0; /* Rounded right corner for RTL */
}
.article-main-wrapper h3 {
font-size: clamp(20px, 3.5vw, 28px); /* حداقل 20px، 3.5% عرض Viewport، حداکثر 28px */
font-weight: 600;
color: #2196F3; /* Blue */
margin-top: 30px;
margin-bottom: 15px;
padding-left: 10px;
border-right: 3px solid #81D4FA; /* Lighter blue accent */
}
.article-main-wrapper p {
margin-bottom: 15px;
text-align: justify;
font-size: 1em; /* Base font size */
}
.article-main-wrapper ul, .article-main-wrapper ol {
margin-bottom: 15px;
padding-right: 25px; /* Adjust for RTL bullet points */
}
.article-main-wrapper li {
margin-bottom: 8px;
font-size: 1em;
}
.article-main-wrapper .highlight-box {
background-color: #E0F2F7; /* Very light teal */
border-right: 5px solid #00BCD4;
padding: 15px 20px;
margin: 25px 0;
border-radius: 8px;
text-align: justify;
font-weight: 500;
color: #01579B; /* Darker blue for contrast */
}
.article-main-wrapper .table-container {
overflow-x: auto; /* For small screens to allow horizontal scroll */
margin: 25px 0;
border-radius: 8px;
border: 1px solid #E0E0E0;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.article-main-wrapper table {
width: 100%;
border-collapse: collapse;
text-align: right; /* RTL text alignment */
min-width: 300px; /* Ensure table doesn’t get too narrow */
}
.article-main-wrapper th, .article-main-wrapper td {
padding: 12px 15px;
border: 1px solid #E0E0E0;
vertical-align: top;
font-size: 0.95em;
}
.article-main-wrapper th {
background-color: #0D47A1; /* Dark Blue */
color: #FFFFFF;
font-weight: 600;
text-align: center;
}
.article-main-wrapper tr:nth-child(even) {
background-color: #F5F5F5; /* Light grey for even rows */
}
.article-main-wrapper .infographic-box {
background-color: #FFFFFF;
border: 1px solid #B2EBF2;
border-radius: 10px;
padding: 20px;
margin: 30px 0;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 15px;
}
.article-main-wrapper .infographic-item {
display: flex;
align-items: center;
justify-content: flex-end; /* RTL adjustment */
gap: 15px;
padding: 10px;
background-color: #E0F7FA; /* Lightest teal */
border-radius: 8px;
box-shadow: 0 1px 5px rgba(0,0,0,0.03);
flex-wrap: wrap; /* Allow wrapping on small screens */
}
.article-main-wrapper .infographic-icon {
font-size: 2.5em; /* Icon size */
color: #00BCD4; /* Teal */
line-height: 1;
}
.article-main-wrapper .infographic-text {
flex-grow: 1;
text-align: right; /* RTL text alignment */
font-size: 1.05em;
font-weight: 500;
color: #01579B;
}
.article-main-wrapper .call-to-action {
background-color: #0D47A1;
color: #FFFFFF;
padding: 25px;
text-align: center;
border-radius: 10px;
margin-top: 40px;
font-size: 1.1em;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.article-main-wrapper .call-to-action a {
color: #00BCD4;
text-decoration: none;
font-weight: 700;
transition: color 0.3s ease;
}
.article-main-wrapper .call-to-action a:hover {
color: #80DEEA;
}
.article-main-wrapper a {
color: #0D47A1; /* Link color */
text-decoration: none;
}
.article-main-wrapper a:hover {
text-decoration: underline;
}

/* Responsive adjustments for smaller screens (mobile, tablet) */
@media (max-width: 768px) {
.article-main-wrapper {
padding: 15px;
font-size: 15px;
}
.article-main-wrapper h1 { font-size: 2.2em; }
.article-main-wrapper h2 { font-size: 1.8em; }
.article-main-wrapper h3 { font-size: 1.4em; }
.article-main-wrapper .infographic-item {
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
gap: 5px; /* Reduce gap for smaller screens */
}
.article-main-wrapper .infographic-text {
text-align: center;
margin-top: 10px;
}
.article-main-wrapper th, .article-main-wrapper td {
padding: 10px 12px;
}
.article-main-wrapper ul, .article-main-wrapper ol {
padding-right: 20px;
}
}
@media (max-width: 480px) {
.article-main-wrapper {
padding: 10px;
font-size: 14px;
}
.article-main-wrapper h1 { font-size: 1.8em; }
.article-main-wrapper h2 { font-size: 1.5em; }
.article-main-wrapper h3 { font-size: 1.2em; }
.article-main-wrapper p, .article-main-wrapper li, .article-main-wrapper th, .article-main-wrapper td { font-size: 0.9em; }
.article-main-wrapper .infographic-icon { font-size: 2em; }
.article-main-wrapper .highlight-box, .article-main-wrapper .call-to-action {
padding: 15px;
}
}