/* Lion Art Studio Arabic RTL layout */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
.lion-lang-ar{direction:rtl;font-family:'Cairo',Tahoma,sans-serif}
.lion-lang-ar h1,.lion-lang-ar h2,.lion-lang-ar h3,.lion-lang-ar .btn,.lion-lang-ar .label,.lion-lang-ar nav,.lion-lang-ar small,.lion-lang-ar .talk,.lion-lang-ar footer,.lion-lang-ar .huge,.lion-lang-ar .ticker{font-family:'Cairo',Tahoma,sans-serif;font-weight:800}
.lion-lang-ar .hero{direction:ltr}
.lion-lang-ar .hero h1,.lion-lang-ar .hero .outline{font-family:'Cairo',Tahoma,sans-serif;font-weight:900;direction:rtl;letter-spacing:-.035em;font-size:clamp(92px,10.5vw,158px);line-height:1.45;white-space:nowrap}
.lion-lang-ar .hero-left,.lion-lang-ar .hero-right{direction:rtl;text-align:right}
.lion-lang-ar header{direction:rtl}
.lion-lang-ar header nav{direction:rtl}
.lion-lang-ar .talk{padding:0 65px 0 0}
.lion-lang-ar .talk span{left:auto;right:0}
.lion-lang-ar .about,.lion-lang-ar .section-head,.lion-lang-ar .service,.lion-lang-ar .benefits,.lion-lang-ar .steps,.lion-lang-ar .contact-row{direction:rtl}
.lion-lang-ar .service h3,.lion-lang-ar .service p{text-align:right}
.lion-lang-ar .section-head p{text-align:right}
.lion-lang-ar .faq summary{text-align:right}
.lion-lang-ar .ticker{direction:rtl;font-size:clamp(23px,3vw,46px)}
.lion-lang-ar .huge{font-weight:900;font-size:clamp(42px,6vw,87px);line-height:1.4}
.lion-lang-ar .projects h3{font-size:clamp(17px,2vw,23px)}
.lion-lang-ar .btn span,.lion-lang-ar .service a{display:inline-block;transform:scaleX(-1)}
@media(max-width:1100px){.lion-lang-ar .hero h1,.lion-lang-ar .hero .outline{font-size:clamp(76px,11vw,120px);padding-inline:7vw}}
@media(max-width:760px){.lion-lang-ar .hero h1,.lion-lang-ar .hero .outline{font-size:clamp(48px,12.2vw,82px);top:38px;line-height:1.5;white-space:nowrap;padding:0 2vw}.lion-lang-ar .hero-left{left:22px;right:auto}.lion-lang-ar .hero-right{right:22px}.lion-lang-ar .huge{font-size:clamp(35px,9.2vw,64px)}.lion-lang-ar .ticker{font-size:24px}}
@media(max-width:380px){.lion-lang-ar .hero h1,.lion-lang-ar .hero .outline{font-size:11.5vw}}

/* v2.2 — Larger Arabic hero headline: "إبداع بلا حدود" only */
.lion-lang-ar .hero h1,
.lion-lang-ar .hero .outline {
  font-size: clamp(115px, 13.7vw, 200px);
  line-height: 1.23;
  letter-spacing: -.045em;
  width: 116%;
  left: -8%;
  padding-inline: 0;
  text-align: center;
}
@media (max-width: 1100px) {
  .lion-lang-ar .hero h1,
  .lion-lang-ar .hero .outline {
    font-size: clamp(80px, 12.8vw, 145px);
  }
}
@media (max-width: 760px) {
  .lion-lang-ar .hero h1,
  .lion-lang-ar .hero .outline {
    font-size: clamp(53px, 15vw, 105px);
    line-height: 1.32;
    top: 33px;
    width: 100%;
    left: 0;
    padding-inline: 3px;
  }
}
@media (max-width: 380px) {
  .lion-lang-ar .hero h1,
  .lion-lang-ar .hero .outline {
    font-size: 14.4vw;
  }
}

