/* The Arabic site (/ar/…, built by build-ar.mjs): right-to-left layout, Arabic typeface and the static
   replacements for Framer's runtime effects. Loaded only on Arabic pages. */

/* IBM Plex Sans Arabic, as "IGNITE Arabic" for Arabic characters only and placed first in
   every font stack, so Arabic text takes it while Latin words (IGNITE, numbers) fall through to Inter. */
@font-face{font-family:"IGNITE Arabic";font-style:normal;font-weight:100 449;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PW5fslBEg0.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IGNITE Arabic";font-style:normal;font-weight:450 549;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CRXMRrKATtYV0.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IGNITE Arabic";font-style:normal;font-weight:550 649;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCRXMRrKATtYV0.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IGNITE Arabic";font-style:normal;font-weight:650 1000;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCRXMRrKATtYV0.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}

html[lang="ar"] body *{font-family:"IGNITE Arabic",Inter,"Inter Placeholder",Arial,sans-serif!important}
html[lang="ar"] body .framer-text{font-family:"IGNITE Arabic",var(--framer-font-family,Inter),"Inter Placeholder",sans-serif!important}

/* Arabic is cursive: letter-spacing breaks the joins, and tight display line-heights clip its dots. */
html[lang="ar"] body *{letter-spacing:0!important}
html[lang="ar"] :is(h1,h2,h3,h4,h5,h6){line-height:1.3!important}
html[lang="ar"] p{line-height:1.6}

/* Arrows point the way you read. */
html[dir="rtl"] :is(.ignite-sub-arrow,.ix-arrow,.ignite-btn svg){transform:scaleX(-1)}
html[dir="rtl"] [data-framer-name="Service List"] [data-framer-name="Main"]::after{scale:-1 1;margin-left:0;margin-right:auto}
html[dir="rtl"] [data-framer-name="Service List"] a[data-framer-name$="Open"] [data-framer-name="Main"]::after{translate:-4px 0}

/* Static replacements for Framer's runtime effects. */
html.ignite-reveals [data-ignite-reveal]:not(.is-in){opacity:0;transform:translateY(40px)}
html.ignite-reveals [data-ignite-reveal]{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
html.ignite-reveals [data-ignite-reveal="letters"]:not(.is-in){transform:translateY(10px);filter:blur(10px)}
html.ignite-reveals [data-ignite-reveal="letters"]{transition-property:opacity,transform,filter}
/* Homepage "We build" lines: Framer raises each 70px over 0.8s, starting 0.2s, 0.3s and 0.4s after the block appears. */
html.ignite-reveals [data-framer-name="About Intro"] [data-ignite-reveal]:not(.is-in){transform:translateY(70px)}
html.ignite-reveals [data-framer-name="About Intro"] [data-ignite-reveal]{transition-duration:.8s;transition-timing-function:cubic-bezier(.44,0,.56,1);transition-delay:.2s}
html.ignite-reveals [data-framer-name="About Intro"] [data-framer-name="2"]>[data-ignite-reveal]{transition-delay:.3s}
html.ignite-reveals [data-framer-name="About Intro"] [data-framer-name="3"]>[data-ignite-reveal]{transition-delay:.4s}
/* Its fanned-out variants drop the top photo's spacer, so that photo travels furthest (as Framer renders it). */
[data-framer-name="About Intro"]>:is([data-framer-name="Desktop/2"],[data-framer-name="Tablet/2"]) [data-framer-name="4"]>[data-framer-name="Placeholder"]{display:none}
[data-ignite-ticker]>ul{width:max-content!important;max-width:none!important;animation:ignite-ticker 45s linear infinite}
@keyframes ignite-ticker{to{transform:translateX(var(--ignite-ticker-shift,50%))}}
@media(prefers-reduced-motion:reduce){[data-ignite-ticker]>ul{animation:none}}

/* Phone numbers keep their left-to-right digit order inside Arabic text. */
html[dir="rtl"] a[href^="tel:"],html[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate}
/* Date and time fields stay left-to-right (browsers draw them that way) but line up on the right like the other fields. */
html[dir="rtl"] input:is([type=date],[type=time]){text-align:right}
/* The newsletter's Join label is drawn by design.css. */
html[lang="ar"] footer form[data-ignite-newsletter]>div::after{content:'اشترك'!important}

/* Homepage hero: a slightly tighter headline. */
html[lang="ar"] foreignObject.framer-fit-text :is(h1,h2){line-height:1.2!important}
/* Bento card illustrations sit on the left in Arabic, mirroring the English layout. */
html[dir="rtl"] [data-framer-name="Illustrations"]{right:auto!important;left:0!important}
html[dir="rtl"] .framer-m3wy3o-container{right:auto!important;left:-100px!important}
@media (max-width:809.98px){html[dir="rtl"] .framer-m3wy3o-container{left:-80px!important}}

/* Text drawn by design.css. */
html[lang="ar"] a[data-framer-name="Program Card Template"] [data-framer-name="Program Details"]::after{content:'اعرض البرنامج ←'}
html[lang="ar"] a[href^="https://www.linkedin.com/in/habib-allawati"]::after{content:'الملف الشخصي على LinkedIn ↖'}
html[lang="ar"] .native-service-context .native-service-audience::before{content:'لمن هذه الخدمة'}

/* Interactive tools (service-experience.js) in right-to-left. */
/* Buttons and menu cards that the shared stylesheets left-align: wrapped lines start on the right in Arabic. */
html[dir="rtl"] :is(.ix-option,.ix-tabs button,nav .ignite-service-submenu a){text-align:right!important}
html[dir="rtl"] .ix-radar{direction:ltr}
html[dir="rtl"] .ix-vb-map svg{transform:scaleX(-1)}
html[dir="rtl"] .ix input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(270deg,var(--ink) var(--p),rgba(74,2,2,.15) var(--p))}
html[dir="rtl"] .ix-track span{left:auto;right:0}
html[dir="rtl"] .ix-meter span{transform-origin:right}
html[dir="rtl"] .ix-journey::before{left:auto;right:19px}
html[dir="rtl"] :is(.ix-ticks,.ix-crosses,.ix-columns) li{padding-left:0;padding-right:22px}
html[dir="rtl"] :is(.ix-ticks,.ix-crosses) li::before{left:auto;right:0}
html[dir="rtl"] .ix-phase{text-align:right}
html[dir="rtl"] .ix-phase li{padding-left:0;padding-right:20px}
html[dir="rtl"] .ix-phase li::before{left:auto;right:2px}
html[dir="rtl"] .ix-insights li{padding:12px 40px 12px 14px}
html[dir="rtl"] .ix-insights li::before{left:auto;right:14px}
html[dir="rtl"] .ix-columns .ix-vb-none{padding-right:0}
@media(min-width:1100px){html[dir="rtl"] .ix-panel+.ix-panel{border-left:0;border-right:1px solid var(--line)}}
/* Footer logo: Framer pins it to the left of a box wider than the logo, which in RTL puts it over the Links column on phones. */
[data-framer-name="Brand"]>.framer-1aw62ju img{object-position:100% 50%!important}
/* Form dropdowns: Framer pins the arrow to the right, on top of right-aligned Arabic text. Mirror it to the left and keep the text clear of it. */
.framer-form-select-wrapper:before{right:auto!important;left:0!important;transform:scaleX(-1)}
.framer-form-select-wrapper select{padding-left:36px!important}