/* Global styles for readability and responsiveness */
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7;
color: #333333;
background-color: #f8f8f8;
margin: 0;
padding: 20px;
}

/* Responsive container */
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Headings styling */
h1 {
font-size: 2.8em;
font-weight: 700;
color: #1a4a61;
margin-top: 0;
margin-bottom: 30px;
text-align: center;
border-bottom: 3px solid #e0f2f7;
padding-bottom: 15px;
}

h2 {
font-size: 2.2em;
font-weight: 600;
color: #2c5f78;
margin-top: 40px;
margin-bottom: 25px;
border-left: 6px solid #4a90a4;
padding-left: 15px;
background-color: #e0f2f7;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 8px;
}

h3 {
font-size: 1.6em;
font-weight: 600;
color: #3d7a96;
margin-top: 30px;
margin-bottom: 18px;
border-bottom: 2px dashed #e0f2f7;
padding-bottom: 8px;
}

p {
margin-bottom: 1em;
text-align: justify;
}

ul {
list-style-type: disc;
margin-left: 25px;
margin-bottom: 1em;
}

ol {
margin-left: 25px;
margin-bottom: 1em;
}

li {
margin-bottom: 0.5em;
}

strong {
color: #1a4a61;
}

/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners are applied */
}

th, td {
border: 1px solid #dcdcdc;
padding: 12px 18px;
text-align: right;
}

th {
background-color: #4a90a4;
color: white;
font-weight: 600;
font-size: 1.1em;
}

td {
background-color: #ffffff;
}

tr:nth-child(even) td {
background-color: #f5fafd;
}