/* v2.3 — Arabic headline extends beyond the lion portrait, not the viewport */
.lion-lang-ar .hero h1,
.lion-lang-ar .hero .outline {
  font-size:clamp(128px,16vw,240px);
  line-height:1.16;
  letter-spacing:-.055em;
  top:clamp(52px,5vw,77px);
  width:120%; left:-10%;
  padding:0;
  white-space:nowrap;
  text-align:center;
}
@media(max-width:1100px){
  .lion-lang-ar .hero h1,.lion-lang-ar .hero .outline{font-size:clamp(93px,15.2vw,165px);width:116%;left:-8%;}
}
@media(max-width:760px){
  .lion-lang-ar .hero h1,.lion-lang-ar .hero .outline{font-size:clamp(61px,16vw,119px);top:31px;line-height:1.28;width:118%;left:-9%;}
}
@media(max-width:380px){
  .lion-lang-ar .hero h1,.lion-lang-ar .hero .outline{font-size:16vw;}
}
/* RTL seamless ticker: two exact duplicates moving half the track width */
.lion-lang-ar .ticker .ticker-track{direction:ltr;animation-name:lion-ticker-rtl;}
.lion-lang-ar .ticker .ticker-segment{direction:rtl;unicode-bidi:isolate;}
@keyframes lion-ticker-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* v2.4 — Arabic-only mobile hero composition. Keep desktop/English unchanged. */
@media (max-width: 760px) {
  .lion-lang-ar #home .hero {
    height: 770px;
    min-height: 770px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    direction: ltr;
  }
  .lion-lang-ar #home .hero h1,
  .lion-lang-ar #home .hero .outline {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 10px;
    padding: 0 12px;
    margin: 0;
    font-family: 'Cairo', Tahoma, sans-serif;
    font-size: clamp(48px, 14vw, 64px);
    font-weight: 900;
    line-height: 1.42;
    letter-spacing: -.055em;
    white-space: nowrap;
    text-align: center;
    direction: rtl;
    overflow: visible;
  }
  .lion-lang-ar #home .hero h1 { z-index: 1; }
  .lion-lang-ar #home .hero .outline { z-index: 3; pointer-events: none; }
  .lion-lang-ar #home .hero-person {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 152px;
    top: auto;
    width: min(88%, 410px);
    height: 422px;
    transform: translateX(-50%);
    object-fit: cover;
    object-position: center 36%;
    border-radius: 46% 46% 0 0;
    opacity: 1;
    z-index: 2;
  }
  .lion-lang-ar #home .hero-right {
    position: absolute;
    z-index: 6;
    bottom: 97px;
    top: auto;
    left: 12px;
    right: 12px;
    width: auto;
    text-align: center;
    direction: rtl;
  }
  .lion-lang-ar #home .hero-right .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    gap: 12px;
    font-family: 'Cairo', Tahoma, sans-serif;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 5px 16px #140d2450;
  }
  .lion-lang-ar #home .hero-left {
    position: absolute;
    z-index: 5;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 91px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    padding: 10px 13px 12px;
    margin: 0;
    background: var(--blue);
    direction: rtl;
  }
  .lion-lang-ar #home .hero-left > div {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
    margin: 0;
    text-align: center;
    border: 0;
  }
  .lion-lang-ar #home .hero-left > div + div { border-right: 1px solid #ffffff25; }
  .lion-lang-ar #home .hero-left b { font-size: 30px; line-height: 1.18; white-space: nowrap; }
  .lion-lang-ar #home .hero-left b span { margin: 0 3px; font-size: 16px; }
  .lion-lang-ar #home .hero-left small {
    display: block;
    margin-top: 5px;
    font-family: 'Cairo', Tahoma, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: normal;
  }
  .lion-lang-ar #home .hero-left > p { display: none; }
}
@media (max-width: 380px) {
  .lion-lang-ar #home .hero { height: 724px; min-height: 724px; }
  .lion-lang-ar #home .hero h1,
  .lion-lang-ar #home .hero .outline { font-size: clamp(43px, 13.6vw, 52px); top: 10px; }
  .lion-lang-ar #home .hero-person { height: 395px; bottom: 149px; width: 90%; }
  .lion-lang-ar #home .hero-left { height: 88px; }
  .lion-lang-ar #home .hero-left b { font-size: 26px; }
  .lion-lang-ar #home .hero-left small { font-size: 8px; }
  .lion-lang-ar #home .hero-right { bottom: 92px; }
}

/* v2.5: allow Arabic headline to layer over the portrait on phones. */
@media(max-width:760px){
 .lion-lang-ar #home .hero h1,.lion-lang-ar #home .hero .outline{top:clamp(118px,32vw,160px);left:-5%;right:auto;width:110%;max-width:none;padding:0;font-size:clamp(54px,15.4vw,80px);line-height:1.30;text-align:center;white-space:nowrap;letter-spacing:-.055em;}
 .lion-lang-ar #home .hero h1{z-index:1;}
 .lion-lang-ar #home .hero-person{z-index:2;bottom:152px;}
 .lion-lang-ar #home .hero .outline{z-index:3;}
}
@media(max-width:380px){
 .lion-lang-ar #home .hero h1,.lion-lang-ar #home .hero .outline{top:125px;font-size:15.4vw;width:112%;left:-6%;}
}
.lion-lang-ar .ticker .ticker-track{animation-name:lion-marquee-reverse;direction:ltr;}
.lion-lang-ar .ticker .ticker-segment{direction:rtl;}
@media(prefers-reduced-motion:reduce){.lion-lang-ar .ticker .ticker-track{animation:none;}}

