/* ═══════════════════════════════════════════════════ DIJLA TECH LLC — arabic.css Complete Arabic / RTL stylesheet. Activated when has class "lang-ar". Font: Thmanyah Serif Display (with Cairo fallback) ═══════════════════════════════════════════════════ */ @font-face { font-family: 'Thmanyah Serif Display'; src: url('thmanyahserifdisplay-Bold.otf') format('opentype'); font-weight: bold; font-style: normal; font-display: swap; } /* ════════════════════════════════ BASE — Font & Direction ════════════════════════════════ */ body.lang-ar { font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif; direction: rtl; } body.lang-ar *, body.lang-ar p, body.lang-ar span, body.lang-ar input, body.lang-ar textarea, body.lang-ar select { font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0 !important; /* Arabic doesn't use letter-spacing */ } body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4, body.lang-ar .nav-logo-text, body.lang-ar .meta-num, body.lang-ar .meta-plus, body.lang-ar .pkg-price, body.lang-ar .hero-accent, body.lang-ar .nav-btn, body.lang-ar .svc-num-badge { font-family: 'Thmanyah Serif Display', 'Cairo', serif; font-weight: bold; } /* ════════════════════════════════ FLOATING NAV — RTL ════════════════════════════════ */ body.lang-ar .nav { direction: rtl; flex-direction: row; } body.lang-ar .nav-menu { direction: rtl; margin-right: auto; /* push menu to the left next to CTA */ margin-left: 0; flex-direction: row; } body.lang-ar .nav-btn { margin-right: 8px; margin-left: 0; } /* Lang toggle: sits right next to the CTA on the far left */ body.lang-ar #lang-btn { margin-left: 0; margin-right: 0; } /* Hamburger: stays at the far left (same as far right in LTR) */ body.lang-ar .burger { margin-left: 0; margin-right: 0; } /* Mobile menu: full RTL */ body.lang-ar .mobile-menu { direction: rtl; text-align: right; } body.lang-ar .mm-link { text-align: right; justify-content: flex-start; /* in RTL context start = right side */ } body.lang-ar .mm-cta { direction: rtl; } body.lang-ar .mm-lang-wrap { direction: rtl; } /* ════════════════════════════════ GLOBAL SECTION HEADINGS ════════════════════════════════ */ body.lang-ar .section-label, body.lang-ar .section-h2, body.lang-ar .section-p { text-align: right; } /* ════════════════════════════════ HERO SECTION ════════════════════════════════ */ body.lang-ar .hero-inner { text-align: right; } body.lang-ar .hero-h1 { font-size: clamp(2.6rem, 7.5vw, 5rem); line-height: 1.1; } body.lang-ar .hero-sub { margin-right: 0; margin-left: auto; max-width: 520px; line-height: 1.85; } /* Hero stats */ body.lang-ar .meta-item { padding-right: 0; padding-left: 36px; align-items: flex-end; } body.lang-ar .meta-num-wrap { direction: ltr; display: flex; justify-content: flex-end; gap: 2px; } body.lang-ar .meta-sep { margin-right: 0; margin-left: 36px; } body.lang-ar .meta-label { text-align: right; letter-spacing: 0; text-transform: none; } /* Scroll indicator — flip to left side */ body.lang-ar .hero-scroll { left: auto; right: 24px; } /* ════════════════════════════════ SERVICES SECTION ════════════════════════════════ */ body.lang-ar #services .section-label, body.lang-ar #services .section-h2, body.lang-ar #services .section-p { text-align: right; } /* Number badge: move from right to left corner */ body.lang-ar .svc-num-badge { right: auto; left: 20px; } /* Card icon stays top-left (which is top-right in RTL, so stays as-is) */ body.lang-ar .svc-icon { margin-left: 0; } /* Card text */ body.lang-ar .svc-card h3, body.lang-ar .svc-card > p { text-align: right; } /* Tags: align right */ body.lang-ar .svc-tags { justify-content: flex-end; } /* CTA card */ body.lang-ar .svc-cta-inner { align-items: flex-end; text-align: right; } body.lang-ar .svc-cta-btn { align-self: flex-end; } /* ════════════════════════════════ PORTFOLIO SECTION ════════════════════════════════ */ body.lang-ar #portfolio .section-label, body.lang-ar #portfolio .section-h2 { text-align: right; } /* Arrow flip */ body.lang-ar .pi-arrow { transform: scaleX(-1); } body.lang-ar .port-item:hover .pi-arrow { transform: scaleX(-1) translate(-2px, -2px); } /* Portfolio CTA bottom bar */ body.lang-ar .port-cta { text-align: right; } body.lang-ar .port-cta p { text-align: right; } /* ════════════════════════════════ PACKAGES / PRICING SECTION ════════════════════════════════ */ body.lang-ar #packages .section-label, body.lang-ar #packages .section-h2, body.lang-ar #packages .section-p { text-align: right; } /* Flip pkg-grid so Starter is on the right in RTL */ body.lang-ar .pkg-grid { direction: rtl; } /* Package card content */ body.lang-ar .pkg-top { text-align: right; } body.lang-ar .pkg-tier { text-align: right; } body.lang-ar .pkg-price { text-align: right; } body.lang-ar .pkg-desc { text-align: right; } /* Badge: move to left side in RTL */ body.lang-ar .pkg-badge { left: auto; right: 24px; left: unset; } /* Feature list items */ body.lang-ar .pkg-list { direction: rtl; } body.lang-ar .pkg-list li { flex-direction: row; /* keep icon on left in RTL (which is the reading start) */ text-align: right; gap: 10px; } body.lang-ar .pkg-list li svg { flex-shrink: 0; margin-top: 2px; } /* Footer of card */ body.lang-ar .pkg-foot { align-items: center; direction: rtl; } body.lang-ar .pkg-btn { width: 100%; text-align: center; } body.lang-ar .pkg-time { text-align: center; font-size: 0.72rem; } /* Package note */ body.lang-ar .pkg-note { text-align: right; direction: rtl; } /* ════════════════════════════════ ABOUT SECTION ════════════════════════════════ */ body.lang-ar #about .section-label, body.lang-ar #about .section-h2, body.lang-ar #about .section-p { text-align: right; } body.lang-ar .about-left { text-align: right; } /* Values list */ body.lang-ar .about-values { direction: rtl; } body.lang-ar .about-value { text-align: right; } body.lang-ar .about-value h4, body.lang-ar .about-value p { text-align: right; } /* Facts grid */ body.lang-ar .fact-label { text-align: right; letter-spacing: 0; } body.lang-ar .fact-val { text-align: right; } /* ════════════════════════════════ CONTACT SECTION ════════════════════════════════ */ body.lang-ar #contact .section-label, body.lang-ar #contact .section-h2, body.lang-ar #contact .section-p { text-align: right; } /* Contact info column */ body.lang-ar .contact-info { direction: rtl; } body.lang-ar .cinfo-group { align-items: flex-end; text-align: right; } body.lang-ar .cinfo-label { text-align: right; letter-spacing: 0; } body.lang-ar .cinfo-val { direction: ltr; display: inline-block; text-align: right; } /* Contact form */ body.lang-ar .contact-form { direction: rtl; } body.lang-ar .field { align-items: stretch; } body.lang-ar .field label { text-align: right; letter-spacing: 0; } body.lang-ar .field input, body.lang-ar .field select, body.lang-ar .field textarea { text-align: right; direction: rtl; } body.lang-ar .field-row { direction: rtl; } body.lang-ar .contact-form .btn-primary { align-self: flex-start; /* visually right edge in RTL */ direction: rtl; } /* Form success message */ body.lang-ar .form-ok { flex-direction: row-reverse; text-align: right; direction: rtl; } /* ════════════════════════════════ FOOTER ════════════════════════════════ */ body.lang-ar footer { direction: rtl; } body.lang-ar .footer-bot p { text-align: right; } /* ════════════════════════════════ BACK TO TOP BUTTON ════════════════════════════════ */ body.lang-ar .btt { right: 24px; left: auto; } /* ════════════════════════════════ MOBILE ARABIC OVERRIDES (≤ 900px) ════════════════════════════════ */ @media (max-width: 900px) { /* Keep direction:rtl — logo on right, hamburger on left */ body.lang-ar .nav { direction: rtl; flex-direction: row; } /* Hamburger pushed to far left in RTL */ body.lang-ar .burger { margin-left: 0; margin-right: auto; /* pushes burger to the opposite side of logo */ } /* lang button next to hamburger */ body.lang-ar #lang-btn { order: 0; } } /* ════════════════════════════════ MOBILE ARABIC OVERRIDES (≤ 640px) ════════════════════════════════ */ @media (max-width: 640px) { /* Top bar language switcher RTL layout adjustments */ body.lang-ar .nav #lang-btn { margin-right: auto; margin-left: 0; } /* Hero actions: stack full-width, RTL order */ body.lang-ar .hero-actions { flex-direction: column; align-items: stretch; } body.lang-ar .hero-actions .btn-primary, body.lang-ar .hero-actions .btn-ghost { width: 100%; justify-content: center; } /* Hero meta: grid ignores flex-direction */ body.lang-ar .hero-meta { grid-template-columns: 1fr 1fr 1fr; flex-direction: unset; direction: rtl; } body.lang-ar .meta-item { padding-left: 0; align-items: center; } /* Services: 1 column on small phones */ body.lang-ar .services-grid { direction: rtl; } /* Portfolio CTA: stack */ body.lang-ar .port-cta { flex-direction: column; align-items: flex-end; } body.lang-ar .port-cta .btn-ghost { width: 100%; text-align: center; } /* Package grid */ body.lang-ar .pkg-grid { direction: rtl; } /* Footer: stack columns, align right */ body.lang-ar .footer-top { flex-direction: column; align-items: flex-end; } body.lang-ar .footer-nav { flex-wrap: wrap; justify-content: flex-end; } body.lang-ar .footer-bot { flex-direction: column; align-items: flex-end; } /* Contact info stack */ body.lang-ar .cinfo-group { align-items: flex-end; } /* Form */ body.lang-ar .field-row { grid-template-columns: 1fr; } body.lang-ar .contact-form .btn-primary { width: 100%; justify-content: center; } /* Back to top */ body.lang-ar .btt { right: 16px; left: auto; } } /* ════════════════════════════════ SMALL PHONES ARABIC (≤ 380px) ════════════════════════════════ */ @media (max-width: 380px) { body.lang-ar .hero-h1 { font-size: 2rem; } body.lang-ar .hero-meta { direction: rtl; } }