“`html

/* General Body Styles – For overall readability and background */
body {
font-family: ‘Vazirmatn’, ‘Arial’, ‘Helvetica Neue’, ‘Helvetica’, sans-serif; /* Fallback fonts, Vazirmatn for Persian */
line-height: 1.8;
color: #333;
background-color: #f8f9fa; /* Light background */
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl; /* Ensure RTL for Persian text */
text-align: justify;
word-wrap: break-word; /* Ensure long words break correctly */
overflow-x: hidden; /* Prevent horizontal scroll on some mobile browsers */
}

/* Container for content – responsive */
.container {
max-width: 900px;
margin: 30px auto;
padding: 20px;
background-color: #ffffff; /* White content background */
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Headings Styles */
h1, h2, h3 {
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 0.8em;
line-height: 1.4;
text-align: right;
direction: rtl; /* Ensure RTL alignment for headings */
}

h1 {
font-size: 2.4em; /* Larger for H1 */
color: #000080; /* Darker blue for H1 */
border-bottom: 3px solid #6c5ce7; /* Purple accent */
padding-bottom: 15px;
margin-bottom: 30px;
text-align: center; /* Center H1 */
}

h2 {
font-size: 1.8em;
color: #2c387e; /* Slightly lighter indigo */
padding-right: 10px;
border-right: 5px solid #a29bfe; /* Lighter purple accent */
direction: rtl; /* Ensure RTL alignment for headings */
}

h3 {
font-size: 1.4em;
color: #424e8e; /* Even lighter indigo */
padding-right: 8px;
border-right: 3px solid #a29bfe;
direction: rtl; /* Ensure RTL alignment for headings */
}

/* Paragraphs */
p {
margin-bottom: 1.5em;
line-height: 1.9;
text-align: justify;
direction: rtl;
}

/* Lists */
ul {
list-style-type: none; /* Remove default bullet */
padding: 0;
margin: 0 0 1.5em 0;
direction: rtl;
}

ul li {
position: relative;
padding-right: 30px; /* Space for custom bullet */
margin-bottom: 0.8em;
text-align: justify;
}

ul li::before {
content: ‘✨’; /* Custom bullet point */
position: absolute;
right: 0;
color: #a29bfe; /* Purple accent */
font-size: 1.2em;
top: -2px; /* Adjust vertical position */
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
background-color: #f0f4f8; /* Light blue background for table */
border-radius: 8px;
overflow: hidden; /* For rounded corners */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
direction: rtl;
}

th, td {
padding: 15px 20px;
text-align: right;
border-bottom: 1px solid #d0dae2; /* Light gray border */
}

th {
background-color: #3f51b5; /* Deeper blue for header */
color: #ffffff;
font-weight: bold;
text-align: center;
}

tr:last-child td {
border-bottom: none;
}

/* Callout/Highlight Box */
.highlight-box {
background-color: #e8eaf6; /* Light purple-blue */
border-right: 8px solid #6c5ce7; /* Stronger purple border */
padding: 20px 25px;
margin: 2em 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
font-size: 1.1em;
color: #333;
direction: rtl;
}

.highlight-box strong {
color: #3f51b5; /* Deeper blue for strong text */
}

/* Infographic (Text-based visual alternative) */
.infographic-block {
background-color: #e0f2f7; /* Very light blue */
border: 2px dashed #81d4fa; /* Light blue dashed border */
padding: 25px;
margin: 3em 0;
border-radius: 10px;
text-align: center;
overflow-x: auto; /* For mobile responsiveness */
white-space: nowrap; /* Keep items in a line for wider screens */
direction: rtl;
}

.infographic-block .step {
display: inline-block;
vertical-align: top;
width: calc(33% – 20px); /* 3 steps per row, with spacing */
margin: 10px;
padding: 15px;
background-color: #ffffff;
border: 1px solid #bbdefb; /* Light blue border */
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
min-width: 200px; /* Minimum width for mobile */
white-space: normal; /* Allow text to wrap inside the step */
}

.infographic-block .step-icon {
font-size: 2.5em;
color: #007bff; /* Bright blue for icons */
margin-bottom: 10px;
line-height: 1; /* Adjust line height for icon */
}

.infographic-block .step-title {
font-weight: bold;
color: #3f51b5; /* Deep blue */
margin-bottom: 8px;
font-size: 1.1em;
}

.infographic-block .arrow {
display: inline-block;
font-size: 2.5em;
color: #6c5ce7;
margin: 0 10px;
vertical-align: middle;
transform: rotateY(180deg); /* Flip arrow for RTL */
white-space: normal; /* Allow arrow container to wrap if necessary */
}

/* Responsive adjustments */
@media (max-width: 768px) {
.container {
margin: 15px auto;
padding: 15px;
}
h1 {
font-size: 1.8em;
padding-bottom: 10px;
margin-bottom: 20px;
}
h2 {
font-size: 1.5em;
padding-right: 8px;
}
h3 {
font-size: 1.2em;
padding-right: 6px;
}
p {
font-size: 0.95em;
}
ul li {
padding-right: 25px;
}
.infographic-block {
white-space: normal; /* Allow steps to stack */
text-align: center;
}
.infographic-block .step {
width: calc(100% – 20px); /* Stack steps on small screens */
margin-bottom: 15px;
}
.infographic-block .arrow {
display: block; /* Stack arrows */
margin: 10px auto;
transform: rotate(90deg); /* Rotate arrow for vertical flow */
}

/* Responsive table for small screens */
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #d0dae2;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
}
td {
border: none;
position: relative;
padding-right: 50%; /* Space for the pseudo-element label */
text-align: right;
}
td::before {
position: absolute;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
color: #3f51b5;
text-align: right;
}
td:nth-of-type(1)::before { content: “بخش ارائه: “; }
td:nth-of-type(2)::before { content: “محتوای کلیدی: “; }
}

@media (min-width: 1200px) {
.container {
max-width: 1000px;
}
h1 { font-size: 2.8em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.6em; }
}

/* Vazirmatn font import – best for Persian, but often needs to be locally hosted or linked */
/* If embedding in a block editor where external links are stripped, Arial/Helvetica will be used */
@import url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/font/vazirmatn-font-face.css’);

“`