/* Kemlat site design layer v1: one visual language over every existing section (header, footer, home, about, work, method, contact, insights).
   Content stays in the Elementor sections; this file only changes how they look. "html body" raises specificity above the sections' own inline styles. */
:root{--kx-navy:#061A3B;--kx-ink:#030E24;--kx-deep:#0B2350;--kx-blue:#004AAD;--kx-sky:#3D8BFF;--kx-signal:#12B5D6;--kx-slate:#5A6A85;--kx-line:#DCE3EE;--kx-cloud:#F4F6FA;--kx-ice:#E8F0FC;--kx-muted:#B9C8E3;--kx-ease:cubic-bezier(.22,1,.36,1)}
html body ::selection{background:rgba(61,139,255,.28)}

/* Scroll progress */
.kx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--kx-sky),var(--kx-signal))}
html[dir=rtl] .kx-progress{transform-origin:100% 50%}

/* ===== Type ===== */
html body :is(.km-title,.softek-title,.kph-title,.km-headline,.km-about-title,.km-cta-title,.km-about-headline,.km-who-title,.km-beliefs-title,.km-diff-headline,.km-work-headline,.km-work-htitle,.km-impact-headline,.km-method-headline,.km-why-headline,.km-stages-title,.km-gives-headline,.km-contact-headline,.km-form-headline,.km-not-ready-headline,.kop-text-block h2){letter-spacing:-.022em;font-weight:800;line-height:1.1}
html[dir=rtl] body :is(.km-title,.softek-title,.kph-title,.km-headline,.km-about-title,.km-cta-title,.km-about-headline,.km-who-title,.km-beliefs-title,.km-diff-headline,.km-work-headline,.km-work-htitle,.km-impact-headline,.km-method-headline,.km-why-headline,.km-stages-title,.km-gives-headline,.km-contact-headline,.km-form-headline,.km-not-ready-headline,.kop-text-block h2){letter-spacing:0;line-height:1.35}
html body :is(.km-title-accent,.kop-blue,.kph-highlight,.km-highlight,.km-cta-accent,.km-hl-word-1,.km-hl-word-2,.km-hl-word-3){background:linear-gradient(100deg,#2f7bff,var(--kx-sky) 45%,var(--kx-signal));-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
kx-w{display:inline-block;will-change:transform}

/* ===== Badges: one pill with the brand ring ===== */
html body :is(.km-about-badge,.km-badge,.km-beliefs-badge,.km-cta-badge,.km-diff-badge,.km-form-badge,.km-gives-badge,.km-impact-badge,.km-method-badge,.km-not-ready-badge,.km-promise-badge,.km-vm-badge,.km-who-badge,.km-why-badge,.km-why-exists-badge,.km-work-badge,.km-work-hbadge,.km-stages-badge,.softek-tag,.kph-tag){display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;border-radius:999px;background:rgba(61,139,255,.1);border:1px solid rgba(61,139,255,.28);color:var(--kx-sky);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:none}
html[dir=rtl] body :is(.km-about-badge,.km-badge,.km-beliefs-badge,.km-cta-badge,.km-diff-badge,.km-form-badge,.km-gives-badge,.km-impact-badge,.km-method-badge,.km-not-ready-badge,.km-promise-badge,.km-vm-badge,.km-who-badge,.km-why-badge,.km-why-exists-badge,.km-work-badge,.km-work-hbadge,.km-stages-badge,.softek-tag,.kph-tag){letter-spacing:0;font-size:13.5px;padding:7px 12px 7px 15px}
html body :is(.km-about-badge-dot,.km-beliefs-badge-dot,.km-diff-badge-dot,.km-form-badge-dot,.km-gives-badge-dot,.km-impact-badge-dot,.km-method-badge-dot,.km-not-ready-badge-dot,.km-promise-badge-dot,.km-vm-badge-dot,.km-who-badge-dot,.km-why-badge-dot,.km-why-exists-badge-dot,.km-work-badge-dot,.km-work-hbadge-dot,.kop-accent-dot){width:11px!important;height:11px!important;border-radius:50%!important;background:transparent!important;border:3px solid currentColor!important;box-shadow:0 0 10px rgba(61,139,255,.6)!important;animation:kx-pulse 2.4s ease-in-out infinite}
@keyframes kx-pulse{50%{box-shadow:0 0 0 5px rgba(61,139,255,.12),0 0 14px rgba(61,139,255,.8)}}

/* ===== Buttons ===== */
html body :is(.km-btn-solid,.km-cta-btn-primary,.km-method-btn-primary,.kop-cta-btn,.kph-main-btn,.km-form-btn,.km-about-btn,.km-promise-btn,.km-gives-btn,.km-impact-btn,.km-not-ready-btn,.km-diff-btn,.km-btn-simple,.km-header-cta,.km-mobile-cta){position:relative;isolation:isolate;overflow:hidden;border-radius:999px!important;background:linear-gradient(135deg,var(--kx-sky),#2468e6)!important;color:#fff!important;border:0!important;box-shadow:0 12px 30px -12px rgba(61,139,255,.75)!important;transition:transform .35s var(--kx-ease),box-shadow .35s var(--kx-ease)!important}
html body :is(.km-btn-solid,.km-cta-btn-primary,.km-method-btn-primary,.kop-cta-btn,.kph-main-btn,.km-form-btn,.km-about-btn,.km-promise-btn,.km-gives-btn,.km-impact-btn,.km-not-ready-btn,.km-diff-btn,.km-btn-simple,.km-header-cta)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--kx-ease)}
html body :is(.km-btn-solid,.km-cta-btn-primary,.km-method-btn-primary,.kop-cta-btn,.kph-main-btn,.km-form-btn,.km-about-btn,.km-promise-btn,.km-gives-btn,.km-impact-btn,.km-not-ready-btn,.km-diff-btn,.km-btn-simple,.km-header-cta):hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(61,139,255,.9)!important}
html body :is(.km-btn-solid,.km-cta-btn-primary,.km-method-btn-primary,.kop-cta-btn,.kph-main-btn,.km-form-btn,.km-about-btn,.km-promise-btn,.km-gives-btn,.km-impact-btn,.km-not-ready-btn,.km-diff-btn,.km-btn-simple,.km-header-cta):hover::before{transform:translateX(120%)}
html body :is(.km-btn-outline,.km-cta-btn-ghost,.km-method-btn-ghost){border-radius:999px!important;transition:transform .35s var(--kx-ease),border-color .35s var(--kx-ease),background .35s var(--kx-ease)!important}
html body :is(.km-btn-outline,.km-cta-btn-ghost,.km-method-btn-ghost):hover{transform:translateY(-2px)}

/* ===== Cards: one shape, lift and cursor glow ===== */
html body :is(.softek-card,.km-mini-card,.km-belief-card,.km-work-card,.km-stage-card,.km-gives-item,.kop-promise-box,.km-vm-block,.km-why-insight,.km-impact-q,.km-not-ready){border-radius:22px!important;transition:transform .5s var(--kx-ease),box-shadow .5s var(--kx-ease),border-color .5s var(--kx-ease)!important;background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(61,139,255,.12),transparent 60%)!important}
html body :is(.softek-card,.km-mini-card,.km-belief-card,.km-work-card,.km-stage-card,.km-gives-item):hover{transform:translateY(-6px)!important;box-shadow:0 30px 60px -32px rgba(6,26,59,.45)!important;border-color:rgba(61,139,255,.4)!important}

