/* =====================================================================
   Home page — rebuilt to the Amoxi layout (sizes, spacing, hovers).
   Loaded after style.css.
   ===================================================================== */
:root{--black2:#0E0F11;--black3:#121115;--black4:#131313;--black5:#222;--black6:#3A3B3F;--gray:#969697;--line14:rgba(255,255,255,.14)}

/* ---------- Section title (tagline + title) ---------- */
.stitle{margin-bottom:35px}
.stitle--center{margin-bottom:51px;text-align:center}
.stitle__top{display:inline-flex;align-items:flex-start;gap:10px;margin-bottom:13px}
.stitle--center .stitle__top{justify-content:center}
.stitle__shape{width:29px;height:16px;flex-shrink:0;position:relative;top:4px}
.stitle__shape::before,.stitle__shape::after{content:"";width:8px;height:8px;position:absolute;top:50%;z-index:1;border-radius:50%;transform:translateY(-50%);background:#fff}
.stitle__shape::before{left:13px}
.stitle__shape::after{width:4px;height:4px;right:0}
.stitle__shape i{width:16px;height:100%;position:absolute;top:0;left:0;background:var(--base);clip-path:polygon(100% 50%,0 0,0 100%)}
.stitle__shape--2::before{left:auto;right:13px}
.stitle__shape--2::after{left:0;right:auto}
.stitle__shape--2 i{left:auto;right:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
[dir="rtl"] .stitle__shape{transform:scaleX(-1)}
.stitle__tagline{margin:0;font-family:var(--head);font-size:22px;color:#fff;font-weight:500;line-height:1.18;letter-spacing:.1em;text-transform:uppercase}
html[lang="ar"] .stitle__tagline{letter-spacing:0}
.stitle__title{margin:0;font-size:clamp(32px,3.4vw,50px);font-weight:700;line-height:1.25;color:#fff}
/* scroll "text invert" fill — lines get split by JS */
.bw-split-text .fill-line{background-size:200% 100%;background-position-x:100%;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to left,rgba(255,255,255,.2) 50%,#fff 50%)}
.stitle__tagline.bw-split-text .fill-line{background-image:linear-gradient(to left,rgba(255,98,29,.4) 50%,var(--base) 50%)}
[dir="rtl"] .bw-split-text .fill-line{background-image:linear-gradient(to right,rgba(255,255,255,.2) 50%,#fff 50%);background-position-x:0}
[dir="rtl"] .stitle__tagline.bw-split-text .fill-line{background-image:linear-gradient(to right,rgba(255,98,29,.4) 50%,var(--base) 50%)}
.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:block}

/* ---------- Amoxi button ---------- */
.abtn{display:inline-flex;align-items:center;gap:0;background:none;border:0;cursor:pointer}
.abtn__text{display:inline-block;padding:14.5px 40px;position:relative;z-index:1;font-family:var(--head);font-size:16px;color:#fff;font-weight:600;line-height:1.25;overflow:hidden;border-radius:100px;text-transform:uppercase;transition:all .5s ease;background:var(--base)}
.abtn__text::before,.abtn__text::after{content:"";width:0;height:calc(100% + 10px);position:absolute;top:-5px;z-index:-1;transition:.5s;transform:skewX(-25deg);background:#fff}
.abtn__text::before{left:-8px}.abtn__text::after{right:-8px}
.abtn:hover .abtn__text{color:var(--black)}
.abtn:hover .abtn__text::before,.abtn:hover .abtn__text::after{width:calc(50% + 10px)}
.abtn__icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;overflow:hidden;background:#fff;color:var(--base);font-size:13px;transition:all .5s ease}
.abtn:hover .abtn__icon{background:var(--base);color:#fff}
.abtn:hover .abtn__icon i{animation:slideRight .5s}
@keyframes slideRight{49%{transform:translateX(120%)}50%{opacity:0;transform:translateX(-120%)}51%{opacity:1}}
[dir="rtl"] .abtn__icon i{transform:scaleX(-1)}

/* ---------- Header (Amoxi) ---------- */
.header{position:absolute;background:transparent;border-bottom:1px solid var(--line14)}
.header.sticky{position:fixed;background:rgba(14,15,17,.97);backdrop-filter:none;animation:headerDown .6s var(--ease)}
.header.hide{transform:none}
@keyframes headerDown{from{transform:translateY(-100%)}to{transform:none}}
.header-inner{height:96px;max-width:1720px}
.header.sticky .header-inner{height:84px}
.nav>li>a{font-family:"DM Sans",var(--head);font-size:16px;font-weight:500;padding:0 18px}
.header-phone{background:#2A2B30;padding:14px 26px;font-size:15px}
.mnav-btn{width:28px;display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px 0}
.mnav-btn span{height:2px;width:100%;background:#fff;transition:.5s}
.mnav-btn:hover span{background:var(--base)}
@media (max-width:1199px){.mnav-btn{display:flex}}
/* Mobile drawer (left) */
.mnav{position:fixed;inset:0;z-index:300;visibility:hidden;transition:visibility .5s}
.mnav.open{visibility:visible}
.mnav__overlay{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .5s}
.mnav.open .mnav__overlay{opacity:.8}
.mnav__content{width:300px;max-width:85vw;height:100%;overflow-y:auto;position:relative;z-index:1;padding:65px 15px 30px;background:var(--black4);transform:translateX(-100%);transition:transform .5s ease}
[dir="rtl"] .mnav__content{transform:translateX(100%)}
.mnav.open .mnav__content{transform:none}
.mnav__close{position:absolute;top:20px;inset-inline-end:20px;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;transition:.5s}
.mnav__close:hover{color:var(--base);transform:rotate(90deg)}
.mnav .logo{margin-bottom:40px}
.mnav__list>li{border-bottom:1px solid rgba(255,255,255,.05)}
.mnav__list a,.mnav__row{height:46px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:16px;font-weight:500;font-family:"DM Sans","Cairo",sans-serif;text-transform:capitalize}
.mnav__row a{height:auto;flex:1}
.mnav__row button{width:30px;height:30px;border:0;background:var(--base);color:#fff;display:grid;place-items:center;transform:rotate(-90deg);transition:transform .5s;cursor:pointer;font-size:12px}
[dir="rtl"] .mnav__row button{transform:rotate(90deg)}
li.open>.mnav__row>a{color:var(--base)}
li.open>.mnav__row button{transform:rotate(0);background:#fff;color:var(--black4)}
.mnav__sub{display:none;border-top:1px solid rgba(255,255,255,.05)}
li.open>.mnav__sub{display:block}
.mnav__sub a{padding-inline-start:1em;font-size:15px;border-bottom:1px solid rgba(255,255,255,.05)}
.mnav__sub a:hover{color:var(--base)}
.mnav__contact{margin:30px 0}
.mnav__contact li{display:flex;align-items:center;gap:12px;color:#fff;font-weight:500}
.mnav__contact li+li{margin-top:15px}
.mnav__contact i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--base);color:#fff;flex-shrink:0}
.mnav .social a{width:32px;height:32px;border:0;background:var(--base);font-size:13px}
/* Orange sidebar keeps desktop info only */
.offcanvas .mobile-nav{display:none!important}
@media (max-width:1199px){.offcanvas-desktop{display:flex!important}}

/* ---------- Preloader: logo flip like Amoxi ---------- */
#preloader .preloader-spin{animation:none}
.pre-logo{width:120px;height:62px;background:#fff;border-radius:14px;padding:8px 12px;animation:flipY 2s infinite both;backface-visibility:visible}
.pre-logo img{width:100%;height:100%;object-fit:contain}
@keyframes flipY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}

/* ---------- HERO ---------- */
.h1x{position:relative;padding:210px 0 120px;background:var(--black);overflow:hidden}
.h1x__bg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#1c1a1a 0 36px,#2b1f19 36px 72px);opacity:.95}
.h1x__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,transparent 40%,rgba(26,27,31,.6) 100%),linear-gradient(to bottom,transparent 55%,var(--black) 95%)}
.h1x .container{position:relative;z-index:3}
.h1x__row{display:grid;grid-template-columns:1fr 310px;gap:40px}
.h1x__title{margin-bottom:28px;font-size:clamp(40px,5.3vw,75px);line-height:1.2;font-weight:700;color:#fff;text-transform:capitalize}
.h1x__title .line1,.h1x__title .line2{display:block}
.h1x__hl{display:inline-block;background:linear-gradient(90deg,#FF621D,#E14C8C,#8A5CF6,#FF621D);background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
.h1x__emoji{display:inline-block;margin-inline-start:10px;animation:zoomPulse 1.5s infinite alternate}
.h1x__arrow{color:var(--base);font-size:.75em;display:inline-block;animation:zump 3s linear infinite}
@keyframes zoomPulse{from{transform:scale(.9)}to{transform:scale(1.1)}}
@keyframes zump{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.h1x__desc1{max-width:190px;position:relative;margin-bottom:45px}
.h1x__desc1 p{position:relative;padding-inline-start:13px;color:var(--text)}
.h1x__desc1 p::before{content:"";width:2px;height:calc(100% - 15px);position:absolute;top:50%;inset-inline-start:0;transform:translateY(-50%);background:var(--base)}
.h1x__desc1-shape{position:absolute;top:0;bottom:0;inset-inline-end:-75px;margin:auto;height:38px;font-size:38px;color:#fff;animation:spin 5s linear infinite}
.h1x__desc2{max-width:265px;margin:19px auto 0;padding-top:12px;border-top:1px solid var(--text)}
.h1x__desc2 p{color:var(--text)}
.h1x__big{float:left;margin-inline-end:5px;font-family:var(--head);font-size:70px;color:var(--base);line-height:1;font-weight:700}
[dir="rtl"] .h1x__big{float:right}
html[lang="ar"] .h1x__big{display:none}
.h1x__video{width:310px;height:192px;position:relative;margin:57px 0 0 auto;border-radius:30px;overflow:hidden}
[dir="rtl"] .h1x__video{margin:57px auto 0 0}
.h1x__video img{width:125%;max-width:none;height:100%;object-fit:cover}
.vbtn{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--base);display:grid;place-items:center;font-size:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;transition:.4s}
.vbtn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(255,255,255,.6);animation:ripple 2s infinite}
.vbtn:hover{background:var(--base);color:#fff}
.h1x__image{position:relative;margin-top:-147px;z-index:1}
.h1x__image-inner{height:671px;position:relative;overflow:hidden;border-radius:30px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 671' preserveAspectRatio='none'><path d='M0 200 Q0 170 30 170 H300 Q330 170 330 140 V30 Q330 0 360 0 H640 Q670 0 670 30 V190 Q670 220 700 220 H970 Q1000 220 1000 250 V671 H0 Z' fill='black'/></svg>") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 671' preserveAspectRatio='none'><path d='M0 200 Q0 170 30 170 H300 Q330 170 330 140 V30 Q330 0 360 0 H640 Q670 0 670 30 V190 Q670 220 700 220 H970 Q1000 220 1000 250 V671 H0 Z' fill='black'/></svg>") center/100% 100% no-repeat}
[dir="rtl"] .h1x__image-inner{transform:scaleX(-1)}
[dir="rtl"] .h1x__image-inner img{transform:scaleX(-1)}
.h1x__image-inner img{width:125%;max-width:none;height:100%;object-fit:cover}
.h1x__tags{position:absolute;top:405px;inset-inline-end:2%;z-index:4}
.h1x__tags li{font-family:var(--head);font-size:25px;font-weight:500;line-height:1.5;color:#fff;position:relative}
.h1x__tags li+li{margin-top:5px}
.h1x__tags li:nth-child(3){padding-inline-start:50px;color:var(--base)}
.h1x__tags li:nth-child(3)::before{content:"";width:40px;height:2px;position:absolute;top:50%;inset-inline-start:0;background:var(--base)}
.scroll-btn{width:54px;height:96px;display:flex;justify-content:center;padding-top:14px;border-radius:40px;border:2px solid #fff;position:absolute;top:250px;inset-inline-end:4%;z-index:4}
.scroll-btn span{width:14px;height:14px;border-radius:50%;background:var(--base);animation:scrollDot2 2s infinite}
@keyframes scrollDot2{0%{transform:translateY(0);opacity:1}80%{transform:translateY(50px);opacity:0}100%{opacity:0}}
.h1x__shape{position:absolute;bottom:60px;inset-inline-end:40px;font-size:110px;color:var(--base);z-index:2;opacity:.8}

/* ---------- Funfact ---------- */
.fun{position:relative;background:var(--black)}
.fun__wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px;position:relative}
.fun__wrap::before,.fun__wrap::after{content:"";width:100%;height:1px;position:absolute;left:0;background:linear-gradient(90deg,rgba(217,217,217,0) 0%,#a6a6a6 50%,rgba(115,115,115,0) 100%)}
.fun__wrap::before{top:0}.fun__wrap::after{bottom:0}
.fun__item{display:flex;align-items:center;justify-content:center;position:relative;perspective:800px}
.fun__item::before{content:"";width:100%;height:calc(100% - 30px);margin:auto;position:absolute;inset:0;opacity:0;background:var(--base);backface-visibility:hidden;transform-origin:0 0;transform:rotateY(-90deg);transition:transform .5s,opacity .1s .3s}
.fun__item:hover::before{opacity:1;transform:rotateY(0);transition:transform .5s,opacity .1s}
.fun__item:not(:last-child)::after{content:"";width:1px;height:100%;position:absolute;top:50%;inset-inline-end:-15px;transform:translateY(-50%);background:var(--gray)}
.fun__content{position:relative;z-index:1;padding:55px 30px 60px}
.fun__count{padding-bottom:12px;margin-bottom:14px;position:relative;font-size:50px;line-height:1.25;font-weight:700;color:#fff;direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .fun__count{text-align:right}
.fun__count::after{content:"";width:97px;height:2px;position:absolute;inset-inline-start:0;bottom:0;background:#fff;transition:.5s}
[dir="rtl"] .fun__count::after{left:auto;right:0}
.fun__text{margin:0;font-size:16px;line-height:1.625;font-weight:600;color:var(--text);transition:.5s}
.fun__item:hover .fun__text{color:#fff}

/* ---------- About ---------- */
.ab1{position:relative;background:var(--black);padding:120px 0}
.ab1__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ab1__images{display:flex;gap:20px;position:relative}
.ab1__img1,.ab1__img2{overflow:hidden;flex:1}
.ab1__img1{border-radius:1000px 0 0 1000px;height:440px;margin-top:130px}
.ab1__img2{border-radius:0 1000px 1000px 0;height:520px}
[dir="rtl"] .ab1__img1{border-radius:0 1000px 1000px 0}
[dir="rtl"] .ab1__img2{border-radius:1000px 0 0 1000px}
.ab1__img1 img,.ab1__img2 img{width:100%;height:100%;object-fit:cover}
.ab1__badge{position:absolute;top:10px;inset-inline-start:40px;width:150px;height:150px;border-radius:50%;background:var(--black2);border:1px solid var(--line14);display:grid;place-items:center;z-index:2}
.ab1__badge svg{position:absolute;inset:0;animation:spin 14s linear infinite}
.ab1__badge text{fill:#fff;font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-size:15px;font-weight:600;letter-spacing:3px;text-transform:uppercase}
.ab1__badge b{width:60px;height:60px;border-radius:50%;background:var(--base);color:#fff;display:grid;place-items:center;font-size:24px}
.ab1__exp{position:absolute;bottom:0;inset-inline-start:calc(50% - 50px);display:flex;gap:30px;align-items:center;z-index:2}
.ab1__year{margin:0;padding:19px 20px;font-family:"Plus Jakarta Sans",sans-serif;font-size:80px;font-weight:700;line-height:1;color:transparent;writing-mode:vertical-rl;transform:rotate(180deg);background:var(--base);-webkit-text-stroke:2px #fff}
.ab1__exp h5{margin:0;font-size:30px;color:#fff;line-height:1.25;font-weight:600;text-transform:uppercase}
.ab1__exp h5:first-child{position:relative;margin-bottom:16px;padding-bottom:16px}
.ab1__exp h5:first-child::before{content:"";width:calc(100% + 30px);height:1px;position:absolute;inset-inline-start:-30px;bottom:0;background:var(--line14)}
.ab1__item{display:flex;gap:20px;align-items:center;margin-bottom:29px}
.ab1__icon{width:111px;height:111px;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:10px;background:#fff;font-size:56px;color:var(--base)}
.ab1__fun{display:flex;gap:20px 75px;align-items:center;padding:49px 40px;margin-bottom:33px;border-radius:10px;border:1px solid var(--line14)}
.ab1__fun h3{margin:0;position:relative;font-size:85px;line-height:1;font-weight:600;color:#fff;direction:ltr}
.ab1__fun h3::after{content:"";width:1px;height:100%;position:absolute;top:0;right:-34.5px;background:linear-gradient(0deg,rgba(217,217,217,0),#a6a6a6 50%,rgba(115,115,115,0))}
[dir="rtl"] .ab1__fun h3::after{right:auto;left:-34.5px}
.ab1__text{margin-bottom:32px}
.ab1__text b{color:var(--base);text-transform:uppercase;font-weight:600}
.ab1__shape{position:absolute;inset-inline-end:40px;bottom:57px;font-size:70px;color:rgba(255,98,29,.8)}

/* ---------- Brand area ---------- */
.area{padding:201px 0;position:relative;background:var(--black);overflow:hidden}
.area__bg{position:absolute;inset:0;overflow:hidden}
.area__bg img{width:125%;max-width:none;height:100%;object-fit:cover}
.area__bg::after{content:"";position:absolute;inset:0;background:rgba(14,15,17,.9)}
.area .container{position:relative;z-index:1}
.area__content{position:relative;text-align:center}
.area__title{position:relative;z-index:1;margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(75px,18vw,250px);font-weight:700;color:transparent;line-height:1;text-transform:uppercase;-webkit-text-stroke:2px #fff;display:inline-flex;align-items:center;direction:ltr}
.area__orb{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin:0 .02em;background:radial-gradient(circle at 55% 50%,#fff 0 6%,#ff5ad0 14%,#6a4cff 26%,#16104a 38%,#000 44%,var(--base) 46%);box-shadow:0 0 70px rgba(255,98,29,.45);-webkit-text-stroke:0}
.area__border{width:104px;height:104px;position:absolute;border-color:#fff;border-style:solid;border-width:0}
.area__border--1{top:-71px;left:0;border-top-width:1px;border-left-width:1px}
.area__border--2{top:-71px;right:0;border-top-width:1px;border-right-width:1px}
.area__border--3{bottom:-71px;left:0;border-bottom-width:1px;border-left-width:1px}
.area__border--4{bottom:-71px;right:0;border-bottom-width:1px;border-right-width:1px}
.area__dots{width:100%;height:12px;position:absolute;left:0;top:0;z-index:2;background:radial-gradient(circle at 8px 12px,var(--base) 6px,transparent 7px) 0 0/16px 12px repeat-x;animation:moveBg 30s linear infinite}
.area__dots--b{top:auto;bottom:0;background:radial-gradient(circle at 8px 0,var(--base) 6px,transparent 7px) 0 0/16px 12px repeat-x;animation-direction:reverse}
@keyframes moveBg{to{background-position:1600px 0}}

/* ---------- Services ---------- */
.srv1{padding:120px 0;background:var(--black)}
.srv1__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:50px}
.srv1__head .stitle{margin:0}
.srv1__nav{display:flex;gap:10px}
.srv1__nav button{width:70px;height:70px;border-radius:50%;border:1px solid #fff;background:none;color:#fff;font-size:16px;cursor:pointer;transition:.5s}
.srv1__nav button:hover{background:var(--base);border-color:var(--base)}
.scard{position:relative;padding:50px 40px 60px;overflow:hidden;border:1px solid var(--line14);height:100%;background:transparent}
.srv1 .swiper-slide{height:auto}
.srv1 .swiper-slide:not(:first-child) .scard{border-inline-start:0}
.scard__hover{position:absolute;inset:-1px;overflow:hidden;pointer-events:none}
.scard__hover i{position:absolute;inset:0;background:var(--base);transform:translateY(101%);transition:transform .6s var(--ease)}
.scard:hover .scard__hover i{transform:translateY(0)}
.scard__content{position:relative;z-index:1}
.scard__serial{display:inline-flex;gap:9px;align-items:flex-start;margin-bottom:15px;font-size:16px;color:var(--base);line-height:1.25;text-transform:uppercase;transition:.5s}
.scard__serial s{width:12px;height:12px;display:flex;align-items:center;justify-content:center;position:relative;top:3px;border:1px solid var(--base);transition:.5s}
.scard__serial s::before{content:"";width:4px;height:4px;opacity:0;transform:scale(0);transition:.5s;background:#fff}
.scard:hover .scard__serial{color:#fff}
.scard:hover .scard__serial s{border-color:#fff}
.scard:hover .scard__serial s::before{opacity:1;transform:scale(1)}
.scard__title{margin-bottom:14px;font-size:24px;color:#fff;font-weight:700;line-height:1.25}
.scard__title a{background:linear-gradient(currentColor,currentColor) 0 95%/0 1px no-repeat;transition:.5s}
.scard__title a:hover{background-size:100% 1px}
.scard__image{height:127px;margin-bottom:18px;position:relative}
.scard__squig{position:absolute;top:15px;inset-inline-start:0;width:150px;height:40px;color:#fff;opacity:.14;transition:.5s}
.scard:hover .scard__squig{opacity:1}
.scard__pic{position:absolute;top:0;inset-inline-end:30px;width:120px;height:120px;border-radius:12px;overflow:hidden;opacity:0;transform:scale(.1);transition:.5s}
.scard__pic img{width:100%;height:100%;object-fit:cover}
.scard:hover .scard__pic{opacity:1;transform:scale(1)}
.scard__icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;position:relative;transition:.5s;border:1px solid var(--line14);font-size:36px;color:#fff}
.scard__icon::before,.scard__icon::after{content:"";width:7px;height:7px;position:absolute;transition:.5s;background:var(--base)}
.scard__icon::before{top:-4px;right:-4px}
.scard__icon::after{left:-4px;bottom:-4px}
.scard:hover .scard__icon{border-color:#fff}
.scard:hover .scard__icon::before,.scard:hover .scard__icon::after{background:#fff}
.scard:hover .scard__icon::before{transform:translateX(-79px)}
.scard:hover .scard__icon::after{transform:translateX(79px)}
.scard__btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-end:10px;bottom:10px;z-index:1;overflow:hidden;transition:.5s;background:rgba(255,255,255,.14);color:#fff;font-size:12px}
.scard:hover .scard__btn{background:#fff;color:var(--base)}
.scard__btn:hover i{animation:slideRight .5s}
.scard p{color:var(--text);transition:.5s;margin-bottom:0}
.scard:hover p{color:#fff}

/* ---------- Slide text (ribbons) ---------- */
.stext{position:relative;z-index:1;margin:94px 0;background:var(--black);padding:0}
.stext__one{padding:38.5px 0;position:relative;overflow:hidden;transform:skewY(-7.412deg);background:#fff}
.stext__two{width:100%;padding:38.5px 0;overflow:hidden;position:absolute;top:0;left:0;z-index:1;transform:skewY(7.412deg);background:var(--base)}
.stext__scroll{display:flex;gap:0;width:max-content;direction:ltr}
.stext__title{display:flex;gap:10px;margin-inline-end:50px!important;align-items:center;margin:0;font-family:var(--head);font-size:50px;font-weight:700;color:#fff;line-height:1.26;text-transform:uppercase;white-space:nowrap;transition:.5s}
.stext__one .stext__title{color:var(--black5)}
.stext__title:hover{color:var(--base);text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff}
.stext__one .stext__title:hover{color:#fff;text-shadow:2px 2px 0 #222,-2px -2px 0 #222,2px -2px 0 #222,-2px 2px 0 #222}

/* ---------- Stroke SVG title ---------- */
.stroke-svg{width:100%;margin-bottom:47px;text-align:center}
.stroke-svg svg{width:100%;height:clamp(50px,12vw,190px);display:block;overflow:visible}
.stroke-svg text{font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-size:clamp(35px,10vw,150px);font-weight:700;text-transform:uppercase;stroke:#b2afa6;stroke-width:1;fill:transparent;animation:svgText 5s infinite alternate}
@keyframes svgText{0%{fill:rgba(255,255,255,0);stroke:rgba(178,175,166,1);stroke-dashoffset:25%;stroke-dasharray:0 50%;stroke-width:1}70%{fill:rgba(255,255,255,0);stroke:rgba(178,175,166,1)}80%{fill:rgba(255,255,255,0);stroke-width:1}100%{fill:rgba(255,98,29,1);stroke:rgba(255,255,255,0);stroke-dashoffset:-25%;stroke-dasharray:50% 0;stroke-width:0}}

/* ---------- Portfolio marquee ---------- */
.pf1{padding-top:104px;background:var(--black);overflow:hidden}
.marquee{max-width:100%;overflow:hidden}
.marquee__row{display:flex;gap:10px;width:max-content}
.marquee__row--b{margin-top:10px}
.pcard{position:relative;width:550px;height:494px;flex-shrink:0;overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__img{height:100%}
.pcard__content{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:44px 50px 45px;position:absolute;inset:0;opacity:0;visibility:hidden;transition:all .5s ease;background:rgba(217,217,217,.84)}
.pcard:hover .pcard__content{opacity:1;visibility:visible;animation:zoomInDown .8s .1s both}
@keyframes zoomInDown{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{transform:none}}
.pcard__year{margin:0;font-family:var(--head);font-size:22px;font-weight:600;color:var(--black5);text-transform:uppercase}
.pcard__title{margin-bottom:14px;font-size:24px;color:var(--black5);line-height:1.44;font-weight:700}
.pcard__title a:hover{color:var(--base)}
.pcard__cat{display:flex;gap:10px;align-items:center;margin:0;font-size:16px;font-weight:500;color:var(--black6);text-transform:uppercase}
.pcard__cat::before{content:"";width:15px;height:15px;border:2px solid var(--base)}
.cbtn{width:183px;height:183px;display:flex;gap:15px;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:1;margin:auto;padding:20px;font-family:var(--head);font-size:22px;font-weight:600;text-align:center;line-height:1.3;color:#fff;text-transform:uppercase;border-radius:50%;overflow:hidden;background:var(--base)}
.cbtn i.fa-solid{font-size:30px}
.cbtn__dot{width:0;height:0;position:absolute;left:0;top:0;z-index:-1;border-radius:50%;background:var(--black);transition:width .5s ease-out,height .5s ease-out;transform:translate(-50%,-50%)}
.cbtn:hover .cbtn__dot{width:400px;height:400px}

/* ---------- Team ---------- */
.tm1{padding:120px 0;background:var(--black);overflow:hidden}
.tcard{position:relative;transition:.5s}
.tcard:hover{z-index:1}
.tcard::after{content:"";position:absolute;inset:0;pointer-events:none;transition:.5s;border-top:1px solid var(--line14)}
.tcard:last-child::after{border-bottom:1px solid var(--line14)}
.tcard:hover::after,.tcard:hover+.tcard::after{opacity:0}
.tcard__shape{width:calc(100% + 200px);height:100%;position:absolute;top:0;left:50%;z-index:1;transform:translateX(-50%);pointer-events:none}
.tcard__shape::after{content:"";position:absolute;inset:0;opacity:0;border-radius:100px;transition:.5s;border:1px dashed var(--base)}
.tcard:hover .tcard__shape::after{opacity:1}
.tcard__content{display:flex;gap:15px 30px;align-items:center;justify-content:space-between;padding:21px 0 29px;position:relative;z-index:2}
.tcard .social{gap:15px}
.tcard .social a{width:44px;height:44px;border:1px solid var(--line14);color:#fff;font-size:16px}
.tcard .social a:hover{border-color:var(--base);background:var(--base)}
.tcard__identity{position:relative}
.tcard__name{display:inline-block;margin:0;position:relative;font-size:clamp(44px,7vw,100px);color:transparent;font-weight:700;line-height:1.26;-webkit-text-stroke:1px rgba(255,255,255,.14);white-space:nowrap}
html[lang="ar"] .tcard__name{-webkit-text-stroke:1px rgba(255,255,255,.3)}
.tcard__name span{position:absolute;top:0;left:0;color:#fff;clip-path:inset(0 100% 0 0);transition:clip-path 1s ease;-webkit-text-stroke-color:#fff;white-space:nowrap}
[dir="rtl"] .tcard__name span{left:auto;right:0;clip-path:inset(0 0 0 100%)}
.tcard:hover .tcard__name span{clip-path:inset(0 0 0 0)}
.tcard__image{position:absolute;top:50%;right:-100px;opacity:0;z-index:1;transition:1s;transform:translateY(-50%) scale(.4);width:170px;height:170px;border-radius:50%;overflow:hidden;pointer-events:none}
[dir="rtl"] .tcard__image{right:auto;left:-100px}
.tcard__image img{width:100%;height:100%;object-fit:cover}
.tcard:hover .tcard__image{opacity:1;transform:translateY(-50%) scale(1)}
.tcard__role{font-size:16px;color:#fff;text-transform:uppercase;min-width:200px;text-align:end}

/* ---------- Video ---------- */
.vid1{min-height:711px;display:flex;align-items:flex-end;position:relative;z-index:1;padding-top:80px;overflow:hidden}
.vid1__bg{position:absolute;inset:0;overflow:hidden}
.vid1__bg img{width:125%;max-width:none;height:100%;object-fit:cover}
.vid1__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.vid1 .container-fluid{width:100%;padding:0 70px;position:relative}
.vid1__inner{display:flex;gap:50px;align-items:flex-end}
.vid1__button{width:404px;position:relative;z-index:1;margin-inline-start:auto;padding:63px 40px 53px;text-align:center;background:var(--base);border:8px solid #fff;border-bottom:0;border-radius:1000px 1000px 0 0}
.vid1__button .vbtn{position:relative;top:auto;left:auto;transform:none;margin:0 auto 22px;width:70px;height:70px;font-size:20px;background:transparent;color:#fff;border:2px solid #fff}
.vid1__button h4{margin:0;font-size:20px;font-weight:700;color:#fff;text-transform:uppercase}
.vid1__item{margin-bottom:33px;text-align:center;flex:1;max-width:300px}
.vid1__item i{width:56px;height:56px;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;font-size:24px;color:#fff;border-radius:50%;background:var(--base)}
.vid1__item h4{font-size:24px;color:#fff;margin:0}
.clients2{padding:60px 0;background:var(--black);border-bottom:1px solid var(--line14);overflow:hidden}

/* ---------- Awards ---------- */
.aw1{position:relative;z-index:1;background:var(--black)}
.aw1__content{padding-top:104px}
.aw1__table{border:1px solid var(--black6);position:relative}
.aw1__row{display:grid;grid-template-columns:214px 393px 328px auto;position:relative;transition:background .5s}
.aw1__row>div{padding:24px 20px;font-family:"Plus Jakarta Sans","Cairo",sans-serif;color:var(--text);font-size:16px;line-height:1.625;text-align:center;border-bottom:1px solid var(--black6);border-inline-end:1px solid var(--black6);transition:.5s}
.aw1__row>div:last-child{border-inline-end:0}
.aw1__row--head>div{padding:8px 20px;font-size:14px;text-transform:uppercase}
.aw1__body .aw1__row:last-child>div{border-bottom:0}
.aw1__body .aw1__row:hover{background:var(--base)}
.aw1__body .aw1__row:hover>div{color:#fff;border-inline-end-color:#fff}
.aw1__year s{width:13px;height:13px;display:inline-flex;align-items:center;justify-content:center;margin-inline-end:10px;position:relative;top:1px;border:1px solid var(--base);transition:.5s}
.aw1__year s::before{content:"";width:4px;height:4px;background:#fff}
.aw1__row:hover .aw1__year s{border-color:#fff}
.aw1__title{font-weight:700!important;color:#fff!important}
.aw1__link a{text-decoration:underline}
.aw1__link a:hover{text-decoration:none}
.aw1__img{position:absolute;top:50%;left:-142px;width:120px;height:120px;border-radius:12px;object-fit:cover;opacity:0;z-index:1;transition:.5s;transform:translateY(-50%) scale(.5);pointer-events:none}
[dir="rtl"] .aw1__img{left:auto;right:-142px}
.aw1__row:hover .aw1__img{opacity:1;transform:translateY(-50%) scale(1)}

/* ---------- Work process ---------- */
.wp1{padding:120px 0;background:var(--black3)}
.wp1__top{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:51px}
.wp1__top .stitle{margin:0}
.wp1__text{margin:0;padding-inline-start:60px}
.wp1__items{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.wp1__step{text-align:end}
.wp1__step span{display:inline-flex;align-items:center;gap:8px;padding:7px 20px;font-size:16px;font-weight:600;color:var(--text);line-height:1.25;text-transform:uppercase;border-radius:100px;transition:.5s;border:1px solid var(--line14)}
.wp1__step span::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--base);transition:.5s}
.wp1__item:hover .wp1__step span{color:#fff;background:var(--base)}
.wp1__item:hover .wp1__step span::before{background:#fff}
.wp1__border{width:1px;position:relative;margin:0 59px 30px auto;transition:.5s;border:1px dashed var(--line14)}
[dir="rtl"] .wp1__border{margin:0 auto 30px 59px}
.wp1__border i{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:14px;color:var(--line14);transition:.5s}
.wp1__item:hover .wp1__border{border-color:var(--base)}
.wp1__item:hover .wp1__border i{color:var(--base)}
.wp1__item--1 .wp1__border{height:109px}.wp1__item--2 .wp1__border{height:189px}.wp1__item--3 .wp1__border{height:269px}.wp1__item--4 .wp1__border{height:349px}
.wp1__title{margin-bottom:31px;font-size:24px;line-height:1.25;font-weight:700;color:#fff}
.wp1__title a:hover{color:var(--base)}
.wp1__image{border-radius:270px;overflow:hidden;aspect-ratio:275/160}
.wp1__image img{width:100%;height:100%;object-fit:cover}
.wp1__button{margin-top:-85px;position:relative;z-index:1}

/* ---------- Blog ---------- */
.bl1{padding:120px 0;background:#202126}
.bl1__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.bcard__image{position:relative;overflow:hidden;z-index:1;margin-bottom:25px;border-radius:20px;aspect-ratio:410/470}
.bcard__image::after{content:"";width:93px;height:93px;position:absolute;inset-inline-end:-28px;bottom:-43px;z-index:1;opacity:0;border-radius:50%;transform:translateY(100px);transition:.5s;background:var(--base)}
.bcard__image img{width:100%;height:100%;object-fit:cover;display:block}
.bcard:hover .bcard__image::after{opacity:1;transform:translateY(0)}
.bcard__cat{position:absolute;inset-inline-start:30px;bottom:30px;padding:8.5px 25.5px;font-size:16px;font-weight:600;line-height:1.25;z-index:2;text-transform:uppercase;border-radius:100px;transition:.5s;background:#fff;color:var(--base)}
.bcard:hover .bcard__cat{color:#fff;background:var(--base)}
.bcard__arrow{position:absolute;inset-inline-end:20px;bottom:20px;z-index:2;width:42px;height:42px;display:grid;place-items:center;color:#fff;opacity:0;transition:.5s}
.bcard:hover .bcard__arrow{opacity:1}
.bcard__title{font-size:24px;line-height:1.33;margin-bottom:16px}
.bcard__title a{background:linear-gradient(currentColor,currentColor) 0 95%/0 1px no-repeat;transition:.5s}
.bcard__title a:hover{background-size:100% 1px}
.bcard__meta{display:flex;align-items:center;gap:15px;font-size:15px}
.bcard__meta i{width:40px;height:1px;background:rgba(255,255,255,.3)}

/* ---------- Footer (Amoxi) ---------- */
.footer{background:var(--black2);padding-top:93px}
.footer-grid{padding-bottom:72px}
.footer-big{margin:0;padding:25px 0;font-size:clamp(46px,11vw,175px);border-top:1px solid var(--line14);letter-spacing:0;perspective:400px}
.footer-bottom{border-top:1px solid var(--line14);margin-top:0;padding:25px 0;color:#fff}

/* ---------- Custom cursor like Amoxi ---------- */
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px}
.cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:2px solid var(--base)}
.cursor-ring.hover{background:var(--base);opacity:.4;border-color:transparent}
.cursor-dot.hover{width:25px;height:25px;margin:-12.5px 0 0 -12.5px;opacity:.4}

/* ---------- Back to top like Amoxi ---------- */
.back-top{bottom:120px;inset-inline-end:-6px;flex-direction:row;transform:rotate(-90deg);gap:8px;font-weight:700;font-size:12px;letter-spacing:.1em}
.back-top>span:last-child{writing-mode:horizontal-tb;transform:none}
.bt-bar{width:30px;height:4px;background:var(--base)}
.bt-fill{inset:0;height:100%!important;width:var(--p,0%);background:#fff}

/* ================= Responsive ================= */
@media (max-width:1599px){.h1x__tags{display:none}}
@media (max-width:1399px){
  .h1x{padding-bottom:280px}
  .scroll-btn{top:auto;left:50%;right:auto;bottom:120px;transform:translateX(-50%)}
  .tcard__image{right:0}
}
@media (max-width:1199px){
  .h1x{padding-top:180px}
  .h1x__row{grid-template-columns:1fr;text-align:center}
  .h1x__desc1{max-width:100%;margin:0 auto 35px;text-align:center}
  .h1x__desc1-shape{display:none}
  .h1x__video{margin:40px auto 0}
  .h1x__image{margin-top:50px}
  .h1x__image-inner{height:600px;-webkit-mask:none;mask:none}
  .ab1__grid,.wp1__top{grid-template-columns:1fr}
  .wp1__text{padding:0}
  .wp1__items{grid-template-columns:repeat(2,1fr)}
  .wp1__border{height:60px!important}
  .wp1__button{margin-top:40px}
  .aw1__table{overflow-x:auto}
  .aw1__row{min-width:900px}
}
@media (max-width:991px){
  .fun__wrap{grid-template-columns:repeat(2,1fr)}
  .fun__item:nth-child(2)::after{display:none}
  .h1x__image-inner{height:500px}
  .tcard__content{flex-wrap:wrap;justify-content:center;text-align:center}
  .tcard__role{text-align:center;min-width:0;width:100%}
  .tcard__image{display:none}
  .bl1__grid{grid-template-columns:1fr 1fr}
  .vid1__item{display:none}
  .vid1__button{margin:0 auto}
  .pcard{width:420px;height:380px}
}
@media (max-width:767px){
  .h1x{padding-bottom:100px}
  .h1x__image{display:none}
  .scroll-btn{display:none}
  .fun__wrap{grid-template-columns:1fr}
  .fun__item::after{display:none}
  .ab1__exp{position:static;margin-top:20px}
  .ab1__img1{height:300px;margin-top:80px}.ab1__img2{height:360px}
  .ab1__badge{width:110px;height:110px}
  .ab1__fun{flex-direction:column;align-items:flex-start;gap:14px;padding:30px}
  .ab1__fun h3::after{display:none}
  .ab1__item{flex-direction:column;align-items:flex-start}
  .stext__title{font-size:30px}
  .wp1__items,.bl1__grid{grid-template-columns:1fr}
  .vid1 .container-fluid{padding:0 16px}
  .vid1__button{width:100%;max-width:320px;padding:40px 20px 30px}
  .pcard{width:300px;height:280px}
  .tcard .social{display:none}
}
.footer-big .fb-solid{color:#fff}
.footer-big .fb-solid b{color:var(--base);-webkit-text-stroke:0;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff}
.footer-big .fb-out{color:var(--black2);-webkit-text-stroke:0;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff}
.marquee__row,.stext__scroll{direction:ltr}
[dir="rtl"] .pcard{direction:rtl}
.srv1 .swiper{overflow:hidden}
.footer-big .fb-inner>span.fb-out{-webkit-text-stroke:0}
.bw-title-anim>div,.bw-split-text>div,.bw-reveal-text>div,.bw-reveal-text>div>div{text-align:inherit!important}
.footer-big{font-size:clamp(38px,9.2vw,150px);white-space:nowrap;overflow:hidden}
.tcard__image{width:190px;height:240px;border-radius:14px}
.h1x__desc1 p{display:inline-block}
html{overflow-x:clip}.aw1,.srv1{overflow:hidden}

/* ---------- Client logos: clean white logos like Amoxi (no boxes) ---------- */
.clients2{padding:70px 0}
.clients2 .clients-track{gap:70px;align-items:center}
.clients2 .clients-track span{background:none;width:auto;height:64px;padding:0;border-radius:0;filter:none;opacity:1;display:flex;align-items:center}
.clients2 .clients-track span:hover{transform:none}
.clients2 .clients-track img{max-height:54px;max-width:170px;width:auto;filter:grayscale(1) invert(1) brightness(1.5) contrast(1.1);mix-blend-mode:screen;opacity:.7;transition:opacity .4s}
.clients2 .clients-track span:hover img{opacity:1}
@media (min-width:768px) and (max-width:991px){.vid1__item{display:block}.vid1__button{margin:0 0 0 auto}}

/* ---------- Pinned orange shape that grows to fill the screen ---------- */
.circle-shape{height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:var(--black)}
.circle-shape__thumb svg{width:170px;height:170px;display:block;opacity:.9}

/* ---------- Footer name "Digital Cluster Hub" ---------- */
.footer-big{font-size:clamp(34px,8.4vw,140px);letter-spacing:-1px}
.footer-big .fb-solid b{position:relative}
.footer-big .fb-gap{display:inline-block;width:.25em}

/* ---------- Page header (Amoxi) ---------- */
.page-banner{padding:220px 0 150px;background:radial-gradient(ellipse 55% 70% at 50% 115%,rgba(255,98,29,.95),rgba(255,98,29,.25) 45%,transparent 72%),#161618}
.page-banner::before{opacity:.25}
.pb-title{font-size:clamp(40px,5vw,70px);letter-spacing:0;margin-bottom:22px}
.breadcrumb{padding:8px 22px;border:1px solid rgba(255,255,255,.35);border-radius:100px;gap:8px;font-weight:500;font-size:15px;letter-spacing:0}
.breadcrumb li+li::before{content:"/";font-family:inherit;color:#fff;margin-inline-end:8px}
[dir="rtl"] .breadcrumb li+li::before{content:"/"}
.pb-shape-2{font-size:0;width:110px;height:110px;animation:spin 12s linear infinite}
.pb-shape-2 svg{width:100%;height:100%}

/* ---------- Blog page: grid 2 + left sidebar ---------- */
.blog-page{padding:120px 0;background:var(--black)}
.blog-page__grid{display:grid;grid-template-columns:350px 1fr;gap:30px;align-items:start}
.blog-page__posts{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.sb__single{padding:34px 32px;border-radius:10px;background:var(--black);border:1px solid var(--line14)}
.sb__single+.sb__single{margin-top:30px}
.sb__title{position:relative;margin-bottom:34px;font-size:22px;color:#fff;font-weight:700;line-height:1.36}
.sb__title::after{content:"";position:absolute;inset-inline-start:0;bottom:-4px;width:39px;height:3px;background:var(--base)}
.sb__search{position:relative}
.sb__search input{padding:0 44px 0 20px;border:0;outline:0;width:100%;height:55px;font-size:16px;color:#fff;border-radius:10px;background:var(--black6)}
[dir="rtl"] .sb__search input{padding:0 20px 0 44px}
.sb__search button{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:var(--base);color:#fff;font-size:14px;cursor:pointer;transition:.4s}
.sb__search button:hover{background:#fff;color:var(--base)}
.sb__cats li+li{margin-top:10.5px}
.sb__cats a{display:flex;justify-content:space-between;align-items:center;font-size:17px;color:var(--text);transition:.5s}
.sb__cats a span:first-child{display:flex;align-items:center;gap:11px}
.sb__cats a:hover{color:var(--base)}
.sb__cats a:hover i{animation:slideRight .5s}
.sb__tags{display:flex;flex-wrap:wrap;gap:15px}
.sb__tags a{padding:7px 20px 6px;font-size:16px;color:var(--text);border:1px solid var(--line14);transition:.5s}
.sb__tags a:hover{color:#fff;border-color:var(--base);background:var(--base)}
.sb__post{display:flex;gap:14px}
.sb__post+.sb__post{margin-top:30px}
.sb__post img{width:94px;height:80px;object-fit:cover;flex-shrink:0}
.sb__post small{display:flex;gap:8px;align-items:center;margin:5px 0 10px;font-size:14px;color:var(--text)}
.sb__post small i{font-size:12px}
.sb__post h4{margin:0;font-size:17px;line-height:1.35}
.sb__post h4 a{background:linear-gradient(currentColor,currentColor) 0 95%/0 1px no-repeat;transition:.5s}
.sb__post h4 a:hover{color:var(--base);background-size:100% 1px}

.bc4{position:relative}
.bc4__image{display:block;overflow:hidden;aspect-ratio:410/300}
.bc4__image img{width:100%;height:100%;object-fit:cover;display:block}
.bc4__content{position:relative;z-index:2;background:var(--black)}
.bc4__content::after{content:"";width:100%;height:0;position:absolute;left:0;bottom:0;z-index:-1;transition:.5s;background:var(--base)}
.bc4:hover .bc4__content::after{height:100%}
.bc4__inner{position:relative;z-index:2;padding:0 30px 30px}
.bc4__meta{position:relative;z-index:1;margin-bottom:20px}
.bc4__metalist{width:calc(100% - 88px);margin-inline-start:auto;padding:12px 15px 10px 18px;display:flex;align-items:center;gap:5px 15px;flex-wrap:wrap;border-bottom:1px solid var(--line14);transition:.5s}
.bc4__metalist li{display:flex;align-items:center;gap:6px;font-size:15px;color:#fff;transition:.5s}
.bc4__metalist i{color:var(--base);transition:.5s}
.bc4:hover .bc4__metalist{border-color:#333}
.bc4:hover .bc4__metalist li,.bc4:hover .bc4__metalist i{color:#333}
.bc4__date{width:58px;text-align:center;position:absolute;inset-inline-start:30px;bottom:0;transition:.5s}
.bc4__date b{display:block;padding:12px 5px 11px;font-family:"Plus Jakarta Sans",sans-serif;font-size:25px;color:var(--black5);font-weight:700;line-height:1;background:#fff}
.bc4__date span{display:block;padding:8px 5px 7px;font-size:15px;font-weight:700;color:#333;line-height:1;text-transform:uppercase;transition:.5s;background:var(--base)}
.bc4:hover .bc4__date span{color:#fff;background:var(--black)}
.bc4__title{margin-bottom:22px;font-size:24px;font-weight:700;line-height:1.25;color:#fff;transition:.5s}
.bc4__title a{background:linear-gradient(currentColor,currentColor) 0 95%/0 1px no-repeat;transition:.5s}
.bc4__title a:hover{background-size:100% 1px}
.bc4:hover .bc4__title{color:var(--black5)}
.bc4__cat{display:inline-block;padding:9px 20px;font-size:15px;font-weight:600;line-height:1.25;color:#fff;text-transform:uppercase;background:var(--black);border:1px solid var(--line14);transition:.5s}
.bc4:hover .bc4__cat{border-color:var(--black2);background:var(--black2)}
.bc4__button{width:100%;height:46px;margin-top:-75px;margin-bottom:30px;position:relative;opacity:0;transition:all .5s ease 0s;z-index:3}
.bc4__button::before{content:"";position:absolute;inset:0;background:var(--base);clip-path:polygon(50% 100%,0 0,100% 0)}
.bc4:hover .bc4__button{opacity:1;margin-top:-1px;transition-delay:.4s}
.bc4__btn{width:50px;height:50px;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;bottom:-20px;z-index:1;transform:translateX(-50%);font-size:18px;color:var(--black2);border-radius:50%;background:#fff;transition:.5s}
.bc4__btn:hover{color:#fff;background:var(--black)}
.bc4__shape{width:57px;height:57px;position:absolute;inset-inline-end:18px;bottom:18px;z-index:2;animation:spin 5s linear infinite}
.bc4__shape path{stroke:#fff;transition:.5s}
.bc4:hover .bc4__shape path{stroke:var(--black)}
.ripple-svg{position:absolute;width:0;height:0}
.pager{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:60px}
.pager a{width:40px;height:36px;display:grid;place-items:center;background:#fff;color:var(--base);font-weight:600;font-size:15px;transition:.4s}
.pager a.active,.pager a:hover{background:var(--base);color:#fff}
.pager a.arrow{background:none;color:var(--base);font-size:22px;width:auto}

/* ---------- Blog details ---------- */
.bd-grid{display:grid;grid-template-columns:1fr 350px;gap:30px;align-items:start}
.bd__image{overflow:hidden;aspect-ratio:760/450}
.bd__image img{width:100%;height:100%;object-fit:cover}
.bd__meta{display:flex;flex-wrap:wrap;align-items:center;gap:15px 25px;margin:30px 0 20px}
.bd__cat{padding:10px 26px;border-radius:100px;background:var(--base);color:#fff;font-size:15px;font-weight:600;text-transform:uppercase}
.bd__meta span{display:flex;align-items:center;gap:8px;color:var(--text)}
.bd__meta i{color:var(--base)}
.bd__meta img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.bd__title{font-size:clamp(24px,2.4vw,30px);margin-bottom:18px}
.bd__text p{margin-bottom:20px}
.bd__tagrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding:30px 0;margin:30px 0 50px;border-block:1px solid var(--line14)}
.bd__tagrow>div{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bd__tagrow h5{margin:0 6px 0 0;font-size:17px}
.bd__tagrow a{padding:8px 26px;border-radius:100px;background:var(--black6);color:#fff;font-size:15px;text-transform:uppercase;transition:.4s}
.bd__tagrow a:hover{background:var(--base)}
.bd__h{font-size:26px;margin-bottom:34px}
.cmt{display:flex;gap:25px;padding-bottom:35px;margin-bottom:35px;border-bottom:1px solid var(--line14)}
.cmt img{width:100px;height:100px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cmt h5{font-size:22px;margin-bottom:10px}
.cmt__foot{display:flex;justify-content:space-between;margin-top:14px;font-size:15px}
.cmt__foot a{color:var(--base);font-weight:600}
.bd__form{display:grid;gap:20px}
.bd__form .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bd__form input,.bd__form textarea{width:100%;background:transparent;border:1px solid var(--line14);padding:16px 20px;color:#fff;outline:0;font-size:15px;transition:.3s}
.bd__form input:focus,.bd__form textarea:focus{border-color:var(--base)}

@media (max-width:1199px){.blog-page__grid,.bd-grid{grid-template-columns:1fr}.blog-page__side{order:2}}
@media (max-width:767px){.blog-page__posts,.bd__form .row2{grid-template-columns:1fr}.cmt{flex-direction:column}}

/* ---------- Cursor exactly like Amoxi: ring + dot ---------- */
.cursor-ring{width:25px;height:25px;margin:0;border-radius:100%;border:1px solid var(--base);background:transparent;transition:all .2s ease-out;position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:1}
.cursor-ring.hover{width:25px;height:25px;margin:0;background:var(--base);opacity:.4;border-color:var(--base)}
.cursor-dot{width:10px;height:10px;margin:0;border-radius:100%;background:var(--base);opacity:.3;position:fixed;transform:translate(-50%,-50%);pointer-events:none;transition:width .3s,height .3s,opacity .3s;z-index:9999}
.cursor-dot.click{width:25px;height:25px;opacity:.4}
.cursor-ring.click{transform:scale(.8)}

/* ---------- Page header exactly like Amoxi ---------- */
.page-banner{padding:279px 0 182px;background:radial-gradient(ellipse 60% 75% at 50% 118%,rgba(255,98,29,.95),rgba(255,98,29,.3) 42%,transparent 70%),#1a1b1f}
.page-banner::after{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>")}
.pb-content{text-align:center}
.pb-title{font-size:clamp(42px,5.2vw,75px);line-height:1.2;margin-bottom:25px}
.breadcrumb{padding:8px 20px 6px;border-color:rgba(255,255,255,.39)}
.pb-shape-1{top:0;bottom:0;margin:auto 0;inset-inline-start:55px;width:170px;height:170px;animation:spin 10s linear infinite}
.pb-shape-2{bottom:67px;inset-inline-end:85px;top:auto;width:130px;height:130px;animation:none}
@media (max-width:991px){.page-banner{padding:200px 0 130px}.pb-shape-1{width:100px;height:100px;inset-inline-start:10px}.pb-shape-2{width:80px;height:80px;inset-inline-end:20px}}

/* ---------- Brand banner: DCH ---------- */
.area__c{position:relative;display:inline-block}
.area__c .area__orb{position:absolute;width:.46em;height:.46em;top:50%;left:54%;transform:translate(-50%,-50%);margin:0}
.area__title{letter-spacing:.06em}

/* ---------- Pinned DCH badge that grows to fill the screen ---------- */
.dch-badge{width:190px;height:190px;border-radius:50%;background:var(--base);display:grid;place-items:center;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:56px;color:var(--black);letter-spacing:1px;direction:ltr;box-shadow:0 0 0 10px rgba(255,98,29,.18)}

/* ---------- Contact page like Amoxi ---------- */
.ct1{padding:120px 0 88px;background:var(--black);overflow:hidden}
.ct1__row{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
.ct1__info{border-radius:20px;padding:10px;background:#fff}
.ct1__inner{padding:40px 30px 30px}
.ct1__card{display:flex;gap:40px;align-items:center;padding:38px 50px;position:relative;z-index:1;overflow:hidden;border-radius:10px;background:var(--black4)}
.ct1__card+.ct1__card{margin-top:30px}
.ct1__card::before{content:"";width:100%;height:0;position:absolute;top:0;left:0;z-index:-1;background:var(--base);transition:.5s}
.ct1__card:hover::before{height:100%}
.ct1__card::after{content:"";width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;inset:0;z-index:-1;margin:auto;border-radius:inherit;border:1px dashed var(--base);transition:.5s}
.ct1__card:hover::after{border-color:#fff}
.ct1__icon{font-size:44px;color:#fff;flex-shrink:0;width:50px;text-align:center}
.ct1__card:hover .ct1__icon{animation:flipInY 1s ease-in}
@keyframes flipInY{from{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}
.ct1__content{position:relative}
.ct1__content::before{content:"";width:2px;height:calc(100% - 10px);position:absolute;top:4px;inset-inline-start:-20px;background:#fff}
.ct1__content h4{margin-bottom:3px;font-size:22px;color:#fff}
.ct1__content a,.ct1__content p{color:#fff;font-size:16px;margin:0}
.ct1__content a{background:linear-gradient(currentColor,currentColor) 0 95%/0 1px no-repeat;transition:.5s}
.ct1__content a:hover{background-size:100% 1px}
.ct1__world{margin-top:10px;border-radius:14px;overflow:hidden;position:relative;padding:40px 34px;background:radial-gradient(circle at 80% 20%,rgba(255,98,29,.35),transparent 55%),var(--black4);color:#fff}
.ct1__world .globe{position:absolute;inset-inline-end:-40px;bottom:-50px;font-size:210px;color:rgba(255,255,255,.06);animation:spin 40s linear infinite}
.ct1__world h4{font-size:26px;margin-bottom:10px;position:relative}
.ct1__world p{color:var(--text);position:relative;margin-bottom:22px}
.ct1__regions{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.ct1__regions span{padding:7px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.18);font-size:14px;display:flex;align-items:center;gap:8px}
.ct1__regions span i{color:var(--base);font-size:12px}
.ct1__form{padding:73px 40px;border-radius:40px;background:#fff}
.ct1__form .stitle__tagline{color:var(--black2)}
.ct1__form .stitle__title{color:var(--black2)}
.ct1__form .bw-split-text .fill-line{background-image:linear-gradient(to left,rgba(14,15,17,.4) 50%,#0E0F11 50%)}
[dir="rtl"] .ct1__form .bw-split-text .fill-line{background-image:linear-gradient(to right,rgba(14,15,17,.4) 50%,#0E0F11 50%)}
.ct1__form .stitle__shape::before,.ct1__form .stitle__shape::after{background:var(--black2)}
.ct1__form form{display:grid;gap:20px}
.ct1__form .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ct1__form input,.ct1__form select,.ct1__form textarea{width:100%;height:56px;padding:0 20px;border:1px solid #D3D3D3;border-radius:5px;color:#636363;background:#fff;font-size:15px;outline:0;transition:.3s}
.ct1__form textarea{height:145px;padding:16px 20px;resize:vertical}
.ct1__form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#636363 50%),linear-gradient(135deg,#636363 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
[dir="rtl"] .ct1__form select{background-position:22px 50%,16px 50%}
.ct1__form input:hover,.ct1__form input:focus,.ct1__form select:focus,.ct1__form textarea:focus,.ct1__form textarea:hover{border-color:var(--base);color:var(--black)}
.abtn2{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border:0;border-radius:200px;background:var(--base);color:#fff;font-family:var(--head);font-weight:600;font-size:16px;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;isolation:isolate}
.abtn2::before,.abtn2::after{content:"";position:absolute;top:0;width:0;height:100%;background:var(--black4);transition:.5s;z-index:-1}
.abtn2::before{left:0}.abtn2::after{right:0}
.abtn2:hover::before,.abtn2:hover::after{width:51%}
.abtn2 i{transition:.4s}
.abtn2:hover i{transform:translateX(5px)}
.ct1__form .form-status{margin:0}
.ct1__form .form-status.ok{color:#1e9e57}.ct1__form .form-status.err{color:#d93636}
.ct1__bottom{margin-top:5px;text-align:center}
.ct1__bottom h2{margin:0;font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-weight:700;font-size:clamp(55px,11vw,180px);line-height:1.1;text-transform:uppercase;background:linear-gradient(360deg,rgba(102,102,102,.08) 34%,#2a2a2a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.ct1__bottom h2 span{font-size:clamp(77px,15vw,220px);background:linear-gradient(360deg,rgba(102,102,102,.08) 34%,var(--base) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (max-width:1199px){.ct1__row{grid-template-columns:1fr}}
@media (max-width:767px){.ct1__form{padding:34px 22px;border-radius:20px}.ct1__form .row2{grid-template-columns:1fr}.ct1__card{padding:30px;gap:24px}.ct1__bottom h2{white-space:normal}}

/* ---------- Orange side panel (like Amoxi "sidebar-three") ---------- */
.offcanvas{width:320px;max-width:88vw;padding:0;gap:0;background:var(--black4);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
.offcanvas::-webkit-scrollbar{display:none}
.offcanvas-overlay{background:#000;opacity:0}
body.menu-open .offcanvas-overlay{opacity:.8}
.offcanvas-close{top:20px;inset-inline-end:20px;width:auto;height:auto;border:0;font-size:22px;background:none!important;transition:.4s}
.offcanvas-close:hover{color:var(--base);transform:rotate(90deg)}
.sb3__item{margin-bottom:35px;padding:0 24px}
.sb3__item.logo-row{padding-top:60px}
.sb3__about{margin:0;font-size:16px;color:#D9D9D9;line-height:1.625}
.sb3__title{margin-bottom:25px;position:relative;font-size:22px;color:#fff;font-weight:700;line-height:1.4}
.sb3__title::before,.sb3__title::after{content:"";width:20px;height:2px;position:absolute;inset-inline-start:0;bottom:-4px;background:var(--base)}
.sb3__title::after{width:50px;inset-inline-start:25px}
.sb3__info li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:#D9D9D9;font-weight:500;line-height:1.75}
.sb3__info li+li{margin-top:20px}
.sb3__info i{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0;font-size:13px;color:#fff;background:var(--base);border-radius:50%;transition:.5s}
.sb3__info li:hover i{background:var(--black6)}
.sb3__info a{position:relative;top:3px}
.sb3__info a:hover{color:var(--base)}
.sb3__news{display:flex}
.sb3__news input{flex:1;min-width:0;height:50px;border:0;outline:0;padding:0 20px;font-size:14px;color:var(--text);background:var(--black6)}
.sb3__news button{width:50px;height:50px;border:0;background:var(--base);color:#fff;font-size:17px;cursor:pointer;transition:.4s}
.sb3__news button:hover{background:#474747}
.sb3__social{display:flex;margin-top:auto}
.sb3__social a{width:25%;height:50px;display:grid;place-items:center;background:var(--base);color:#fff;font-size:18px;transition:.4s}
.sb3__social a+a{border-inline-start:1px solid rgba(255,255,255,.3)}
.sb3__social a:hover{background:var(--black6)}

/* ---------- Expertise capsules (drag & throw) ---------- */
.exp2{padding:120px 0;background:var(--black)}
.exp2 .stitle__title{font-size:clamp(28px,2.8vw,40px);line-height:1.375;max-width:1000px;margin:0 auto}
.exp2__wrap{height:450px;position:relative;overflow:hidden;margin-top:60px;touch-action:pan-y}
.exp2__wrap>p{position:absolute;left:0;top:0;margin:0;user-select:none;cursor:grab;will-change:transform}
.exp2__wrap>p:active{cursor:grabbing}
.exp2__box{display:inline-block;padding:14px 30px;font-family:"DM Sans","Cairo",sans-serif;font-size:16px;font-weight:600;color:#fff;line-height:1.31;text-transform:uppercase;white-space:nowrap;border-radius:100px;background:var(--base);transform:translate(-50%,-50%)}
.exp2__box--2{color:var(--base);background:#fff}
.exp2__lines{display:grid;gap:6px;margin-top:-2px}
.exp2__lines span{border-bottom:1px solid #D9D9D9;opacity:.6}
@media (max-width:767px){.exp2__box{padding:12px 22px;font-size:14px}.exp2__wrap{height:380px}}

/* ---------- Preview mode (static screenshots) ---------- */
html.preview #preloader,html.preview .cursor-dot,html.preview .cursor-ring{display:none!important}
html.preview .exp2__wrap{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;gap:10px;justify-content:center}html.preview .exp2__wrap>p{position:relative}html.preview .exp2__box{transform:none}
html.preview .circle-shape{height:900px}html.preview .reveal,html.preview [data-aos]{opacity:1!important;transform:none!important}
.ab1__media{position:relative}

/* ---------- New brand logo (dark-theme) ---------- */
.logo{gap:12px}
.logo-icon{display:none}
.logo-mark{width:50px;height:50px;flex-shrink:0;transition:transform .8s var(--ease)}
.logo:hover .logo-mark{transform:rotate(180deg)}
.logo-text{display:flex;flex-direction:column;line-height:1;direction:ltr}
.lt-top{font-family:"Plus Jakarta Sans",sans-serif;font-size:25px;font-weight:800;color:#fff;letter-spacing:-.5px}
.lt-top b{color:var(--base);font-weight:800}
.lt-sub{margin-top:5px;font-family:"DM Sans",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#B2AFA6}
@media (max-width:767px){.logo-mark{width:42px;height:42px}.lt-top{font-size:20px}.lt-sub{font-size:9px;letter-spacing:2px}}
@media (max-width:480px){.logo-text{display:flex}.lt-sub{display:none}.lt-top{font-size:18px}}
.pre-logo{width:90px;height:90px;background:none;padding:0;border-radius:50%}
.pre-logo svg{width:100%;height:100%}

/* ---------- Decorative shapes like the original ---------- */
.shape-svg{display:inline-block}
.shape-svg svg{width:100%;height:100%;display:block;overflow:visible}
.h1x__arrow{width:1.05em;height:1.05em;vertical-align:-.12em;margin-inline-end:.12em;font-size:1em}
.h1x__desc1-shape{width:44px;height:44px;font-size:0;animation:spin 5s linear infinite}
.h1x__shape{width:120px;height:120px;font-size:0;opacity:1}
.ab1__shape{width:170px;height:170px;font-size:0;bottom:40px;inset-inline-end:30px}
[dir="rtl"] .h1x__arrow svg{transform:scaleX(-1)}

/* ---------- "D C H" → "Digital Cluster Hub" scroll animation ---------- */
.area{padding:170px 0}
.dch-expand{display:flex;justify-content:center;align-items:baseline;gap:.22em;white-space:nowrap;letter-spacing:.02em;-webkit-text-stroke:2px #fff;font-size:clamp(70px,16vw,240px)}
.dch-expand .dw{display:inline-flex;align-items:baseline}
.dch-expand b{color:var(--base);-webkit-text-stroke:0;font-weight:800;text-shadow:0 0 40px rgba(255,98,29,.45)}
.dch-expand i{display:inline-block;overflow:hidden;max-width:0;font-style:normal;vertical-align:baseline}
.area__glow{position:absolute;left:50%;top:50%;width:46vw;height:46vw;max-width:620px;max-height:620px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,98,29,.35) 0,rgba(138,92,246,.18) 40%,transparent 70%);filter:blur(10px);pointer-events:none}
.area__tag{margin-top:28px;font-family:var(--head);font-size:16px;letter-spacing:6px;text-transform:uppercase;color:#fff;opacity:.85}
html[lang="ar"] .area__tag{letter-spacing:1px}
html.preview .dch-expand i{max-width:none}
html.preview .dch-expand{font-size:clamp(40px,7vw,110px)}

/* ---------- Pinned badge: orange hub with rotating name ---------- */
.dch-badge{width:230px;height:230px;position:relative;background:var(--base);box-shadow:0 0 0 12px rgba(255,98,29,.18);display:block}
.dch-badge__ring{position:absolute;inset:0;animation:spin 16s linear infinite}
.dch-badge__ring text{font-family:"Plus Jakarta Sans",sans-serif;font-size:15px;font-weight:800;letter-spacing:4px;fill:var(--black)}
.dch-badge__hub{position:absolute;inset:0;margin:auto;width:92px;height:92px}

/* ---------- About capsules: neat rows on the lines ---------- */
.exp2__wrap>p{cursor:default;transform-origin:center bottom}
.exp2__box{transform:none;transition:transform .35s var(--ease),box-shadow .35s}
.exp2__wrap>p:hover .exp2__box{transform:translateY(-6px) rotate(-3deg);box-shadow:0 10px 25px rgba(0,0,0,.35)}
html.preview .exp2__box{transform:none}
@media (max-width:480px){
  .header-inner{padding:0 12px;gap:8px}
  .logo{gap:8px}
  .logo-mark{width:36px;height:36px}
  .lt-top{font-size:16px}
  .header-actions{gap:8px}
  .lang-switch{padding:7px 10px;gap:5px;font-size:13px}
  .menu-btn{width:40px;height:40px}
  .mnav-btn{width:24px}
}

/* ---------- Brand logo image (recoloured DCH logo) ---------- */
.logo-img{height:54px;width:auto;display:block}
.header.sticky .logo-img{height:48px}
.offcanvas .logo-img,.mnav .logo-img{height:50px}
.pre-logo{width:110px;height:auto;border-radius:0}
.pre-logo img{width:100%;height:auto}
@media (max-width:767px){.logo-img{height:44px}}
@media (max-width:480px){.logo-img{height:38px}}

/* ---------- Brand journey (golf ball → DCH flag) ---------- */
.journey{position:relative;height:100vh;overflow:hidden;background:#F4F1EC}
.journey__svg{height:100vh;width:auto;display:block;max-width:none}
.jcap{font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-size:50px;font-weight:600;fill:#1A1B1F}
.jcap .hl{font-weight:800;fill:#FF621D}
html[lang="ar"] .jcap{font-family:"Cairo",sans-serif;font-size:54px}
.jsite{font-family:"DM Sans",sans-serif;font-size:30px;fill:#6b6b6b;letter-spacing:2px}
#jflag path,#jflag image{animation:flagWave 2.4s ease-in-out infinite;transform-origin:3740px 470px;transform-box:view-box}
@keyframes flagWave{0%,100%{transform:skewY(0)}50%{transform:skewY(-3deg)}}
html.preview .journey{height:auto}
html.preview .journey__svg{width:100%;height:auto}
.journey{display:flex;align-items:flex-end}
.journey__svg{height:78vh}
.journey__caps{position:absolute;top:13vh;left:0;right:0;z-index:2;text-align:center;padding:0 20px;pointer-events:none}
.journey__caps .jcap{position:absolute;left:0;right:0;margin:0 auto;max-width:1100px;font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-size:clamp(26px,3.4vw,52px);font-weight:600;color:#1A1B1F;line-height:1.25;fill:none}
.journey__caps .jcap .hl{color:var(--base);font-weight:800}
html[lang="ar"] .journey__caps{direction:rtl}
html.preview .journey{display:block}
html.preview .journey__caps{position:static;padding:60px 20px 0}
html.preview .journey__caps .jcap{position:static;margin-bottom:10px;font-size:34px}
.journey__svg{flex-shrink:0}

/* Journey v2: whole track visible on laptops/desktops, sliding view on phones */
.journey{flex-direction:column;justify-content:flex-end;padding-bottom:5vh}
.journey__svg{height:62vh}
#jflag path,#jflag image{transform-origin:2810px 470px}
@media (min-width:768px){
  .journey{justify-content:center;padding:14vh 0 2vh}
  .journey__svg{width:100%;height:auto;max-height:70vh;flex-shrink:1}
  .journey__caps{top:11vh}
}
html.preview .journey{padding:40px 0 30px!important;justify-content:flex-start}html.preview .journey__svg{max-height:none!important}html.preview .journey__caps{top:auto}
.journey{background:#fff}
/* astronaut idles with a gentle float (the swing itself is driven by scroll) */
#jgolfer-img{animation:astroFloat 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes astroFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.2deg)}}
html.preview #jgolfer-img{animation:none}
#jgolfer-img{animation:none!important}

/* ---------- Hero background like the original: dark textured base + inset stripe panel ---------- */
.h1x__bg{background:#1A1B1F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.08'/></svg>");opacity:1}
.h1x__bg::after{display:none}
.h1x__bg2{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;height:calc(100% - 206px);z-index:1;pointer-events:none;background:url("../img/hero-stripes.svg?v=41") center top/100% 100% no-repeat}
@media (min-width:1600px){.h1x__bg2{width:calc(100% - 300px)}}
@media (min-width:1800px){.h1x__bg2{width:calc(100% - 376px)}}
.hero-cut,.hero-cut-left,.hero-cut-right{background:#1A1B1F}
/* moving rows always anchor left so Arabic rows never leave an empty strip */
.stext,.stext__one,.stext__two,.marquee{direction:ltr}
.clients,.clients2{direction:ltr}
/* ---------- Hero results card (replaces the small video) ---------- */
.h1x__stat{width:300px;margin:57px 40px 0 auto;padding:22px 24px 20px;border-radius:30px;background:linear-gradient(160deg,#24252B,#16171B);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
[dir="rtl"] .h1x__stat{margin:57px auto 0 40px}
.h1x__stat::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,98,29,.28),transparent 70%);top:-70px;inset-inline-end:-60px;pointer-events:none}
.h1x__stat-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text)}
.h1x__stat-live{display:flex;align-items:center;gap:6px;font-size:12px;color:#fff;background:rgba(255,255,255,.07);padding:3px 10px;border-radius:20px}
.h1x__stat-live i{width:7px;height:7px;border-radius:50%;background:#2ECC71;animation:statPulse 1.6s infinite}
.h1x__stat-num{font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-size:46px;font-weight:800;color:#fff;line-height:1.1;margin:8px 0 12px;direction:ltr;text-align:start}
.h1x__stat-num::before{content:"+";color:var(--base)}
.h1x__stat-bars{display:flex;align-items:flex-end;gap:7px;height:62px}
.h1x__stat-bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#FF621D,rgba(255,98,29,.25));transform-origin:bottom;animation:statBar 3.2s ease-in-out infinite}
.h1x__stat-bars i:nth-child(2){animation-delay:.1s}.h1x__stat-bars i:nth-child(3){animation-delay:.2s}.h1x__stat-bars i:nth-child(4){animation-delay:.3s}.h1x__stat-bars i:nth-child(5){animation-delay:.4s}.h1x__stat-bars i:nth-child(6){animation-delay:.5s}.h1x__stat-bars i:nth-child(7){animation-delay:.6s}.h1x__stat-bars i:nth-child(8){animation-delay:.7s}.h1x__stat-bars i:nth-child(9){animation-delay:.8s}
.h1x__stat-note{margin:12px 0 0;font-size:13px;color:var(--text)}
.h1x__stat-note i{color:#2ECC71;margin-inline-end:4px}
@keyframes statBar{0%{transform:scaleY(.15)}35%,75%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
@keyframes statPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.6)}100%{box-shadow:0 0 0 8px rgba(46,204,113,0)}}
@media (max-width:991px){.h1x__stat,[dir="rtl"] .h1x__stat{margin:40px auto 0}}
/* results card: centred in the photo's cut-out, tighter inside */
@media (min-width:992px){
  .h1x__stat{width:320px;margin:57px 0 0 0;position:relative;left:-62px;padding:20px 22px 18px}
  [dir="rtl"] .h1x__stat{margin:57px 0 0 0;left:auto;right:-62px}
}
.h1x__stat-num{font-size:44px;margin:6px 0 10px}
.h1x__stat-bars{gap:5px;height:56px}
@keyframes statBar{0%{transform:scaleY(.45)}35%,75%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
.h1x__stat-note{margin-top:10px}
/* hero stripes: sized exactly like the original (cover, top centre) */
.h1x__bg2{background-size:cover!important;background-position:top center!important}
/* hero base: dark fine grain over the top ~71% (like the original), plain dark below */
.h1x__bg{inset:0 0 auto 0!important;height:71%;background:url("../img/hero-grain.png") 0 0/256px 256px repeat!important;opacity:1!important}
/* service card hover: orange rises in 4 columns one after another (like the original) */
.scard__hover i{inset:0 auto 0 auto;width:calc(25% + .2px);transition:transform .3s ease}
.scard__hover i:nth-child(1){inset-inline-start:0;transition-delay:.1s}
.scard__hover i:nth-child(2){inset-inline-start:25%;transition-delay:.2s}
.scard__hover i:nth-child(3){inset-inline-start:50%;transition-delay:.3s}
.scard__hover i:nth-child(4){inset-inline-start:75%;transition-delay:.4s}
/* blog search result line + active filter */
.blog-page__result{margin:0 0 24px;padding:14px 20px;border-radius:12px;background:var(--black2,#0E0F11);border:1px solid var(--line14);color:#fff;font-size:16px}
.sb__tags a.active{background:var(--base);border-color:var(--base);color:#fff}
.sb__cats a.active{color:var(--base)}
/* About capsules: 8 crisp lines like the original, first line right under the capsules */
.exp2__lines{gap:6px;margin-top:0}
.exp2__lines span{border-bottom:1px solid #D9D9D9;opacity:1}
/* Header like the original: solid black bar at the top (no stripes behind it);
   after 500px it only shows while scrolling up */
.header{position:absolute;background:#0E0F11!important;transform:none;transition:none}
.header.sticky{position:fixed;background:#0E0F11!important;animation:none;visibility:hidden;transform:translateY(-100%);transition:transform .5s var(--ease),visibility 0s .5s;box-shadow:0 3px 18px rgba(0,0,0,.25)}
.header.sticky.show{visibility:visible;transform:translateY(0);transition:transform .5s var(--ease),visibility 0s}
/* ---------- Home: climber on the right edge ---------- */
.climb{position:fixed;top:0;bottom:0;right:0;width:110px;z-index:95;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .6s}
.climb.ready{opacity:1}
.climb__wall{position:absolute;top:0;bottom:0;right:0;width:16px;background:url("../img/climber/rock-wall.svg?v=2") 0 0/16px 720px repeat-y;z-index:3}
.climb__guy{position:absolute;top:0;right:1px;width:84px;height:201px;z-index:1;background-repeat:no-repeat;will-change:transform,background-position}
@media (max-width:991px){.climb{display:none}}
/* the back-to-top button moves to the other side so it doesn't sit on the climber */
body[data-page="home"] .back-top{inset-inline-end:auto;inset-inline-start:-6px}
/* keep the golf flag clear of the climber */
@media (min-width:992px){body[data-page="home"] .journey{padding-right:125px}}
/* Arabic (right-to-left): the climber and his wall mirror to the left edge */
html[dir="rtl"] .climb{right:auto;left:0;transform:scaleX(-1)}
@media (min-width:992px){html[dir="rtl"] body[data-page="home"] .journey{padding-right:0;padding-left:125px}}
/* room for the climber in the top section (large screens) */
@media (min-width:992px){
  body[data-page="home"] .scroll-btn{display:none}
  body[data-page="home"] .h1x__desc2{padding-inline-end:28px}
}
/* orange half-circle lines (top + bottom of the "Digital Cluster Hub" band) — original size:
   25px wide, 12px deep, every 35px, sliding slowly in opposite directions */
.area__dots{height:12px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35' height='12' viewBox='0 0 35 12'><path d='M0 0H25A12.5 12 0 0 1 0 0Z' fill='%23FF621D'/></svg>") 0 0/35px 12px repeat-x;animation:dchDots 30s linear infinite}
.area__dots--b{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35' height='12' viewBox='0 0 35 12'><path d='M0 12H25A12.5 12 0 0 0 0 12Z' fill='%23FF621D'/></svg>");animation:dchDots2 30s linear infinite}
@keyframes dchDots{from{background-position:-1925px 0}to{background-position:0 0}}
@keyframes dchDots2{from{background-position:1925px 0}to{background-position:0 0}}
/* top-right paragraph lines up with the results card below it (same left edge + width) */
@media (min-width:992px){
  .h1x__desc2,body[data-page="home"] .h1x__desc2{width:320px;max-width:320px;margin:19px 0 0;padding-inline-end:0;position:relative;left:-62px}
  [dir="rtl"] .h1x__desc2,[dir="rtl"] body[data-page="home"] .h1x__desc2{left:auto;right:-62px}
}
html.preview .climb{transition:none}
/* capsules: physics-driven, draggable inside the box */
.exp2__wrap>p{transform-origin:center center;cursor:grab;transition:none}
.exp2__wrap.dragging,.exp2__wrap.dragging>p{cursor:grabbing}
.exp2__wrap>p:hover .exp2__box{transform:none;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.exp2__box{transform:none!important}
/* ---------- "Let's build something remarkable" section (replaces the video block) ---------- */
.grow1{position:relative;overflow:hidden;background:#0E0F11;padding:150px 0 160px;isolation:isolate}
.grow1__glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:-1;pointer-events:none}
.grow1__glow--a{width:520px;height:520px;background:#FF621D;top:-160px;inset-inline-start:-120px;animation:growDriftA 16s ease-in-out infinite alternate}
.grow1__glow--b{width:460px;height:460px;background:#7B4CFF;bottom:-200px;inset-inline-end:8%;opacity:.35;animation:growDriftB 19s ease-in-out infinite alternate}
@keyframes growDriftA{to{transform:translate(260px,140px) scale(1.15)}}
@keyframes growDriftB{to{transform:translate(-240px,-120px) scale(.9)}}
.grow1__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 80%)}
.grow1__word{position:absolute;left:0;bottom:-40px;z-index:-1;display:flex;gap:60px;width:max-content;direction:ltr;animation:growWord 40s linear infinite;pointer-events:none}
.grow1__word span{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(120px,16vw,240px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);letter-spacing:.02em}
@keyframes growWord{to{transform:translateX(-50%)}}
.grow1__inner{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.grow1__sub{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--base);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.grow1__sub i{width:34px;height:2px;background:var(--base)}
.grow1__title{font-size:clamp(34px,4.6vw,68px);line-height:1.12;font-weight:800;color:#fff;margin:0 0 22px;max-width:820px}
.grow1__title span{color:var(--base)}
.grow1__lead{max-width:560px;color:var(--text);font-size:18px;line-height:1.7;margin-bottom:36px}
.grow1__badge{position:relative;width:240px;height:240px;display:grid;place-items:center;border-radius:50%;flex-shrink:0;transition:transform .35s var(--ease)}
.grow1__badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.grow1__badge text{fill:#fff;font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-size:13.5px;font-weight:700;letter-spacing:3px}
.grow1__badge::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.grow1__badge b{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:var(--base);color:#fff;font-size:30px;box-shadow:0 0 0 0 rgba(255,98,29,.5);animation:growPulse 2.4s infinite;transition:transform .35s var(--ease),background .35s}
.grow1__badge:hover b{background:#fff;color:var(--base);transform:scale(1.08) rotate(-45deg)}
[dir="rtl"] .grow1__badge:hover b{transform:scale(1.08) rotate(45deg)}
@keyframes growPulse{0%{box-shadow:0 0 0 0 rgba(255,98,29,.5)}100%{box-shadow:0 0 0 28px rgba(255,98,29,0)}}
@media (max-width:991px){.grow1{padding:100px 0 110px}.grow1__inner{grid-template-columns:1fr;text-align:center}.grow1__lead{margin-inline:auto}.grow1__badge{margin:10px auto 0;width:200px;height:200px}.grow1__badge b{width:90px;height:90px}}
.grow1__badge svg{direction:ltr}
[dir="rtl"] .grow1__badge text{font-size:16px;letter-spacing:1px}
.climb__tail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.climb__tail path{fill:none;stroke:#fff;stroke-width:.85;stroke-linecap:round}
/* ---------- Industries We Help Grow (replaces the team list) ---------- */
.ind1{padding:120px 0;background:var(--black)}
.ind1__row{display:flex;gap:14px;height:560px;margin-top:10px}
.ind1__panel{position:relative;flex:1;min-width:0;border-radius:24px;overflow:hidden;cursor:pointer;transition:flex .7s cubic-bezier(.22,1,.36,1);outline:none;isolation:isolate}
.ind1__panel.is-active{flex:4.2}
.ind1__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:grayscale(.55) brightness(.55);transition:transform 1s cubic-bezier(.22,1,.36,1),filter .7s}
.ind1__panel.is-active img{transform:scale(1);filter:none}
.ind1__panel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,10,12,.92) 0%,rgba(10,10,12,.35) 45%,rgba(10,10,12,.15) 100%)}
.ind1__panel:focus-visible{box-shadow:0 0 0 3px var(--base)}
.ind1__num{position:absolute;top:22px;inset-inline-start:22px;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;border:1px solid rgba(255,255,255,.35);transition:background .5s,border-color .5s}
.ind1__panel.is-active .ind1__num{background:var(--base);border-color:var(--base)}
.ind1__vtitle{position:absolute;bottom:28px;left:50%;z-index:2;margin:0;font-size:22px;font-weight:700;color:#fff;white-space:nowrap;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);transition:opacity .35s}
.ind1__panel.is-active .ind1__vtitle{opacity:0}
.ind1__body{position:absolute;inset-inline:34px;bottom:34px;z-index:2;opacity:0;transform:translateY(24px);transition:opacity .35s,transform .5s;pointer-events:none}
.ind1__panel.is-active .ind1__body{opacity:1;transform:none;transition-delay:.3s}
.ind1__body h3{font-size:clamp(26px,2.4vw,38px);font-weight:800;color:#fff;margin:0 0 10px}
.ind1__body p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.6;max-width:460px;margin:0 0 18px}
.ind1__tags{display:flex;flex-wrap:wrap;gap:8px}
.ind1__tags span{padding:7px 16px;border-radius:40px;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
.ind1__tags span:first-child{background:var(--base);border-color:var(--base)}
@media (max-width:991px){
  .ind1{padding:90px 0}
  .ind1__row{flex-direction:column;height:auto}
  .ind1__panel{flex:none;height:90px;transition:height .6s cubic-bezier(.22,1,.36,1)}
  .ind1__panel.is-active{flex:none;height:380px}
  .ind1__vtitle{writing-mode:horizontal-tb;transform:none;left:auto;inset-inline-start:84px;bottom:auto;top:30px;font-size:19px}
  .ind1__body{inset-inline:22px;bottom:24px}
}
/* hero service list: sits just beside the photo, clear of the climber on the page edge */
@media (min-width:1600px){body[data-page="home"] .h1x__tags{display:none}}
@media (min-width:1860px){body[data-page="home"] .h1x__tags{display:block;inset-inline-end:auto;inset-inline-start:calc(50% + 682px)}}
/* email in the header pill */
.header-email span{font-size:14px;letter-spacing:.01em}
@media (max-width:1280px){.header-email span{display:none}.header-email{padding:14px 16px}}
/* ---------- Hero "channel orbit" card (replaces the +245% card) ---------- */
.h1x__orbit{display:flex;align-items:center;gap:14px;padding:18px 18px 18px 16px}
.orb{position:relative;width:172px;height:172px;flex-shrink:0}
.orb__ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(255,255,255,.18);transform:translate(-50%,-50%)}
.orb__ring--out{width:150px;height:150px;--r:75px;animation:orbSpin 26s linear infinite}
.orb__ring--in{width:92px;height:92px;--r:46px;animation:orbSpin 18s linear infinite reverse;border-color:rgba(255,98,29,.35)}
@keyframes orbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.orb__pos{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)))}
.orb__pos i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#26272D;border:1px solid rgba(255,255,255,.14);color:#fff;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.35);animation:orbSpinI 26s linear infinite reverse}
.orb__ring--in .orb__pos{width:24px;height:24px;margin:-12px 0 0 -12px}
.orb__ring--in .orb__pos i{width:24px;height:24px;font-size:11px;animation:orbSpinI 18s linear infinite}
@keyframes orbSpinI{to{transform:rotate(360deg)}}
.orb__core{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--base);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,98,29,.18),0 0 34px rgba(255,98,29,.55);animation:orbPulse 2.6s ease-in-out infinite}
.orb__core img{width:30px;height:auto;filter:brightness(0) invert(1)}
@keyframes orbPulse{50%{box-shadow:0 0 0 12px rgba(255,98,29,.08),0 0 44px rgba(255,98,29,.7)}}
.orb__text{display:flex;flex-direction:column;gap:8px;min-width:0}
.orb__label{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.orb__label i{width:7px;height:7px;border-radius:50%;background:#2ECC71;animation:statPulse 1.6s infinite}
.orb__text b{font-family:"Plus Jakarta Sans","Cairo",sans-serif;font-size:21px;line-height:1.2;color:#fff;font-weight:800}
.orb__text small{font-size:12px;color:var(--text);line-height:1.4}
.orb__pos i.fa-google{color:#fff}
.h1x__orbit:hover .orb__ring{animation-play-state:paused}.h1x__orbit:hover .orb__pos i{animation-play-state:paused}
.orb{width:148px;height:148px}
.orb__ring--out{width:128px;height:128px;--r:64px}
.orb__ring--in{width:78px;height:78px;--r:39px}
.orb__pos,.orb__pos i{width:26px;height:26px}.orb__pos{margin:-13px 0 0 -13px}.orb__pos i{font-size:12px}
.orb__ring--in .orb__pos,.orb__ring--in .orb__pos i{width:22px;height:22px}.orb__ring--in .orb__pos{margin:-11px 0 0 -11px}
.orb__core{width:44px;height:44px;margin:-22px 0 0 -22px}.orb__core img{width:26px}
.h1x__orbit{gap:12px;padding:18px 16px}
.orb__text b{font-size:19px}
.orb__label{font-size:10px;white-space:nowrap}
/* ---------- Blog article pages ---------- */
.bd__text{font-size:17px;line-height:1.8;color:#C9C9CF}
.bd__text p{margin-bottom:22px}
.bd__h2{font-size:clamp(22px,2vw,28px);line-height:1.3;color:#fff;margin:42px 0 16px}
.bd__list{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:12px}
.bd__list li{position:relative;padding-inline-start:30px}
.bd__list li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:14px;height:2px;background:var(--base)}
.bd__tip{margin:40px 0 26px;padding:26px 30px;border-radius:18px;background:linear-gradient(135deg,rgba(255,98,29,.14),rgba(255,98,29,.04));border:1px solid rgba(255,98,29,.35)}
.bd__tip-label{display:inline-block;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--base)}
.bd__tip p{margin:0;color:#fff;font-size:18px;font-weight:500}
.bd__cta a{display:inline-flex;gap:10px;align-items:center;color:var(--base);font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px}
.bd__cta a::after{content:"→";transition:transform .3s}
[dir="rtl"] .bd__cta a::after{content:"←"}
.bd__cta a:hover::after{transform:translateX(4px)}
[dir="rtl"] .bd__cta a:hover::after{transform:translateX(-4px)}
.bd__related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:10px}
.bd__rel{display:block;border-radius:16px;overflow:hidden;background:var(--black2,#0E0F11);border:1px solid var(--line14);transition:transform .4s,border-color .4s}
.bd__rel:hover{transform:translateY(-4px);border-color:var(--base)}
.bd__rel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.bd__rel span{display:block;margin:14px 16px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--base)}
.bd__rel h3{margin:0 16px 18px;font-size:16px;line-height:1.4;color:#fff}
@media (max-width:767px){.bd__related{grid-template-columns:1fr}}
.page-banner .pb-title{font-size:clamp(30px,4.2vw,64px)}
.bd__faq{display:grid;gap:14px;margin-bottom:30px}
.bd__q{padding:20px 24px;border-radius:14px;background:var(--black2,#0E0F11);border:1px solid var(--line14)}
.bd__q h3{font-size:18px;color:#fff;margin:0 0 8px;line-height:1.4}
.bd__q p{margin:0!important;font-size:16px}
/* portfolio page: extra projects after the first 9 show as wide feature cards */
.pf-masonry.pf-wide{columns:1!important;column-count:1!important}
.pf-masonry.pf-wide .pf-item img{aspect-ratio:21/8!important}
@media (max-width:767px){.pf-masonry.pf-wide .pf-item img{aspect-ratio:4/3!important}}
.pf-masonry.pf-wide{margin-top:24px}
/* work process: one pill per step (fix double pill/dot), real timing + what happens */
.wp1__step span{all:unset}
.wp1__step .wp1__pill{display:inline-flex;align-items:center;gap:8px;padding:7px 20px;font-size:16px;font-weight:600;color:var(--text);line-height:1.25;text-transform:uppercase;border-radius:100px;transition:.5s;border:1px solid var(--line14)}
.wp1__step .wp1__pill::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--base);transition:.5s}
.wp1__item:hover .wp1__step .wp1__pill{color:#fff;background:var(--base)}
.wp1__item:hover .wp1__step .wp1__pill::before{background:#fff}
.wp1__when{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 14px;border-radius:30px;background:rgba(255,98,29,.12);color:var(--base);font-size:14px;font-weight:600}
.wp1__title{margin-bottom:12px}
.wp1__desc{margin:0 0 24px;font-size:15px;line-height:1.65;color:var(--text)}
/* ================= Smoothness / performance =================
   Same look, but only GPU-friendly animations, and nothing animates off-screen. */
/* climber: no full-height blend layer; on the white section it simply flips to black */
.climb{mix-blend-mode:normal!important;will-change:auto}
.climb.climb--dark .climb__guy,.climb.climb--dark .climb__tail{filter:invert(1)}
/* "Let's build" glows: soft gradients instead of big moving blurs */
.grow1__glow{filter:none!important;will-change:transform}
.grow1__glow--a{background:radial-gradient(circle,rgba(255,98,29,.55) 0,rgba(255,98,29,.18) 40%,transparent 70%)!important;opacity:.9}
.grow1__glow--b{background:radial-gradient(circle,rgba(123,76,255,.5) 0,rgba(123,76,255,.15) 40%,transparent 70%)!important;opacity:.8}
.area__glow{filter:none!important}
/* client logos: no blend mode while sliding */
.clients2 .clients-track img{mix-blend-mode:normal!important}
.ind1__tags span{backdrop-filter:none!important;background:rgba(20,21,24,.55)}
/* half-circle lines: move with transform (GPU) instead of background-position */
.area__dots,.area__dots--b{animation:none!important;background:none!important;overflow:hidden}
.area__dots::before{content:"";position:absolute;top:0;bottom:0;left:-1925px;right:0;will-change:transform;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35' height='12' viewBox='0 0 35 12'><path d='M0 0H25A12.5 12 0 0 1 0 0Z' fill='%23FF621D'/></svg>") 0 0/35px 12px repeat-x;
  animation:dchSlide 30s linear infinite}
.area__dots--b::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35' height='12' viewBox='0 0 35 12'><path d='M0 12H25A12.5 12 0 0 0 0 12Z' fill='%23FF621D'/></svg>");animation-direction:reverse}
@keyframes dchSlide{from{transform:translateX(0)}to{transform:translateX(1925px)}}
/* pause every CSS animation inside sections that are off-screen */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
/* hide social rows until real links are added */
.social:empty,.sb3__social:empty{display:none}
.sb3__item:has(.sb3__social:empty){display:none}
html,body{overflow-x:clip}
.hp,input.hp{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;padding:0!important;border:0!important;inset:auto!important;left:0!important;opacity:0!important;overflow:hidden!important;clip-path:inset(50%)!important;pointer-events:none!important}
@media (max-width:991px){.h1x__desc1-shape{display:none!important}}
/* blog date badge: grow to fit longer (Arabic) month names */
.bc4__date{width:auto;min-width:58px}
.bc4__date b,.bc4__date span{white-space:nowrap}
.bc4__date span{padding-inline:8px}
html[lang="ar"] .bc4__date span{font-size:13px;padding:8px 9px 8px;line-height:1.1}
/* ---------- photo viewer (project gallery) ---------- */
img[data-zoom]{cursor:zoom-in;transition:transform .5s var(--ease)}
img[data-zoom]:hover{transform:scale(1.04)}
.lbx{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;gap:18px;padding:60px 20px;background:rgba(10,10,12,.92);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lbx.open{opacity:1;visibility:visible}
.lbx__img{max-width:min(1200px,86vw);max-height:84vh;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.96);transition:transform .35s}
.lbx.open .lbx__img{transform:none}
.lbx__close{position:absolute;top:22px;inset-inline-end:22px;width:48px;height:48px;border-radius:50%;border:0;background:var(--base);color:#fff;font-size:20px;cursor:pointer}
.lbx__nav{width:52px;height:52px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:18px;cursor:pointer;transition:.3s}
.lbx__nav:hover{background:var(--base);border-color:var(--base)}
@media (max-width:767px){.lbx__nav{position:absolute;bottom:22px}.lbx__prev{inset-inline-start:calc(50% - 64px)}.lbx__next{inset-inline-end:calc(50% - 64px)}}
.pcard__img{display:block}
/* ---------- project page: "More Projects" slider ---------- */
.more-proj{margin:50px 0 10px}
.more-proj__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.more-proj__head h3{margin:0;font-size:26px}
.more-proj__nav{display:flex;gap:10px}
.more-proj__btn{width:50px;height:50px;border-radius:50%;border:1px solid var(--line14);background:transparent;color:#fff;font-size:16px;cursor:pointer;transition:.3s}
.more-proj__btn:hover{background:var(--base);border-color:var(--base)}
.more-proj__slider{overflow:hidden}
.mp-card{display:block;position:relative;border-radius:18px;overflow:hidden;background:var(--black2,#0E0F11);border:1px solid var(--line14);transition:border-color .4s,transform .4s}
.mp-card:hover{border-color:var(--base);transform:translateY(-4px)}
.mp-card__img{display:block;aspect-ratio:4/3;overflow:hidden}
.mp-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mp-card:hover .mp-card__img img{transform:scale(1.07)}
.mp-card__body{display:block;padding:18px 20px 22px}
.mp-card__cat{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--base);margin-bottom:6px}
.mp-card__name{display:block;font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}
.mp-card__res{display:block;font-size:15px;color:var(--text)}
.mp-card__go{position:absolute;top:16px;inset-inline-end:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--base);transform:scale(0);transition:transform .4s var(--ease)}
.mp-card:hover .mp-card__go{transform:scale(1)}