/* Kemlat site header: floating glass bar, sliding link highlight, services mega menu, full screen menu on phones. Loaded on every page. */
.kx-hd,.kx-menu{--navy:#061A3B;--ink:#030E24;--deep:#0B2350;--blue:#004AAD;--sky:#3D8BFF;--signal:#12B5D6;--muted:#B9C8E3;--subtle:#8EA1C4;--ease:cubic-bezier(.22,1,.36,1);font-family:Poppins,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.kx-hd[lang=ar],.kx-menu[lang=ar]{font-family:Tajawal,"Segoe UI",Tahoma,Arial,sans-serif}
.kx-hd *,.kx-menu *{box-sizing:border-box}
.kx-hd a,.kx-menu a{text-decoration:none!important}
.kx-hd .ks-ico,.kx-menu .ks-ico{width:18px;height:18px;flex:none;display:block}

.kx-hd{position:fixed;z-index:1000;top:14px;left:0;right:0;padding:0 20px;pointer-events:none;transition:transform .5s var(--ease)}
.kx-hd.is-hidden{transform:translateY(calc(-100% - 20px))}
.kx-bar{pointer-events:auto;max-width:1280px;margin:0 auto;height:66px;display:flex;align-items:center;gap:18px;padding:0 10px 0 22px;border-radius:999px;
background:rgba(6,26,59,.62);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px -24px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transition:height .45s var(--ease),background .45s,max-width .6s var(--ease)}
[dir=rtl] .kx-bar{padding:0 22px 0 10px}
.kx-hd.is-scrolled .kx-bar{height:58px;background:rgba(6,26,59,.86);max-width:1180px}
.kx-logo{display:flex;align-items:center;flex:none}
.kx-logo img{display:block;height:40px;width:auto;transition:height .45s var(--ease)}
.kx-hd.is-scrolled .kx-logo img{height:34px}

/* Links with a highlight that glides to the hovered item */
.kx-nav{position:relative;margin-inline:auto}
.kx-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;position:relative;z-index:1}
.kx-nav li{position:static;margin:0;padding:0}
.kx-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px;border-radius:999px;color:rgba(255,255,255,.78)!important;font-size:14.5px;font-weight:500;white-space:nowrap;transition:color .3s}
.kx-hd[lang=ar] .kx-link{font-size:16px;font-weight:700}
.kx-link:hover,.kx-link:focus-visible,.kx-link.is-current,.kx-has-mega.is-open > .kx-link{color:#fff!important}
.kx-link:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.kx-link.is-current::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;margin-inline-start:calc(50% - 2.5px);border-radius:50%;background:var(--signal)}
.kx-link{position:relative}
.kx-link.is-current::after{left:0;right:0;margin:0 auto}
.kx-caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.kx-has-mega.is-open .kx-caret{transform:rotate(180deg)}
.kx-glide{position:absolute;top:50%;left:0;height:40px;margin-top:-20px;width:0;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s;pointer-events:none}
.kx-nav.is-gliding .kx-glide{opacity:1}

