“`html

/* Basic Styles for overall responsiveness and visual appeal */
body {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* A common Farsi font and a fallback */
line-height: 1.8;
color: #333;
background-color: #f9f9f9;
margin: 0;
padding: 0;
direction: rtl; /* Ensures right-to-left for Farsi */
}
.container {
max-width: 900px; /* Optimal width for readability */
margin: 30px auto;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #eee;
}
@media (max-width: 768px) {
.container {
margin: 15px;
padding: 15px;
}
}
@media (max-width: 480px) {
.container {
margin: 10px;
padding: 10px;
border-radius: 8px;
}
}

/* Heading Styles */
h1 {
font-size: 2.8em; /* Responsive font size */
font-weight: bold;
color: #0A3D62; /* Dark blue */
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid #4A8FB1; /* Medium blue accent */
line-height: 1.3;
}
h2 {
font-size: 2.2em;
font-weight: bold;
color: #1E6091; /* Slightly lighter blue */
margin-top: 40px;
margin-bottom: 20px;
padding-right: 15px;
border-right: 6px solid #89CFF0; /* Light blue accent */
line-height: 1.4;
}
h3 {
font-size: 1.8em;
font-weight: bold;
color: #3C8CE7; /* Brighter blue */
margin-top: 30px;
margin-bottom: 15px;
padding-right: 10px;
line-height: 1.5;
}
@media (max-width: 768px) {
h1 { font-size: 2.2em; margin-bottom: 20px; }
h2 { font-size: 1.8em; margin-top: 30px; margin-bottom: 15px; }
h3 { font-size: 1.5em; margin-top: 25px; margin-bottom: 12px; }
}
@media (max-width: 480px) {
h1 { font-size: 1.8em; margin-bottom: 15px; }
h2 { font-size: 1.5em; margin-top: 25px; margin-bottom: 12px; }
h3 { font-size: 1.3em; margin-top: 20px; margin-bottom: 10px; }
}

/* Paragraphs and Lists */
p {
margin-bottom: 1em;
font-size: 1.1em;
}
ul, ol {
margin-right: 20px;
margin-bottom: 1em;
padding-right: 0;
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
margin-bottom: 0.5em;
font-size: 1.05em;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1.05em;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners */
}
th, td {
border: 1px solid #ddd;
padding: 15px;
text-align: right;
}
th {
background-color: #E6F0F6; /* Light blue-grey */
color: #0A3D62; /* Dark blue */
font-weight: bold;
font-size: 1.1em;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e8f5fb; /* Lighter blue on hover */
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto; /* Makes table scrollable horizontally on small screens */
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50%;
text-align: right;
}
td:before {
position: absolute;
top: 6px;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
content: attr(data-label); /* Uses data-label for column names */
color: #0A3D62;
}
/* Add data-label to each td in HTML for this to work perfectly on small screens */
td:nth-of-type(1):before { content: “جنبه کاهش هزینه”; }
td:nth-of-type(2):before { content: “راهکار عملی”; }
}

/* Infographic Alternative Styles (using div blocks) */
.infographic-block {
background-color: #E6F0F6; /* Light blue-grey */
border: 2px dashed #4A8FB1; /* Medium blue dashed border */
padding: 25px;
margin: 40px auto;
border-radius: 15px;
text-align: center;
max-width: 80%; /* Constrain width */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
position: relative;
}
.infographic-title {
font-size: 1.6em;
font-weight: bold;
color: #0A3D62;
margin-bottom: 25px;
display: inline-block;
background-color: #fff;
padding: 8px 20px;
border-radius: 25px;
border: 1px solid #89CFF0;
}
.infographic-step {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-wrap: wrap; /* Allow wrapping on small screens */
}
.step-icon {
background-color: #4A8FB1; /* Medium blue */
color: #fff;
border-radius: 50%;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8em;
font-weight: bold;
flex-shrink: 0;
margin: 0 15px;
}
.step-text {
flex-grow: 1;
text-align: right;
padding: 15px 20px;
background-color: #fff;
border-radius: 10px;
border: 1px solid #89CFF0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
font-size: 1.1em;
max-width: calc(100% – 100px); /* Adjust for icon width */
}
.arrow {
font-size: 2.5em;
color: #89CFF0;
margin: 10px 0;
display: block; /* Each arrow on new line */
line-height: 0.8;
}
@media (max-width: 600px) {
.infographic-step {
flex-direction: column;
margin-bottom: 15px;
}
.step-icon {
margin: 0 0 10px 0;
width: 45px;
height: 45px;
font-size: 1.5em;
}
.step-text {
width: 100%;
max-width: 100%;
padding: 10px 15px;
font-size: 1em;
}
.arrow {
font-size: 2em;
margin: 5px 0;
}
.infographic-block {
padding: 15px;
}
}

/* FAQ Section */
.faq-section {
margin-top: 50px;
background-color: #E6F0F6;
padding: 30px;
border-radius: 12px;
border: 1px solid #4A8FB1;
box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}
.faq-question {
font-weight: bold;
color: #0A3D62;
font-size: 1.25em;
margin-top: 20px;
margin-bottom: 10px;
padding-right: 8px;
border-right: 4px solid #89CFF0;
}
.faq-answer {
font-size: 1.1em;
margin-bottom: 15px;
padding-right: 12px;
color: #555;
}

/* General Spacing */
.mb-20 { margin-bottom: 20px; }
.mt-30 { margin-top: 30px; }

“`