/* Infographic styling */
.infographic-box {
background-color: #e0f7fa; /* Light teal */
border: 2px solid #a7d9e8;
border-radius: 10px;
padding: 25px;
margin: 30px 0;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.infographic-title {
font-size: 1.8em;
font-weight: 700;
color: #1a4a61;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}

.infographic-title::after {
content: ”;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 60px;
height: 3px;
background-color: #4a90a4;
border-radius: 5px;
}

.infographic-step {
display: flex;
align-items: center;
margin: 15px 0;
background-color: #fcfdff;
padding: 15px;
border-radius: 8px;
border: 1px solid #c0e6f0;
transition: transform 0.2s ease-in-out;
flex-wrap: wrap; /* For responsiveness */
}

.infographic-step:hover {
transform: translateY(-3px);
}

.step-icon {
font-size: 2.5em;
color: #4a90a4;
margin-right: 15px;
min-width: 40px; /* Ensure icon doesn’t shrink too much */
text-align: center;
}

.step-text {
text-align: right;
flex-grow: 1;
font-size: 1.1em;
color: #333333;
}

.step-arrow {
font-size: 2.5em;
color: #a7d9e8;
margin: 0 10px;
display: block; /* Default to block for vertical flow on small screens */
width: 100%; /* Full width for arrow on small screens */
text-align: center;
padding: 10px 0;
}

.infographic-steps-flow .infographic-step:not(:last-child) {
margin-bottom: 0; /* Remove bottom margin for flow */
}

.infographic-steps-flow .step-arrow {
display: none; /* Hide default arrow in flow for larger screens */
}

.infographic-steps-flow {
display: flex;
flex-direction: column; /* Default to column for small screens */
align-items: center; /* Center items */
}

.infographic-steps-flow .infographic-item-wrapper {
position: relative;
display: flex; /* For wrapping content inside */
align-items: center;
justify-content: center;
width: 100%; /* Default width */
}

/* Style for Success Factors Infographic */
.success-factor {
display: flex;
align-items: center;
justify-content: center;
background-color: #d4edda; /* Light green */
border: 1px solid #c3e6cb;
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 12px;
font-size: 1.1em;
color: #155724; /* Dark green text */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: background-color 0.2s;
flex-wrap: wrap; /* For responsiveness */
}

.success-factor:hover {
background-color: #c7eed2;
}

.factor-icon {
font-size: 1.8em;
color: #218838;
margin-left: 15px; /* Adjust for RTL */
}

.factor-text {
text-align: right;
flex-grow: 1;
}

/* TOC styling */
.table-of-contents {
background-color: #f0faff;
border: 1px solid #cce6f7;
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-of-contents h3 {
color: #1a4a61;
margin-top: 0;
margin-bottom: 15px;
text-align: center;
border-bottom: 2px solid #cce6f7;
padding-bottom: 10px;
font-size: 1.8em;
font-weight: 700;
}

.table-of-contents ul {
list-style: none;
padding: 0;
text-align: right;
}

.table-of-contents ul li {
margin-bottom: 8px;
}

.table-of-contents ul li a {
color: #2c5f78;
text-decoration: none;
font-size: 1.1em;
display: block;
padding: 8px 12px;
border-radius: 5px;
transition: background-color 0.2s, color 0.2s;
}

.table-of-contents ul li a:hover {
background-color: #e0f2f7;
color: #1a4a61;
padding-right: 15px; /* Slight visual feedback */
}

/* Responsive adjustments */
@media (min-width: 768px) {
.infographic-steps-flow {
flex-direction: row; /* Horizontal flow for larger screens */
flex-wrap: wrap; /* Allow wrapping */
justify-content: space-around;
}

.infographic-steps-flow .infographic-item-wrapper {
width: 30%; /* Adjust width for multiple items per row */
margin: 10px; /* Add some margin */
flex-direction: column;
}

.infographic-steps-flow .step-arrow {
display: inline-block; /* Show arrow for horizontal flow */
width: auto;
transform: rotate(0deg); /* Reset rotation */
padding: 0 10px; /* Adjust padding */
}

.infographic-step {
flex-direction: row-reverse; /* For RTL text, icon on right */
text-align: right;
}

.step-icon {
margin-right: 0;
margin-left: 15px; /* Adjust for RTL */
}

.infographic-steps-flow .infographic-item-wrapper:not(:last-child)::after {
content: “➔”; /* Visual arrow between steps */
position: absolute;
right: -30px; /* Position to the right of the item */
top: 50%;
transform: translateY(-50%);
font-size: 2.5em;
color: #a7d9e8;
z-index: 1; /* Ensure arrow is above background */
}

.infographic-steps-flow .infographic-item-wrapper:nth-child(3n)::after {
content: none; /* No arrow after every 3rd item in a row */
}

.infographic-steps-flow .infographic-step {
height: 100%; /* Make steps take full height */
align-items: flex-start; /* Align content to top */
display: block; /* Allow block-level formatting within */
}

.infographic-steps-flow .step-text {
text-align: center; /* Center text within step */
margin-top: 10px;
}

.infographic-steps-flow .step-icon {
margin: 0 auto 10px auto; /* Center icon */
display: block;
}
}

@media (max-width: 767px) {
h1 {
font-size: 2.2em;
padding-bottom: 10px;
}
h2 {
font-size: 1.8em;
padding-left: 10px;
}
h3 {
font-size: 1.4em;
}
.container {
padding: 15px;
border-radius: 8px;
}
th, td {
padding: 10px 12px;
font-size: 0.9em;
}
.infographic-step {
flex-direction: column-reverse; /* Icon on top, text below for small screens */
text-align: center;
}
.step-icon {
margin-right: 0;
margin-bottom: 10px;
}
.step-text {
font-size: 1em;
}
.infographic-title {
font-size: 1.6em;
}
.infographic-steps-flow .infographic-item-wrapper {
width: 95%; /* Make items take almost full width */
margin-bottom: 20px;
}
.infographic-steps-flow .infographic-item-wrapper:not(:last-child)::after {
content: “↓”;
right: 50%;
bottom: -25px; /* Position below */
top: auto;
transform: translateX(50%);
font-size: 2.5em;
color: #a7d9e8;
}
.success-factor {
flex-direction: column-reverse;
text-align: center;
}
.factor-icon {
margin-left: 0;
margin-bottom: 10px;
}
.factor-text {
font-size: 1em;
}
}

/* Text alignment for RTL */
html {
direction: rtl;
text-align: right;
}
.container, h1, h2, h3, p, ul, ol, table, th, td, .infographic-box, .infographic-title, .infographic-step, .step-text, .table-of-contents h3, .table-of-contents ul li a, .success-factor, .factor-text {
text-align: right;
}
/* Specific adjustments for center alignment that should remain */
.infographic-title, .infographic-title::after, .step-arrow, .table-of-contents h3, .step-icon, .factor-icon {
text-align: center; /* Override for these elements */
}
/* For flex items, adjust flow for RTL */
.infographic-step {
flex-direction: row-reverse; /* Icon on right for RTL */
}
.step-icon {
margin-right: 0;
margin-left: 15px; /* Margin to the left of the icon */
}
.success-factor {
flex-direction: row-reverse;
}
.factor-icon {
margin-left: 15px;
margin-right: 0;
}

@media (min-width: 768px) {
.infographic-steps-flow .infographic-item-wrapper:not(:last-child)::after {
left: -30px; /* Position to the left of the item for RTL */
right: auto;
}
.infographic-steps-flow .infographic-item-wrapper {
flex-direction: column; /* Keep column for content inside box */
}
.infographic-steps-flow {
flex-direction: row-reverse; /* Flow right to left for horizontal steps */
}
}