/* Keep the enlarged portrait video fully visible, including the fire at the top. */
.hero.hero-fire::before{opacity:.45}
@media(min-width:701px){
 .hero.hero-fire{height:clamp(1014px,130svh,1430px);max-height:none}
 .hero-fire .hero-content{top:38.4615%}
 .hero.hero-fire video{top:0;bottom:auto;left:72%;right:auto;transform:translateX(-50%);width:auto;max-width:none;height:100%;object-fit:contain;object-position:center;mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 88%,transparent 100%)}
 .hero-fire .hero-shade{background:linear-gradient(90deg,#0b2118f0 0%,#0b2118c2 30%,#0b211838 54%,#0b211810 76%,#0b2118b3 100%),linear-gradient(0deg,#0b21186b,transparent 22%,transparent 78%,#0b211842)}
}
.hero-fire .hero-content{text-shadow:0 2px 16px #07180f80}
#hero-motion-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font:inherit;letter-spacing:inherit}
#hero-motion-toggle:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:700px){.hero-fire .hero-foot{flex-wrap:wrap;gap:8px 20px}}

@media(min-width:701px) and (max-width:1100px){.hero-fire .hero-content{max-width:40%}.hero-fire h1{font-size:clamp(40px,5.6vw,64px)}}

@media(min-width:701px) and (max-width:1000px){.hero.hero-fire{height:1105px}}
/* Mirror the whole hero composition in Arabic without clipping its video. */
@media(min-width:701px){
 html[dir=rtl] .hero.hero-fire video{left:28%;right:auto;transform:translateX(-50%);object-position:center;mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 88%,transparent 100%)}
 html[dir=rtl] .hero-fire .hero-content{max-width:44%;left:auto;right:6.25vw}
 html[lang=ar] .hero-fire h1{font-size:clamp(40px,5.2vw,72px);line-height:1.5}
 html[dir=rtl] .hero-fire .hero-shade{background:linear-gradient(270deg,#0b2118f0 0%,#0b2118c2 30%,#0b211838 54%,#0b211810 76%,#0b2118b3 100%),linear-gradient(0deg,#0b21186b,transparent 22%,transparent 78%,#0b211842)}
}
@media(min-width:701px) and (max-width:1100px){html[dir=rtl] .hero-fire .hero-content{max-width:40%}}
@media(max-width:700px){html[dir=rtl] .hero-fire .hero-content{left:24px;right:24px;max-width:none}html[lang=ar] .hero-fire h1{font-size:clamp(38px,10vw,58px);line-height:1.5}}