/* ============================================================ RTL (Right-to-Left) Overrides for Arabic Language Applied when is set ============================================================ */ /* ============ Global ============ */ [dir="rtl"] { direction: rtl; text-align: right; } /* ============ header.css Overrides ============ */ /* Dropdown alignment */ [dir="rtl"] .dropdown-menu { left: 0 !important; right: auto !important; } /* Mobile menu: RTL slide from right */ [dir="rtl"] .mobile-menu { left: 0 !important; right: auto !important; transform: translateX(100%); } [dir="rtl"] .mobile-menu.active { transform: translateX(0); } [dir="rtl"] .mobile-menu-link:hover { transform: translateX(-8px); } [dir="rtl"] .mobile-menu-link::before { right: 0 !important; left: auto !important; } [dir="rtl"] .mobile-menu-link.active { border-left: none !important; border-right: 4px solid #74e4de !important; } /* Language selector active checkmark */ [dir="rtl"] .mobile-language-option.active::before { left: 0.5rem !important; right: auto !important; } /* Dropdown nav items */ [dir="rtl"] .dropdown-menu .nav-item a { border-left: none !important; border-right: 2px solid transparent; } [dir="rtl"] .dropdown-menu .nav-item a:hover { border-left: none !important; border-right: 2px solid #74e4de !important; padding-left: 0 !important; padding-right: 1.25rem !important; } [dir="rtl"] .dropdown-menu .nav-item.active a { border-left: none !important; border-right: 2px solid #74e4de !important; padding-left: 0 !important; padding-right: 1.25rem !important; } /* Dropdown arrow > */ [dir="rtl"] .dropdown-menu .nav-item a::before { right: 0.5rem !important; left: auto !important; } /* Caret arrow */ [dir="rtl"] .dropdown-menu-active .caret { margin-left: 0 !important; margin-right: 0.25rem !important; border-right: 4px solid transparent !important; border-left: 4px solid transparent !important; } /* ============ index.css Overrides ============ */ /* Hero description border */ [dir="rtl"] .hero-desc { border-left: none !important; border-right: 3px solid var(--neon-green) !important; padding-left: 0 !important; padding-right: 20px !important; } /* Responsive hero desc - tablet */ @media (max-width: 1023px) and (min-width: 768px) { [dir="rtl"] .hero-desc { border-right: none !important; border-top: 3px solid var(--neon-green) !important; padding-right: 0 !important; padding-top: 15px !important; } } /* Responsive hero desc - mobile */ @media (max-width: 767px) { [dir="rtl"] .hero-desc { border-right: none !important; border-top: 2px solid var(--neon-green) !important; padding-right: 0 !important; padding-top: 10px !important; } } /* Badge position */ [dir="rtl"] .badge { left: 1.5rem !important; right: auto !important; } /* Solution badge position */ [dir="rtl"] .solution-badge { left: 1rem !important; right: auto !important; } /* Corner decorations */ [dir="rtl"] .top-left { left: auto !important; right: 0 !important; border-top: none !important; border-left: none !important; border-top-right-radius: 12px !important; border-right: 2px solid #74e4de !important; } [dir="rtl"] .bottom-right { right: auto !important; left: 0 !important; border-bottom: none !important; border-right: none !important; border-bottom-left-radius: 12px !important; border-left: 2px solid #74e4de !important; } /* Feature description alignment */ [dir="rtl"] .feature-description { text-align: right !important; } /* Cyber subtitle border */ [dir="rtl"] .cyber-subtitle { border-left: none !important; border-right: 2px solid rgba(0, 255, 65, 0.5) !important; padding-left: 0 !important; padding-right: 0.75rem !important; } @media (max-width: 768px) { [dir="rtl"] .cyber-subtitle { padding-right: 0.625rem !important; } } /* Plan badge */ [dir="rtl"] .plan-badge { left: 0 !important; right: auto !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 8px !important; } /* Feature value margin */ [dir="rtl"] .feature-value { margin-left: 0 !important; margin-right: 0.5rem !important; } @media (max-width: 768px) { [dir="rtl"] .feature-value { margin-right: 0.25rem !important; } } /* Feature list scrollbar padding */ @media (max-width: 768px) { [dir="rtl"] .feature-list { padding-left: 0.5rem !important; padding-right: 0 !important; } } /* ============ download.css Overrides ============ */ /* Download badge */ [dir="rtl"] .download-badge, [dir="rtl"] .badge-download { left: 20px !important; right: auto !important; } /* Changelog items */ [dir="rtl"] .changelog-item, [dir="rtl"] .download-changelog-item { border-left: none !important; border-right: 3px solid #74e4de !important; } [dir="rtl"] .changelog-item:hover, [dir="rtl"] .download-changelog-item:hover { border-left: none !important; border-right: 3px solid var(--highlight-color, #74e4de) !important; } /* Floating element */ [dir="rtl"] .download-float, [dir="rtl"] .floating-element { left: 15px !important; right: auto !important; } /* ============ use-price.css Overrides ============ */ /* Pricing feature items */ [dir="rtl"] .pricing-feature-item, [dir="rtl"] .feature-item { text-align: right !important; padding-left: 0 !important; padding-right: 2rem !important; } /* Pricing list alignment */ [dir="rtl"] .pricing-list, [dir="rtl"] .pricing-details { text-align: right !important; padding-left: 0 !important; padding-right: 2rem !important; } /* Plan badge */ [dir="rtl"] .plan-badge, [dir="rtl"] .pricing-badge { left: 0 !important; right: auto !important; } /* Feature list padding */ [dir="rtl"] .feature-list { padding-left: 0 !important; padding-right: 0 !important; } /* Pricing text alignments */ [dir="rtl"] .currency-symbol, [dir="rtl"] .pricing-currency { padding-right: 0 !important; padding-left: 1rem !important; } /* Pricing right-aligned text */ [dir="rtl"] .pricing-right, [dir="rtl"] .text-right { text-align: left !important; } /* ============ update-logs.css Overrides ============ */ /* Timeline */ [dir="rtl"] .timeline-line { left: auto !important; right: 0 !important; } [dir="rtl"] .timeline-dot { left: auto !important; right: 0 !important; } [dir="rtl"] .timeline-card, [dir="rtl"] .update-log-card { margin-left: 0 !important; margin-right: 1.5rem !important; padding-left: 0 !important; padding-right: 2.5rem !important; text-align: right !important; } [dir="rtl"] .timeline-card:nth-child(odd), [dir="rtl"] .update-log-card:nth-child(odd) { margin-left: 1.5rem !important; margin-right: 0 !important; } /* Update log dot indicators */ [dir="rtl"] .timeline-dot::after, [dir="rtl"] .update-log-dot::after { left: -10px !important; right: auto !important; } [dir="rtl"] .timeline-dot:nth-child(even)::after { right: -10px !important; left: auto !important; } /* Mobile timeline overrides */ @media (max-width: 768px) { [dir="rtl"] .timeline-card, [dir="rtl"] .update-log-card { text-align: right !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 4rem !important; } [dir="rtl"] .timeline-dot { left: 0 !important; right: auto !important; } } /* ============ blog.css Overrides ============ */ /* Blog sidebar */ [dir="rtl"] .blog-sidebar, [dir="rtl"] .sidebar { left: 1rem !important; right: auto !important; } /* Blog link hover animation */ [dir="rtl"] .blog-recent-link:hover, [dir="rtl"] .blog-article-card:hover .card-arrow { transform: translateX(-3px) !important; } [dir="rtl"] .blog-read-more:hover i, [dir="rtl"] .read-more:hover { transform: translateX(-5px) !important; } /* Scroll top button */ [dir="rtl"] .blog-scroll-top { left: 2rem !important; right: auto !important; } /* ============ blog-detail.css Overrides ============ */ /* Blockquote */ [dir="rtl"] .article-body-content blockquote { border-left: none !important; border-right: 3px solid var(--article-neon-green, #74e4de) !important; padding-left: 0 !important; padding-right: 1.5rem !important; } /* Article sidebar */ [dir="rtl"] .article-sidebar { left: 1.5rem !important; right: auto !important; } /* Navigation hover */ [dir="rtl"] .article-nav-button:hover .article-nav-arrow { transform: translateX(-5px) !important; } /* Code copy button (JS-generated inline style) */ [dir="rtl"] .article-code-copy { left: 10px !important; right: auto !important; } /* ============ course.css Overrides ============ */ /* Course sidebar */ [dir="rtl"] .course-sidebar { left: 0 !important; right: auto !important; } /* Course link hover */ [dir="rtl"] .course-link:hover .link-arrow, [dir="rtl"] .course-link:hover i { transform: translateX(-5px) !important; } /* ============ guide.css Overrides ============ */ /* Guide aside/sidebar */ [dir="rtl"] .guide-aside, [dir="rtl"] .guide-sidebar { right: auto !important; left: 0 !important; } /* TOC sidebar: move from right to left */ [dir="rtl"] #tocEl { left: 0 !important; right: auto !important; } /* Tree sidebar: move from left to right */ [dir="rtl"] #trees > div { left: auto !important; right: 0 !important; } /* TOC list items */ [dir="rtl"] #toc li ul li { margin-left: 0 !important; margin-right: 10px !important; } [dir="rtl"] #toc li { padding-left: 0 !important; padding-right: 10px !important; } /* TOC bullet points */ [dir="rtl"] #toc ul li::before { left: auto !important; right: -5px !important; } [dir="rtl"] #toc ul li ul li::before { left: auto !important; right: -5px !important; } /* Guide sidebar items */ [dir="rtl"] .guide-sidebar-item { margin-left: 0 !important; margin-right: 10px !important; padding-left: 0 !important; padding-right: 10px !important; } [dir="rtl"] .guide-sidebar-item::before { left: auto !important; right: -5px !important; } /* Guide content border */ [dir="rtl"] .guide-content { border-left: none !important; border-top-left-radius: 0 !important; border-right: 2px solid #74e4de !important; border-top-right-radius: 12px !important; } [dir="rtl"] .guide-content-right { border-right: none !important; border-bottom-right-radius: 0 !important; border-left: 2px solid #74e4de !important; border-bottom-left-radius: 12px !important; } /* Content corner decorations: flip diagonally */ [dir="rtl"] #body::before { left: auto !important; right: 0 !important; border-left: none !important; border-right: 2px solid #74e4de !important; border-top-left-radius: 0 !important; border-top-right-radius: 12px !important; } [dir="rtl"] #body::after { right: auto !important; left: 0 !important; border-right: none !important; border-left: 2px solid #74e4de !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 12px !important; } /* ============ register.css Overrides ============ */ /* Form labels */ [dir="rtl"] .register-form label, [dir="rtl"] .form-group label { text-align: right !important; } /* Checkbox */ [dir="rtl"] .register-checkbox, [dir="rtl"] .form-check-input { margin-right: 0 !important; margin-left: 0.25rem !important; } /* Form text alignment */ [dir="rtl"] .register-text-left, [dir="rtl"] .form-text { text-align: right !important; } /* ============ register-success.css Overrides ============ */ /* Corner decorations - diagonal flip for RTL */ [dir="rtl"] .corner-decoration.top-left, [dir="rtl"] .corner-tl { left: auto !important; right: 0 !important; border-left: none !important; border-top-left-radius: 0 !important; border-right: 2px solid !important; border-top-right-radius: 24px !important; } [dir="rtl"] .corner-decoration.top-right, [dir="rtl"] .corner-tr { right: auto !important; left: 0 !important; border-right: none !important; border-top-right-radius: 0 !important; border-left: 2px solid !important; border-top-left-radius: 24px !important; } [dir="rtl"] .corner-decoration.bottom-left, [dir="rtl"] .corner-bl { left: auto !important; right: 0 !important; border-left: none !important; border-bottom-left-radius: 0 !important; border-right: 2px solid !important; border-bottom-right-radius: 24px !important; } [dir="rtl"] .corner-decoration.bottom-right, [dir="rtl"] .corner-br { right: auto !important; left: 0 !important; border-right: none !important; border-bottom-right-radius: 0 !important; border-left: 2px solid !important; border-bottom-left-radius: 24px !important; } /* ============ use-case.css Overrides ============ */ /* Use case card corner borders */ [dir="rtl"] .use-case-card .corner-tl, [dir="rtl"] .use-case-card .top-left { left: auto !important; right: 0 !important; border-left: none !important; border-top-left-radius: 0 !important; border-right: 2px solid #74e4de !important; border-top-right-radius: 16px !important; } [dir="rtl"] .use-case-card .corner-br, [dir="rtl"] .use-case-card .bottom-right { right: auto !important; left: 0 !important; border-right: none !important; border-bottom-right-radius: 0 !important; border-left: 2px solid #74e4de !important; border-bottom-left-radius: 16px !important; } /* Arrow animation */ [dir="rtl"] .use-case-card:hover .card-arrow, [dir="rtl"] .use-case-card:hover i { transform: translateX(-4px) !important; } /* Sidebar position */ [dir="rtl"] .use-case-sidebar { left: 0 !important; right: auto !important; } /* ============ use-case-details.css Overrides ============ */ /* Sidebar nav items */ [dir="rtl"] .sidebar-nav-item, [dir="rtl"] .use-case-detail-nav-item { border-left: none !important; border-right: 2px solid transparent !important; padding-left: 0 !important; } [dir="rtl"] .sidebar-nav-item.active, [dir="rtl"] .sidebar-nav-item:hover, [dir="rtl"] .use-case-detail-nav-item.active, [dir="rtl"] .use-case-detail-nav-item:hover { border-left-color: transparent !important; border-right-color: #74e4de !important; } /* Use case detail sidebar inline style handled in blade */ /* Content border decoration */ [dir="rtl"] .use-case-detail-content { border-left: none !important; border-top-left-radius: 0 !important; border-right: 2px solid #74e4de !important; border-top-right-radius: 12px !important; } [dir="rtl"] .use-case-detail-content-right { border-right: none !important; border-bottom-right-radius: 0 !important; border-left: 2px solid #74e4de !important; border-bottom-left-radius: 12px !important; } /* Margin fix */ [dir="rtl"] .use-case-detail-margin { margin-left: 0 !important; margin-right: 15px !important; } /* ============ friend-link.css Overrides ============ */ /* Text alignment */ [dir="rtl"] .friend-link-title, [dir="rtl"] .friend-link-desc { text-align: right !important; } /* Link hover animation */ [dir="rtl"] .friend-link-card:hover .link-arrow, [dir="rtl"] .friend-link-card:hover i { transform: translateX(-5px) !important; } /* Shine animation flip */ [dir="rtl"] .shine { animation-direction: reverse !important; }