html[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Sora', sans-serif;
  text-align: right;
}

html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .tech-pill,
html[dir="rtl"] .tech-label,
html[dir="rtl"] .project-tag,
html[dir="rtl"] .learn-code-block,
html[dir="rtl"] .learn-code-block *,
html[dir="rtl"] .learn-quiz-fitb input,
html[dir="rtl"] .learn-dnd-item,
html[dir="rtl"] .learn-content-eyebrow,
html[dir="rtl"] .learn-stat-lbl,
html[dir="rtl"] .learn-card-meta span,
html[dir="rtl"] .learn-topbar-progress span,
html[dir="rtl"] .learn-sidebar-progress span,
html[dir="rtl"] .learn-lesson-num,
html[dir="rtl"] .zone-label {
  direction: ltr;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
}

html[dir="rtl"] .logo,
html[dir="rtl"] nav,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-right,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .tech-bar,
html[dir="rtl"] .work-header,
html[dir="rtl"] .project-tags,
html[dir="rtl"] .about-grid,
html[dir="rtl"] .about-right,
html[dir="rtl"] .contact-alt,
html[dir="rtl"] footer,
html[dir="rtl"] .learn-stats-bar,
html[dir="rtl"] .learn-card-bottom,
html[dir="rtl"] .learn-support-btns,
html[dir="rtl"] .learn-topbar,
html[dir="rtl"] .learn-lang-tabs,
html[dir="rtl"] .learn-sidebar-header,
html[dir="rtl"] .learn-sidebar-progress,
html[dir="rtl"] .learn-lesson-item,
html[dir="rtl"] .learn-quiz-option,
html[dir="rtl"] .learn-dnd-zone,
html[dir="rtl"] .learn-quiz-actions,
html[dir="rtl"] .learn-nav,
html[dir="rtl"] .learn-page-support,
html[dir="rtl"] .learn-congrats-actions {
  direction: rtl;
}

html[dir="rtl"] .hero-inner,
html[dir="rtl"] .learn-hero-inner,
html[dir="rtl"] .section-desc,
html[dir="rtl"] .project-info,
html[dir="rtl"] .about-text,
html[dir="rtl"] .learn-content,
html[dir="rtl"] .learn-quiz,
html[dir="rtl"] .learn-page-support,
html[dir="rtl"] .learn-congrats-card {
  text-align: right;
}

html[dir="rtl"] .hero-scroll {
  left: auto;
  right: 48px;
}

html[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] .lang-option,
html[dir="rtl"] .contact-form,
html[dir="rtl"] .learn-lesson-item,
html[dir="rtl"] .learn-quiz-option {
  text-align: right;
}

html[dir="rtl"] .learn-card-top::before {
  left: 0;
  right: 0;
}

html[dir="rtl"] .learn-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
  transform: translateX(100%);
}

html[dir="rtl"] .learn-sidebar.open {
  transform: translateX(0);
}

html[dir="rtl"] .learn-progress-ring {
  transform: rotate(-90deg);
}

html[dir="rtl"] .learn-code-block pre {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .learn-content-body code {
  display: inline-block;
}

html[dir="rtl"] .learn-dnd-zone .zone-content {
  direction: ltr;
  justify-content: flex-end;
}

html[dir="rtl"] .lightbox-caption {
  text-align: right;
}

html[dir="rtl"] .lb-prev { left: auto; right: 20px; }
html[dir="rtl"] .lb-next { right: auto; left: 20px; }
html[dir="rtl"] .lb-prev svg,
html[dir="rtl"] .lb-next svg,
html[dir="rtl"] .learn-tabs-arrow svg,
html[dir="rtl"] .learn-nav-btn svg {
  transform: scaleX(-1);
}

@media (max-width: 900px) {
  html[dir="rtl"] .hero-scroll {
    right: 24px;
  }
}

@media (min-width: 901px) {
  html[dir="rtl"] .learn-sidebar.open + .learn-sidebar-backdrop + .learn-main {
    margin-left: auto;
    margin-right: 280px;
  }
}