/* RTL Layout Overrides - Applied when html[dir="rtl"] */
/* Arabic Font */
[dir="rtl"] body {
font-family: "Noto Sans Arabic", "Zalando Sans Expanded", sans-serif;
direction: rtl;
}
/* General text alignment */
[dir="rtl"] .text-left {
text-align: right;
}
[dir="rtl"] .text-right {
text-align: left;
}
/* Language Toggle - Pill Switch */
.lang-switch {
display: flex;
align-items: center;
direction: ltr;
background: rgba(201, 162, 39, 0.15);
border: 1px solid rgba(201, 162, 39, 0.3);
border-radius: 50px;
padding: 3px;
cursor: pointer;
position: relative;
width: 100px;
height: 34px;
}
.lang-switch-track {
position: absolute;
top: 3px;
width: calc(50% - 3px);
height: calc(100% - 6px);
background: #c9a227;
border-radius: 50px;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
left: 3px;
}
.lang-switch-label {
flex: 1;
text-align: center;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
position: relative;
z-index: 1;
transition: color 0.3s ease;
user-select: none;
line-height: 28px;
}
.lang-switch-label.lang-en {
color: #000;
}
.lang-switch-label.lang-ar {
color: rgba(255, 255, 255, 0.5);
}
/* Mobile toggle */
.mobile-lang-switch {
margin-top: 1.5rem;
align-self: center;
width: 120px;
height: 40px;
}
.mobile-lang-switch .lang-switch-label {
font-size: 0.85rem;
line-height: 34px;
}
/* Keep nav-cta visible on mobile since it has the lang switch */
.nav-cta {
display: flex !important;
}
/* On mobile, position switch between logo and hamburger */
@media (max-width: 992px) {
.nav-cta {
margin-left: auto;
margin-right: 1rem;
}
[dir="rtl"] .nav-cta {
margin-left: 1rem;
margin-right: auto;
}
}
/* Nav RTL — already gives nav `direction: rtl`, so default
`flex-direction: row` lays the bar out right-to-left on its own: logo on the
right, links reading from the right (Home nearest the logo), lang switch +
hamburger on the left. Do NOT add row-reverse here — it double-reverses the
already-RTL container and flips the whole bar back to LTR (logo on the left). */
[dir="rtl"] nav {
flex-direction: row;
}
[dir="rtl"] .nav-links {
flex-direction: row;
}
/* Mobile Menu RTL */
[dir="rtl"] .mobile-menu-header {
flex-direction: row-reverse;
}
[dir="rtl"] .mobile-menu-links {
text-align: center;
}
/* Footer RTL — the footer inherits direction:rtl from , which already
mirrors every flex row (CTA on the right, columns/links/socials flowing from
the right). Do NOT add flex-direction:row-reverse here: it double-reverses an
already-RTL container and flips the whole footer back to LTR. Only the
text-align nudges below are needed. */
[dir="rtl"] .footer-cta {
text-align: right;
}
[dir="rtl"] .footer-col {
text-align: right;
}
/* On mobile, center footer even in RTL */
@media (max-width: 576px) {
[dir="rtl"] .footer-top {
flex-direction: column;
text-align: center;
}
[dir="rtl"] .footer-cta {
text-align: center;
}
[dir="rtl"] .footer-columns {
flex-direction: column;
}
[dir="rtl"] .footer-col {
text-align: center;
}
[dir="rtl"] .footer-bottom {
flex-direction: column;
}
}
/* Stats numbers - keep LTR always */
[dir="rtl"] .stat-number-wrapper,
[dir="rtl"] .stat-number,
[dir="rtl"] .stat-plus,
[dir="rtl"] .stat-symbol {
direction: ltr;
}
/* Crypto marquee - keep LTR always */
[dir="rtl"] .marquee-container,
[dir="rtl"] .marquee-row,
[dir="rtl"] .marquee-content,
[dir="rtl"] .crypto-pill {
direction: ltr;
}
/* Hero section RTL */
[dir="rtl"] .hero-content {
text-align: center;
}
/* Contact page RTL */
[dir="rtl"] .contact-content {
direction: rtl;
}
[dir="rtl"] .contact-info {
text-align: right;
}
/* .info-block is flex-direction:column, so align-items works on the (now
RTL) cross axis: flex-start = right, flex-end = left. Use flex-start to keep
each shrink-to-fit block hugging the right edge. */
[dir="rtl"] .info-block {
align-items: flex-start;
}
@media (max-width: 768px) {
[dir="rtl"] .contact-info {
text-align: center;
}
[dir="rtl"] .info-block {
align-items: center;
}
}
/* About page RTL */
[dir="rtl"] .about-header {
text-align: center;
}
[dir="rtl"] .timeline-content {
text-align: right;
}
/* Team/Instructors RTL */
[dir="rtl"] .team-card-inner {
text-align: right;
}
[dir="rtl"] .team-card-name {
padding-right: 0;
padding-left: 60px;
}
[dir="rtl"] .team-card-desc {
direction: rtl;
text-align: right;
}
/* Instructor cards RTL */
[dir="rtl"] .instructor-card {
text-align: right;
}
[dir="rtl"] .instructor-info {
text-align: right;
}
/* Books page RTL */
[dir="rtl"] .book-bar {
flex-direction: row-reverse;
}
[dir="rtl"] .book-bar-title {
text-align: right;
}
[dir="rtl"] .book-bar-author {
text-align: left;
}
/* Events page RTL */
[dir="rtl"] .event-card {
direction: rtl;
}
[dir="rtl"] .event-card-content {
text-align: right;
}
/* Courses page RTL */
[dir="rtl"] .hero-features {
direction: rtl;
}
/* Stats section RTL - keep circle animations correct */
[dir="rtl"] .stats-section {
direction: ltr;
}
[dir="rtl"] .stats-section-header {
direction: rtl;
text-align: center;
}
[dir="rtl"] .stat-description {
direction: rtl;
text-align: center;
}
/* Date markers RTL */
[dir="rtl"] .date-marker {
transform-origin: right center;
}
[dir="rtl"] .date-marker-line {
order: 1;
}
[dir="rtl"] .date-marker-text {
margin-left: 0;
margin-right: 15px;
}
/* Testimonial/News cards RTL */
[dir="rtl"] .testimonials-section {
direction: ltr;
}
[dir="rtl"] .testimonials-inner {
direction: rtl;
}
[dir="rtl"] .testimonials-inner .testimonials-title {
direction: rtl;
text-align: center;
}
[dir="rtl"] .tt-card {
direction: rtl;
text-align: right;
}
/* Weekly analysis section RTL */
[dir="rtl"] .weekly-analysis-section {
direction: ltr;
}
[dir="rtl"] .weekly-analysis-header {
direction: rtl;
text-align: center;
}
/* Video section RTL - keep card positions correct */
[dir="rtl"] .video-section {
direction: ltr;
}
[dir="rtl"] .video-section .content-left {
direction: rtl;
text-align: right;
}
[dir="rtl"] .video-highlight-section {
direction: rtl;
}
/* Team section RTL - keep horizontal scroll working */
[dir="rtl"] .team-section {
direction: ltr;
}
[dir="rtl"] .team-section .team-container > .team-header,
[dir="rtl"] .team-section .team-container > .team-title {
direction: rtl;
text-align: center;
}
[dir="rtl"] .team-card-inner {
direction: rtl;
}
/* Features section RTL - keep card animations correct */
[dir="rtl"] .features-section {
direction: ltr;
}
[dir="rtl"] .features-section .feature-header,
[dir="rtl"] .features-section .testimonials-title {
direction: rtl;
text-align: center;
}
[dir="rtl"] .features-section .feature-content {
direction: rtl;
text-align: right;
}
/* Process section RTL - keep step layout */
[dir="rtl"] .process-section {
direction: ltr;
}
[dir="rtl"] .process-section .process-section-title {
direction: rtl;
text-align: center;
}
[dir="rtl"] .process-section .process-step {
direction: rtl;
text-align: right;
}
/* Hero Slideshow RTL */
[dir="rtl"] .hero-slideshow {
direction: ltr;
}
[dir="rtl"] .slide-text-content {
direction: rtl;
text-align: right;
}
[dir="rtl"] .slide-cta-row {
flex-direction: row-reverse;
}
[dir="rtl"] .slide-preview-card .card-overlay {
direction: rtl;
text-align: right;
}
[dir="rtl"] .slideshow-progress-area {
right: auto;
left: 60px;
}
/* Services section RTL */
[dir="rtl"] .services-section {
direction: rtl;
}
[dir="rtl"] .service-card-title,
[dir="rtl"] .service-card-desc {
text-align: right;
}
/* Capabilities section RTL */
[dir="rtl"] .capabilities-section {
direction: ltr;
}
[dir="rtl"] .capabilities-section .cap-card {
direction: rtl;
text-align: right;
}
/* CTA section RTL */
[dir="rtl"] .cta-section {
direction: ltr;
}
[dir="rtl"] .cta-section .cta-glass-card {
direction: rtl;
text-align: center;
}
/* General flex reverse for RTL where needed */
[dir="rtl"] .social-links {
flex-direction: row-reverse;
}
/* Stats cards in team/instructors RTL */
[dir="rtl"] .modal-stats {
flex-direction: row-reverse;
}
/* Form inputs RTL */
[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea {
text-align: right;
}
[dir="rtl"] .form-group input::placeholder,
[dir="rtl"] .form-group textarea::placeholder {
text-align: right;
}
/* =====================================================================
QA PASS — comprehensive RTL mirroring across all flagged sections.
(Selectors that don't exist on a given page are harmless no-ops.)
===================================================================== */
/* ---- index.html: Video / highlight section ----
Text column on the RIGHT, video+chips on the LEFT, floating cards mirrored. */
[dir="rtl"] .video-section > .content-left {
order: 2;
}
[dir="rtl"] .video-section > .video-right {
order: 1;
}
[dir="rtl"] .card-1 {
left: auto;
right: -15%;
}
[dir="rtl"] .card-2 {
right: auto;
left: -4%;
}
[dir="rtl"] .card-3 {
right: auto;
left: -5%;
}
[dir="rtl"] .card-4 {
left: auto;
right: -10%;
}
[dir="rtl"] .card-trust {
left: auto;
right: -15%;
}
/* ---- index.html: Process section (Learn / Practice / Profit) ---- */
[dir="rtl"] .process-header,
[dir="rtl"] .process-cards,
[dir="rtl"] .process-card {
direction: rtl;
}
[dir="rtl"] .process-header .process-step,
[dir="rtl"] .process-step-desc,
[dir="rtl"] .progress-label,
[dir="rtl"] .progress-tracker-label,
[dir="rtl"] .metric-name {
text-align: right;
}
[dir="rtl"] .connector-squares,
[dir="rtl"] .progress-bar-container,
[dir="rtl"] .metrics-header,
[dir="rtl"] .metric-row,
[dir="rtl"] .metric-value {
flex-direction: row-reverse;
}
[dir="rtl"] .checklist-items li {
flex-direction: row-reverse;
text-align: right;
}
[dir="rtl"] .progress-percent,
[dir="rtl"] .progress-tracker-percent {
text-align: left;
}
/* ---- index.html: Services section ---- */
[dir="rtl"] .services-container {
flex-direction: row-reverse;
}
[dir="rtl"] .service-card {
direction: rtl;
}
/* ---- index.html: Economic Information section ---- */
[dir="rtl"] .econ-info-section,
[dir="rtl"] .ei-grid,
[dir="rtl"] .ei-cell {
direction: rtl;
}
[dir="rtl"] .ei-cell {
text-align: right;
}
/* border separators flip side in RTL */
[dir="rtl"] .ei-cell:not(:nth-child(3n+1)) {
border-left: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
/* Mirror the whole prev/next control (flips button order AND the arrow glyph,
works whether the arrow is a text glyph ←/→ or an inline SVG).
direction:ltr is required: these are flex rows that would otherwise inherit
rtl and reorder the buttons a SECOND time, cancelling the flip and leaving the
arrows pointing inward (→ ←). Forcing ltr lets scaleX be the only reorder. */
[dir="rtl"] .ei-nav-arrows {
direction: ltr;
transform: scaleX(-1);
}
/* ---- index.html: News / testimonials cards + Daily Analysis ---- */
[dir="rtl"] .tt-card {
direction: rtl;
text-align: right;
}
[dir="rtl"] .tt-card-header,
[dir="rtl"] .tt-card-footer,
[dir="rtl"] .tt-footer {
flex-direction: row-reverse;
}
[dir="rtl"] .tt-nav-arrows,
[dir="rtl"] .da-nav-arrows {
direction: ltr;
transform: scaleX(-1);
}
[dir="rtl"] .da-grid,
[dir="rtl"] .da-cell {
direction: rtl;
}
[dir="rtl"] .da-cell {
text-align: right;
}
[dir="rtl"] .da-cell:not(:nth-child(3n+1)) {
border-left: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
[dir="rtl"] .da-cell-top {
flex-direction: row-reverse;
}
/* ---- about.html: Achievements stats band ---- */
[dir="rtl"] .stats-cards {
flex-direction: row-reverse;
}
[dir="rtl"] .stat-card {
text-align: right;
direction: rtl;
}
[dir="rtl"] .stat-label,
[dir="rtl"] .stat-desc {
text-align: right;
direction: rtl;
}
/* ---- about.html: Founding timeline ---- */
[dir="rtl"] .timeline-content {
left: auto;
right: 50%;
transform: translate(60%, -25%);
text-align: right;
direction: rtl;
}
[dir="rtl"] .timeline-dial-container {
left: auto;
right: -40%;
}
/* Dates sit on the dial side, so move the whole marker column to the right
and mirror each marker's offset + tilt to match the right-hand dial. */
[dir="rtl"] .date-markers-container {
left: auto;
right: 18%;
}
[dir="rtl"] .date-marker:nth-child(1) {
left: auto;
right: 0;
transform: rotate(35deg);
}
[dir="rtl"] .date-marker:nth-child(2) {
left: auto;
right: 20%;
transform: translateY(-50%) rotate(0deg);
}
[dir="rtl"] .date-marker:nth-child(3) {
left: auto;
right: 0;
transform: rotate(-35deg);
}
[dir="rtl"] .timeline-year,
[dir="rtl"] .timeline-title,
[dir="rtl"] .timeline-description {
direction: rtl;
text-align: right;
}
/* ---- courses.html: hero + Basics card + RSI card + UKTA banner ---- */
[dir="rtl"] .courses-hero-content {
direction: rtl;
}
[dir="rtl"] .hero-left,
[dir="rtl"] .hero-left-top,
[dir="rtl"] .courses-hero-title,
[dir="rtl"] .courses-hero-subtitle {
text-align: right;
}
[dir="rtl"] .hero-buttons {
justify-content: flex-end;
}
[dir="rtl"] .skill-card,
[dir="rtl"] .basics-card {
direction: rtl;
text-align: right;
}
[dir="rtl"] .basics-card-schedule li {
flex-direction: row;
justify-content: flex-start;
text-align: right;
}
[dir="rtl"] .basics-card-features li {
padding-inline-start: 0;
padding-inline-end: 1rem;
text-align: right;
}
[dir="rtl"] .basics-card-features li::before {
inset-inline-start: auto;
inset-inline-end: 0;
}
[dir="rtl"] .skill-card-rsi {
direction: rtl;
text-align: right;
}
[dir="rtl"] .skill-card-rsi-title,
[dir="rtl"] .skill-card-rsi-meta p {
flex-direction: row;
justify-content: flex-start;
}
[dir="rtl"] .bento-stats-features,
[dir="rtl"] .stats-features-list,
[dir="rtl"] .stats-features-title {
direction: rtl;
text-align: right;
}
[dir="rtl"] .ukta-content {
flex-direction: row-reverse;
text-align: right;
}
[dir="rtl"] .ukta-left,
[dir="rtl"] .ukta-title,
[dir="rtl"] .ukta-desc {
text-align: right;
}
[dir="rtl"] .ukta-right {
flex-direction: row-reverse;
}
/* ---- events.html: hero event card + countdown ---- */
[dir="rtl"] .event-card-details {
border-right: none;
border-left: 1px solid rgba(255, 255, 255, 0.15);
padding-right: 0;
padding-left: 1.75rem;
}
/* Date / time / register block must read right-to-left in Arabic */
[dir="rtl"] .event-card-stats {
text-align: right;
}
/* Presenter photo sits on the right edge in RTL, so round the right corners */
[dir="rtl"] .event-card-image {
border-radius: 0 16px 16px 0;
}
/* Mirror the hero: background image to the left, event card overlay to the right */
[dir="rtl"] .hero-image-container {
margin-left: 0;
margin-right: auto;
}
[dir="rtl"] .event-card {
left: auto;
right: 0;
}
[dir="rtl"] .btn-tickets .arrow {
transform: scaleX(-1);
display: inline-block;
}
/* ---- team.html / instructors.html: member cards ---- */
[dir="rtl"] .card-info,
[dir="rtl"] .card-name,
[dir="rtl"] .card-role {
text-align: right;
direction: rtl;
}
[dir="rtl"] .instructor-card-info,
[dir="rtl"] .instructor-card-name,
[dir="rtl"] .instructor-card-role {
text-align: center;
direction: rtl;
}
/* ---- product/12.html: course detail page ---- */
[dir="rtl"] .course-layout,
[dir="rtl"] .sidebar-card {
direction: rtl;
}
[dir="rtl"] .sidebar-card {
text-align: right;
}
/* These are all flex rows that already flip via the inherited `direction: rtl`
on . Adding `flex-direction: row-reverse` here double-reverses them —
snapping the icons back to the LTR (left) side. Let direction:rtl do the work
so meta icons, file icons, lesson play buttons, etc. sit on the right. */
[dir="rtl"] .lesson-info {
text-align: right;
}
/* Play triangle should keep facing the same way — only its placement moves with
RTL. Do NOT mirror it with scaleX(-1). */
[dir="rtl"] .attachments-table th,
[dir="rtl"] .attachments-table td {
text-align: right;
}
[dir="rtl"] .course-section-title {
padding-left: 0;
padding-right: 0.75rem;
border-left: none;
border-right: 3px solid #c9a227;
}
/* ---- all-*.html listing pages (news / economic-info / daily / weekly) ----
These pages use their own *-page-cell / news-cell / pagination classes. */
[dir="rtl"] .news-grid,
[dir="rtl"] .ei-page-grid,
[dir="rtl"] .wa-page-grid,
[dir="rtl"] .da-page-grid {
direction: rtl;
}
[dir="rtl"] .news-cell,
[dir="rtl"] .ei-page-cell,
[dir="rtl"] .wa-page-cell,
[dir="rtl"] .da-page-cell {
direction: rtl;
text-align: right;
}
/* column separator flips to the right edge in RTL */
[dir="rtl"] .news-cell:nth-child(even),
[dir="rtl"] .ei-page-cell:nth-child(even),
[dir="rtl"] .wa-page-cell:nth-child(even),
[dir="rtl"] .da-page-cell:nth-child(even) {
border-left: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
/* corner "open" arrows and pagination arrows mirror */
[dir="rtl"] .news-cell-arrow,
[dir="rtl"] .ei-page-arrow,
[dir="rtl"] .wa-page-arrow,
[dir="rtl"] .da-page-arrow,
[dir="rtl"] .pagination-arrow {
transform: scaleX(-1);
}
/* ---- index.html: Activity cards "View activity" button ---- */
/* Align the button to the right edge of the (RTL) card. The natural RTL flex
order already places the play icon rightmost with the text to its left, so the
icon keeps its original orientation (no scaleX flip). */
[dir="rtl"] .activity-card-btn {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: 0;
}
/* ---- Footer: contact column right-alignment + socials ---- */
[dir="rtl"] .footer-col h4,
[dir="rtl"] .info-label,
[dir="rtl"] .info-value {
text-align: right;
}
/* .footer-socials needs no override — direction:rtl already packs the icons to
the right (flex-start), under the right-aligned "Connect" heading. */
[dir="rtl"] .social-links {
flex-direction: row-reverse;
justify-content: flex-end;
}
/* Phone numbers ("+965 90948645") get scrambled by the bidi algorithm in an
RTL line (the "+" and the two digit runs reorder). Isolate each tel link as
its own LTR run so it reads correctly while the block stays right-aligned. */
[dir="rtl"] .info-value a[href^="tel"] {
display: inline-block;
direction: ltr;
unicode-bidi: isolate;
}
/* ==========================================================================
Portal auth links — Login / Register
Shared by every page: rtl.css is the only stylesheet all of them link.
They sit in .nav-cta on desktop and at the end of .mobile-menu-links on
mobile. Both point at the external portal and open in a new tab, so each
carries an external-link icon.
NOTE on ordering: every page's inline