/* v2.6 - Arabic hero matches the English headline/portrait layering on mobile. */
@media(max-width:760px){
  .lion-lang-ar #home .hero{isolation:isolate;overflow:hidden;}
  .lion-lang-ar #home .hero h1,
  .lion-lang-ar #home .hero .outline{
    top:clamp(48px,11.5vw,72px);
    left:-7%;right:auto;width:114%;max-width:none;
    padding:0;
    font-size:clamp(57px,16vw,108px);
    line-height:1.45;
    letter-spacing:-.055em;
    text-align:center;
    white-space:nowrap;
    pointer-events:none;
  }
  .lion-lang-ar #home .hero h1{z-index:1;}
  .lion-lang-ar #home .hero-person{z-index:2;bottom:152px;}
  .lion-lang-ar #home .hero .outline{z-index:3;}
  .lion-lang-ar #home .hero-right{z-index:5;}
}
@media(max-width:380px){
  .lion-lang-ar #home .hero h1,
  .lion-lang-ar #home .hero .outline{top:44px;font-size:16vw;width:116%;left:-8%;}
}
/* Same continuous ticker mechanics for Arabic and English, keeping RTL glyph order. */
.lion-lang-ar .ticker{direction:ltr;}
.lion-lang-ar .ticker .ticker-track{direction:ltr;animation:lion-marquee-forward 38s linear infinite;}
.lion-lang-ar .ticker .ticker-segment{direction:rtl;unicode-bidi:isolate;}


/* v2.7 - center the Arabic circular arrow button on mobile */
@media(max-width:760px){
  .lion-lang-ar #home .play{
    display:grid !important;
    place-items:center;
    text-align:center;
    padding:0;
    line-height:1;
    font-size:24px;
    width:65px;
    height:65px;
    margin:18px auto 0;
    transform:scaleX(-1);
  }
}


/* v3.0.2: Center the Behance arrow in its circular link on all Arabic viewports.
   Keep the mirrored arrow direction without turning the grid into inline-block. */
.lion-lang-ar #home .hero-right a.play {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 65px;
  height: 65px;
  padding: 0;
  line-height: 1;
  text-align: center;
  font-family: Arial, sans-serif;
  transform: scaleX(-1);
}


/* v3.0.3: Keep the four Arabic service arrows geometrically centered.
   The earlier Arabic inline-block override displaced the glyph to the top. */
.lion-lang-ar #services .service > a {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  text-align: center;
  transform: scaleX(-1);
}


/* v1.2.0: keep Arabic icons centered and only reverse the arrow glyph. */
.lion-lang-ar .service>a{display:grid!important;place-items:center!important;transform:none!important;direction:ltr;}
.lion-lang-ar .service>a>i{transform:scaleX(-1);display:block;}
.lion-lang-ar .play{display:grid!important;place-items:center!important;transform:none!important;direction:ltr;}
.lion-lang-ar .play>i{transform:scaleX(-1);}
.lion-lang-ar .btn .lasp-arrow-icon{display:inline-grid;place-items:center;transform:none!important;}
.lion-lang-ar .btn .lasp-arrow-icon>i{transform:scaleX(-1);}
.lion-lang-ar .talk>span{display:grid;place-items:center;}
.lion-lang-ar .talk>span>i{transform:scaleX(-1);}

/* v1.3: Arabic up-left arrows, with perfect centering. */
.lion-lang-ar .lasp-fa-arrow{transform:rotate(-45deg)!important;transform-origin:center}
.lion-lang-ar .service>a>.lasp-fa-icon,.lion-lang-ar .play>.lasp-fa-icon{display:block;transform:rotate(-45deg)!important}
.lion-lang-ar .btn .lasp-arrow-icon>.lasp-fa-icon{transform:rotate(-45deg)!important}

/* v1.4: Keep Arabic marquee synchronized with the slower English pace. */
.lion-lang-ar .ticker .ticker-track{animation-duration:52s;}