/* Tools */
.kx-tools{display:flex;align-items:center;gap:8px;flex:none}
.kx-lang{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px;border-radius:999px;color:#fff!important;font-size:13.5px;font-weight:700;border:1px solid rgba(255,255,255,.16);transition:background .3s,border-color .3s}
.kx-lang:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
.kx-lang svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.kx-cta{position:relative;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;overflow:hidden;color:#fff!important;font-size:14.5px;font-weight:600;background:linear-gradient(135deg,var(--sky),#2468e6);box-shadow:0 10px 26px -10px rgba(61,139,255,.9);transition:transform .35s var(--ease),box-shadow .35s}
.kx-hd[lang=ar] .kx-cta{font-size:15.5px;font-weight:700}
.kx-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.kx-cta:hover{transform:translateY(-1px);box-shadow:0 16px 34px -12px rgba(61,139,255,1)}
.kx-cta:hover::before{transform:translateX(120%)}
.kx-cta .ks-ico{transition:transform .35s var(--ease)}
.kx-cta:hover .ks-ico{transform:translateX(3px)}
[dir=rtl] .kx-cta .ks-ico{transform:scaleX(-1)}
[dir=rtl] .kx-cta:hover .ks-ico{transform:scaleX(-1) translateX(3px)}
.kx-burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);cursor:pointer;position:relative;padding:0}
.kx-burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .45s var(--ease),top .45s var(--ease)}
.kx-burger span:first-child{top:18px}.kx-burger span:last-child{top:26px}
.kx-burger[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.kx-burger[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}

/* Mega menu */
.kx-mega{position:absolute;top:calc(100% + 12px);left:50%;width:min(1180px,calc(100vw - 40px));transform:translateX(-50%) translateY(10px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .35s;pointer-events:auto}
.kx-mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.kx-has-mega.is-open .kx-mega{opacity:1;visibility:visible;transform:translateX(-50%);transition-delay:0s}
.kx-mega-in{display:grid;grid-template-columns:1fr 300px;gap:14px;padding:14px;border-radius:28px;background:radial-gradient(600px 300px at 100% 0,rgba(0,74,173,.4),transparent 60%),#071B3F;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.kx-mega-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.kx-area{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px;border-radius:16px;color:#fff!important;transition:background .3s;opacity:0;transform:translateY(8px)}
.kx-has-mega.is-open .kx-area{opacity:1;transform:none;transition:background .3s,opacity .4s var(--ease),transform .5s var(--ease)}
.kx-area:hover{background:rgba(61,139,255,.13)}
.kx-area-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(61,139,255,.3),rgba(18,181,214,.1));color:#b6d3ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .45s var(--ease),background .3s,color .3s}
.kx-area:hover .kx-area-ico{background:linear-gradient(145deg,var(--sky),var(--signal));color:#fff;transform:rotate(-6deg)}
.kx-area-t strong{display:block;font-size:14px;font-weight:600;line-height:1.3}
.kx-area-t small{display:block;font-size:12px;line-height:1.4;color:var(--subtle);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kx-hd[lang=ar] .kx-area-t strong{font-size:15px;font-weight:700}
.kx-hd[lang=ar] .kx-area-t small{font-size:13px}
.kx-area-n{font-size:12px;font-weight:700;color:var(--subtle);min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.kx-mega-side{display:flex;flex-direction:column;gap:10px}
.kx-mega-all{display:flex;align-items:center;gap:10px;padding:16px 18px;border-radius:18px;color:#fff!important;font-weight:600;background:linear-gradient(140deg,rgba(61,139,255,.35),rgba(11,35,80,.6));border:1px solid rgba(61,139,255,.45);transition:transform .4s var(--ease)}
.kx-mega-all strong{margin-inline-start:auto;font-size:1.6rem;font-weight:800;font-family:Poppins,sans-serif}
.kx-mega-all:hover{transform:translateY(-2px)}
[dir=rtl] .kx-mega-all .ks-ico{transform:scaleX(-1)}
.kx-mega-method{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.kx-mega-method p{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.kx-hd[lang=ar] .kx-mega-method p{letter-spacing:0;font-size:13.5px}
.kx-mega-letters{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.kx-mega-letters a{height:38px;border-radius:11px;display:grid;place-items:center;font:800 16px Poppins,sans-serif;color:#fff!important;background:rgba(255,255,255,.06);transition:background .3s,transform .35s var(--ease)}
.kx-mega-letters a:hover{background:linear-gradient(145deg,var(--sky),var(--blue));transform:translateY(-3px)}
.kx-mega-build{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;color:#fff!important;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .3s}
.kx-mega-build:hover{background:rgba(61,139,255,.13)}
.kx-mega-build strong{display:block;font-size:14px}
.kx-mega-build small{display:block;font-size:12px;color:var(--subtle);line-height:1.45}

/* Full screen menu (phones and small tablets) */
.kx-menu{position:fixed;inset:0;z-index:999;padding:96px 20px 28px;overflow-y:auto;background:radial-gradient(600px 400px at 100% 0,rgba(0,74,173,.55),transparent 60%),linear-gradient(180deg,var(--navy),var(--ink));color:#fff;clip-path:circle(0% at calc(100% - 44px) 46px);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
.kx-menu[dir=rtl]{clip-path:circle(0% at 44px 46px)}
.kx-menu.is-open{clip-path:circle(150% at calc(100% - 44px) 46px);visibility:visible;transition:clip-path .7s var(--ease)}
.kx-menu[dir=rtl].is-open{clip-path:circle(150% at 44px 46px)}
.kx-menu-in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;min-height:100%}
.kx-mlist{list-style:none;margin:0;padding:0}
.kx-mlist > li{border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(18px);transition:opacity .4s,transform .5s var(--ease)}
.kx-menu.is-open .kx-mlist > li{opacity:1;transform:none;transition-delay:calc(.15s + var(--i) * .05s)}
.kx-mlink{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:1.5rem;font-weight:700;color:#fff!important}
.kx-menu[lang=ar] .kx-mlink{font-size:1.45rem}
.kx-mlink .ks-ico{width:20px;height:20px;color:var(--sky);transition:transform .4s var(--ease)}
[dir=rtl] .kx-mlink .ks-ico{transform:scaleX(-1)}
.kx-mlink.is-current{color:var(--sky)!important}
.kx-mtoggle[aria-expanded=true] .ks-ico{transform:rotate(45deg)}
.kx-msub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.kx-msub > *{min-height:0}
.kx-mtoggle[aria-expanded=true] + .kx-msub{grid-template-rows:1fr}
.kx-msub{overflow:hidden}
.kx-msub a{display:flex;align-items:center;gap:12px;padding:8px 4px;color:var(--muted)!important;font-size:15px;font-weight:500}
.kx-msub a:last-child{margin-bottom:14px}
.kx-msub .kx-area-ico{width:34px;height:34px;border-radius:10px}
.kx-msub .kx-area-ico .ks-ico{width:17px;height:17px}
.kx-msub .kx-sub-all{color:#fff!important;font-weight:700;justify-content:space-between;padding-inline:8px;margin-top:6px;border-radius:12px;background:rgba(61,139,255,.15)}
.kx-msub .kx-sub-all .ks-ico{color:var(--sky)}
[dir=rtl] .kx-msub .kx-sub-all .ks-ico{transform:scaleX(-1)}
/* The collapsible list needs one wrapper row for the grid trick. */
.kx-msub{display:block;max-height:0;transition:max-height .55s var(--ease)}
.kx-mtoggle[aria-expanded=true] + .kx-msub{max-height:1000px}
.kx-menu-foot{margin-top:auto;padding-top:28px;display:grid;gap:16px;opacity:0;transition:opacity .5s .45s}
.kx-menu.is-open .kx-menu-foot{opacity:1}
.kx-cta--wide{justify-content:center;height:54px;font-size:16px}
.kx-menu-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.kx-menu-row a{display:inline-flex;align-items:center;gap:8px;color:var(--muted)!important;font-size:14px}
.kx-menu-row .ks-ico{width:17px;height:17px;color:var(--sky)}
html.kx-menu-open,html.kx-menu-open body{overflow:hidden}

/* The old header bar and menu are replaced; keep nothing of them visible. */
.km-header,.km-mobile-menu{display:none!important}

@media (max-width:1180px){
.kx-link{padding:0 11px;font-size:14px}
.kx-lang span{display:none}
.kx-lang{padding:0 12px}
}
@media (max-width:1023px){
.kx-nav,.kx-hd .kx-tools > .kx-lang{display:none}
.kx-burger{display:block}
.kx-bar{justify-content:space-between}
}
@media (max-width:600px){
.kx-hd{top:10px;padding:0 12px}
.kx-bar{height:58px;padding:0 6px 0 16px}
[dir=rtl] .kx-bar{padding:0 16px 0 6px}
.kx-logo img{height:32px}
.kx-hd .kx-tools > .kx-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
.kx-hd,.kx-bar,.kx-glide,.kx-mega,.kx-menu,.kx-mlist > li{transition:none!important}
}
/* Theme image rules must not resize the logo. */
.kx-hd .kx-logo img{height:40px!important;width:auto!important;max-width:none!important;max-height:none!important}
.kx-hd.is-scrolled .kx-logo img{height:34px!important}
@media (max-width:600px){.kx-hd .kx-logo img{height:32px!important}}
/* The Elementor box that used to hold the old header has a white background: clear it. */
#header,#header .porto-block,#header .elementor,#header .e-con,#header .e-con-inner,#header .elementor-widget-html{background:transparent!important;padding:0!important;margin:0!important;min-height:0!important;border:0!important;box-shadow:none!important}
#header .elementor-widget-html > .elementor-widget-container{padding:0!important;margin:0!important}
/* The old header stylesheet still targets #kmHeader and #kmMobileMenu: neutralise it. */
#kmHeader.kx-hd{background:transparent!important;box-shadow:none!important;border:0!important;height:auto!important;min-height:0!important;display:block!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#kmHeader.kx-hd.scrolled{background:transparent!important;box-shadow:none!important}
#kmMobileMenu.kx-menu{display:block!important;height:auto!important;max-height:none!important;border:0!important;box-shadow:none!important;transform:none!important}
