/* * rtl.css — Digidoo RTL (Arabic) Overrides * Loaded only when dir="rtl" is set on * Uses [dir="rtl"] selector so nothing bleeds into LTR version */ /* ============================================================ 1. GLOBAL — Font & Spacing ============================================================ */ [dir="rtl"], [dir="rtl"] body { font-family: 'Cairo', sans-serif; text-align: right; } /* Arabic doesn't use letter-spacing — reset it everywhere */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] button { letter-spacing: 0 !important; } [dir="rtl"] .custom-font { font-family: 'Cairo', sans-serif; letter-spacing: 0 !important; } /* ============================================================ 2. PROGRESS SCROLL BUTTON — flip right → left ============================================================ */ [dir="rtl"] .progress-wrap { right: auto !important; left: 30px !important; } /* ============================================================ 3. NAVBAR ============================================================ */ /* Push nav links to LEFT side of the bar in RTL */ [dir="rtl"] .navbar-nav.ml-auto { margin-left: 0 !important; margin-right: auto !important; } /* Main-dropdown — align to right edge of parent in RTL */ [dir="rtl"] .main-dropdown { left: auto; right: 0; } /* Nav-scroll — it's a fixed bar, keep full width */ [dir="rtl"] .nav-scroll { left: 0; right: 0; } /* ============================================================ 4. SLIDER — social icon, pagination, arrows ============================================================ */ /* ── Main slider nav buttons — DESKTOP ────────────────────────────────── LTR desktop: prev → left:30px | next → right:30px | pagination → right:40px RTL desktop mirror: next → left:30px | prev → right:30px | pagination → left:40px ──────────────────────────────────────────────────────────────────────── */ [dir="rtl"] .slider .setone.setwo .next-ctrl { right: auto !important; left: 30px !important; } [dir="rtl"] .slider .setone.setwo .prev-ctrl { left: auto !important; right: 30px !important; } /* Flip chevron icons to point the correct direction */ [dir="rtl"] .slider .setone.setwo .next-ctrl i, [dir="rtl"] .slider .setone.setwo .prev-ctrl i { display: inline-block; transform: scaleX(-1); } /* Desktop pagination — left:60px to mirror English right:40px nicely */ [dir="rtl"] .slider .swiper-pagination-fraction.top { right: auto !important; left: 60px !important; } [dir="rtl"] .slider .swiper-pagination-fraction.top.botm { right: auto !important; left: 60px !important; } /* ── Main slider nav buttons — MOBILE ─────────────────────────────────── LTR mobile: prev → left:15px | next → left:70px | pagination → right:15px RTL mobile mirror: prev → right:15px | next → right:70px | pagination → left:15px ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 991px) { [dir="rtl"] .slider .setone.setwo .prev-ctrl { left: auto !important; right: 15px !important; } [dir="rtl"] .slider .setone.setwo .next-ctrl { left: auto !important; right: 70px !important; } [dir="rtl"] .slider .swiper-pagination-fraction.top.botm { right: auto !important; left: 15px !important; } } /* Work carousel simp prev/next */ [dir="rtl"] .work-carousel .simp-next { right: auto; left: 30px; } [dir="rtl"] .work-carousel .simp-prev { left: auto; right: 30px; } /* ============================================================ 5. SUB-TITLE Dots — flip left → right ============================================================ */ [dir="rtl"] .sub-title { padding-left: 0; padding-right: 20px; } [dir="rtl"] .sub-title span { left: auto; right: 6px; } [dir="rtl"] .sub-title span:first-of-type { right: 6px; } [dir="rtl"] .sub-title span:last-of-type { left: auto; right: 0; } /* ============================================================ 6. SIMPLE-BTN — highlight from right in RTL ============================================================ */ [dir="rtl"] .simple-btn::after { left: auto; right: 0; } [dir="rtl"] .simple-btn.right::after { right: auto; left: 0; } /* ============================================================ 7. SECTION HEADING (sec-head) ============================================================ */ [dir="rtl"] .sec-head { text-align: right; } [dir="rtl"] .sec-head.tr-head { text-align: left; /* was right in LTR, flip for RTL */ } [dir="rtl"] .sec-head.tr-head .tbg { text-align: right; } /* ============================================================ 7a. INTRO SECTION (Who we are) ============================================================ */ [dir="rtl"] .intro-section .text { text-align: right; } /* ============================================================ 8. ABOUT SECTION ============================================================ */ /* Reverse the order so image comes after text in RTL */ [dir="rtl"] .about .ftbox ul li .dots span { right: 10px; left: auto; } [dir="rtl"] .about .ftbox ul li .dots span:last-of-type { right: 16px; left: auto; } /* blc-img skills-circle — was positioned with right: -50px */ [dir="rtl"] .about .blc-img .skills-circle { right: auto; left: -50px; } [dir="rtl"] .about .blc-img .skills-circle .item:last-of-type { margin-left: 0; margin-right: 30px; } /* ============================================================ 9. SERVICES SECTION ============================================================ */ /* Force consistent text direction for service cards */ [dir="rtl"] .services .item-box { text-align: right; } /* ============================================================ 10. BLOG GRID ============================================================ */ /* Author margin */ [dir="rtl"] .blog-grid .item .cont .info .author { margin-right: 0; margin-left: 10px; } /* Tag margin */ [dir="rtl"] .blog-grid .item .cont .info .tag { margin-left: 0; margin-right: 10px; } /* Read-more button direction */ [dir="rtl"] .blog-grid .item .cont .btn-more { text-align: right; } /* ============================================================ 11. BLOG PAGE (Blogs list) ============================================================ */ /* Tags separator pseudo element — flip absolute positioned line */ [dir="rtl"] .blog-pg .posts .item .content .tags a { padding-right: 0; padding-left: 20px; } [dir="rtl"] .blog-pg .posts .item .content .tags a::after { right: auto; left: 4px; } /* Date margin */ [dir="rtl"] .blog-pg .posts .item .content .date { margin-right: 0; margin-left: 15px; } /* ============================================================ 12. TESTIMONIALS — arrow flip ============================================================ */ [dir="rtl"] .testimonials .arrows .next { right: auto; left: -50px; } [dir="rtl"] .testimonials .arrows .prev { left: auto; right: -50px; } [dir="rtl"] .testimonials:hover .arrows .next { right: auto; left: 0; } [dir="rtl"] .testimonials:hover .arrows .prev { left: auto; right: 0; } /* ============================================================ 13. BLOCK-SEC (video + testimonials box) ============================================================ */ /* Main text next to video */ [dir="rtl"] .block-sec .vid-area .cont { text-align: right; } [dir="rtl"] .block-sec .vid-area .cont h3 { text-align: right; } /* Purple testimonials box */ [dir="rtl"] .block-sec .testim-box { text-align: right; } [dir="rtl"] .block-sec .testim-box .head-box { text-align: right; } [dir="rtl"] .block-sec .testim-box .item p { text-align: right; direction: rtl; } /* Flip the gradient on testim-box from right-to-left in RTL */ [dir="rtl"] .testim-box .swiper-container:before { background: -webkit-gradient(linear, right top, left top, color-stop(70%, #191b1f), to(rgba(25, 27, 31, 0.2))); background: -webkit-linear-gradient(right, #191b1f 70%, rgba(25, 27, 31, 0.2)); background: -o-linear-gradient(right, #191b1f 70%, rgba(25, 27, 31, 0.2)); background: linear-gradient(270deg, #191b1f 70%, rgba(25, 27, 31, 0.2)); } /* testim-box controls padding — flip left to right */ [dir="rtl"] .testim-box .swiper-container .controls { padding-left: 0; padding-right: 80px; } /* testim-box pagination — flip right to left */ [dir="rtl"] .testim-box .swiper-container .swiper-pagination { right: auto; left: 80px; } /* Author info inside testim-box */ [dir="rtl"] .block-sec .testim-box .item .info .cont { padding-left: 0; padding-right: 15px; text-align: right; } /* Slick dots inside block-sec testim-box */ [dir="rtl"] .block-sec .testim-box .slick-dots { text-align: left; } /* ============================================================ 14. TEAM NAV ARROWS ============================================================ */ [dir="rtl"] .team .navs .prev { /* already handled by dir but explicit just in case */ margin-right: 0; margin-left: 10px; } /* ============================================================ 15. CLIENTS SECTION ============================================================ */ [dir="rtl"] .clients .brands .img .link { left: auto; right: 50%; transform: translateX(50%); -webkit-transform: translateX(50%); } /* ============================================================ 16. WORK CAROUSEL (Our Works) ============================================================ */ [dir="rtl"] .work-carousel .noraidus .cont h6 { letter-spacing: 0; } /* Icon inside work card — flip from right to left */ [dir="rtl"] .work-carousel .content .cont .icon { right: auto; left: 15px; } /* ============================================================ 17. FOOTER ============================================================ */ /* Flip Bootstrap offset: was margin-left: 16.6% → margin-right */ [dir="rtl"] .footer-half .offset-lg-2 { margin-left: 0; margin-right: 16.666667%; } /* Fix subtitle background boxes ( القائمة, تابعنا ) */ [dir="rtl"] .footer-half .stit::after { left: auto; right: 0; } /* Contact info — text should flow from right */ [dir="rtl"] .footer-half .con-info ul { padding-right: 0; text-align: right; } /* Ensure contact labels (Email:, Phone:) are properly spaced */ [dir="rtl"] .footer-half .con-info ul li span { margin-left: 5px; margin-right: 0; } /* Menu titles and headings */ [dir="rtl"] .footer-half .subscribe .stit, [dir="rtl"] .footer-half .social-icon .stit { text-align: right; padding-left: 0; padding-right: 0; } /* Copyrights — force LTR for English text to keep punctuation correct */ [dir="rtl"] .footer-half .copyrights { text-align: center; direction: ltr; /* Keeps final period on the right for English text */ } [dir="rtl"] .footer-half .copyrights p { direction: ltr; } /* ============================================================ 18. CALL TO ACTION section ============================================================ */ [dir="rtl"] .call-action .content h2 { text-align: right; } /* ============================================================ 19. CONTACTS PAGE — form & info ============================================================ */ /* Flip Bootstrap offset: was margin-left:8.33% → margin-right */ [dir="rtl"] .contact .offset-lg-1 { margin-left: 0 !important; margin-right: 8.333333% !important; } [dir="rtl"] .contact .cont-info { text-align: right; } [dir="rtl"] .contact .cont-info h3, [dir="rtl"] .contact .cont-info h4, [dir="rtl"] .contact .cont-info h6 { text-align: right; } [dir="rtl"] .contact .cont-info .item { text-align: right; } /* Social icons in contact info — flip margin */ [dir="rtl"] .contact .cont-info .social a { margin-right: 0; margin-left: 20px; } /* Page Header Caption alignment */ [dir="rtl"] .works-header .capt { text-align: right; } [dir="rtl"] .works-header .capt .parlx { text-align: right; } /* ============================================================ 20. PAGE HEADER (inner pages — About, Blog, etc.) ============================================================ */ [dir="rtl"] .works-header .capt { text-align: right; } [dir="rtl"] .page-header.proj-det.bg-img .item p a:first-of-type { margin-left: 7px; margin-right: 0; } [dir="rtl"] .page-header.proj-det.bg-img .item p a:last-of-type { margin-right: 7px; margin-left: 0; } /* ============================================================ 21. HAIKU MENU (if used) ============================================================ */ [dir="rtl"] .hamenu { left: auto; right: -100%; } [dir="rtl"] .hamenu.open { right: 0; } /* ============================================================ 22. SMORE button ============================================================ */ [dir="rtl"] .smore i { margin-left: 0; margin-right: 10px; } [dir="rtl"] .smore::after { left: auto; right: 0; } /* ============================================================ 23. MIN-AREA (About sections with lists) ============================================================ */ /* Flip img padding: was padding-left:80px (LTR) → padding-right:80px (RTL) */ [dir="rtl"] .min-area .img { padding: 120px 80px 120px 0; } /* Flip the ::after background block: was left:-300px → right:-300px */ [dir="rtl"] .min-area .img:after { left: 120px; right: -300px; } /* Flip content padding: was padding-left:40px → padding-right:40px */ [dir="rtl"] .min-area .content { padding-left: 0; padding-right: 40px; text-align: right; } /* Right-align headings and paragraphs */ [dir="rtl"] .min-area .content h4 { text-align: right; } [dir="rtl"] .min-area .content p { text-align: right; } /* feat list — right-align items */ [dir="rtl"] .min-area .content ul.feat { padding-right: 0; text-align: right; } [dir="rtl"] .min-area .content ul.feat li { padding-left: 0; padding-right: 0; text-align: right; } /* span (number circle) margin: was margin-right:10px, stays same in RTL since span is inline-start */ [dir="rtl"] .min-area .content ul.feat li h6 span { margin-right: 0; margin-left: 10px; } [dir="rtl"] .min-area .content ul.feat li p { padding-left: 0; padding-right: 45px; text-align: right; } /* non-feat list items */ [dir="rtl"] .min-area .content ul:not(.feat) li { padding-left: 0; padding-right: 25px; } [dir="rtl"] .min-area .content ul:not(.feat) li::after { left: auto; right: 0; } /* ============================================================ 24. SMP-LIST ============================================================ */ [dir="rtl"] .smp-list li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .smp-list li::after { left: auto; right: 0; } /* ============================================================ 25. BLOG SINGLE PAGE ============================================================ */ [dir="rtl"] .blog-pg.single .post .content .share-info .tags { margin-left: 0; margin-right: auto; } [dir="rtl"] .blog-pg.single .post .content .share-info .social a { margin-right: 0; margin-left: 20px; } [dir="rtl"] .blog-pg.single .post .author .info { padding-left: 0; padding-right: 40px; } [dir="rtl"] .blog-pg.single .post .author .info h6 span { margin-right: 0; margin-left: 10px; } [dir="rtl"] .blog-pg.single .post .author .info .social a { margin-right: 0; margin-left: 15px; } /* Pagination — list type (blog single prev/next) */ [dir="rtl"] .blog-pg.single .pagination span { border-right: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1); }