/* Icon boxes: brand gradient squares with white line icons */
html body :is(.kop-point-icon,.km-belief-icon,.km-stage-icon,.km-gives-icon,.km-quick-icon,.km-promise-item-icon,.km-why-insight-icon,.km-impact-q-icon,.km-form-guarantee-icon,.km-work-outcome-icon,.km-vm-block-icon,.card-icon-small,.km-impact-metric-icon,.km-who-card-icon,.km-diff-mini-icon){background:linear-gradient(145deg,var(--kx-sky),var(--kx-signal))!important;color:#fff!important;border:0!important;border-radius:14px!important;box-shadow:0 10px 24px -10px rgba(61,139,255,.8)!important}
html body :is(.kop-point-icon,.km-belief-icon,.km-stage-icon,.km-gives-icon,.km-quick-icon,.km-promise-item-icon,.km-why-insight-icon,.km-impact-q-icon,.km-form-guarantee-icon,.km-work-outcome-icon,.km-vm-block-icon,.card-icon-small,.km-impact-metric-icon,.km-who-card-icon,.km-diff-mini-icon) :is(svg,img){filter:brightness(0) invert(1)}
html body .kop-point-icon{width:10px!important;height:10px!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(61,139,255,.15)!important}

/* ===== Home: problem section ===== */
html body .kop-problem-section{background:radial-gradient(900px 500px at 0% 0%,rgba(61,139,255,.07),transparent 60%),#fff!important}
html body .kop-promise-box{border:1px solid rgba(61,139,255,.25)!important;background-color:var(--kx-ice)!important}

/* ===== Home: "What we actually change" becomes a dark section with icons ===== */
html body .softek-parallax-section{background:radial-gradient(1000px 560px at 85% -10%,rgba(0,74,173,.55),transparent 60%),radial-gradient(700px 420px at 0% 110%,rgba(18,181,214,.14),transparent 60%),linear-gradient(180deg,var(--kx-navy),var(--kx-ink))!important;position:relative;overflow:hidden}
html body .softek-parallax-section::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.2px);background-size:26px 26px;mask-image:radial-gradient(ellipse at 50% 0,#000 10%,transparent 70%);pointer-events:none}
html body .softek-parallax-section :is(.softek-title){color:#fff!important}
html body .softek-parallax-section :is(.softek-subtitle,p){color:var(--kx-muted)!important}
html body .softek-card{background-color:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important;color:#fff!important;padding-top:30px!important}
html body .softek-card :is(h3,h4,.card-title){color:#fff!important}
html body .softek-card .card-number-wrap{display:none!important}
html body .softek-card .card-border-trace{opacity:.6}
.kx-card-ico{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;margin-bottom:22px;background:linear-gradient(145deg,var(--kx-sky),var(--kx-signal));color:#fff;box-shadow:0 16px 34px -12px rgba(61,139,255,.9)}
.kx-card-ico svg{width:28px;height:28px}

/* Philosophy */
html body .kph-number{border-radius:12px!important;background:linear-gradient(145deg,var(--kx-sky),var(--kx-signal))!important;color:#fff!important;box-shadow:0 10px 22px -10px rgba(61,139,255,.8)!important;border:0!important}
html body .kph-floating-badge{background:linear-gradient(145deg,var(--kx-sky),#2468e6)!important;border-radius:20px!important;box-shadow:0 24px 50px -18px rgba(61,139,255,.9)!important}

/* Final call to action */
html body .km-cta{background:radial-gradient(900px 480px at 100% 0%,rgba(0,74,173,.6),transparent 60%),linear-gradient(120deg,var(--kx-navy),var(--kx-ink))!important;position:relative;overflow:hidden;border:0!important}
html body .km-cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:118px solid var(--kx-sky);opacity:.08;bottom:-210px;inset-inline-end:-120px;pointer-events:none}
html body .km-cta :is(.km-cta-title){color:#fff!important}
html body .km-cta :is(.km-cta-text,p){color:var(--kx-muted)!important}
html body .km-cta :is(.km-cta-btn-ghost){color:#fff!important;border-color:rgba(255,255,255,.3)!important}

/* About, Work, Method, Contact: light section cards and beliefs */
html body .km-belief-card{border:1px solid var(--kx-line)!important;box-shadow:0 1px 0 rgba(6,26,59,.03)!important}
html body .km-belief-num,html body .km-work-card-num{-webkit-text-stroke:1.5px rgba(61,139,255,.35);color:transparent!important;opacity:1!important}
html body .km-stage-card{border:1px solid var(--kx-line)!important}
html body .km-stage-number{background:linear-gradient(180deg,var(--kx-blue),var(--kx-sky));-webkit-background-clip:text;background-clip:text;color:transparent!important}
html body .km-work-card{border:1px solid var(--kx-line)!important}
html body .km-work-card-bar{background:linear-gradient(90deg,var(--kx-sky),var(--kx-signal))!important}
html body .km-filter-btn{border-radius:999px!important;transition:all .3s var(--kx-ease)!important}
html body .km-filter-btn.active{background:linear-gradient(135deg,var(--kx-sky),#2468e6)!important;color:#fff!important;border-color:transparent!important}
html body :is(.km-who-tag,.km-work-tag){border-radius:999px!important;border:1px solid rgba(61,139,255,.25)!important;background:rgba(61,139,255,.07)!important}
html body .km-form :is(input,select,textarea){border-radius:14px!important;transition:border-color .3s var(--kx-ease),box-shadow .3s var(--kx-ease)!important}
html body .km-form :is(input,select,textarea):focus{border-color:var(--kx-sky)!important;box-shadow:0 0 0 4px rgba(61,139,255,.15)!important;outline:0!important}
html body .km-form-wrap{border-radius:26px!important;box-shadow:0 40px 80px -40px rgba(6,26,59,.35)!important}

/* Dark hero sections share the brand glow */
html body :is(.km-about-hero,.km-work-hero,.km-method-hero,.km-contact-hero) :is(.km-about-headline,.km-work-headline,.km-method-headline,.km-contact-headline){filter:drop-shadow(0 18px 50px rgba(61,139,255,.25))}

/* ===== Header ===== */
html body #kmHeader,html body .km-header{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
html body .km-nav-link{border-radius:999px!important;transition:background .3s var(--kx-ease),color .3s var(--kx-ease)!important}
html body .km-nav-link.active,html body .km-nav-link:hover{background:rgba(61,139,255,.1)!important;color:var(--kx-blue)!important}
html body .km-dropdown{border-radius:20px!important;box-shadow:0 30px 70px -20px rgba(3,14,36,.6)!important}
html body .km-lang-switch{border-radius:999px!important}

/* ===== Footer ===== */
html body .km-footer{background:radial-gradient(900px 420px at 100% 0%,rgba(0,74,173,.4),transparent 60%),linear-gradient(180deg,var(--kx-navy),var(--kx-ink))!important;position:relative;overflow:hidden}
html body .km-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(61,139,255,.7),transparent)}
html body .km-footer::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;border:104px solid var(--kx-sky);opacity:.05;bottom:-190px;inset-inline-start:-130px;pointer-events:none}
html body .km-footer-col-title{letter-spacing:.14em}
html[dir=rtl] body .km-footer-col-title{letter-spacing:0}
html body .km-footer-links a{transition:color .3s var(--kx-ease),padding .3s var(--kx-ease)!important}
html body .km-footer-links a:hover{color:var(--kx-sky)!important;padding-inline-start:6px}
html body .km-contact-icon{background:rgba(61,139,255,.12)!important;border-radius:12px!important}
html body .km-social-link{border-radius:12px!important;transition:transform .3s var(--kx-ease),background .3s var(--kx-ease)!important}
html body .km-social-link:hover{transform:translateY(-3px);background:var(--kx-sky)!important}

/* ===== Insights listing and articles (kemlat-blog) ===== */
html body :is(.kl-card,.kl-insight-card,.kl-post-card){border-radius:22px!important;transition:transform .5s var(--kx-ease),box-shadow .5s var(--kx-ease)!important}
html body :is(.kl-card,.kl-insight-card,.kl-post-card):hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px rgba(6,26,59,.45)!important}
html body .kl-callout{border-radius:18px!important;border-inline-start:4px solid var(--kx-sky)!important;background:var(--kx-ice)!important}

@media (prefers-reduced-motion:reduce){
html body *{animation:none!important;transition:none!important}
.kx-progress{display:none}
}

/* ===== Floating buttons: back-to-top sits above "Request a Service", with a clear arrow ===== */
html body #topcontrol{width:46px!important;height:46px!important;right:26px!important;left:auto!important;bottom:84px!important;border-radius:50%!important;background:var(--kx-navy)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 12px 30px -10px rgba(3,14,36,.6)!important;display:grid!important;place-items:center;transition:transform .3s var(--kx-ease),background .3s var(--kx-ease),opacity .3s!important;z-index:9991!important}
html body #topcontrol i{display:none!important}
html body #topcontrol::before{content:"";width:20px;height:20px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}
html body #topcontrol:hover{transform:translateY(-3px);background:var(--kx-sky)!important}
html[dir=rtl] body #topcontrol{right:auto!important;left:26px!important}
html body .kl-btn.kl-float{border-radius:999px!important;background:linear-gradient(135deg,var(--kx-sky),#2468e6)!important;box-shadow:0 14px 34px -12px rgba(61,139,255,.8)!important}
@media (max-width:760px){html body #topcontrol{bottom:78px!important;right:18px!important;width:42px!important;height:42px!important}html[dir=rtl] body #topcontrol{left:18px!important;right:auto!important}}
/* Hero second paragraph: readable on dark */
html body .km-desc-sub{color:#9fb0cc!important}
html body .km-desc{color:#d7e2f5!important}
/* The page background shows through small gaps between sections: use the brand navy, not near-black. */
html body{background-color:var(--kx-navy)!important}
/* Footer lists line up with their column titles on every screen */
html body .km-footer-links{padding-inline-start:0!important;margin-inline-start:0!important;list-style:none!important}
/* Footer on phones: tighter links */
@media (max-width:760px){
html body .km-footer-links li{margin:0 0 4px!important;padding:0!important}
html body .km-footer-links a{display:inline-block;padding:7px 0!important}
}
/* Phones: the floating "Request a Service" becomes a compact round button so it never covers text */
@media (max-width:760px){
html body .kl-btn.kl-float{width:54px!important;height:54px!important;min-width:0!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:0!important;right:18px!important;bottom:18px!important;display:grid!important;place-items:center}
html[dir=rtl] body .kl-btn.kl-float{right:auto!important;left:18px!important}
html body .kl-btn.kl-float svg{display:none!important}
html body .kl-btn.kl-float::before{content:"";width:24px;height:24px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat}
html body #topcontrol{bottom:84px!important}
}
/* Heroes always sit on navy (the Arabic home hero had no background of its own) */
html body section.km-hero{background-color:var(--kx-navy)!important}
/* Arabic: older sections hard-code Poppins; use Tajawal for Arabic text */
html[dir=rtl] body :is(.kph-section,.kop-problem-section,.softek-parallax-section,.km-partners-section,.km-cta) :is(h1,h2,h3,h4,p,span,a,li,div){font-family:Tajawal,"Segoe UI",Tahoma,sans-serif}
html[dir=rtl] body .kph-section :is(.kph-number,.kph-badge-num){font-family:Poppins,sans-serif}
/* Work page closing section: the metrics card was removed, so centre the remaining column */
html body .km-impact-inner{display:block!important;max-width:880px!important;margin-inline:auto!important}
html body .km-impact-left{max-width:none!important;width:100%!important;text-align:center}
html body .km-impact-left :is(.km-impact-badge,.km-impact-btn){margin-inline:auto}
html body .km-impact-questions{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;text-align:start;margin-block:28px!important}
@media (max-width:760px){html body .km-impact-questions{grid-template-columns:1fr}}