/*
Theme Name: Bridge Child
Theme URI: http://demo.qodeinteractive.com/bridge/
Description: A child theme of Bridge Theme
Author: Qode Interactive
Author URI: http://www.qodethemes.com/
Version: 1.0.0
Template: bridge
*/
@import url("../bridge/style.css");
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root{ --cyan:#16b8cc; }

.nh-mq{
  grid-column:1/-1;
  position:relative;
  z-index:2;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(7,18,38,.75);
  padding:18px 0;
}
.nh-mr{
  display:flex;
  width:max-content;
  animation:nhmq 42s linear infinite;
}
.nh-mq:hover .nh-mr{ animation-play-state:paused; }
.nh-mr span{
  font:700 20px 'Bricolage Grotesque',Arial,sans-serif;
  color:#b8c8df;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:44px;
  padding-right:44px;
}
.nh-mr span::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  flex:none;
}
@keyframes nhmq{ to{ transform:translateX(-50%); } }

/* Font (head mein ye link lagao) */
/* <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&display=swap" rel="stylesheet"> */

:root{ --blue:#1b74d4; }

.mq{
  background:var(--blue);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:18px 0;
  font:700 22px 'Bricolage Grotesque';
}
.mq div{
  display:inline-block;
  animation:mq 28s linear infinite;
}
.mq span{ margin:0 28px; }

@keyframes mq{ to{ transform:translateX(-50%); } }


/* head mein fonts */
/* <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> */

/* ---------- Base / variables ---------- */
:root{
  --bg:#f5f8fc; --ink:#0a1830; --mut:#4a5a75; --card:#fff;
  --line:#d8e2ef; --blue:#1b74d4; --cyan:#16b8cc; --navy:#0a1830;
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{padding:110px 0}

/* ---------- Shared helpers ---------- */
.w{max-width:1200px;margin:auto;padding:0 24px}
.sub{color:var(--mut);max-width:620px}

.btn{display:inline-block;padding:15px 30px;border-radius:50px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;font-weight:700;
  transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.btn:hover{transform:translateY(-3px) scale(1.03)}

/* scroll reveal (JS .in class lagata hai) */
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- About section ---------- */
.ab{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}

.ab2{position:relative;overflow:hidden}
.ab2:before{content:"";position:absolute;right:-200px;top:-120px;width:620px;height:620px;
  border-radius:50%;background:radial-gradient(circle,rgba(27,116,212,.2),transparent 70%)}
.ab2 .w{position:relative}

/* image collage */
.clg{position:relative;height:620px}
.clg .m{position:absolute;left:0;top:0;width:68%;height:550px;object-fit:cover;
  border-radius:300px 300px 28px 28px}
.clg .s{position:absolute;right:0;bottom:0;width:58%;height:270px;object-fit:cover;
  border-radius:24px;border:8px solid var(--bg);box-shadow:0 24px 50px rgba(10,24,48,.3)}

/* rotating badge */
.bdg{position:absolute;right:4%;top:20px;width:150px;height:150px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 4 feature cards */
.tl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.tl div{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:18px 20px;display:flex;gap:14px;transition:.4s}
.tl div:hover{transform:translateY(-5px);border-color:var(--blue)}
.tl i{font-style:normal;font-size:28px}
.tl h3{font-size:19px;margin-bottom:4px}
.tl p{font-size:15px;color:var(--mut);line-height:1.45}

/* stats bar */
.cb2{display:flex;gap:30px;justify-content:space-between;
  background:linear-gradient(100deg,var(--blue),var(--cyan));
  border-radius:22px;padding:24px 32px;color:#fff;margin-bottom:30px}
.cb2 b{display:block;font:800 40px/1 'Bricolage Grotesque'}
.cb2 small{opacity:.92}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .ab{grid-template-columns:1fr}
  section{padding:76px 0}
  .clg{height:470px}
  .clg .m{height:410px}
  .clg .s{height:190px}
  .bdg{width:110px;height:110px}
}
@media(max-width:560px){
  .tl{grid-template-columns:1fr}
  .cb2{gap:14px;padding:20px}
  .cb2 b{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}
/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0}
body{background:#f5f8fc;color:#0a1830;font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h2,h3{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
img{max-width:100%;display:block}
section{padding:110px 0}
.w{max-width:1200px;margin:auto;padding:0 24px}
.sub{color:#4a5a75;max-width:620px}

/* scroll reveal */
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pl{to{transform:scale(1.18);opacity:0}}

/* ---------- Services section ---------- */
#sv{background:#0a1830;color:#ffffff}
#sv .sub{color:#b8c8df}

.hub{display:grid;grid-template-columns:1fr 280px 1fr;gap:34px;align-items:center;margin-top:60px}
.hcol{display:flex;flex-direction:column;gap:24px}

.hi{position:relative;display:flex;gap:16px;align-items:flex-start;
  background:#12294a;border:1px solid #263f66;border-radius:20px;padding:20px 22px;
  transition:.4s,opacity 1s,transform 1s}
.hi:hover{border-color:#16b8cc}
.hi i{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;font-style:normal;background:linear-gradient(135deg,#1b74d4,#16b8cc)}
.hi h3{font-size:22px;margin-bottom:4px}
.hi p{color:#b8c8df;font-size:16px;line-height:1.5}

.hcol.r .hi{flex-direction:row-reverse;text-align:right}

.hcol .hi:after{content:"";position:absolute;top:50%;height:2px;width:34px;background:#16b8cc;right:-34px}
.hcol.r .hi:after{right:auto;left:-34px}

.hb{position:relative;width:270px;height:270px;margin:auto;display:grid;place-items:center}
.hb:before{content:"";position:absolute;inset:0;border:3px dashed #16b8cc;border-radius:50%;
  animation:spin 26s linear infinite}
.hb:after{content:"";position:absolute;inset:18px;border-radius:50%;border:2px solid rgba(22,184,204,.5);
  animation:pl 3s ease-out infinite}
.hb div{width:210px;height:210px;border-radius:50%;background:#ffffff;display:grid;place-items:center;
  box-shadow:0 0 70px rgba(22,184,204,.45)}
.hb img{width:170px}

.hbar{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:56px}
.hbar span{padding:14px 34px;border-radius:50px;
  background:linear-gradient(90deg,#1b74d4,#16b8cc);font:700 20px 'Bricolage Grotesque'}

@media(max-width:860px){
  section{padding:76px 0}
  .hub{grid-template-columns:1fr}
  .hb{order:-1}
  .hcol .hi:after{display:none}
  .hcol.r .hi{flex-direction:row;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}










@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap');

#ft{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#0a1830;
  color:#fff;
  overflow:hidden;
  font:400 18px/1.6 'DM Sans',Arial,sans-serif;
  box-sizing:border-box;
}
#ft *{box-sizing:border-box}
#ft>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;margin:0}
#ft .w{position:relative;max-width:1200px;width:100%;margin:0 auto;padding:0 24px}
#ft a{color:inherit;text-decoration:none}
#ft img{max-width:100%;display:block}

/* 4 columns */
#ft .fc{
  display:grid;
  grid-template-columns:1.3fr 1.1fr 1fr 1fr;
  gap:34px;
  padding:60px 0 34px;
  font-size:15px;
  color:#c6d5ea;
}
#ft .fc h3{
  font-family:'Bricolage Grotesque',Arial,sans-serif;
  font-size:20px;
  line-height:1.08;
  letter-spacing:-.02em;
  text-transform:none;
  color:#fff;
  margin:0 0 12px;
}
#ft .fc p{margin:0 0 8px}
#ft .fc a:hover{color:#16b8cc}
#ft .flogo{height:44px;width:auto;margin-bottom:14px}

/* Copyright bar */
#ft .fb{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.18);
  color:#b8c8df;
  font-size:15px;
}
#ft .fb a:hover{color:#16b8cc}

/* Responsive */
@media(max-width:860px){
  #ft .fc{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  #ft .fc{grid-template-columns:1fr}
  #ft .fb{justify-content:center;text-align:center}
}






















@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap');

#hero{
  --navy:#0a1830;--blue:#1b74d4;--cyan:#16b8cc;
  position:relative;
  width:100vw;margin:0 0 0 calc(50% - 50vw);
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  grid-template-rows:1fr auto;
  align-items:stretch;
  min-height:100vh;min-height:100svh;
  padding:0;
  background:#071226;
  color:#fff;
  overflow:hidden;
  font:400 18px/1.6 'DM Sans',Arial,sans-serif;
  box-sizing:border-box;
}
#hero *{box-sizing:border-box}
#hero a{color:inherit;text-decoration:none}

/* Background video */
#hero .nh-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#071226}
#hero .nh-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#hero .nh-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,38,.88) 0%,rgba(7,18,38,.62) 42%,rgba(7,18,38,.28) 100%),linear-gradient(0deg,rgba(7,18,38,.6),transparent 38%),linear-gradient(180deg,rgba(7,18,38,.55),transparent 22%)}

/* Mouse glow */
#hero .nh-spot{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(440px circle at var(--mx,30%) var(--my,40%),rgba(77,163,255,.22),transparent 62%);opacity:0;transition:opacity .4s}
#hero:hover .nh-spot{opacity:1}

/* Text block */
#hero .nh-l{position:relative;z-index:2;grid-column:1/-1;grid-row:1;align-self:center;text-align:center;padding:132px 24px 56px;max-width:1240px;margin:0 auto;width:100%}

#hero .pill{display:inline-block;padding:9px 20px;border:1px solid rgba(22,184,204,.6);border-radius:50px;color:#9fe8f2;font-weight:700;font-size:15px;margin:0 0 22px;background:rgba(22,184,204,.1);opacity:0;animation:fi 1s forwards}

#hero h1{font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:clamp(38px,4.9vw,74px);font-weight:800;line-height:1.08;letter-spacing:-.02em;text-transform:none;color:#fff;margin:0;display:flex;flex-wrap:wrap;justify-content:center;column-gap:.28em}
#hero h1 span{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
#hero h1 span i{display:block;font-style:normal;transform:translateY(110%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
#hero h1 span:nth-child(2) i{animation-delay:.15s}
#hero h1 span:nth-child(3) i{animation-delay:.3s;background:linear-gradient(90deg,#4da3ff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

#hero .rt{margin:22px 0 0;font:700 28px 'Bricolage Grotesque',Arial,sans-serif;min-height:40px;opacity:0;animation:fi 1s .6s forwards}
#hero .rt b{color:var(--cyan)}
#hero .rt u{display:inline-block;width:3px;height:28px;background:var(--cyan);margin-left:4px;vertical-align:-4px;text-decoration:none;animation:bl 1s steps(1) infinite}

#hero p.l{margin:14px auto 34px;color:#c6d5ea;font-size:20px;max-width:780px;opacity:0;animation:fi 1s .7s forwards}

/* Buttons */
#hero .cta{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;opacity:0;animation:fi 1s .9s forwards}
#hero .btn{display:inline-block;padding:15px 30px;border-radius:50px;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;font-weight:700;transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
#hero .btn:hover{transform:translateY(-3px) scale(1.03)}
#hero .btn.o{background:none;border:2px solid var(--cyan);box-shadow:none}

/* Pause video button */
#hero .nh-vb{background:none;border:0;color:#c6d5ea;font:500 15px 'DM Sans',Arial,sans-serif;cursor:pointer;padding:12px 6px;display:inline-flex;align-items:center;gap:9px}
#hero .nh-vb:hover{color:#fff}
#hero .nh-vb i{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center}
#hero .nh-vb svg{width:11px;height:11px;fill:currentColor}

/* Chip + rotating badge */
#hero .nh-vw{position:relative;z-index:2;grid-column:1/-1;grid-row:1;margin:0;min-height:0;pointer-events:none}
#hero .nh-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;border-radius:18px;padding:14px 18px;font-weight:700;line-height:1.2;box-shadow:0 22px 44px rgba(0,0,0,.35);animation:nhpop .8s 1.6s both cubic-bezier(.2,.8,.2,1),nhfloat 5s 2.5s ease-in-out infinite alternate}
#hero .nh-c3{right:28px;bottom:30px;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;animation-delay:2s,2.9s;pointer-events:auto}
#hero .nh-badge{position:absolute;z-index:4;left:11%;bottom:-48px;width:128px;height:128px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 18px 40px rgba(0,0,0,.4);display:block;pointer-events:auto;animation:nhpop .8s 2.1s both cubic-bezier(.2,.8,.2,1);transition:transform .3s}
#hero .nh-badge:hover{transform:scale(1.08)}
#hero .nh-badge svg{width:100%;height:100%;display:block}
#hero .nh-badge text{font:700 11.5px 'DM Sans',Arial,sans-serif;fill:#fff;letter-spacing:.5px}
#hero .nh-spin{transform-origin:60px 60px;animation:nhspin 16s linear infinite}

/* Scrolling marquee */
#hero .nh-mq{grid-column:1/-1;position:relative;z-index:2;overflow:hidden;border-top:1px solid rgba(255,255,255,.16);background:rgba(7,18,38,.75);padding:18px 0}
#hero .nh-mr{display:flex;width:max-content;animation:nhmq 42s linear infinite}
#hero .nh-mq:hover .nh-mr{animation-play-state:paused}
#hero .nh-mr span{font:700 20px 'Bricolage Grotesque',Arial,sans-serif;color:#b8c8df;white-space:nowrap;display:flex;align-items:center;gap:44px;padding-right:44px}
#hero .nh-mr span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none}

/* Animations */
@keyframes fi{to{opacity:1}}
@keyframes up{to{transform:none}}
@keyframes bl{50%{opacity:0}}
@keyframes nhpop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes nhfloat{to{transform:translateY(-10px)}}
@keyframes nhspin{to{transform:rotate(360deg)}}
@keyframes nhmq{to{transform:translateX(-50%)}}

/* Mobile */
@media(max-width:900px){
  #hero{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  #hero .nh-bg::after{background:linear-gradient(180deg,rgba(7,18,38,.8),rgba(7,18,38,.6) 55%,rgba(7,18,38,.75))}
  #hero .nh-l{padding:118px 24px 96px}
  #hero .nh-badge{left:auto;right:22px;bottom:-56px}
  #hero .nh-c3{display:none}
}

@media(prefers-reduced-motion:reduce){
  #hero h1 span i,#hero p.l,#hero .cta,#hero .pill,#hero .rt{opacity:1!important;transform:none!important}
  #hero .nh-vb{display:none}
}








.footer_top {
    padding: 0px 0 0px;
}

.rv h2 {
    color: #052050;
    text-transform: capitalize;
}
h2.rv.in {
    color: #fff;
}
.hi h3 {
    font-size: 22px;
    margin-bottom: 4px;
    color: #fff;
}

/* head mein fonts */
/* <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> */

/* ---------- Base / shared (agar pehle se nahi hai) ---------- */
*{box-sizing:border-box;margin:0}
body{background:#f5f8fc;color:#0a1830;font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h2,h3{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
section{padding:110px 0}
.w{max-width:1200px;margin:auto;padding:0 24px}
.sub{color:#4a5a75;max-width:620px}

/* scroll reveal */
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Process section ---------- */

/* wavy line: scroll par draw hoti hai */
.wv svg{width:100%;height:auto;display:block;overflow:visible}
.wv path.l{
  fill:none;
  stroke:#1b74d4;
  stroke-width:4;
  stroke-dasharray:1500;
  stroke-dashoffset:1500;
  transition:stroke-dashoffset 3.2s;
}
.wv.in path.l{stroke-dashoffset:0}

/* 4 step cards */
.sc{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:-22px;
  margin-bottom:-110px;   /* section ke bottom padding (110px) ko cancel karta hai */
}
.sc div{text-align:center;padding:0 6px}
.sc div:nth-child(even){position:relative;top:-110px}   /* 2 aur 4 upar chadhe hue (zig-zag) */
.sc em{display:none}                                     /* number desktop par SVG circle mein hai */
.sc h3{font-size:24px;margin-bottom:8px}
.sc p{color:#4a5a75;font-size:17px}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  section{padding:76px 0}
  .wv svg{display:none}                                  /* wavy line hide */
  .sc{grid-template-columns:1fr;margin:34px 0 0}
  .sc div:nth-child(even){top:0}
  .sc div{
    text-align:left;
    display:grid;
    grid-template-columns:56px 1fr;
    gap:0 16px;
  }
  .sc em{                                                /* mobile par number circle CSS se dikhta hai */
    display:grid;
    place-items:center;
    grid-row:span 2;
    width:56px;height:56px;
    border-radius:50%;
    background:#1b74d4;
    color:#fff;
    font:800 24px 'Bricolage Grotesque';
    font-style:normal;
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}
h2.rv.in {
    color: #fff;
    text-transform: capitalize;
}
h2.rv-2 {
    color: #0a1830;
    text-transform: capitalize;
}
.home-para {
    color: #153678;
    font-size: 54px;
}




.container_inner, .elementor-row .elementor-widget-wrap>.qode_elementor_container_inner, .qode_elementor_container_inner {
    width: 1180px;
    margin: 0 auto;
}


/* head mein fonts */
/* <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> */

/* ---------- Base / shared (agar pehle se nahi hai) ---------- */
*{box-sizing:border-box;margin:0}
body{background:#f5f8fc;color:#0a1830;font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h2{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{padding:110px 0}
.w{max-width:1200px;margin:auto;padding:0 24px}
.sub{color:#4a5a75;max-width:620px}

.btn{display:inline-block;padding:15px 30px;border-radius:50px;
  background:linear-gradient(90deg,#1b74d4,#16b8cc);color:#fff;font-weight:700;
  transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.btn:hover{transform:translateY(-3px) scale(1.03)}

/* scroll reveal */
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Portfolio section ---------- */
.pg{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px 28px;            /* row gap 44px, column gap 28px */
  margin-top:50px;
}
.pj{display:block}

/* image box */
.pim{
  border:1px solid #d8e2ef;
  border-radius:14px;
  overflow:hidden;
  background:#f5f8fc;
  transition:border-color .3s, box-shadow .3s;
}
.pim img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:252/103;
  object-fit:cover;
  transition:transform .5s;
}

/* hover / keyboard focus */
.pj:hover .pim,
.pj:focus-visible .pim{
  border-color:#1b74d4;
  box-shadow:0 16px 30px -20px rgba(10,24,48,.4);
}
.pj:hover img{transform:scale(1.03)}

/* title + category */
.pt{margin-top:14px}
.pt b{
  display:block;
  font:700 21px/1.2 'Bricolage Grotesque',Arial,sans-serif;
  letter-spacing:-.01em;
}
.pt span{display:block;color:#4a5a75;font-size:15px;margin-top:3px}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  section{padding:76px 0}
  .pg{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .pg{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}










.q_logo img {
    display: block;
    opacity: 1;
    position: absolute;
    top: -50%;
    height: 44px !important;
    max-width: none;
    -webkit-transition: opacity .6s ease-in-out;
    transition: opacity .6s ease-in-out;
}








nav.main_menu.right {
    position: relative;
    left: auto;
    float: left;
    padding-left: 245px;
    margin-left: 100px;
}



nav.main_menu>ul>li>a {
    position: relative;
    padding: 0 17px;
    color: #9d9d9d;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1px;
    font-size: 16px;
    color: #dbe6f5;
}







.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    background: linear-gradient(90deg, #1b74d4 , #16b8cc);
    color: #fff;
    font-weight: 700;
    transition: .3s;
    box-shadow: 0 8px 24px rgba(27, 116, 212, .35);
}


/* head mein fonts */
/* <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> */

/* ---------- Base / shared (agar pehle se nahi hai) ---------- */
*{box-sizing:border-box;margin:0}
body{background:#f5f8fc;color:#0a1830;font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h2,h3{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{padding:110px 0}
.w{max-width:1200px;margin:auto;padding:0 24px}
.sub{color:#4a5a75;max-width:620px}

.btn{display:inline-block;padding:15px 30px;border-radius:50px;
  background:linear-gradient(90deg,#1b74d4,#16b8cc);color:#fff;font-weight:700;
  transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.btn:hover{transform:translateY(-3px) scale(1.03)}

/* scroll reveal */
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Why choose us section ---------- */

/* 2 column layout */
.wh{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:70px;
  align-items:center;
}

/* left image */
.wimg{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:24px;
  margin:30px 0;
}

/* right list */
.wl{display:flex;flex-direction:column}

.wi{
  display:flex;
  gap:20px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid #d8e2ef;
  transition:padding .3s;
}
.wi:first-child{border-top:1px solid #d8e2ef}
.wi:hover{padding-left:14px}        /* hover par row right khisakti hai */

/* icon circle */
.wi i{
  flex:none;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:700 26px 'Bricolage Grotesque';
  font-style:normal;
  color:#ffffff;
  background:linear-gradient(135deg,#1b74d4,#16b8cc);
}
.wi h3{font-size:22px;margin-bottom:4px}
.wi p{color:#4a5a75;font-size:16px;line-height:1.5}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  section{padding:76px 0}
  .wh{grid-template-columns:1fr;gap:40px}
  .wimg{height:240px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}


/* head mein fonts */
/* <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> */

/* ---------- Base / shared (agar pehle se nahi hai) ---------- */
*{box-sizing:border-box;margin:0}
body{background:#f5f8fc;color:#0a1830;font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h2,h3{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{padding:110px 0}
.w{max-width:1200px;margin:auto;padding:0 24px}
.sub{color:#4a5a75;max-width:620px}

.btn{display:inline-block;padding:15px 30px;border-radius:50px;
  background:linear-gradient(90deg,#1b74d4,#16b8cc);color:#fff;font-weight:700;
  transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.btn:hover{transform:translateY(-3px) scale(1.03)}

/* scroll reveal */
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Blog section ---------- */
.blx{background:#ffffff}

/* top row */
.blx-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:46px;
}
.blx-top h2{margin-bottom:12px}

/* 3 card grid */
.blx-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* card */
.blx-card{
  display:flex;
  flex-direction:column;
  border:1px solid #d8e2ef;
  border-radius:26px;
  overflow:hidden;
  background:#f5f8fc;
  transition:transform .4s, box-shadow .4s, border-color .4s;
}
.blx-card:hover{
  transform:translateY(-6px);
  border-color:#1b74d4;
  box-shadow:0 26px 44px -30px rgba(10,24,48,.4);
}

/* gradient thumbnail */
.blx-thumb{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  height:210px;
  background-size:220% 220%;
  background-position:0 0;
  transition:background-position .9s;
}
.blx-card:hover .blx-thumb{background-position:100% 100%}   /* hover par gradient khisakta hai */

/* thumbnail ke andar 2 halke circles (decoration) */
.blx-thumb::before,
.blx-thumb::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}
.blx-thumb::before{width:70%;aspect-ratio:1;right:-18%;top:-45%}
.blx-thumb::after{width:46%;aspect-ratio:1;left:-12%;bottom:-40%}

/* white icon */
.blx-thumb svg{
  position:relative;
  z-index:1;
  width:72px;
  height:72px;
  fill:none;
  stroke:#ffffff;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:blxbob 5s ease-in-out infinite alternate;
}
@keyframes blxbob{to{transform:translateY(-8px)}}

/* 3 alag gradients */
.blx-t1{background-image:linear-gradient(135deg,#1b74d4,#16b8cc,#1b74d4)}
.blx-t2{background-image:linear-gradient(135deg,#0a1830,#1b74d4,#0a1830)}
.blx-t3{background-image:linear-gradient(135deg,#0e8fa3,#16b8cc,#0e8fa3)}

/* card ka text area */
.blx-body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}

.blx-cat{
  align-self:flex-start;
  font-size:14px;
  font-weight:700;
  color:#1b74d4;
  background:rgba(27,116,212,.1);
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:14px;
}
.blx-body h3{
  font:800 22px/1.3 'Bricolage Grotesque',Arial,sans-serif;
  letter-spacing:-.01em;
}
.blx-body p{color:#4a5a75;margin:12px 0 22px;font-size:16.5px}

/* "Read article →" */
.blx-more{
  margin-top:auto;
  font-weight:700;
  color:#1b74d4;
  display:inline-flex;
  gap:8px;
  transition:gap .3s;
}
.blx-card:hover .blx-more{gap:14px}      /* hover par arrow door khisakta hai */

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .blx-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  section{padding:76px 0}
}
@media(max-width:620px){
  .blx-grid{grid-template-columns:1fr}
  .blx-thumb{height:180px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  .blx-thumb svg{animation:none}
}


/* head mein fonts */
/* <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> */

/* ---------- Base / shared (agar pehle se nahi hai) ---------- */
*{box-sizing:border-box;margin:0}
body{background:#f5f8fc;color:#0a1830;font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h2{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.w{max-width:1200px;margin:auto;padding:0 24px}
.sub{color:#4a5a75;max-width:620px}

.btn{display:inline-block;padding:15px 30px;border-radius:50px;
  background:linear-gradient(90deg,#1b74d4,#16b8cc);color:#fff;font-weight:700;
  transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.btn:hover{transform:translateY(-3px) scale(1.03)}

/* ---------- Section wrapper (dark navy + background image) ---------- */
#ft{position:relative;color:#ffffff;background:#0a1830;padding-bottom:0;overflow:hidden}
#ft>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
#ft .w{position:relative}

/* ---------- 1) Testimonials ---------- */
.tm{text-align:center;max-width:820px;margin:auto}

.sd{position:relative;min-height:290px}
.sd blockquote{
  position:absolute;
  inset:0;
  font:italic 500 24px/1.5 'Bricolage Grotesque';
  opacity:0;
  transform:translateX(50px);
  transition:.7s;
  pointer-events:none;
}
.sd blockquote.on{opacity:1;transform:none;pointer-events:auto}   /* active slide */
.sd cite{
  display:block;
  margin-top:20px;
  font:700 18px 'DM Sans';
  font-style:normal;
  color:#16b8cc;
}

/* arrow buttons */
.ct{display:flex;justify-content:center;align-items:center;gap:18px;margin:10px 0 50px}
.ct button{
  width:48px;height:48px;
  border-radius:50%;
  border:2px solid #16b8cc;
  background:none;
  color:#ffffff;
  font-size:20px;
  cursor:pointer;
  transition:.3s;
}
.ct button:hover{background:#16b8cc}

/* ---------- 2) Social strip ---------- */
.soc{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center;
  padding:38px 0;
  border-top:1px solid rgba(255,255,255,.18);
}
.soc a b{display:block;font:700 22px 'Bricolage Grotesque'}
.soc a span{color:#c6d5ea;font-size:15px}
.soc a:hover b{color:#16b8cc}

/* ---------- 3) CTA ---------- */
.cb{text-align:center;padding:30px 0 56px}
.cb h2{font-size:clamp(30px,4vw,46px)}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .soc{grid-template-columns:1fr 1fr}
  .sd{min-height:380px}
  .sd blockquote{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

.tm h2{
	color:#fff;
    text-transform: capitalize;
}
.cb-2 {
	color:#fff;
    text-transform: capitalize;
}
.rv-2{
	color:#fff;
    text-transform: capitalize;
}

/* ---------- Section ---------- */
:root {
  --cc-bg: #f4f8fd;
  --cc-card-bg: #ffffff;
  --cc-border: #dde5f0;
  --cc-title: #0b1a33;
  --cc-text: #4b5a72;
  --cc-grad-from: #1e7fd0;
  --cc-grad-to: #17b8d0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cc-bg);
}

.contact-info {
  background: var(--cc-bg);
  padding: 85px 20px;
}

.contact-info__grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ---------- Card ---------- */
.contact-card {
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-border);
  border-radius: 28px;
  padding: 30px 30px 36px;
  min-height: 246px;
}

.contact-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cc-grad-from), var(--cc-grad-to));
  margin-bottom: 18px;
}

.contact-card__icon svg {
  width: 22px;
  height: 22px;
}

.contact-card__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cc-title);
}

.contact-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  color: var(--cc-text);
}

.contact-card__text a {
  color: inherit;
  text-decoration: none;
}

.contact-card__text a:hover {
  color: var(--cc-grad-from);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .contact-info__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .contact-info { padding: 50px 16px; }
  .contact-info__grid { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; }
}
:root {
  --cf-bg: #f4f8fd;
  --cf-panel-bg: #f9fbff;
  --cf-border: #dde5f0;
  --cf-input-bg: #f1f5fb;
  --cf-input-border: #d3e0f0;
  --cf-title: #0b1a33;
  --cf-text: #4b5a72;
  --cf-blue: #1e7fd0;
  --cf-teal: #17b8d0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cf-bg);
}

.contact-main {
  padding: 60px 20px;
}

.contact-main__grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* ---------- Form panel ---------- */
.cf-panel {
  background: var(--cf-panel-bg);
  border: 1px solid var(--cf-border);
  border-radius: 40px;
  padding: 32px 34px 30px;
}

.cf-title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cf-title);
}

.cf-intro {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cf-text);
}

.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cf-field { margin-bottom: 18px; }

.cf-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cf-title);
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--cf-title);
  background: var(--cf-input-bg);
  border: 1px solid var(--cf-input-border);
  border-radius: 14px;
  padding: 0 14px;
  height: 46px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.cf-field textarea {
  height: auto;
  min-height: 104px;
  padding: 12px 14px;
  resize: vertical;
}

.cf-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230b1a33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: var(--cf-blue);
  box-shadow: 0 0 0 3px rgba(30, 127, 208, .15);
}

/* ---------- Buttons ---------- */
.cf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.cf-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
}

.cf-btn--primary {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--cf-blue), var(--cf-teal));
  box-shadow: 0 10px 22px rgba(30, 127, 208, .3);
}

.cf-btn--outline {
  color: var(--cf-blue);
  background: #fff;
  border: 1.5px solid var(--cf-blue);
}

.cf-btn:hover { transform: translateY(-1px); }
.cf-btn:focus-visible { outline: 3px solid rgba(30, 127, 208, .35); outline-offset: 2px; }

.cf-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--cf-text);
}

/* ---------- Right side ---------- */
.cf-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cf-map {
  position: relative;
  flex: 1;
  min-height: 340px;
  border: 1px solid var(--cf-border);
  border-radius: 36px;
  overflow: hidden;
}

.cf-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cf-map__btn {
  position: absolute;
  left: 14px;
  bottom: 22px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cf-title);
  background: #fff;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.cf-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 26px 28px;
  border-radius: 36px;
  color: #fff;
  background: linear-gradient(120deg, #0c1a3a 0%, #10305f 55%, #17a9c4 100%);
}

.cf-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #6fe3f2;
}

.cf-info p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #e8f0fa;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .contact-main__grid { grid-template-columns: 1fr; }
  .cf-map { min-height: 320px; flex: none; }
}

@media (max-width: 575px) {
  .contact-main { padding: 40px 16px; }
  .cf-panel { padding: 26px 20px; border-radius: 28px; }
  .cf-row { grid-template-columns: 1fr; gap: 0; }
  .cf-info { grid-template-columns: 1fr; gap: 18px; border-radius: 28px; }
  .cf-map { border-radius: 28px; }
  .cf-title { font-size: 26px; }
}
/* head me ye font link lagayein:
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@800&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"> */

/* ---------- Section ---------- */
:root {
  --cc-bg: #f4f8fd;
  --cc-card-bg: #ffffff;
  --cc-border: #dde5f0;
  --cc-title: #0b1a33;
  --cc-text: #4b5a72;
  --cc-grad-from: #1e7fd0;
  --cc-grad-to: #17b8d0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cc-bg);
}

.contact-info {
  background: var(--cc-bg);
  padding: 85px 20px;
}

.contact-info__grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ---------- Card ---------- */
.contact-card {
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-border);
  border-radius: 28px;
  padding: 30px 30px 36px;
  min-height: 246px;
}

.contact-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cc-grad-from), var(--cc-grad-to));
  margin-bottom: 18px;
}

.contact-card__icon svg {
  width: 22px;
  height: 22px;
}

.contact-card__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cc-title);
}

.contact-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  color: var(--cc-text);
}

.contact-card__text a {
  color: inherit;
  text-decoration: none;
}

.contact-card__text a:hover {
  color: var(--cc-grad-from);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .contact-info__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .contact-info { padding: 50px 16px; }
  .contact-info__grid { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; }
}
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

:root {
  --cf-bg: #f4f8fd;
  --cf-panel-bg: #f9fbff;
  --cf-border: #dde5f0;
  --cf-input-bg: #f1f5fb;
  --cf-input-border: #d3e0f0;
  --cf-title: #0b1a33;
  --cf-text: #4b5a72;
  --cf-blue: #1e7fd0;
  --cf-teal: #17b8d0;
}
.contact-main {
  padding: 60px 20px;
}
.contact-main .contact-main__grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.contact-main .cf-panel {
  background: var(--cf-panel-bg);
  border: 1px solid var(--cf-border);
  border-radius: 40px;
  padding: 32px 34px 30px;
}
.contact-main .cf-title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cf-title);
}
.contact-main .cf-intro {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cf-text);
}
.contact-main .cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-main .cf-field { margin-bottom: 18px; }
.contact-main .cf-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cf-title);
}
.contact-main .cf-field input,
.contact-main .cf-field select,
.contact-main .cf-field textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--cf-title);
  background: var(--cf-input-bg);
  border: 1px solid var(--cf-input-border);
  border-radius: 14px;
  padding: 0 14px;
  height: 46px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.contact-main .cf-field textarea {
  height: auto;
  min-height: 104px;
  padding: 12px 14px;
  resize: vertical;
}
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=DM+Sans:wght@400;500;700&display=swap");

.contact-steps {
  --cs-title: #0b1a33;
  --cs-text: #4b5a72;
  --cs-blue: #1e7fd0;
  --cs-teal: #17b8d0;
  --cs-heading-font: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;

  background: #fff;
  padding: 80px 20px;
}

.contact-steps,
.contact-steps * {
  box-sizing: border-box;
}

.contact-steps .contact-steps__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.contact-steps .contact-steps__title {
  margin: 0 0 38px;
  font-family: var(--cs-heading-font);
  font-size: 52px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--cs-title);
}

.contact-steps .contact-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.contact-steps .contact-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  border-radius: 50%;
  font-family: var(--cs-heading-font);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--cs-blue), var(--cs-teal));
}

.contact-steps .contact-steps__item h3 {
  margin: 0 0 6px;
  font-family: var(--cs-heading-font);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-title);
}

.contact-steps .contact-steps__item p {
  max-width: 340px;
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 29px;
  color: var(--cs-text);
}

@media (max-width: 991px) {
  .contact-steps .contact-steps__title { font-size: 40px; }
  .contact-steps .contact-steps__grid { gap: 28px; }
}

@media (max-width: 767px) {
  .contact-steps { padding: 50px 16px; }
  .contact-steps .contact-steps__title { font-size: 30px; margin-bottom: 28px; }
  .contact-steps .contact-steps__grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-steps .contact-steps__item p { max-width: none; }
}














/* ===== Base / variables ===== */
:root{--bg:#f5f8fc;--ink:#0a1830;--mut:#4a5a75;--card:#fff;--line:#d8e2ef;--blue:#1b74d4;--cyan:#16b8cc;--navy:#0a1830}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1a2e;--ink:#eef3fa;--mut:#a9b8cf;--card:#13243d;--line:#243a5a}}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;margin-bottom:18px}
a{color:inherit;text-decoration:none}
.w{max-width:1200px;margin:auto;padding:0 24px}
.btn{display:inline-block;padding:15px 30px;border-radius:50px;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;font-weight:700;transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn.o2{background:none;border:2px solid var(--blue);color:var(--blue);box-shadow:none}
.btn.o2:hover{background:var(--blue);color:#fff}
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ===== Section: intro ===== */
section.swx{padding:100px 0}
.swx h2{margin-bottom:18px}
.sw-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.sw-copy p{color:var(--mut);margin-bottom:18px}
.sw-copy p.lead{color:var(--ink);font-size:21px;line-height:1.55}
.sw-ticks{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:13px}
.sw-ticks li{display:flex;gap:14px;align-items:flex-start;font-weight:500}
.sw-ticks i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-top:1px}
.sw-ticks svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sw-btns{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:900px){.sw-grid2{grid-template-columns:1fr;gap:46px}}

/* browser bar */
.sw-mock-wrap{position:relative;padding:0 0 30px}
.sw-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.sw-bar i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.sw-bar span{margin-left:12px;flex:1;background:var(--bg);border-radius:8px;padding:5px 12px;font-size:13px;color:var(--mut)}

/* WordPress editor mock */
.wp-mock{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 70px -40px rgba(10,24,48,.5)}
.wp-mock .sw-bar{border-radius:22px 22px 0 0}
.wp-body{display:grid;grid-template-columns:116px 1fr;min-height:330px}
.wp-side{background:#12294a;border-radius:0 0 0 22px;padding:16px 10px;display:grid;gap:6px;align-content:start}
.wp-side span{font-size:12.5px;font-weight:600;color:#b8c8df;padding:8px 10px;border-radius:8px}
.wp-side span:nth-child(3){background:var(--blue);color:#fff}
.wp-edit{padding:18px;display:grid;gap:12px;align-content:start}
.wp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.wp-plus{width:30px;height:30px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700}
.wp-pub{background:var(--blue);color:#fff;font-weight:700;font-size:13px;border-radius:50px;padding:7px 16px}
.wp-blk{border-radius:10px;outline:2px solid transparent;outline-offset:3px}
.wp-b1 i{display:block;height:20px;width:70%;border-radius:8px;background:var(--navy)}
.wp-b2 i{display:block;height:8px;border-radius:99px;background:var(--line);margin-bottom:8px}
.wp-b2 i:nth-child(2){width:84%}.wp-b2 i:nth-child(3){width:56%}
.wp-b3 i{display:block;height:84px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan))}
.wp-b4 i{display:block;width:96px;height:28px;border-radius:99px;background:#ffb020}
.wp-chip{position:absolute;right:-12px;bottom:-18px;display:flex;align-items:center;gap:8px;background:#fff;color:#12804a;font-weight:700;font-size:14.5px;border-radius:50px;padding:11px 18px;box-shadow:0 20px 40px -16px rgba(10,24,48,.5)}
.wp-mock.in .wp-b1{animation:wpb1 9s infinite}
.wp-mock.in .wp-b2{animation:wpb2 9s infinite}
.wp-mock.in .wp-b3{animation:wpb3 9s infinite}
.wp-mock.in .wp-b4{animation:wpb4 9s infinite}
.wp-mock.in .wp-pub{animation:wppub 9s infinite}
.wp-mock.in .wp-chip{animation:wpchip 9s infinite}
@keyframes wppub{0%,58%{transform:none}62%{transform:scale(.9)}68%,100%{transform:none}}
@keyframes wpchip{0%,64%{opacity:0;transform:translateY(10px)}70%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wpb1{0%,8%{opacity:0;transform:translateY(16px);outline-color:transparent}14%{opacity:1;transform:none;outline-color:var(--blue)}22%{outline-color:transparent}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px)}}
@keyframes wpb2{0%,20%{opacity:0;transform:translateY(16px);outline-color:transparent}26%{opacity:1;transform:none;outline-color:var(--blue)}34%{outline-color:transparent}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px)}}
@keyframes wpb3{0%,32%{opacity:0;transform:translateY(16px);outline-color:transparent}38%{opacity:1;transform:none;outline-color:var(--blue)}46%{outline-color:transparent}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px)}}
@keyframes wpb4{0%,44%{opacity:0;transform:translateY(16px);outline-color:transparent}50%{opacity:1;transform:none;outline-color:var(--blue)}58%{outline-color:transparent}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px)}}

@media(prefers-reduced-motion:reduce){.wp-mock .wp-blk,.wp-mock .wp-pub,.wp-mock .wp-chip{animation:none!important}}
@media(max-width:560px){.wp-body{grid-template-columns:84px 1fr}.wp-side span{font-size:11.5px;padding:7px 6px}.wp-chip{right:6px}}


/* ===== About section ===== */
.mmd-about {
  --mmd-navy: #0b1b3a;
  --mmd-text: #1c2740;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-cyan: #17b4cf;
  --mmd-bg: #f5f8fe;

  background: var(--mmd-bg);
  padding: 80px 20px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

.mmd-about *,
.mmd-about *::before,
.mmd-about *::after {
  box-sizing: border-box;
}

.mmd-about__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

/* ----- Images ----- */
.mmd-about__media {
  position: relative;
  max-width: 430px;
  width: 100%;
  margin-left: 20px;
  padding-bottom: 60px;
}

.mmd-about__img-main {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 428 / 534;
  box-shadow: 0 20px 45px rgba(11, 27, 58, 0.15);
}

.mmd-about__img-main img,
.mmd-about__img-small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mmd-about__img-small {
  position: absolute;
  right: -80px;
  bottom: 0;
  width: 275px;
  height: 200px;
  padding: 8px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(11, 27, 58, 0.18);
}

.mmd-about__img-small img {
  border-radius: 22px;
}

/* ----- Experience badge ----- */
.mmd-about__badge {
  position: absolute;
  top: 36px;
  left: -22px;
  z-index: 2;
  padding: 18px 26px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
  box-shadow: 0 14px 30px rgba(30, 120, 214, 0.35);
}

.mmd-about__badge strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
}

.mmd-about__badge span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
}

/* ----- Content ----- */
.mmd-about__content h2 {
  margin: 0 0 24px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--mmd-navy);
  letter-spacing: -0.5px;
}

.mmd-about__lead {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--mmd-text);
}

.mmd-about__text {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--mmd-muted);
}

/* ----- Checklist ----- */
.mmd-about__list {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}

.mmd-about__list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 500;
  color: var(--mmd-text);
}

.mmd-about__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #1b95d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Buttons ----- */
.mmd-about__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.mmd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 30px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mmd-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
  box-shadow: 0 12px 26px rgba(30, 120, 214, 0.35);
}

.mmd-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(30, 120, 214, 0.45);
}

.mmd-btn--outline {
  color: var(--mmd-blue);
  background: transparent;
  border: 2px solid var(--mmd-blue);
}

.mmd-btn--outline:hover {
  color: #fff;
  background: var(--mmd-blue);
}

.mmd-btn:focus-visible {
  outline: 3px solid var(--mmd-cyan);
  outline-offset: 3px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .mmd-about__container {
    gap: 60px;
  }
  .mmd-about__img-small {
    right: -40px;
    width: 230px;
    height: 170px;
  }
}

@media (max-width: 860px) {
  .mmd-about {
    padding: 60px 20px;
  }
  .mmd-about__container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .mmd-about__media {
    margin: 0 auto;
    max-width: 400px;
  }
  .mmd-about__img-small {
    right: -20px;
    width: 220px;
    height: 160px;
  }
  .mmd-about__badge {
    left: -10px;
  }
}

@media (max-width: 480px) {
  .mmd-about__lead { font-size: 18px; }
  .mmd-about__list li { font-size: 16px; }
  .mmd-btn { width: 100%; }
}




/* ===== Stats strip ===== */
.mmd-stats {
  background: linear-gradient(100deg, #0a1632 0%, #123a78 55%, #17b4cf 100%);
  padding: 60px 20px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
  color: #fff;
}

.mmd-stats *,
.mmd-stats *::before,
.mmd-stats *::after {
  box-sizing: border-box;
}

.mmd-stats__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.mmd-stats__item {
  flex: 1 1 auto;
  padding: 0 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.mmd-stats__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.mmd-stats__item:last-child {
  padding-right: 0;
}

/* Higher specificity + !important so theme / WPBakery styles can't override */
.mmd-stats .mmd-stats__item h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: "DM Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  color: #fff !important;
  white-space: nowrap;
}

.mmd-stats .mmd-stats__item p {
  margin: 0 !important;
  font-family: "DM Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .mmd-stats__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 0;
  }
  .mmd-stats__item {
    padding: 0 24px;
  }
  .mmd-stats__item:first-child,
  .mmd-stats__item:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .mmd-stats__item:nth-child(2) {
    padding-right: 0;
  }
}

@media (max-width: 520px) {
  .mmd-stats {
    padding: 44px 20px;
  }
  .mmd-stats__container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mmd-stats__item,
  .mmd-stats__item:nth-child(n) {
    padding: 0 0 0 18px;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
  }
}

/* ===== Load animation (works together with stats-strip.js) ===== */
/* Items start hidden only when JavaScript is running, so the section
   still shows normally if JS is blocked. */
.mmd-stats.mmd-js .mmd-stats__item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.mmd-stats.mmd-js.is-visible .mmd-stats__item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered entrance, one after another */
.mmd-stats.mmd-js.is-visible .mmd-stats__item:nth-child(1) { transition-delay: 0s; }
.mmd-stats.mmd-js.is-visible .mmd-stats__item:nth-child(2) { transition-delay: 0.2s; }
.mmd-stats.mmd-js.is-visible .mmd-stats__item:nth-child(3) { transition-delay: 0.4s; }
.mmd-stats.mmd-js.is-visible .mmd-stats__item:nth-child(4) { transition-delay: 0.6s; }

/* Digits keep equal width so the text doesn't jiggle while counting */
.mmd-count {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .mmd-stats.mmd-js .mmd-stats__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== How we build section ===== */
.mmd-build {
  --mmd-navy: #0b1b3a;
  --mmd-text: #1c2740;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-bg: #f5f8fe;

  background: var(--mmd-bg);
  padding: 60px 20px 80px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
}

.mmd-build *,
.mmd-build *::before,
.mmd-build *::after {
  box-sizing: border-box;
}

.mmd-build__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ----- Heading ----- */
.mmd-build__head {
  max-width: 580px;
  margin-bottom: 56px;
}

.mmd-build__head h2 {
  margin: 0 0 24px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mmd-navy);
}

.mmd-build__head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mmd-muted);
}

/* ----- Grid ----- */
.mmd-build__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 60px;
}

.mmd-build__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dfe6f2;
  color: var(--mmd-blue);
}

.mmd-build__icon svg {
  width: 24px;
  height: 24px;
}

.mmd-build__item h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--mmd-navy);
}

.mmd-build__item p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mmd-muted);
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .mmd-build__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 40px;
  }
}

@media (max-width: 600px) {
  .mmd-build {
    padding: 44px 20px 60px;
  }
  .mmd-build__head {
    margin-bottom: 40px;
  }
  .mmd-build__grid {
    grid-template-columns: 1fr;
  }
  .mmd-build__head p,
  .mmd-build__item p {
    font-size: 16px;
  }
}
/* ===== Our design experts ===== */
.mmd-experts {
  --mmd-navy: #0b1b3a;
  --mmd-text: #1c2740;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-cyan: #17b4cf;

  background: #fff;
  padding: 80px 20px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

.mmd-experts *,
.mmd-experts *::before,
.mmd-experts *::after {
  box-sizing: border-box;
}

.mmd-experts__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

/* ----- Content ----- */
.mmd-experts__content h2 {
  margin: 0 0 22px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mmd-navy);
}

.mmd-experts__lead {
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--mmd-text);
}

.mmd-experts__text {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mmd-muted);
}

/* ----- Checklist ----- */
.mmd-experts__list {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}

.mmd-experts__list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 500;
  color: var(--mmd-text);
}

.mmd-experts__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #1b95d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Button ----- */
.mmd-experts__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
  box-shadow: 0 14px 30px rgba(30, 120, 214, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mmd-experts__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(30, 120, 214, 0.45);
}

.mmd-experts__btn:focus-visible {
  outline: 3px solid var(--mmd-cyan);
  outline-offset: 3px;
}

/* ----- Image + floating card ----- */
.mmd-experts__media {
  position: relative;
  width: 100%;
  max-width: 510px;
}

.mmd-experts__img {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 510 / 407;
  box-shadow: 0 20px 45px rgba(11, 27, 58, 0.15);
}

.mmd-experts__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mmd-experts__card {
  position: absolute;
  left: -20px;
  bottom: 30px;
  padding: 18px 22px;
  min-width: 226px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(11, 27, 58, 0.18);
}

.mmd-experts__card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--mmd-navy);
}

.mmd-experts__card span {
  display: block;
  font-size: 14px;
  color: var(--mmd-muted);
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .mmd-experts__container {
    gap: 60px;
  }
}

@media (max-width: 860px) {
  .mmd-experts {
    padding: 60px 20px;
  }
  .mmd-experts__container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .mmd-experts__media {
    max-width: 560px;
    margin: 0 auto;
  }
  .mmd-experts__card {
    left: 12px;
  }
}

@media (max-width: 480px) {
  .mmd-experts__lead { font-size: 18px; }
  .mmd-experts__text,
  .mmd-experts__list li { font-size: 16px; }
  .mmd-experts__btn { width: 100%; }
}
/* ===== Our core values ===== */
.mmd-values {
  --mmd-navy: #0b1b3a;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-cyan: #17b4cf;
  --mmd-bg: #f5f8fe;

  background: var(--mmd-bg);
  padding: 60px 20px 80px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
}

.mmd-values *,
.mmd-values *::before,
.mmd-values *::after {
  box-sizing: border-box;
}

.mmd-values__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ----- Heading ----- */
.mmd-values__head {
  margin-bottom: 56px;
}

.mmd-values__head h2 {
  margin: 0 0 20px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mmd-navy);
}

.mmd-values__head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mmd-muted);
}

/* ----- Grid with vertical dividers ----- */
.mmd-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.mmd-values__item {
  padding: 0 30px;
  border-left: 1px solid #dbe3f0;
}

.mmd-values__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.mmd-values__item:last-child {
  padding-right: 0;
}

/* ----- Icon tile ----- */
.mmd-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
}

.mmd-values__icon svg {
  width: 24px;
  height: 24px;
}

.mmd-values__item h3 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--mmd-navy);
}

.mmd-values__item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mmd-muted);
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .mmd-values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 0;
  }
  .mmd-values__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .mmd-values__item:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  .mmd-values {
    padding: 44px 20px 60px;
  }
  .mmd-values__head {
    margin-bottom: 40px;
  }
  .mmd-values__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .mmd-values__item,
  .mmd-values__item:nth-child(n) {
    padding: 0;
    border-left: 0;
  }
  .mmd-values__head p,
  .mmd-values__item p {
    font-size: 16px;
  }
}
/* ===== What we do for you ===== */
.mmd-services {
  --mmd-navy: #0b1b3a;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-cyan: #17b4cf;
  --mmd-line: #dbe3f0;

  background: #fff;
  padding: 60px 20px 80px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
}

.mmd-services *,
.mmd-services *::before,
.mmd-services *::after {
  box-sizing: border-box;
}

.mmd-services__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ----- Heading ----- */
.mmd-services__head {
  margin-bottom: 52px;
}

.mmd-services__head h2 {
  margin: 0 0 20px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mmd-navy);
}

.mmd-services__head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mmd-muted);
}

/* ----- Grid ----- */
.mmd-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 60px;
}

/* ----- Item ----- */
.mmd-services__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--mmd-line);
  isolation: isolate;
  transition: padding 0.35s ease;
}

/* Animated underline that grows on hover */
.mmd-services__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mmd-blue), var(--mmd-cyan));
  transition: width 0.45s ease;
}

/* Soft highlight panel that fades in behind the row */
.mmd-services__item::before {
  content: "";
  position: absolute;
  inset: 0 -16px;
  z-index: -1;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(30, 120, 214, 0.07), rgba(23, 180, 207, 0.03));
  opacity: 0;
  transform: scaleX(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mmd-services__text h3 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--mmd-navy);
  transition: color 0.3s ease;
}

.mmd-services__text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mmd-muted);
}

/* ----- Arrow circle ----- */
.mmd-services__arrow {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mmd-line);
  background: #fff;
  color: var(--mmd-blue);
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, transform 0.3s ease;
}

.mmd-services__arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s ease;
}

/* ----- Hover / focus effects ----- */
.mmd-services__item:hover,
.mmd-services__item:focus-visible {
  padding-left: 16px;
}

.mmd-services__item:hover::before,
.mmd-services__item:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.mmd-services__item:hover::after,
.mmd-services__item:focus-visible::after {
  width: 100%;
}

.mmd-services__item:hover h3,
.mmd-services__item:focus-visible h3 {
  color: var(--mmd-blue);
}

.mmd-services__item:hover .mmd-services__arrow,
.mmd-services__item:focus-visible .mmd-services__arrow {
  color: #fff;
  background: var(--mmd-blue);
  border-color: var(--mmd-blue);
  box-shadow: 0 10px 22px rgba(30, 120, 214, 0.4);
  transform: scale(1.08);
}

.mmd-services__item:hover .mmd-services__arrow svg,
.mmd-services__item:focus-visible .mmd-services__arrow svg {
  animation: mmd-arrow-slide 0.5s ease;
}

.mmd-services__item:focus-visible {
  outline: 3px solid var(--mmd-cyan);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Arrow exits right and re-enters from the left */
@keyframes mmd-arrow-slide {
  0%   { transform: translateX(0); opacity: 1; }
  45%  { transform: translateX(14px); opacity: 0; }
  55%  { transform: translateX(-14px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .mmd-services {
    padding: 44px 20px 60px;
  }
  .mmd-services__head {
    margin-bottom: 36px;
  }
  .mmd-services__grid {
    grid-template-columns: 1fr;
  }
  .mmd-services__text h3 { font-size: 22px; }
  .mmd-services__text p  { font-size: 16px; }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .mmd-services__item,
  .mmd-services__item::before,
  .mmd-services__item::after,
  .mmd-services__arrow,
  .mmd-services__arrow svg {
    transition: none;
    animation: none !important;
  }
}

/* ===== Website design across Delhi ===== */
.mmd-areas {
  --mmd-navy: #0b1b3a;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-cyan: #17b4cf;
  --mmd-bg: #f5f8fe;
  --mmd-line: #dfe6f2;

  background: var(--mmd-bg);
  padding: 60px 20px 80px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
}

.mmd-areas *,
.mmd-areas *::before,
.mmd-areas *::after {
  box-sizing: border-box;
}

.mmd-areas__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ----- Heading ----- */
.mmd-areas__head {
  margin-bottom: 36px;
}

.mmd-areas__head h2 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mmd-navy);
}

.mmd-areas__head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mmd-muted);
}

/* ----- Pills ----- */
.mmd-areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
}

.mmd-areas__list a {
  position: relative;
  display: inline-block;
  padding: 15px 22px;
  border-radius: 50px;
  border: 1px solid var(--mmd-line);
  background: #fff;
  color: var(--mmd-navy);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease,
              color 0.3s ease, border-color 0.3s ease;
}

/* Gradient that sweeps in from the left on hover */
.mmd-areas__list a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Small location pin that slides in */
.mmd-areas__list a::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translate(-8px, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mmd-areas__list a:hover,
.mmd-areas__list a:focus-visible {
  color: #fff;
  border-color: transparent;
  transform: translateY(-4px);
  padding-left: 32px;
  padding-right: 16px;
  box-shadow: 0 12px 24px rgba(30, 120, 214, 0.35);
}

.mmd-areas__list a:hover::before,
.mmd-areas__list a:focus-visible::before {
  transform: translateX(0);
}

.mmd-areas__list a:hover::after,
.mmd-areas__list a:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.mmd-areas__list a:active {
  transform: translateY(-1px) scale(0.97);
}

.mmd-areas__list a:focus-visible {
  outline: 3px solid var(--mmd-cyan);
  outline-offset: 3px;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .mmd-areas {
    padding: 44px 20px 60px;
  }
  .mmd-areas__head p {
    font-size: 16px;
  }
  .mmd-areas__list {
    gap: 10px;
  }
  .mmd-areas__list a {
    padding: 12px 18px;
    font-size: 15px;
  }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .mmd-areas__list a,
  .mmd-areas__list a::before,
  .mmd-areas__list a::after {
    transition: none;
  }
}

/* ===== Best dynamic web designing ===== */
.mmd-dyn {
  --mmd-navy: #0b1b3a;
  --mmd-text: #1c2740;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-cyan: #17b4cf;
  --mmd-line: #dfe6f2;
  --mmd-bg: #f5f8fe;

  background: var(--mmd-bg);
  padding: 80px 20px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

.mmd-dyn *,
.mmd-dyn *::before,
.mmd-dyn *::after {
  box-sizing: border-box;
}

.mmd-dyn__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ----- Content ----- */
.mmd-dyn__content h2 {
  margin: 0 0 24px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mmd-navy);
}

.mmd-dyn__lead {
  margin: 0 0 18px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--mmd-text);
}

.mmd-dyn__text {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--mmd-muted);
}

.mmd-dyn__list {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
}

.mmd-dyn__list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 500;
  color: var(--mmd-text);
}

.mmd-dyn__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #1b95d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Buttons ----- */
.mmd-dyn__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mmd-dyn__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 30px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mmd-dyn__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
  box-shadow: 0 12px 26px rgba(30, 120, 214, 0.35);
}

.mmd-dyn__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(30, 120, 214, 0.45);
}

.mmd-dyn__btn--outline {
  color: var(--mmd-blue);
  border: 2px solid var(--mmd-blue);
  background: transparent;
}

.mmd-dyn__btn--outline:hover {
  color: #fff;
  background: var(--mmd-blue);
}

.mmd-dyn__btn:focus-visible {
  outline: 3px solid var(--mmd-cyan);
  outline-offset: 3px;
}

/* ===== Visual (two browser windows) ===== */
.mmd-dyn__visual {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: 430px;
  margin: 0 auto;
}

.mmd-dyn__win {
  position: absolute;
  top: 0;
  width: 48.2%;
  height: 354px;
  background: #fff;
  border: 1px solid var(--mmd-line);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 40px -18px rgba(11, 27, 58, 0.18);
}

.mmd-dyn__win--admin { left: 0; }
.mmd-dyn__win--site  { right: 0; }

/* Title bar */
.mmd-dyn__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mmd-line);
}

.mmd-dyn__bar i {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d9e1ee;
}

.mmd-dyn__bar span {
  flex: 1;
  margin-left: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f1f5fb;
  font-size: 13px;
  color: var(--mmd-muted);
  white-space: nowrap;
  overflow: hidden;
}

.mmd-dyn__body {
  padding: 16px 18px;
}

/* ----- Admin panel ----- */
.mmd-dyn__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.mmd-dyn__tabs span {
  padding: 8px 14px;
  border-radius: 20px;
  background: #f1f5fb;
  font-size: 13px;
  font-weight: 700;
  color: var(--mmd-muted);
}

.mmd-dyn__tabs span.is-active {
  background: var(--mmd-blue);
  color: #fff;
}

.mmd-dyn__label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mmd-text);
}

.mmd-dyn__input {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  margin-bottom: 14px;
  border: 1.5px solid var(--mmd-blue);
  border-radius: 12px;
  background: #f7faff;
  font-size: 15px;
  font-weight: 700;
  color: var(--mmd-navy);
  white-space: nowrap;
  overflow: hidden;
}

.mmd-dyn__caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 1px;
  background: var(--mmd-blue);
  animation: mmd-dyn-blink 0.9s steps(1) infinite;
}

@keyframes mmd-dyn-blink {
  50% { opacity: 0; }
}

.mmd-dyn__publish-wrap {
  position: relative;
  display: inline-block;
}

.mmd-dyn__publish {
  padding: 12px 22px;
  border: 0;
  border-radius: 30px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: default;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mmd-dyn__publish.is-pressed {
  transform: scale(0.93);
  box-shadow: 0 0 0 6px rgba(30, 120, 214, 0.18);
}

/* Click target ring that appears when "Publish" is pressed */
.mmd-dyn__click {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 40px;
  height: 40px;
  margin: 22px 0 0 -20px;
  border: 1.5px solid var(--mmd-cyan);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.mmd-dyn__click::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--mmd-cyan);
}

.mmd-dyn__click.is-on {
  animation: mmd-dyn-click 0.9s ease-out;
}

@keyframes mmd-dyn-click {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ----- Live site preview ----- */
.mmd-dyn__title {
  margin: 6px 0 0;
  min-height: 56px;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 800;
  color: #4a5b78;            /* muted before publishing */
  opacity: 0.85;
  transition: color 0.4s ease, opacity 0.4s ease;
}

.mmd-dyn__title.is-live {
  color: var(--mmd-navy);
  opacity: 1;
}

.mmd-dyn__updated {
  margin-top: 18px;
  padding: 7px 12px;
  border-radius: 20px;
  background: #dff5e6;
  font-size: 13px;
  font-weight: 700;
  color: #1a7f45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mmd-dyn__updated.is-on {
  opacity: 1;
  transform: translateY(0);
}

.mmd-dyn__line {
  height: 8px;
  margin-top: 12px;
  border-radius: 6px;
  background: var(--mmd-line);
}

.mmd-dyn__line--short {
  width: 78%;
  margin-top: 8px;
}

.mmd-dyn__hero {
  height: 96px;
  margin-top: 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
}

/* ----- Floating tags ----- */
.mmd-dyn__tag {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 18px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: var(--mmd-navy);
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(11, 27, 58, 0.14);
  animation: mmd-dyn-float 4s ease-in-out infinite alternate;
}

.mmd-dyn__tag svg {
  width: 18px;
  height: 18px;
  color: var(--mmd-blue);
}

.mmd-dyn__tag--seo {
  right: -14px;
  top: 58px;
}

.mmd-dyn__tag--edit {
  left: -20px;
  top: 366px;
  animation-delay: -2s;
}

@keyframes mmd-dyn-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .mmd-dyn__container { gap: 50px; }
}

@media (max-width: 860px) {
  .mmd-dyn { padding: 60px 20px; }
  .mmd-dyn__container { grid-template-columns: 1fr; }
  .mmd-dyn__visual { max-width: 500px; }
}

@media (max-width: 480px) {
  .mmd-dyn__lead { font-size: 18px; }
  .mmd-dyn__text,
  .mmd-dyn__list li { font-size: 16px; }
  .mmd-dyn__btn { flex: 1 1 100%; }

  .mmd-dyn__visual { height: 400px; }
  .mmd-dyn__win { height: 330px; border-radius: 20px; }
  .mmd-dyn__bar span { display: none; }
  .mmd-dyn__body { padding: 12px; }
  .mmd-dyn__title { font-size: 18px; min-height: 44px; }
  .mmd-dyn__input { font-size: 12px; padding: 0 10px; }
  .mmd-dyn__tag { padding: 10px 14px; font-size: 13px; }
  .mmd-dyn__tag--seo { right: -6px; }
  .mmd-dyn__tag--edit { left: -6px; top: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .mmd-dyn__tag,
  .mmd-dyn__caret,
  .mmd-dyn__click { animation: none; }
}
/* ===== Why choose a dynamic website ===== */
.mmd-why {
  --mmd-navy: #0b1b3a;
  --mmd-muted: #5b6b85;
  --mmd-blue: #1e78d6;
  --mmd-cyan: #17b4cf;
  --mmd-line: #dbe3f0;

  background: #fff;
  padding: 60px 20px 80px;
  font-family: "DM Sans", "Inter", "Segoe UI", Arial, sans-serif;
}

.mmd-why *,
.mmd-why *::before,
.mmd-why *::after {
  box-sizing: border-box;
}

.mmd-why__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ----- Heading ----- */
.mmd-why__head {
  max-width: 640px;
  margin-bottom: 56px;
}

.mmd-why__head h2 {
  margin: 0 0 22px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mmd-navy);
}

.mmd-why__head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mmd-muted);
}

/* ----- Grid with vertical dividers ----- */
.mmd-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.mmd-why__item {
  padding: 0 30px;
  border-left: 1px solid var(--mmd-line);
}

.mmd-why__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.mmd-why__item:last-child {
  padding-right: 0;
}

.mmd-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--mmd-blue), var(--mmd-cyan));
}

.mmd-why__icon svg {
  width: 24px;
  height: 24px;
}

.mmd-why__item h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--mmd-navy);
}

.mmd-why__item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mmd-muted);
}

/* ===== Load animation (needs why-dynamic.js) =====
   Everything starts hidden only when JavaScript is running, so the
   section still shows normally if JS is blocked. */
.mmd-why.mmd-js .mmd-why__head,
.mmd-why.mmd-js .mmd-why__item {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.mmd-why.mmd-js.is-visible .mmd-why__head,
.mmd-why.mmd-js.is-visible .mmd-why__item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered: heading first, then each column one after another */
.mmd-why.mmd-js.is-visible .mmd-why__head            { transition-delay: 0s; }
.mmd-why.mmd-js.is-visible .mmd-why__item:nth-child(1) { transition-delay: 0.25s; }
.mmd-why.mmd-js.is-visible .mmd-why__item:nth-child(2) { transition-delay: 0.45s; }
.mmd-why.mmd-js.is-visible .mmd-why__item:nth-child(3) { transition-delay: 0.65s; }
.mmd-why.mmd-js.is-visible .mmd-why__item:nth-child(4) { transition-delay: 0.85s; }

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .mmd-why__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 0;
  }
  .mmd-why__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .mmd-why__item:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  .mmd-why {
    padding: 44px 20px 60px;
  }
  .mmd-why__head {
    margin-bottom: 40px;
  }
  .mmd-why__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .mmd-why__item,
  .mmd-why__item:nth-child(n) {
    padding: 0;
    border-left: 0;
  }
  .mmd-why__head p,
  .mmd-why__item p {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mmd-why.mmd-js .mmd-why__head,
  .mmd-why.mmd-js .mmd-why__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.mmdf{--bg:#f5f8fc;--ink:#0a1830;--mut:#4a5a75;--card:#fff;--line:#d8e2ef;--blue:#1b74d4;--cyan:#16b8cc;
  display:block;position:relative;height:auto;min-height:0;padding:100px 0;background:var(--card);color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow:hidden}
.mmdf *,.mmdf *::before,.mmdf *::after{box-sizing:border-box}
.mmdf br,.mmdf p:empty{display:none}
.mmdf .mf-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mmdf .mf-head{max-width:680px;margin:0 0 50px}
.mmdf h2{font:800 clamp(32px,4.4vw,54px)/1.08 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:var(--ink)!important;margin:0 0 18px;padding:0;text-transform:none!important;border:0}
.mmdf .mf-sub{margin:0;padding:0;color:var(--mut)!important;font-size:18px;line-height:1.6;max-width:620px}
.mmdf .mf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mmdf .mf-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px 30px;overflow:hidden;transition:transform .4s,border-color .4s,box-shadow .4s}
.mmdf .mf-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .5s}
.mmdf .mf-card:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 26px 44px -30px rgba(10,24,48,.4)}
.mmdf .mf-card:hover::before{transform:scaleX(1)}
.mmdf .mf-card i{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--cyan));margin:0 0 22px;font-style:normal}
.mmdf .mf-card svg{display:block;width:28px;height:28px;max-width:28px;max-height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mmdf .mf-card h3{font:700 23px/1.15 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:var(--ink)!important;margin:0 0 10px;padding:0;text-transform:none!important}
.mmdf .mf-card p{margin:0;padding:0;color:var(--mut)!important;font-size:16.5px;line-height:1.6}
.mmdf.mf-js .mf-card{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),border-color .4s,box-shadow .4s}
.mmdf.mf-js.mf-in .mf-card{opacity:1;transform:none}
.mmdf.mf-js.mf-in .mf-card:hover{transform:translateY(-6px);transition-delay:0s}
@media(max-width:1000px){.mmdf .mf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mmdf{padding:70px 0}.mmdf .mf-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mmdf *{transition:none!important}.mmdf.mf-js .mf-card{opacity:1;transform:none}}
.mmdp{--ink:#0a1830;--blue:#1b74d4;--cyan:#16b8cc;--navy:#0a1830;
  display:block;position:relative;height:auto;min-height:0;padding:100px 0;background:var(--navy);color:#fff;
  font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow:hidden}
.mmdp::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;left:-200px;top:-220px;background:radial-gradient(circle,rgba(27,116,212,.45),transparent 68%);pointer-events:none}
.mmdp *,.mmdp *::before,.mmdp *::after{box-sizing:border-box}
.mmdp br,.mmdp p:empty{display:none}
.mmdp .mp-wrap{position:relative;max-width:1200px;margin:0 auto;padding:0 24px}
.mmdp .mp-head{max-width:760px}
.mmdp h2{font:800 clamp(32px,4.4vw,54px)/1.08 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:#fff!important;margin:0 0 18px;padding:0;text-transform:none!important;border:0}
.mmdp .mp-lead{margin:0;padding:0;color:#fff!important;font-size:21px;line-height:1.55}

.mmdp .mp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:54px;position:relative;padding-top:48px}
.mmdp .mp-steps::before,.mmdp .mp-steps::after{content:"";position:absolute;left:0;top:16px;height:3px;border-radius:3px}
.mmdp .mp-steps::before{right:0;background:rgba(255,255,255,.2)}
.mmdp .mp-steps::after{width:100%;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.mmdp .mp-step{position:relative;min-width:0}
.mmdp .mp-step b{position:absolute;top:-48px;left:0;width:36px;height:36px;border-radius:50%;background:var(--cyan);border:3px solid var(--cyan);color:#06222a;display:grid;place-items:center;font:700 14px 'DM Sans',Arial,sans-serif;z-index:1}
.mmdp .mp-step h3{font:700 25px/1.15 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:#fff!important;margin:0 0 8px;padding:0;text-transform:none!important}
.mmdp .mp-step p{margin:0;padding:0;color:#c6d5ea!important;font-size:17px;line-height:1.6}

.mmdp.mp-js .mp-steps::after{width:0;transition:width 2.4s cubic-bezier(.6,.1,.2,1)}
.mmdp.mp-js.mp-in .mp-steps::after{width:100%}
.mmdp.mp-js .mp-step b{background:var(--navy);border-color:rgba(255,255,255,.3);color:#fff;transition:background .5s,border-color .5s,color .5s;transition-delay:var(--sd,0s)}
.mmdp.mp-js.mp-in .mp-step b{background:var(--cyan);border-color:var(--cyan);color:#06222a}

@media(max-width:760px){
  .mmdp{padding:70px 0}
  .mmdp .mp-steps{grid-template-columns:1fr;gap:34px;padding-top:0}
  .mmdp .mp-steps::before,.mmdp .mp-steps::after{display:none}
  .mmdp .mp-step b{position:static;margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){.mmdp *,.mmdp *::after{transition:none!important}}

.mmdh{--bg:#f5f8fc;--blue:#1b74d4;--cyan:#16b8cc;--navy:#0a1830;
  display:block;position:relative;height:auto;min-height:0;padding:100px 0;background:var(--bg);color:#fff;
  font:400 18px/1.6 'DM Sans',Arial,sans-serif}
.mmdh *,.mmdh *::before,.mmdh *::after{box-sizing:border-box}
.mmdh br,.mmdh p:empty{display:none}
.mmdh .mh-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mmdh .mh-box{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:linear-gradient(120deg,#0a1830,#134a8f 65%,#16b8cc);color:#fff;border-radius:34px;padding:56px;position:relative;overflow:hidden}
.mmdh .mh-box::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-160px;background:rgba(255,255,255,.1);pointer-events:none}
.mmdh .mh-copy{position:relative;z-index:1;min-width:0}
.mmdh h2{font:800 clamp(32px,4.4vw,54px)/1.08 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:#fff!important;margin:0 0 14px;padding:0;text-transform:none!important;border:0}
.mmdh p{margin:0 0 12px;padding:0;color:#dbe9fb!important;font-size:18px;line-height:1.6}

.mmdh .mh-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.mmdh .mh-btn{display:inline-block;padding:15px 30px;border-radius:50px;font-weight:700;font-size:18px;line-height:1.3;transition:.3s;text-decoration:none;border:2px solid transparent}
.mmdh .mh-btn:hover{transform:translateY(-3px) scale(1.03)}
.mmdh .mh-w1{background:#fff;color:#0a3a7a!important}
.mmdh .mh-o{background:none;border-color:var(--cyan);color:#fff!important}
.mmdh .mh-o:hover{background:var(--cyan)}

.mmdh .mh-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;position:relative;z-index:1}
.mmdh .mh-list li{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:18px 20px;font-weight:600;margin:0;color:#fff;transition:transform .3s,background .3s}
.mmdh .mh-list li::before{display:none}
.mmdh .mh-list li:hover{transform:translateX(8px);background:rgba(255,255,255,.2)}
.mmdh .mh-list i{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal}
.mmdh .mh-list svg{display:block;width:16px;height:16px;max-width:16px;max-height:16px;fill:none;stroke:#0a3a7a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.mmdh.mh-js .mh-box{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.mmdh.mh-js .mh-list li{opacity:0;transform:translateX(30px);transition:opacity .7s var(--d,0s),transform .7s var(--d,0s),background .3s}
.mmdh.mh-js.mh-in .mh-box{opacity:1;transform:none}
.mmdh.mh-js.mh-in .mh-list li{opacity:1;transform:none}
.mmdh.mh-js.mh-in .mh-list li:hover{transform:translateX(8px);transition-delay:0s}

@media(max-width:900px){.mmdh .mh-box{grid-template-columns:1fr;padding:38px 26px}.mmdh{padding:70px 0}}
@media(prefers-reduced-motion:reduce){.mmdh *{transition:none!important}.mmdh.mh-js .mh-box,.mmdh.mh-js .mh-list li{opacity:1;transform:none}}

.mmdm{--bg:#f5f8fc;--ink:#0a1830;--mut:#4a5a75;--card:#fff;--line:#d8e2ef;--blue:#1b74d4;--cyan:#16b8cc;
  display:block;position:relative;height:auto;min-height:0;padding:100px 0;background:var(--card);color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow:hidden}
.mmdm *,.mmdm *::before,.mmdm *::after{box-sizing:border-box}
.mmdm br,.mmdm p:empty{display:none}
.mmdm .mm-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mmdm .mm-head{max-width:680px;margin:0 0 50px}
.mmdm h2{font:800 clamp(32px,4.4vw,54px)/1.08 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:var(--ink)!important;margin:0 0 18px;padding:0;text-transform:none!important;border:0}
.mmdm .mm-sub{margin:0;padding:0;color:var(--mut)!important;font-size:18px;line-height:1.6;max-width:620px}

.mmdm .mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mmdm .mm-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;text-decoration:none;color:var(--ink);transition:transform .4s,border-color .4s,box-shadow .4s}
.mmdm .mm-card:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 26px 44px -30px rgba(10,24,48,.4)}
.mmdm .mm-card h3{font:700 22px/1.15 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:var(--ink)!important;margin:0 0 6px;padding:0;text-transform:none!important}
.mmdm .mm-card p{margin:0 0 14px;padding:0;color:var(--mut)!important;font-size:17px;line-height:1.55}
.mmdm .mm-card .mm-more{color:var(--blue);font-weight:700;display:inline-flex;gap:8px;transition:gap .3s}
.mmdm .mm-card:hover .mm-more{gap:14px}
.mmdm .mm-card .mm-more b{font-weight:700}

.mmdm.mm-js .mm-head,.mmdm.mm-js .mm-card{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),border-color .4s,box-shadow .4s}
.mmdm.mm-js.mm-in .mm-head,.mmdm.mm-js.mm-in .mm-card{opacity:1;transform:none}
.mmdm.mm-js.mm-in .mm-card:hover{transform:translateY(-6px);transition-delay:0s}

@media(max-width:1000px){.mmdm .mm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.mmdm{padding:70px 0}.mmdm .mm-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mmdm *{transition:none!important}.mmdm.mm-js .mm-head,.mmdm.mm-js .mm-card{opacity:1;transform:none}}

.mmdq{--bg:#f5f8fc;--ink:#0a1830;--mut:#4a5a75;--card:#fff;--line:#d8e2ef;--blue:#1b74d4;--cyan:#16b8cc;
  display:block;position:relative;height:auto;min-height:0;padding:100px 0;background:var(--bg);color:var(--ink);
  font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow:hidden}
.mmdq *,.mmdq *::before,.mmdq *::after{box-sizing:border-box}
.mmdq br,.mmdq p:empty{display:none}
.mmdq .mq-wrap{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.mmdq .mq-side,.mmdq .mq-list{min-width:0}
.mmdq h2{font:800 clamp(32px,4.4vw,54px)/1.08 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:var(--ink)!important;margin:0 0 18px;padding:0;text-transform:none!important;border:0}
.mmdq .mq-side p{margin:0;padding:0;color:var(--mut)!important;font-size:18px;line-height:1.6;max-width:22em}
.mmdq .mq-btn{display:inline-block;margin-top:26px;padding:15px 30px;border-radius:50px;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff!important;font-weight:700;font-size:18px;line-height:1.3;text-decoration:none;transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.mmdq .mq-btn:hover{transform:translateY(-3px) scale(1.03)}

.mmdq .mq-list{border-top:1px solid var(--line)}
.mmdq .mq-item{border-bottom:1px solid var(--line)}
.mmdq .mq-item h3{margin:0;padding:0;font-size:inherit;line-height:inherit;text-transform:none!important}
.mmdq .mq-item button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;margin:0;padding:24px 0;background:none!important;border:0!important;border-radius:0;box-shadow:none;cursor:pointer;text-align:left;text-transform:none!important;letter-spacing:-.01em;color:var(--ink)!important;font:700 clamp(18px,1.9vw,22px)/1.35 'Bricolage Grotesque',Arial,sans-serif!important;-webkit-appearance:none;appearance:none}
.mmdq .mq-item button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.mmdq .mq-pm{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);position:relative;transition:background .3s,border-color .3s,transform .4s}
.mmdq .mq-pm::before,.mmdq .mq-pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .4s,background .3s}
.mmdq .mq-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.mmdq .mq-item.open .mq-pm{background:var(--blue);border-color:var(--blue);transform:rotate(180deg)}
.mmdq .mq-item.open .mq-pm::before,.mmdq .mq-item.open .mq-pm::after{background:#fff}
.mmdq .mq-item.open .mq-pm::after{transform:translate(-50%,-50%) rotate(0)}
.mmdq .mq-ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.mmdq .mq-item.open .mq-ans{grid-template-rows:1fr}
.mmdq .mq-ans>div{overflow:hidden}
.mmdq .mq-ans p{margin:0;color:var(--mut)!important;font-size:17.5px;line-height:1.6;padding:0 56px 26px 0}
.mmdq:not(.mq-js) .mq-ans{grid-template-rows:1fr}

.mmdq.mq-js .mq-side,.mmdq.mq-js .mq-list{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.mmdq.mq-js .mq-list{transition-delay:.1s}
.mmdq.mq-js.mq-in .mq-side,.mmdq.mq-js.mq-in .mq-list{opacity:1;transform:none}

@media(max-width:900px){.mmdq .mq-wrap{grid-template-columns:1fr;gap:34px}.mmdq{padding:70px 0}.mmdq .mq-ans p{padding-right:0}}
@media(prefers-reduced-motion:reduce){.mmdq *{transition:none!important}.mmdq.mq-js .mq-side,.mmdq.mq-js .mq-list{opacity:1;transform:none}}

.mmdc{--bg:#f5f8fc;--blue:#1b74d4;--cyan:#16b8cc;
  display:block;position:relative;height:auto;min-height:0;padding:100px 16px;background:var(--bg);
  font:400 18px/1.6 'DM Sans',Arial,sans-serif}
.mmdc *,.mmdc *::before,.mmdc *::after{box-sizing:border-box}
.mmdc br,.mmdc p:empty{display:none}
.mmdc .mc-card{position:relative;overflow:hidden;isolation:isolate;max-width:1200px;margin:0 auto;border-radius:36px;background:linear-gradient(120deg,#134a8f,#1b74d4 55%,#16b8cc);color:#fff;text-align:center;padding:90px 24px}
.mmdc .mc-card::before,.mmdc .mc-card::after{content:"";position:absolute;border-radius:50%;z-index:-1;filter:blur(8px);pointer-events:none}
.mmdc .mc-card::before{width:380px;height:380px;background:radial-gradient(circle,rgba(255,176,32,.6),transparent 68%);left:-80px;top:-110px;animation:mcdrift 14s ease-in-out infinite alternate}
.mmdc .mc-card::after{width:460px;height:460px;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%);right:-110px;bottom:-190px;animation:mcdrift 18s ease-in-out infinite alternate-reverse}
.mmdc h2{font:800 clamp(32px,5vw,60px)/1.08 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:#fff!important;max-width:14em;margin:0 auto 16px;padding:0;text-transform:none!important;border:0}
.mmdc p{font-size:19px;line-height:1.6;color:#fff!important;opacity:.9;max-width:30em;margin:0 auto 34px;padding:0}
.mmdc .mc-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.mmdc .mc-btn{display:inline-block;padding:15px 30px;border-radius:50px;font-weight:700;font-size:18px;line-height:1.3;text-decoration:none;transition:.3s;border:2px solid transparent}
.mmdc .mc-btn:hover{transform:translateY(-3px) scale(1.03)}
.mmdc .mc-w1{background:#fff;color:#0a3a7a!important}
.mmdc .mc-w2{background:none;border-color:rgba(255,255,255,.7);color:#fff!important}
.mmdc .mc-w2:hover{background:rgba(255,255,255,.16)}
@keyframes mcdrift{to{transform:translate(80px,50px) scale(1.15)}}

.mmdc.mc-js .mc-card{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.mmdc.mc-js.mc-in .mc-card{opacity:1;transform:none}

@media(max-width:600px){.mmdc{padding:70px 12px}.mmdc .mc-card{padding:60px 20px;border-radius:28px}.mmdc .mc-btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.mmdc *,.mmdc *::before,.mmdc *::after{animation:none!important;transition:none!important}.mmdc.mc-js .mc-card{opacity:1;transform:none}}


.mmdd{--bg:#f5f8fc;--ink:#0a1830;--mut:#4a5a75;--card:#fff;--line:#d8e2ef;--blue:#1b74d4;--cyan:#16b8cc;--navy:#0a1830;
  display:block;position:relative;height:auto;min-height:0;padding:100px 0;background:var(--bg);color:var(--ink);
  font:400 18px/1.6 'DM Sans',Arial,sans-serif;overflow:hidden}
.mmdd *,.mmdd *::before,.mmdd *::after{box-sizing:border-box}
.mmdd br,.mmdd p:empty{display:none}
.mmdd .md-wrap{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.mmdd .md-copy,.mmdd .md-mockwrap{min-width:0}

.mmdd h2{font:800 clamp(32px,4.4vw,54px)/1.08 'Bricolage Grotesque',Arial,sans-serif!important;letter-spacing:-.02em;color:var(--ink)!important;margin:0 0 18px;padding:0;text-transform:none!important;border:0}
.mmdd p{margin:0 0 18px;padding:0;color:var(--mut)!important;font-size:18px;line-height:1.6}
.mmdd p.md-lead{color:var(--ink)!important;font-size:21px;line-height:1.55}
.mmdd a{text-decoration:none}
.mmdd .md-ticks{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:13px}
.mmdd .md-ticks li{display:flex;gap:14px;align-items:flex-start;font-weight:500;margin:0;padding:0;color:var(--ink)}
.mmdd .md-ticks li::before{display:none}
.mmdd .md-ticks i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-top:1px;font-style:normal}
.mmdd .md-ticks svg{display:block;width:14px;height:14px;max-width:14px;max-height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mmdd .md-btns{display:flex;flex-wrap:wrap;gap:14px}
.mmdd .md-btn{display:inline-block;padding:15px 30px;border-radius:50px;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff!important;font-weight:700;font-size:18px;line-height:1.3;transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35);border:2px solid transparent}
.mmdd .md-btn:hover{transform:translateY(-3px) scale(1.03)}
.mmdd .md-btn.o2{background:none;border-color:var(--blue);color:var(--blue)!important;box-shadow:none}
.mmdd .md-btn.o2:hover{background:var(--blue);color:#fff!important}

.mmdd .md-mockwrap{position:relative;padding:0 0 30px}
.mmdd .md-demo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:30px}
.mmdd .md-card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(10,24,48,.5)}
.mmdd .md-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.mmdd .md-bar i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.mmdd .md-bar span{margin-left:12px;flex:1;min-width:0;background:var(--bg);border-radius:8px;padding:5px 12px;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden}
.mmdd .md-body{padding:18px;display:grid;gap:14px}
.mmdd .md-menu{display:flex;flex-wrap:wrap;gap:8px}
.mmdd .md-menu span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:50px;background:var(--bg);color:var(--mut)}
.mmdd .md-menu span:first-child{background:var(--blue);color:#fff}
.mmdd .md-lab{font-size:12.5px;font-weight:700;color:var(--mut);letter-spacing:.2px}
.mmdd .md-field{height:46px;border:1.5px solid var(--blue);border-radius:11px;padding:0 13px;display:flex;align-items:center;font-weight:700;font-size:15px;background:var(--bg);overflow:hidden;color:var(--ink)}
.mmdd .md-type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:11em;border-right:2px solid var(--blue)}
.mmdd .md-pub{justify-self:start;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;font-weight:700;font-size:14px;border-radius:50px;padding:10px 20px}
.mmdd .md-lines i{display:block;height:8px;border-radius:99px;background:var(--line);margin-bottom:8px}
.mmdd .md-lines i:nth-child(2){width:70%}
.mmdd .md-live{position:relative;min-height:60px}
.mmdd .md-live b{display:block;font:800 22px/1.2 'Bricolage Grotesque',Arial,sans-serif;color:var(--ink)}
.mmdd .md-new{opacity:1}
.mmdd .md-old{position:absolute;left:0;top:0;opacity:0;color:var(--mut)!important}
.mmdd .md-badge{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:12.5px;font-weight:700;color:#12804a;background:#dff6e8;border-radius:50px;padding:5px 12px}
.mmdd .md-img{height:96px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--cyan))}

.mmdd .md-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;color:var(--navy);border-radius:16px;padding:12px 16px;font-weight:700;font-size:15px;box-shadow:0 20px 40px -16px rgba(10,24,48,.5);animation:mdbob 5s ease-in-out infinite alternate}
.mmdd .md-chip svg{display:block;width:20px;height:20px;max-width:20px;max-height:20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mmdd .md-c1{left:-20px;bottom:0}
.mmdd .md-c2{right:-14px;top:60px;animation-delay:-2s}
@keyframes mdbob{to{transform:translateY(-9px)}}

.mmdd.play .md-type{animation:mdtype 9s steps(19) infinite}
.mmdd.play .md-pub{animation:mdpress 9s infinite}
.mmdd.play .md-new{animation:mdnew 9s infinite}
.mmdd.play .md-old{animation:mdold 9s infinite}
.mmdd.play .md-badge{animation:mdbadge 9s infinite}
@keyframes mdtype{0%{max-width:0}38%,92%{max-width:11em}100%{max-width:0}}
@keyframes mdpress{0%,40%{transform:none;box-shadow:none}44%{transform:scale(.92)}50%,100%{transform:none}}
@keyframes mdnew{0%,48%{opacity:0;transform:translateY(8px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mdold{0%,46%{opacity:1}52%,100%{opacity:0}}
@keyframes mdbadge{0%,52%{opacity:0;transform:scale(.8)}60%,90%{opacity:1;transform:none}100%{opacity:0}}

.mmdd.md-js .md-copy,.mmdd.md-js .md-mockwrap{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.mmdd.md-js .md-mockwrap{transition-delay:.12s}
.mmdd.md-js.md-in .md-copy,.mmdd.md-js.md-in .md-mockwrap{opacity:1;transform:none}

@media(max-width:900px){.mmdd .md-wrap{grid-template-columns:1fr;gap:46px}.mmdd .md-c1{left:8px}.mmdd .md-c2{right:8px}.mmdd{padding:70px 0}}
@media(max-width:560px){.mmdd .md-demo{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mmdd *{animation:none!important;transition:none!important}.mmdd.md-js .md-copy,.mmdd.md-js .md-mockwrap{opacity:1;transform:none}}


.sw-head{max-width:680px;margin-bottom:50px}
.sw-pks{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.sw-pk{background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s,border-color .4s}
.sw-pk:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 34px 56px -34px rgba(10,24,48,.5)}
.sw-pk-h{padding:28px 32px 26px;color:#fff;position:relative;overflow:hidden}
.sw-pk-h::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.16);right:-60px;top:-90px}
.sw-pk-h h3{font-size:28px;position:relative;z-index:1}
.sw-silver{background:linear-gradient(135deg,#8fa0b8,#5c6f8c)}
.sw-gold{background:linear-gradient(135deg,#e8a21b,#b9770a)}
.sw-plat{background:linear-gradient(135deg,#0a1830,#134a8f 70%,#16b8cc)}
.sw-pk-b{padding:30px 32px 34px;display:flex;flex-direction:column;flex:1}
.sw-big{display:flex;align-items:baseline;gap:12px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.sw-big b{font:800 62px/1 'Bricolage Grotesque',Arial,sans-serif;color:var(--blue)}
.sw-big span{color:var(--mut);font-weight:600}
.sw-pk .btn{margin-top:auto;text-align:center}
 
/* tick list inside each package */
.dy-pl{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px}
.dy-pl li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--mut)}
.dy-pl i{flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-top:2px}
.dy-pl svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
 
/* "Every package also includes" box */
.sw-all{margin-top:40px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px 40px}
.sw-all h3{font-size:24px;margin-bottom:20px}
.sw-all ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px}
.sw-all li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.sw-all li i{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-top:1px}
.sw-all li svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
 
/* ---------- responsive ---------- */
@media(max-width:1000px){.sw-pks{grid-template-columns:1fr;max-width:520px}.sw-all ul{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sw-all{padding:28px 22px}.sw-all ul{grid-template-columns:1fr}}
 
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}







/* ---------- dark section ---------- */
.sw-dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.sw-dark::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;left:-200px;top:-220px;background:radial-gradient(circle,rgba(27,116,212,.45),transparent 68%);pointer-events:none}
.sw-dark .w{position:relative}
.sw-dark p{color:#c6d5ea}
.sw-dark p.lead{color:#fff;font-size:21px;line-height:1.55}

/* ---------- comparison cards ---------- */
.dy-cmp{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px}
.dy-col{border-radius:26px;padding:36px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.dy-col.on{background:linear-gradient(135deg,rgba(27,116,212,.6),rgba(22,184,204,.42));border-color:rgba(255,255,255,.45)}
.dy-col h3{font-size:28px;margin-bottom:22px;    color: #fff;}
.dy-col dl{margin:0;display:grid;gap:18px}
.dy-col dt{font-size:14px;font-weight:700;color:#9fe8f2;margin-bottom:3px}
.dy-col dd{margin:0;color:#fff;font-size:17.5px}
.dy-col a{display:inline-block;margin-top:26px;font-weight:700;color:#9fe8f2}
.dy-col.on a{color:#fff}
.dy-col a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media(max-width:800px){.dy-cmp{grid-template-columns:1fr}.dy-col{padding:28px 24px}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}

.static {
    color: #fff !important;
}
/* ---------- website cards ---------- */
.sw-sites{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sw-site{display:block}
.sw-site .fr{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .4s,box-shadow .4s,border-color .4s}
.sw-site:hover .fr{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 28px 44px -30px rgba(10,24,48,.45)}
 
/* browser bar */
.sw-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.sw-bar i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.sw-bar span{margin-left:12px;flex:1;background:var(--bg);border-radius:8px;padding:5px 12px;font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 
/* mini page preview (colours set per card via --pb, --p1, --p2) */
.sw-site .pv{aspect-ratio:16/10;padding:16px;display:grid;gap:9px;align-content:start;background:var(--pb)}
.sw-site .pv .h{aspect-ratio:16/8;border-radius:10px;background:var(--p1);position:relative;overflow:hidden}
.sw-site .pv .h img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:1;display:block}
.sw-site .pv .h::after{z-index:0;content:"";position:absolute;width:36%;aspect-ratio:1;border-radius:50%;background:var(--p2);right:-6%;top:-26%}
.sw-site .pv .l{height:8px;border-radius:99px;background:var(--p1);opacity:.35;width:72%}
.sw-site .pv .l.s{width:46%}
.sw-site .pv .g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw-site .pv .g i{display:block;height:30px;border-radius:8px;background:var(--p2);opacity:.8}
 
/* caption */
.sw-site .cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px 0}
.sw-site .cap b{font:700 19px 'Bricolage Grotesque',Arial,sans-serif}
.sw-site .cap span{color:var(--blue);font-weight:700;font-size:15px;white-space:nowrap}
 
/* ---------- responsive ---------- */
@media(max-width:900px){.sw-sites{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sw-sites{grid-template-columns:1fr}}
 
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}

.sw-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.sw-copy p{color:var(--mut);margin-bottom:18px}
.sw-copy p.lead{color:var(--ink);font-size:21px;line-height:1.55}
.sw-ticks{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:13px}
.sw-ticks li{display:flex;gap:14px;align-items:flex-start;font-weight:500}
.sw-ticks i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-top:1px}
.sw-ticks svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sw-btns{display:flex;flex-wrap:wrap;gap:14px}
 
/* ---------- browser mock that fills in ---------- */
.sw-mock-wrap{position:relative;padding:0 0 30px}
.sw-mock{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(10,24,48,.5)}
.sw-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.sw-bar i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.sw-bar span{margin-left:12px;flex:1;background:var(--bg);border-radius:8px;padding:5px 12px;font-size:13px;color:var(--mut)}
.sw-canvas{padding:22px;display:grid;gap:20px}
.sw-mock .sk{background:#dbe3ee;border-radius:8px}
.sw-mock.in .sk{animation:swfill .8s var(--d,0s) both cubic-bezier(.2,.7,.2,1)}
@keyframes swfill{from{background:#dbe3ee;transform:scaleX(.9);opacity:.6}to{background:var(--c);transform:none;opacity:1}}
 
.sw-nv{display:flex;align-items:center;gap:14px}
.sw-nv .lg{width:80px;height:20px;--c:var(--navy)}
.sw-nv .ln{width:38px;height:8px;--c:#9fb0c8}
.sw-nv .swsp{flex:1}
.sw-nv .bt{width:72px;height:26px;--c:var(--blue);border-radius:99px}
.sw-hr{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center}
.sw-hr .t1{height:22px;width:96%;margin-bottom:9px;--c:var(--navy)}
.sw-hr .t2{height:22px;width:66%;margin-bottom:16px;--c:var(--navy)}
.sw-hr .p{height:8px;width:90%;margin-bottom:7px;--c:#9fb0c8}
.sw-hr .b{height:30px;width:112px;margin-top:14px;--c:var(--blue);border-radius:99px}
.sw-hr .im{aspect-ratio:1/.9;border-radius:16px;--c:linear-gradient(135deg,var(--blue),var(--cyan))}
.sw-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sw-row .cd{height:64px;border-radius:12px;--c:#e2edf9}
 
/* floating chips */
.sw-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;color:var(--navy);border-radius:16px;padding:12px 16px;font-weight:700;font-size:15px;box-shadow:0 20px 40px -16px rgba(10,24,48,.5);animation:swbob 5s ease-in-out infinite alternate}
.sw-chip svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw-c1{left:-20px;bottom:0}
.sw-c2{right:-14px;top:60px;animation-delay:-2s}
@keyframes swbob{to{transform:translateY(-9px)}}
 
/* ---------- responsive ---------- */
@media(max-width:900px){
  .sw-grid2{grid-template-columns:1fr;gap:46px}
  .sw-c1{left:8px}.sw-c2{right:8px}
}
 
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  .sw-mock .sk{background:var(--c)!important}
}

.sw-ben{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sw-4{display:grid;grid-template-columns:repeat(4,1fr)}
.sw-b{padding:6px 30px;border-left:1px solid var(--line)}
.sw-b:first-child{border-left:0;padding-left:0}
.sw-b i{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--cyan));margin-bottom:20px}
.sw-b svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sw-b h3{font-size:23px;margin-bottom:10px}
.sw-b p{color:var(--mut);font-size:16.5px}
 
/* ---------- responsive ---------- */
@media(max-width:1000px){.sw-4{grid-template-columns:1fr 1fr;row-gap:42px}.sw-b:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:560px){.sw-4{grid-template-columns:1fr}.sw-b,.sw-b:first-child{border-left:0;padding:0}}
 
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}
 
/* ---------- package cards ---------- */
.sw-pks{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.sw-pk{background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s,border-color .4s}
.sw-pk:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 34px 56px -34px rgba(10,24,48,.5)}
.sw-pk-h{padding:28px 32px 26px;color:#fff;position:relative;overflow:hidden}
.sw-pk-h::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.16);right:-60px;top:-90px}
.sw-pk-h h3{font-size:28px;position:relative;z-index:1}
.sw-silver{background:linear-gradient(135deg,#8fa0b8,#5c6f8c)}
.sw-gold{background:linear-gradient(135deg,#e8a21b,#b9770a)}
.sw-plat{background:linear-gradient(135deg,#0a1830,#134a8f 70%,#16b8cc)}
.sw-pk-b{padding:30px 32px 34px;display:flex;flex-direction:column;flex:1}
.sw-big{display:flex;align-items:baseline;gap:12px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.sw-big b{font:800 62px/1 'Bricolage Grotesque',Arial,sans-serif;color:var(--blue)}
.sw-big span{color:var(--mut);font-weight:600}
 
/* numbers list: 2 email IDs, 10 search engine submissions... */
.sw-pl{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.sw-pl li{display:flex;gap:12px;align-items:baseline;color:var(--mut)}
.sw-pl li b{flex:none;min-width:34px;font:800 24px 'Bricolage Grotesque',Arial,sans-serif;color:var(--ink)}
.sw-pk .btn{margin-top:auto;text-align:center}
 
/* ---------- "Every package includes" box ---------- */
.sw-all{margin-top:40px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px 40px}
.sw-all h3{font-size:24px;margin-bottom:20px}
.sw-all ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px}
.sw-all li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.sw-all li i{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-top:1px}
.sw-all li svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
 
/* ---------- responsive ---------- */
@media(max-width:1000px){.sw-pks{grid-template-columns:1fr;max-width:520px}.sw-all ul{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sw-all{padding:28px 22px}.sw-all ul{grid-template-columns:1fr}}
 
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}


/* ---------- two-column layout ---------- */
.sw-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
 
/* ---------- dark section ---------- */
.sw-dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.sw-dark::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;left:-200px;top:-220px;background:radial-gradient(circle,rgba(27,116,212,.45),transparent 68%);pointer-events:none}
.sw-dark .w{position:relative}
.sw-dark p{color:#c6d5ea;margin-bottom:18px}
.sw-dark p.lead{color:#fff;font-size:21px;line-height:1.55}
 
/* ---------- glass help card ---------- */
.sw-help{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:28px;padding:36px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sw-help h3{font-size:26px;margin-bottom:10px}
.sw-help p{margin-bottom:22px}
.sw-help .row{display:flex;flex-wrap:wrap;gap:12px}
.sw-help a.more{display:inline-block;margin-top:24px;color:#9fe8f2;font-weight:700}
.sw-help a.more:hover{text-decoration:underline}
 
/* ---------- responsive ---------- */
@media(max-width:900px){.sw-grid2{grid-template-columns:1fr;gap:46px}}
@media(max-width:560px){.sw-help{padding:28px 22px}}
 
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}
 /* Fix: theme heading colour override on the dark section */
#choose.sw-dark h2,
#choose.sw-dark h3,
#choose .sw-help h3{
  color:#fff !important;
  text-transform:none !important;
  letter-spacing:-.02em;
}
#choose.sw-dark p{color:#c6d5ea !important}
#choose.sw-dark p.lead{color:#fff !important}
#choose .sw-help a.more{color:#9fe8f2 !important}

/* Call button: outlined style as in the original design */
#choose .btn.o{
  background:none !important;
  border:2px solid #16b8cc !important;
  box-shadow:none !important;
  color:#fff !important;
}
section.swx{
  width:100vw;
  position:relative;
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.coming-text {
    display: flex;
    justify-content: center;
    font-size: -webkit-xxx-large;
    color: #0a1830;
    padding: 10px 0px;
}






#mega-menu-wrap-top-navigation #mega-menu-top-navigation > li.mega-menu-item {
    margin: 4px 41px 0px 0;
    display: inline-block;
    height: auto;
    vertical-align: middle;
}

#mega-menu-wrap-top-navigation #mega-menu-top-navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard > a.mega-menu-link, #mega-menu-wrap-top-navigation #mega-menu-top-navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: #1893d0;
    font-family: inherit;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    vertical-align: top;
    display: block;
    border: 0;
}

#mega-menu-wrap-top-navigation #mega-menu-top-navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-top-navigation #mega-menu-top-navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
    color: #000000;
    font-family: inherit;
    font-size: 14px;
    text-transform: none;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    vertical-align: top;
    display: block;
    border: 0;
}


























/* sacrificial rule: absorbs any broken CSS pasted just above */
.ecx-sink{color:inherit}

/* ===== E-commerce hero (theme-proof, all classes start with ecx) ===== */
html body .ecx{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #f5f8fe;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ecx *,
html body .ecx *::before,
html body .ecx *::after{
  box-sizing: border-box;
}

html body .ecx br,
html body .ecx p:empty{
  display: none !important;
}

html body .ecx .ecx-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* ---------- Left content ---------- */
html body .ecx h1{
  font: 700 clamp(38px, 4.6vw, 60px) / 1.1 "DM Sans", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  max-width: 520px;
  margin: 0 0 26px !important;
  padding: 0 !important;
}

html body .ecx p{
  padding: 0 !important;
  text-transform: none !important;
  max-width: 540px;
}

html body .ecx p.ecx-lead{
  font-size: 22px !important;
  line-height: 1.5 !important;
  color: #0b1b34 !important;
  margin: 0 0 20px !important;
}

html body .ecx p.ecx-text{
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #5a6a85 !important;
  margin: 0 0 16px !important;
}

/* ---------- Checklist ---------- */
html body .ecx ul.ecx-list{
  list-style: none !important;
  margin: 26px 0 34px !important;
  padding: 0 !important;
  display: grid;
  gap: 6px;
}

html body .ecx ul.ecx-list li{
  list-style: none !important;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 0 -12px !important;
  padding: 8px 12px !important;
  font-size: 17px;
  font-weight: 500;
  color: #0b1b34;
  border-radius: 12px;
  transition: background 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ecx ul.ecx-list li::before,
html body .ecx ul.ecx-list li::after{
  content: none !important;
  display: none !important;
}

html body .ecx .ecx-tick{
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ecx .ecx-tick svg{
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .ecx ul.ecx-list li:hover{
  background: #fff;
  transform: translateX(6px);
}

html body .ecx ul.ecx-list li:hover .ecx-tick{
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 0 6px 14px rgba(26, 115, 209, 0.35);
}

/* ---------- Buttons ---------- */
html body .ecx .ecx-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

html body .ecx a.ecx-btn{
  display: inline-block !important;
  padding: 17px 34px !important;
  border-radius: 999px !important;
  font: 700 17px/1.2 "DM Sans", Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.25s, color 0.25s;
}

html body .ecx a.ecx-btn--primary{
  background: linear-gradient(135deg, #1a73d1, #14b8cc) !important;
  color: #fff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 8px 20px rgba(26, 115, 209, 0.25);
}

html body .ecx a.ecx-btn--primary:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 115, 209, 0.4);
}

html body .ecx a.ecx-btn--outline{
  background: transparent !important;
  color: #1a73d1 !important;
  border: 2px solid #1a73d1 !important;
  box-shadow: none;
}

html body .ecx a.ecx-btn--outline:hover{
  background: #1a73d1 !important;
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 115, 209, 0.25);
}

/* ---------- Right: store mockup ---------- */
html body .ecx .ecx-visual{
  position: relative;
  padding: 30px 0 60px;
  min-width: 0;
}

html body .ecx .ecx-store{
  background: #fff;
  border: 1px solid #dde5f1;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(11, 27, 52, 0.08);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ecx .ecx-visual:hover .ecx-store{
  transform: translateY(-6px);
  box-shadow: 0 40px 80px rgba(26, 115, 209, 0.18);
}

html body .ecx .ecx-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid #dde5f1;
}

html body .ecx .ecx-dot{
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: #d6dded;
}

html body .ecx .ecx-url{
  flex: 1;
  margin-left: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #f5f8fe;
  font-size: 14px;
  color: #5a6a85;
}

html body .ecx .ecx-ring{
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #14b8cc;
  display: grid;
  place-items: center;
}

html body .ecx .ecx-ring i{
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14b8cc;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ecx .ecx-ring:hover i{
  transform: scale(1.8);
}

html body .ecx .ecx-body{
  padding: 24px 22px 32px;
}

html body .ecx .ecx-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}

html body .ecx .ecx-logo{
  display: block;
  width: 90px;
  height: 20px;
  border-radius: 8px;
  background: #0b1b34;
}

html body .ecx .ecx-cart{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef2f9;
  display: grid;
  place-items: center;
  transition: background 0.25s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ecx .ecx-cart svg{
  display: block;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: #0b1b34;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .ecx .ecx-cart:hover{
  background: #1a73d1;
  transform: scale(1.1);
}

html body .ecx .ecx-cart:hover svg{
  stroke: #fff;
}

html body .ecx .ecx-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

html body .ecx .ecx-product{
  background: #f7f9fe;
  border: 1px solid #dde5f1;
  border-radius: 16px;
  padding: 10px 10px 14px;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s;
}

html body .ecx .ecx-product:hover{
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 18px 30px rgba(11, 27, 52, 0.12);
}

html body .ecx .ecx-img{
  aspect-ratio: 1 / 0.95;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ecx .ecx-product:hover .ecx-img{
  transform: scale(1.04);
}

html body .ecx .ecx-img--orange { background: linear-gradient(135deg, #ffab1f, #ff7a3d); }
html body .ecx .ecx-img--blue { background: linear-gradient(135deg, #1b78d4, #16b4cc); }
html body .ecx .ecx-img--purple { background: linear-gradient(135deg, #8b5cf6, #5b36c4); }

html body .ecx .ecx-line{
  display: block;
  height: 8px;
  border-radius: 6px;
  background: #dfe6f2;
}

html body .ecx .ecx-line--long{
  width: 90%;
  margin-bottom: 14px;
}

html body .ecx .ecx-line--price{
  width: 34px;
  height: 10px;
  background: #4a566b;
}

html body .ecx .ecx-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html body .ecx .ecx-add{
  display: inline-block;
  border: 0 !important;
  cursor: pointer;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: #1a73d1 !important;
  color: #fff !important;
  font: 700 13px/1.2 "DM Sans", Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s, box-shadow 0.2s;
}

html body .ecx .ecx-add:hover{
  background: #0b1b34 !important;
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(11, 27, 52, 0.3);
}

html body .ecx .ecx-add:active{
  transform: scale(0.96);
}

/* ---------- Floating badges ---------- */
html body .ecx .ecx-badge{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #0b1b34;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(11, 27, 52, 0.1);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ecx .ecx-badge svg{
  display: block;
  flex: none;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: #1a73d1;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .ecx .ecx-badge:hover{
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 18px 36px rgba(26, 115, 209, 0.25);
}

html body .ecx .ecx-badge--payments { top: 18px; right: -12px; }
html body .ecx .ecx-badge--mobile { bottom: 20px; left: -20px; }
html body .ecx .ecx-badge--paid { bottom: 0; left: 28%; color: #1c8a4d; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .ecx { padding: 60px 0; }
  html body .ecx .ecx-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html body .ecx .ecx-badge--payments { right: 8px; }
  html body .ecx .ecx-badge--mobile { left: 8px; }
}

@media (max-width: 520px) {
  html body .ecx .ecx-grid { gap: 10px; }
  html body .ecx .ecx-add { padding: 6px 10px !important; }
  html body .ecx .ecx-badge { font-size: 13px; padding: 10px 14px; }
  html body .ecx a.ecx-btn { width: 100%; text-align: center; }
}

html body .ecx a.ecx-btn:focus-visible,
html body .ecx .ecx-add:focus-visible{
  outline: 3px solid #14b8cc;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html body .ecx *, html body .ecx *::before, html body .ecx *::after { transition: none !important; }
}














section.wc{--wc-navy:#0b1b3a;--wc-text:#4a5878;--wc-blue:#1b6fd0;--wc-teal:#14b5cc;padding:70px 0;background:#f5f8fd;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#4a5878;display:block;width:100%;clear:both}
section.wc *,section.wc *::before,section.wc *::after{box-sizing:border-box}
section.wc .wc-w{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}

section.wc .wc-txt h2.wc-title{margin:0 0 22px;padding:0;font-size:clamp(34px,4.6vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.5px;color:#0b1b3a;text-transform:none}
section.wc .wc-txt p{margin:0 0 18px;max-width:500px;font-size:16.5px;line-height:1.7;color:#4a5878}
section.wc .wc-txt p.wc-lead{font-size:20px;line-height:1.55;color:#0b1b3a;margin-bottom:20px}

section.wc ul.wc-list{list-style:none;margin:24px 0 32px;padding:0}
section.wc ul.wc-list li{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:0;font-size:17px;line-height:1.4;color:#0b1b3a;list-style:none}
section.wc ul.wc-list li::before,section.wc ul.wc-list li::marker{content:none}
section.wc .wc-ck{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#1b6fd0,#14b5cc);display:flex;align-items:center;justify-content:center}
section.wc .wc-ck svg{width:14px;height:14px;display:block}

section.wc .wc-btns{display:flex;flex-wrap:wrap;gap:14px}
section.wc a.wc-btn{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 30px;border-radius:40px;font-size:17px;font-weight:700;text-decoration:none;transition:transform .2s ease}
section.wc a.wc-btn-p{color:#fff;background:linear-gradient(90deg,#1b6fd0,#14b5cc);box-shadow:0 10px 24px rgba(27,111,208,.28);border:0}
section.wc a.wc-btn-o{color:#1b6fd0;background:transparent;border:1.5px solid #1b6fd0}
section.wc a.wc-btn:hover{transform:translateY(-2px)}

section.wc .wc-vis{position:relative;padding:20px 0 30px}
section.wc .wc-card{background:#fff;border:1px solid #dbe5f3;border-radius:26px;padding:26px 22px 18px;box-shadow:0 24px 50px rgba(20,50,100,.1)}
section.wc .wc-card svg{display:block;width:100%;height:auto}

section.wc .wc-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:13px 18px;background:#fff;border-radius:16px;font-size:15px;font-weight:700;color:#0b1b3a;box-shadow:0 14px 30px rgba(20,50,100,.15);white-space:nowrap}
section.wc .wc-chip svg{width:20px;height:20px;display:block}
section.wc .wc-chip-ssl{top:60px;right:-10px}
section.wc .wc-chip-cache{bottom:0;left:-22px}

@media (max-width:991px){
  section.wc{padding:50px 0}
  section.wc .wc-w{grid-template-columns:1fr;gap:40px}
  section.wc .wc-txt p{max-width:none}
  section.wc .wc-chip-ssl{right:0}
  section.wc .wc-chip-cache{left:0}
}
@media (max-width:480px){
  section.wc a.wc-btn{flex:1 1 100%}
  section.wc .wc-chip{font-size:13px;padding:10px 14px}
}









section.ft{display:block;width:100%;clear:both;box-sizing:border-box;padding:80px 20px;background:#fff;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#4a5878}
section.ft *,section.ft *::before,section.ft *::after{box-sizing:border-box}
section.ft .ft-w{max-width:1040px;margin:0 auto}

/* Heading */
section.ft h2.ft-title{margin:0 0 22px !important;padding:0;max-width:620px;font-size:clamp(34px,4.6vw,56px) !important;line-height:1.1 !important;font-weight:800 !important;letter-spacing:-.5px;color:#0b1b3a !important;text-transform:none !important}
section.ft p.ft-sub{margin:0 0 56px !important;font-size:17px;line-height:1.5;color:#4a5878}

/* Grid */
section.ft .ft-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:54px;row-gap:0}
section.ft .ft-item{display:flex;align-items:flex-start;gap:18px;padding:26px 0 28px;border-bottom:1px solid #dbe5f3}

/* Icon */
section.ft .ft-ic{flex:0 0 49px;width:49px;height:49px;border-radius:14px;background:linear-gradient(135deg,#1b6fd0,#14b5cc);display:flex;align-items:center;justify-content:center}
section.ft .ft-ic svg{display:block;width:22px;height:22px}

/* Text */
section.ft .ft-tx{flex:1;min-width:0}
section.ft .ft-tx h3{margin:0 0 6px !important;padding:0;font-size:20px !important;line-height:1.25 !important;font-weight:700 !important;color:#0b1b3a !important;text-transform:none !important;letter-spacing:0}
section.ft .ft-tx p{margin:0 !important;font-size:15.5px;line-height:1.55;color:#4a5878}
section.ft a.ft-link{display:inline-block;margin-top:6px;font-size:15.5px;font-weight:700;color:#1b6fd0;text-decoration:none}
section.ft a.ft-link span{display:inline-block;margin-left:2px;transition:transform .2s ease}
section.ft a.ft-link:hover span{transform:translateX(4px)}

/* Mobile */
@media (max-width:767px){
  section.ft{padding:55px 20px}
  section.ft .ft-grid{grid-template-columns:1fr}
  section.ft p.ft-sub{margin-bottom:34px !important}
}










section.sp{display:block;width:100%;clear:both;box-sizing:border-box;padding:90px 20px 100px;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;background:radial-gradient(circle at 5% 15%,rgba(20,90,170,.75) 0,rgba(20,90,170,0) 32%),#0a1830;overflow:hidden}
section.sp *,section.sp *::before,section.sp *::after{box-sizing:border-box}
section.sp .sp-w{max-width:1040px;margin:0 auto}

/* Heading */
section.sp h2.sp-title{margin:0 0 24px !important;padding:0;max-width:640px;font-size:clamp(34px,4.6vw,56px) !important;line-height:1.1 !important;font-weight:800 !important;letter-spacing:-.5px;color:#fff !important;text-transform:none !important}
section.sp p.sp-intro{margin:0 0 56px !important;max-width:690px;font-size:19px;line-height:1.55;color:#fff}

/* Cards */
section.sp .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
section.sp .sp-card{padding:32px 30px 36px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18)}

/* Icon box */
section.sp .sp-ic{display:flex;align-items:center;justify-content:center;width:57px;height:57px;margin-bottom:26px;border-radius:16px;background:#2e3c6b}
section.sp .sp-ic svg{display:block;width:24px;height:24px}

/* Card text */
section.sp .sp-card h3{margin:0 0 12px !important;padding:0;font-size:23px !important;line-height:1.2 !important;font-weight:700 !important;color:#fff !important;text-transform:none !important;letter-spacing:0}
section.sp .sp-card p{margin:0 !important;font-size:16px;line-height:1.65;color:#b9c7e0}

/* Tablet */
@media (max-width:991px){
  section.sp{padding:70px 20px 80px}
  section.sp .sp-grid{grid-template-columns:1fr 1fr}
}

/* Mobile */
@media (max-width:640px){
  section.sp .sp-grid{grid-template-columns:1fr}
  section.sp p.sp-intro{margin-bottom:36px !important;font-size:17px}
}










section.cta{display:block;width:100%;clear:both;box-sizing:border-box;padding:80px 20px;background:#f5f8fd;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
section.cta *,section.cta *::before,section.cta *::after{box-sizing:border-box}

section.cta .cta-box{position:relative;overflow:hidden;max-width:1040px;margin:0 auto;padding:52px 50px 50px;border-radius:30px;background:linear-gradient(120deg,#134a8e 0%,#1b72d4 52%,#14b5cc 100%);color:#fff}
section.cta .cta-circle{position:absolute;top:-60px;right:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.18);pointer-events:none}
section.cta .cta-in{position:relative;z-index:1}

section.cta h2.cta-title{margin:0 0 18px !important;padding:0;max-width:680px;font-size:clamp(32px,4.4vw,52px) !important;line-height:1.1 !important;font-weight:800 !important;letter-spacing:-.5px;color:#fff !important;text-transform:none !important}
section.cta p.cta-text{margin:0 0 30px !important;max-width:480px;font-size:17px;line-height:1.55;color:#fff !important}

section.cta .cta-btns{display:flex;flex-wrap:wrap;gap:14px}
section.cta a.cta-btn{display:inline-flex;align-items:center;justify-content:center;height:55px;padding:0 28px;border-radius:40px;font-size:16.5px;font-weight:700;text-decoration:none !important;transition:transform .2s ease}
section.cta a.cta-btn-w{background:#fff;color:#0f3f7d !important}
section.cta a.cta-btn-o{background:transparent;color:#fff !important;border:1px solid rgba(255,255,255,.6)}
section.cta a.cta-btn:hover{transform:translateY(-2px)}

@media (max-width:767px){
  section.cta{padding:50px 16px}
  section.cta .cta-box{padding:36px 24px}
  section.cta .cta-circle{width:200px;height:200px;top:-50px;right:-50px}
  section.cta a.cta-btn{flex:1 1 100%}
}







/* ===== Works well with (theme-proof, prefix eww) ===== */
.eww-sink{color:inherit}

html body .eww{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #ffffff;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .eww *,
html body .eww *::before,
html body .eww *::after{
  box-sizing: border-box;
}

html body .eww br,
html body .eww p:empty{
  display: none !important;
}

html body .eww .eww-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .eww .eww-head{
  max-width: 640px;
  margin-bottom: 52px;
}

html body .eww h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .eww p.eww-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Cards ---------- */
html body .eww .eww-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

html body .eww a.eww-card{
  position: relative;
  display: block !important;
  overflow: hidden;
  padding: 34px 26px 30px !important;
  background: #ffffff;
  border: 1px solid #dde5f1 !important;
  border-radius: 28px;
  text-decoration: none !important;
  color: #0b1b34 !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease;
}

/* gradient bar that grows across the top on hover */
html body .eww a.eww-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eww h3{
  font: 800 22px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .eww a.eww-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #5a6a85 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  max-width: none;
}

html body .eww .eww-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 16px / 1.2 "DM Sans", Arial, sans-serif;
  color: #1a73d1;
  transition: gap 0.3s ease;
}

html body .eww .eww-more svg{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  fill: none !important;
  stroke: #1a73d1 !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Hover / keyboard focus ---------- */
html body .eww a.eww-card:hover,
html body .eww a.eww-card:focus-visible{
  transform: translateY(-8px);
  border-color: #1a73d1 !important;
  box-shadow: 0 26px 44px -26px rgba(11, 27, 52, 0.35);
  outline: none;
}

html body .eww a.eww-card:hover::before,
html body .eww a.eww-card:focus-visible::before{
  transform: scaleX(1);
}

html body .eww a.eww-card:hover h3,
html body .eww a.eww-card:focus-visible h3{
  color: #1a73d1 !important;
}

html body .eww a.eww-card:hover .eww-more,
html body .eww a.eww-card:focus-visible .eww-more{
  gap: 14px;
}

html body .eww a.eww-card:hover .eww-more svg,
html body .eww a.eww-card:focus-visible .eww-more svg{
  transform: translateX(4px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  html body .eww .eww-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  html body .eww { padding: 60px 0; }
  html body .eww .eww-head { margin-bottom: 36px; }
  html body .eww .eww-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .eww *, html body .eww *::before, html body .eww *::after { transition: none !important; }
}









/* ===== OpenCart section (theme-proof, prefix eoc) ===== */
.eoc-sink{color:inherit}

html body .eoc{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #f5f8fe;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .eoc *,
html body .eoc *::before,
html body .eoc *::after{
  box-sizing: border-box;
}

html body .eoc br,
html body .eoc p:empty{
  display: none !important;
}

html body .eoc .eoc-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* ---------- Left content ---------- */
html body .eoc h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  max-width: 560px;
  margin: 0 0 26px !important;
  padding: 0 !important;
}

html body .eoc p{
  padding: 0 !important;
  text-transform: none !important;
  max-width: 560px;
  font-family: "DM Sans", Arial, sans-serif;
}

html body .eoc p.eoc-lead{
  font-size: 21px !important;
  line-height: 1.5 !important;
  color: #0b1b34 !important;
  margin: 0 0 18px !important;
}

html body .eoc p.eoc-text{
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #5a6a85 !important;
  margin: 0 0 16px !important;
}

/* ---------- Checklist ---------- */
html body .eoc ul.eoc-list{
  list-style: none !important;
  margin: 22px 0 32px !important;
  padding: 0 !important;
  display: grid;
  gap: 4px;
}

html body .eoc ul.eoc-list li{
  list-style: none !important;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 0 -12px !important;
  padding: 7px 12px !important;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #0b1b34;
  border-radius: 12px;
  transition: background 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoc ul.eoc-list li::before,
html body .eoc ul.eoc-list li::after{
  content: none !important;
  display: none !important;
}

html body .eoc .eoc-tick{
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoc .eoc-tick svg{
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .eoc ul.eoc-list li:hover{
  background: #fff;
  transform: translateX(6px);
}

html body .eoc ul.eoc-list li:hover .eoc-tick{
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 0 6px 14px rgba(26, 115, 209, 0.35);
}

/* ---------- Buttons ---------- */
html body .eoc .eoc-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

html body .eoc a.eoc-btn{
  display: inline-block !important;
  padding: 17px 34px !important;
  border-radius: 999px !important;
  font: 700 17px/1.2 "DM Sans", Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.25s, color 0.25s;
}

html body .eoc a.eoc-btn--primary{
  background: linear-gradient(135deg, #1a73d1, #14b8cc) !important;
  color: #fff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 8px 20px rgba(26, 115, 209, 0.25);
}

html body .eoc a.eoc-btn--primary:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 115, 209, 0.4);
}

html body .eoc a.eoc-btn--outline{
  background: transparent !important;
  color: #1a73d1 !important;
  border: 2px solid #1a73d1 !important;
  box-shadow: none;
}

html body .eoc a.eoc-btn--outline:hover{
  background: #1a73d1 !important;
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 115, 209, 0.25);
}

/* ---------- Right: admin panel mockup ---------- */
html body .eoc .eoc-visual{
  min-width: 0;
  padding: 10px 0 30px;
}

html body .eoc .eoc-panel{
  background: #fff;
  border: 1px solid #dde5f1;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(11, 27, 52, 0.1);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoc .eoc-visual:hover .eoc-panel{
  transform: translateY(-6px);
  box-shadow: 0 40px 80px rgba(26, 115, 209, 0.18);
}

html body .eoc .eoc-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid #dde5f1;
}

html body .eoc .eoc-dot{
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: #d6dded;
}

html body .eoc .eoc-url{
  flex: 1;
  margin-left: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #f5f8fe;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  color: #5a6a85;
}

html body .eoc .eoc-body{
  padding: 22px 18px 24px;
}

html body .eoc .eoc-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 4px 18px;
}

html body .eoc .eoc-title{
  font: 800 22px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif;
  color: #0b1b34;
}

html body .eoc .eoc-new{
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: #1a73d1;
  color: #fff;
  font: 700 13px / 1.2 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s, box-shadow 0.2s;
}

html body .eoc .eoc-new:hover{
  background: #0b1b34;
  transform: scale(1.08);
  box-shadow: 0 8px 16px rgba(11, 27, 52, 0.3);
}

html body .eoc .eoc-rows{
  display: grid;
  gap: 12px;
}

html body .eoc .eoc-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  background: #f7f9fe;
  border: 1px solid #dde5f1;
  border-radius: 16px;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s, border-color 0.3s;
}

html body .eoc .eoc-row:hover{
  transform: translateX(8px);
  background: #fff;
  border-color: #1a73d1;
  box-shadow: 0 14px 26px -14px rgba(26, 115, 209, 0.45);
}

html body .eoc .eoc-av{
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoc .eoc-row:hover .eoc-av{
  transform: scale(1.15);
}

html body .eoc .eoc-av--blue{ background: linear-gradient(135deg, #1b78d4, #16b4cc); }
html body .eoc .eoc-av--orange{ background: linear-gradient(135deg, #ffab1f, #ff7a3d); }
html body .eoc .eoc-av--purple{ background: linear-gradient(135deg, #8b5cf6, #5b36c4); }

html body .eoc .eoc-lines{
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 8px;
}

html body .eoc .eoc-ln{
  display: block;
  height: 7px;
  border-radius: 6px;
  background: #4a566b;
  width: 78%;
}

html body .eoc .eoc-ln--light{
  height: 7px;
  background: #dfe6f2;
  width: 52%;
}

html body .eoc .eoc-price{
  flex: none;
  display: block;
  width: 50px;
  height: 9px;
  border-radius: 6px;
  background: #4a566b;
}

html body .eoc .eoc-pill{
  flex: none;
  min-width: 82px;
  text-align: center;
  padding: 6px 14px;
  border-radius: 999px;
  font: 700 12px / 1.2 "DM Sans", Arial, sans-serif;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoc .eoc-row:hover .eoc-pill{
  transform: scale(1.1);
}

html body .eoc .eoc-pill--green{ background: #dff5e6; color: #1a7f45; }
html body .eoc .eoc-pill--blue{ background: #e3edfd; color: #1a56c4; }
html body .eoc .eoc-pill--yellow{ background: #fdf0cf; color: #a56a00; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .eoc { padding: 60px 0; }
  html body .eoc .eoc-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 520px) {
  html body .eoc .eoc-price { display: none; }
  html body .eoc .eoc-pill { min-width: 0; padding: 6px 10px; }
  html body .eoc a.eoc-btn { width: 100%; text-align: center; }
}

html body .eoc a.eoc-btn:focus-visible{
  outline: 3px solid #14b8cc;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html body .eoc *, html body .eoc *::before, html body .eoc *::after { transition: none !important; }
}




.eoi-sink{color:inherit}

html body .eoi{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 80px 0;
  background: #ffffff;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .eoi *,
html body .eoi *::before,
html body .eoi *::after{
  box-sizing: border-box;
}

html body .eoi br,
html body .eoi p:empty{
  display: none !important;
}

html body .eoi .eoi-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}

/* ---------- Left dark card ---------- */
html body .eoi .eoi-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 42px;
  border-radius: 36px;
  background: linear-gradient(135deg, #0b1b34 0%, #134a8f 62%, #2bb5cf 100%);
  color: #ffffff;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoi .eoi-hero::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  right: -90px;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoi .eoi-hero:hover{
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -30px rgba(19, 74, 143, 0.6);
}

html body .eoi .eoi-hero:hover::after{
  transform: scale(1.25) translate(-12px, -12px);
}

html body .eoi h2{
  font: 800 clamp(32px, 3.8vw, 48px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body .eoi p.eoi-lead{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: #e3eefc !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  max-width: 440px;
}

html body .eoi a.eoi-btn{
  align-self: flex-start;
  display: inline-block !important;
  padding: 16px 28px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0a3a7a !important;
  border: 2px solid #ffffff !important;
  font: 700 17px/1.2 "DM Sans", Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.25s, color 0.25s;
}

html body .eoi a.eoi-btn:hover{
  background: transparent !important;
  color: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}

html body .eoi a.eoi-btn:focus-visible{
  outline: 3px solid #14b8cc;
  outline-offset: 3px;
}

/* ---------- Right: 4 feature cards ---------- */
html body .eoi .eoi-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

html body .eoi .eoi-card{
  position: relative;
  overflow: hidden;
  padding: 26px 26px 28px;
  background: #ffffff;
  border: 1px solid #dde5f1;
  border-radius: 30px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease;
}

html body .eoi .eoi-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoi .eoi-ico{
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eoi .eoi-ico svg{
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .eoi h3{
  font: 800 21px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .eoi .eoi-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
}

/* ---------- Card hover ---------- */
html body .eoi .eoi-card:hover{
  transform: translateY(-8px);
  border-color: #1a73d1;
  box-shadow: 0 26px 44px -28px rgba(11, 27, 52, 0.4);
}

html body .eoi .eoi-card:hover::before{
  transform: scaleX(1);
}

html body .eoi .eoi-card:hover .eoi-ico{
  transform: translateY(-4px) rotate(-8deg) scale(1.1);
  box-shadow: 0 12px 22px rgba(26, 115, 209, 0.4);
}

html body .eoi .eoi-card:hover h3{
  color: #1a73d1 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  html body .eoi .eoi-in { grid-template-columns: minmax(0, 1fr); }
  html body .eoi .eoi-hero { padding: 38px 32px; }
}

@media (max-width: 560px) {
  html body .eoi { padding: 56px 0; }
  html body .eoi .eoi-cards { grid-template-columns: minmax(0, 1fr); }
  html body .eoi a.eoi-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html body .eoi *, html body .eoi *::before, html body .eoi *::after { transition: none !important; }
}




/* ===== Why choose us for OpenCart (theme-proof, prefix eow) ===== */
.eow-sink{color:inherit}

html body .eow{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 80px 0 90px;
  background: #0a1830;
  color: #ffffff;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
  isolation: isolate;
}

/* soft blue glow in the top-left corner */
html body .eow::before{
  content: "";
  position: absolute;
  z-index: -1;
  width: 640px;
  height: 640px;
  left: -220px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 116, 212, 0.5), transparent 68%);
  pointer-events: none;
}

html body .eow *,
html body .eow *::before,
html body .eow *::after{
  box-sizing: border-box;
}

html body .eow br,
html body .eow p:empty{
  display: none !important;
}

html body .eow .eow-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .eow .eow-head{
  max-width: 700px;
  margin-bottom: 52px;
}

html body .eow h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
  max-width: 560px;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .eow p.eow-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 640px;
}

/* ---------- 3 cards ---------- */
html body .eow .eow-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

html body .eow .eow-card{
  position: relative;
  overflow: hidden;
  padding: 32px 30px 34px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.4s ease, background 0.4s ease;
}

/* gradient bar that grows across the top on hover */
html body .eow .eow-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .eow .eow-ico{
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border-radius: 18px;
  background: rgba(130, 150, 255, 0.22);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.35s ease;
}

html body .eow .eow-ico svg{
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  fill: none !important;
  stroke: #9fe0f5 !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

html body .eow h3{
  font: 800 24px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .eow .eow-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #b8c8df !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
}

/* ---------- Hover ---------- */
html body .eow .eow-card:hover{
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.11);
  border-color: #14b8cc;
  box-shadow: 0 30px 50px -28px rgba(20, 184, 204, 0.5);
}

html body .eow .eow-card:hover::before{
  transform: scaleX(1);
}

html body .eow .eow-card:hover .eow-ico{
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  transform: translateY(-4px) rotate(-8deg) scale(1.08);
  box-shadow: 0 14px 26px rgba(20, 184, 204, 0.4);
}

html body .eow .eow-card:hover .eow-ico svg{
  stroke: #ffffff !important;
}

html body .eow .eow-card:hover h3{
  color: #9fe8f2 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .eow .eow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  html body .eow { padding: 56px 0 64px; }
  html body .eow .eow-head { margin-bottom: 36px; }
  html body .eow .eow-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .eow *, html body .eow *::before, html body .eow *::after { transition: none !important; }
}


/* ===== Works well with, light version (theme-proof, prefix ewl) ===== */
.ewl-sink{color:inherit}

html body .ewl{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 80px 0 90px;
  background: #f5f8fe;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ewl *,
html body .ewl *::before,
html body .ewl *::after{
  box-sizing: border-box;
}

html body .ewl br,
html body .ewl p:empty{
  display: none !important;
}

html body .ewl .ewl-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ewl .ewl-head{
  max-width: 640px;
  margin-bottom: 52px;
}

html body .ewl h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .ewl p.ewl-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Cards ---------- */
html body .ewl .ewl-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

html body .ewl a.ewl-card{
  position: relative;
  display: block !important;
  overflow: hidden;
  padding: 34px 26px 30px !important;
  background: #ffffff;
  border: 1px solid #dde5f1 !important;
  border-radius: 28px;
  text-decoration: none !important;
  color: #0b1b34 !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease;
}

/* gradient bar that grows across the top on hover */
html body .ewl a.ewl-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ewl h3{
  font: 800 22px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ewl a.ewl-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #5a6a85 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  max-width: none;
}

html body .ewl .ewl-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 16px / 1.2 "DM Sans", Arial, sans-serif;
  color: #1a73d1;
  transition: gap 0.3s ease;
}

html body .ewl .ewl-more svg{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  fill: none !important;
  stroke: #1a73d1 !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Hover / keyboard focus ---------- */
html body .ewl a.ewl-card:hover,
html body .ewl a.ewl-card:focus-visible{
  transform: translateY(-8px);
  border-color: #1a73d1 !important;
  box-shadow: 0 26px 44px -26px rgba(11, 27, 52, 0.35);
  outline: none;
}

html body .ewl a.ewl-card:hover::before,
html body .ewl a.ewl-card:focus-visible::before{
  transform: scaleX(1);
}

html body .ewl a.ewl-card:hover h3,
html body .ewl a.ewl-card:focus-visible h3{
  color: #1a73d1 !important;
}

html body .ewl a.ewl-card:hover .ewl-more,
html body .ewl a.ewl-card:focus-visible .ewl-more{
  gap: 14px;
}

html body .ewl a.ewl-card:hover .ewl-more svg,
html body .ewl a.ewl-card:focus-visible .ewl-more svg{
  transform: translateX(4px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  html body .ewl .ewl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  html body .ewl { padding: 56px 0 64px; }
  html body .ewl .ewl-head { margin-bottom: 36px; }
  html body .ewl .ewl-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ewl *, html body .ewl *::before, html body .ewl *::after { transition: none !important; }
}












/* sacrificial rule: absorbs any broken CSS pasted just above */
.jwh-sink{color:inherit}

/* ===== Joomla hero (theme-proof, all classes start with jwh) ===== */
html body .jwh{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #f5f8fe;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .jwh *,
html body .jwh *::before,
html body .jwh *::after{
  box-sizing: border-box;
}

html body .jwh br,
html body .jwh p:empty{
  display: none !important;
}

html body .jwh .jwh-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* ---------- Left content ---------- */
html body .jwh h1{
  font: 800 clamp(38px, 4.6vw, 58px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  max-width: 520px;
  margin: 0 0 26px !important;
  padding: 0 !important;
}

html body .jwh p{
  padding: 0 !important;
  text-transform: none !important;
  max-width: 540px;
  font-family: "DM Sans", Arial, sans-serif;
}

html body .jwh p.jwh-lead{
  font-size: 21px !important;
  line-height: 1.5 !important;
  color: #0b1b34 !important;
  margin: 0 0 20px !important;
}

html body .jwh p.jwh-text{
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #5a6a85 !important;
  margin: 0 0 16px !important;
}

/* ---------- Checklist ---------- */
html body .jwh ul.jwh-list{
  list-style: none !important;
  margin: 24px 0 34px !important;
  padding: 0 !important;
  display: grid;
  gap: 4px;
}

html body .jwh ul.jwh-list li{
  list-style: none !important;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 0 -12px !important;
  padding: 8px 12px !important;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #0b1b34;
  border-radius: 12px;
  transition: background 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s;
}

html body .jwh ul.jwh-list li::before,
html body .jwh ul.jwh-list li::after{
  content: none !important;
  display: none !important;
}

html body .jwh .jwh-tick{
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a9fd6;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, background 0.3s;
}

html body .jwh .jwh-tick svg{
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .jwh ul.jwh-list li:hover{
  background: #fff;
  color: #1a73d1;
  transform: translateX(8px);
}

html body .jwh ul.jwh-list li:hover .jwh-tick{
  background: #1a73d1;
  transform: scale(1.15) rotate(360deg);
  box-shadow: 0 0 0 5px rgba(26, 115, 209, 0.15);
}

/* ---------- Buttons ---------- */
html body .jwh .jwh-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

html body .jwh a.jwh-btn{
  display: inline-block !important;
  padding: 18px 30px !important;
  border-radius: 999px !important;
  font: 700 17px/1.2 "DM Sans", Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-position 0.5s, background 0.25s, color 0.25s;
}

html body .jwh a.jwh-btn--primary{
  background: linear-gradient(120deg, #1e73d8 0%, #14b4cc 50%, #1e73d8 100%) !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  color: #fff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 12px 24px rgba(30, 115, 216, 0.28);
}

html body .jwh a.jwh-btn--primary:hover{
  background-position: right center !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(20, 180, 204, 0.38);
}

html body .jwh a.jwh-btn--outline{
  background: transparent !important;
  color: #1a73d1 !important;
  border: 2px solid #1a73d1 !important;
  box-shadow: none;
}

html body .jwh a.jwh-btn--outline:hover{
  background: #1a73d1 !important;
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 115, 209, 0.3);
}

html body .jwh a.jwh-btn:active{
  transform: translateY(-1px);
}

html body .jwh a.jwh-btn:focus-visible{
  outline: 3px solid #14b8cc;
  outline-offset: 3px;
}

/* ---------- Right: browser mockup ---------- */
html body .jwh .jwh-visual{
  position: relative;
  min-width: 0;
  padding: 10px 0 34px;
}

html body .jwh .jwh-browser{
  background: #fff;
  border: 1px solid #e3e9f3;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(30, 60, 110, 0.12);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .jwh .jwh-visual:hover .jwh-browser{
  transform: translateY(-8px);
  box-shadow: 0 40px 70px rgba(30, 60, 110, 0.18);
}

html body .jwh .jwh-bar{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 16px 16px;
  border-bottom: 1px solid #edf1f7;
}

html body .jwh .jwh-dot{
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: #d5dcea;
}

html body .jwh .jwh-url{
  flex: 1;
  margin-left: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f3f6fb;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  color: #6b7688;
}

html body .jwh .jwh-body{
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html body .jwh .jwh-slot{
  border: 1px dashed #c4cfe0;
  border-radius: 10px;
  padding: 5px;
}

html body .jwh .jwh-row{
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 10px;
}

html body .jwh .jwh-blk{
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 7px;
  font: 700 12px/1 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, filter 0.3s;
}

html body .jwh .jwh-blk:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 20px rgba(10, 26, 47, 0.2);
  filter: brightness(1.12);
}

html body .jwh .jwh-blk--dark{ background: #0a1a2f; color: #fff; height: 26px; }
html body .jwh .jwh-blk--menu{ background: #1e73d8; color: #fff; height: 24px; }
html body .jwh .jwh-blk--banner{
  background: linear-gradient(120deg, #1e73d8 0%, #14b4cc 100%);
  color: #fff;
  height: 74px;
  font-size: 13.5px;
}
html body .jwh .jwh-blk--article{
  background: #f3f6fb;
  border: 1px solid #d3dcea;
  color: #0a1a2f;
  height: 84px;
  font-size: 11px;
}
html body .jwh .jwh-blk--side{
  background: #ffb020;
  color: #0a1a2f;
  height: 84px;
  font-size: 11px;
}

/* ---------- Floating chips ---------- */
html body .jwh .jwh-chip{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-radius: 16px;
  font: 700 14.5px/1.2 "DM Sans", Arial, sans-serif;
  color: #0a1a2f;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(30, 60, 110, 0.15);
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;
}

html body .jwh .jwh-chip svg{
  display: block !important;
  flex: none;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  fill: none !important;
  stroke: #1a73d1 !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s;
}

html body .jwh .jwh-chip:hover{
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 20px 38px rgba(30, 60, 110, 0.22);
}

html body .jwh .jwh-chip:hover svg{
  transform: rotate(20deg) scale(1.1);
}

html body .jwh .jwh-chip--top{ top: 68px; right: -14px; }
html body .jwh .jwh-chip--bottom{ bottom: 0; left: -18px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .jwh { padding: 60px 0; }
  html body .jwh .jwh-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html body .jwh .jwh-visual { max-width: 520px; width: 100%; margin: 0 auto; }
  html body .jwh .jwh-chip--top { right: 8px; }
  html body .jwh .jwh-chip--bottom { left: 8px; }
}

@media (max-width: 520px) {
  html body .jwh .jwh-chip { font-size: 13px; padding: 10px 14px; }
  html body .jwh a.jwh-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html body .jwh *, html body .jwh *::before, html body .jwh *::after { transition: none !important; }
}










/* ===== What makes Joomla a good choice (theme-proof, prefix ejw) ===== */
.ejw-sink{color:inherit}

html body .ejw{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #ffffff;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ejw *,
html body .ejw *::before,
html body .ejw *::after{
  box-sizing: border-box;
}

html body .ejw br,
html body .ejw p:empty{
  display: none !important;
}

html body .ejw .ejw-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ejw .ejw-head{
  max-width: 640px;
  margin-bottom: 52px;
}

html body .ejw h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .ejw p.ejw-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 620px;
}

/* ---------- Grid with vertical dividers ---------- */
html body .ejw .ejw-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

html body .ejw .ejw-item{
  position: relative;
  overflow: hidden;
  padding: 6px 30px 10px;
  border-left: 1px solid #dbe3f0;
  border-radius: 0;
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.4s ease,
              border-color 0.4s ease,
              border-radius 0.4s ease;
}

html body .ejw .ejw-item:first-child{
  padding-left: 0;
  border-left: 0;
}

html body .ejw .ejw-item:last-child{
  padding-right: 0;
}

/* gradient bar that grows across the top on hover */
html body .ejw .ejw-item::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Icon tile ---------- */
html body .ejw .ejw-ico{
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 0 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-radius 0.35s ease;
}

html body .ejw .ejw-ico svg{
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Text ---------- */
html body .ejw h3{
  font: 800 21px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ejw .ejw-item p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
}

/* ---------- Hover / keyboard focus ---------- */
html body .ejw .ejw-item:hover{
  transform: translateY(-8px);
  background: #f5f8fe;
  border-radius: 24px;
  border-left-color: transparent;
  box-shadow: 0 26px 44px -28px rgba(11, 27, 52, 0.35);
}

html body .ejw .ejw-item:hover::before{
  transform: scaleX(1);
}

html body .ejw .ejw-item:hover .ejw-ico{
  transform: translateY(-4px) rotate(-8deg) scale(1.1);
  border-radius: 50%;
  box-shadow: 0 14px 26px rgba(20, 184, 204, 0.4);
}

html body .ejw .ejw-item:hover h3{
  color: #1a73d1 !important;
}

/* keep first / last items from sitting flush against their hover background */
html body .ejw .ejw-item:first-child:hover{ padding-left: 24px; }
html body .ejw .ejw-item:last-child:hover{ padding-right: 24px; }

/* ---------- Load animation ---------- */
@keyframes ejwUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ejw .ejw-head,
html body .ejw .ejw-item{
  animation: ejwUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html body .ejw .ejw-item:nth-child(1){ animation-delay: 0.1s; }
html body .ejw .ejw-item:nth-child(2){ animation-delay: 0.2s; }
html body .ejw .ejw-item:nth-child(3){ animation-delay: 0.3s; }
html body .ejw .ejw-item:nth-child(4){ animation-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  html body .ejw .ejw-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 0;
  }
  html body .ejw .ejw-item:nth-child(odd){
    padding-left: 0;
    border-left: 0;
  }
  html body .ejw .ejw-item:nth-child(even){
    padding-right: 0;
  }
  html body .ejw .ejw-item:nth-child(odd):hover{ padding-left: 24px; }
  html body .ejw .ejw-item:nth-child(even):hover{ padding-right: 24px; }
}

@media (max-width: 600px) {
  html body .ejw{ padding: 56px 0 64px; }
  html body .ejw .ejw-head{ margin-bottom: 36px; }
  html body .ejw .ejw-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  html body .ejw .ejw-item,
  html body .ejw .ejw-item:nth-child(n){
    padding: 6px 0 10px;
    border-left: 0;
  }
  html body .ejw .ejw-item:nth-child(n):hover{ padding: 6px 20px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ejw *, html body .ejw *::before, html body .ejw *::after{
    transition: none !important;
    animation: none !important;
  }
}









/* ===== Our dedicated Joomla team (theme-proof, prefix ejt) ===== */
.ejt-sink{color:inherit}

html body .ejt{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 80px 0 90px;
  background: #0a1830;
  color: #ffffff;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
  isolation: isolate;
}

/* soft blue glow in the top-left corner */
html body .ejt::before{
  content: "";
  position: absolute;
  z-index: -1;
  width: 640px;
  height: 640px;
  left: -220px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 116, 212, 0.5), transparent 68%);
  pointer-events: none;
}

html body .ejt *,
html body .ejt *::before,
html body .ejt *::after{
  box-sizing: border-box;
}

html body .ejt br,
html body .ejt p:empty{
  display: none !important;
}

html body .ejt .ejt-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ejt .ejt-head{
  max-width: 700px;
  margin-bottom: 52px;
}

html body .ejt h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .ejt p.ejt-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 640px;
}

/* ---------- 3 cards ---------- */
html body .ejt .ejt-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

html body .ejt .ejt-card{
  position: relative;
  overflow: hidden;
  padding: 32px 30px 34px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.4s ease,
              background 0.4s ease;
}

/* gradient bar that grows across the top on hover */
html body .ejt .ejt-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* soft light that appears in the corner on hover */
html body .ejt .ejt-card::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 220px;
  height: 220px;
  right: -90px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 204, 0.3), transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

html body .ejt .ejt-card > *{
  position: relative;
  z-index: 1;
}

/* ---------- Icon tile ---------- */
html body .ejt .ejt-ico{
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border-radius: 18px;
  background: rgba(130, 150, 255, 0.22);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.35s ease,
              border-radius 0.35s ease;
}

html body .ejt .ejt-ico svg{
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  fill: none !important;
  stroke: #9fe0f5 !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

/* ---------- Text ---------- */
html body .ejt h3{
  font: 800 24px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ejt .ejt-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #b8c8df !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
  transition: color 0.3s ease;
}

/* ---------- Hover / keyboard focus ---------- */
html body .ejt .ejt-card:hover{
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.11);
  border-color: #14b8cc;
  box-shadow: 0 30px 50px -28px rgba(20, 184, 204, 0.5);
}

html body .ejt .ejt-card:hover::before{
  transform: scaleX(1);
}

html body .ejt .ejt-card:hover::after{
  opacity: 1;
  transform: scale(1);
}

html body .ejt .ejt-card:hover .ejt-ico{
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  border-radius: 50%;
  transform: translateY(-4px) rotate(-8deg) scale(1.08);
  box-shadow: 0 14px 26px rgba(20, 184, 204, 0.4);
}

html body .ejt .ejt-card:hover .ejt-ico svg{
  stroke: #ffffff !important;
}

html body .ejt .ejt-card:hover h3{
  color: #9fe8f2 !important;
}

html body .ejt .ejt-card:hover p{
  color: #d6e2f3 !important;
}

/* ---------- Load animation ---------- */
@keyframes ejtUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ejt .ejt-head,
html body .ejt .ejt-card{
  animation: ejtUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html body .ejt .ejt-card:nth-child(1){ animation-delay: 0.1s; }
html body .ejt .ejt-card:nth-child(2){ animation-delay: 0.2s; }
html body .ejt .ejt-card:nth-child(3){ animation-delay: 0.3s; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .ejt .ejt-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  html body .ejt{ padding: 56px 0 64px; }
  html body .ejt .ejt-head{ margin-bottom: 36px; }
  html body .ejt .ejt-grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ejt *, html body .ejt *::before, html body .ejt *::after{
    transition: none !important;
    animation: none !important;
  }
}










/* ===== Free consultation banner (theme-proof, prefix ejc) ===== */
.ejc-sink{color:inherit}

html body .ejc{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 80px 20px;
  background: #f5f8fd;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ejc *,
html body .ejc *::before,
html body .ejc *::after{
  box-sizing: border-box;
}

html body .ejc br,
html body .ejc p:empty{
  display: none !important;
}

/* ---------- Card (same 1040px width as your design) ---------- */
html body .ejc .ejc-box{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: 1040px;
  margin: 0 auto;
  padding: 52px 50px 50px;
  border-radius: 30px;
  background: linear-gradient(120deg, #134a8e 0%, #1b72d4 52%, #14b5cc 100%);
  color: #ffffff;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ejc .ejc-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -30px rgba(19, 74, 142, 0.65);
}

/* big circle top-right */
html body .ejc .ejc-circle{
  position: absolute;
  z-index: -1;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ejc .ejc-box:hover .ejc-circle{
  transform: scale(1.2) translate(-14px, 14px);
}

/* soft glow bottom-right */
html body .ejc .ejc-box::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  right: -120px;
  bottom: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
  animation: ejcDrift 14s ease-in-out infinite alternate;
}

@keyframes ejcDrift{
  to{ transform: translate(-60px, -30px) scale(1.15); }
}

/* ---------- Content ---------- */
html body .ejc .ejc-content{
  position: relative;
  z-index: 1;
}

html body .ejc h2{
  font: 800 clamp(32px, 4.4vw, 52px) / 1.1 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
  max-width: 680px;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body .ejc p.ejc-text{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: #ffffff !important;
  max-width: 480px;
  margin: 0 0 30px !important;
  padding: 0 !important;
}

/* ---------- Buttons ---------- */
html body .ejc .ejc-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

html body .ejc a.ejc-btn{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 28px !important;
  border-radius: 999px !important;
  font: 700 16.5px/1.2 "DM Sans", Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
}

html body .ejc a.ejc-btn--white{
  background: #ffffff !important;
  color: #0f3f7d !important;
  border: 1px solid #ffffff !important;
}

html body .ejc a.ejc-btn--white:hover{
  background: #0a1830 !important;
  border-color: #0a1830 !important;
  color: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(10, 24, 48, 0.35);
}

html body .ejc a.ejc-btn--outline{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

html body .ejc a.ejc-btn--outline:hover{
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0f3f7d !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(10, 24, 48, 0.25);
}

html body .ejc a.ejc-btn:active{
  transform: translateY(-1px) scale(0.97);
}

html body .ejc a.ejc-btn:focus-visible{
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ---------- Load animation ---------- */
@keyframes ejcUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ejc .ejc-box{
  animation: ejcUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  html body .ejc{ padding: 50px 16px; }
  html body .ejc .ejc-box{ padding: 36px 24px; }
  html body .ejc .ejc-circle{ width: 200px; height: 200px; top: -50px; right: -50px; }
  html body .ejc a.ejc-btn{ flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ejc *, html body .ejc *::before, html body .ejc *::after{
    transition: none !important;
    animation: none !important;
  }
}









/* ===== More web development services (theme-proof, prefix ejm) ===== */
.ejm-sink{color:inherit}

html body .ejm{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #ffffff;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ejm *,
html body .ejm *::before,
html body .ejm *::after{
  box-sizing: border-box;
}

html body .ejm br,
html body .ejm p:empty{
  display: none !important;
}

html body .ejm .ejm-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ejm .ejm-head{
  max-width: 640px;
  margin-bottom: 52px;
}

html body .ejm h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .ejm p.ejm-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Cards ---------- */
html body .ejm .ejm-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

html body .ejm a.ejm-card{
  position: relative;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 26px 28px !important;
  background: #ffffff;
  border: 1px solid #dde5f1 !important;
  border-radius: 28px;
  text-decoration: none !important;
  color: #0b1b34 !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.4s ease,
              background 0.4s ease;
}

/* gradient bar that grows across the top on hover */
html body .ejm a.ejm-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* soft cyan circle that grows in the corner on hover */
html body .ejm a.ejm-card::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 150px;
  right: -60px;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 204, 0.22), transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

html body .ejm a.ejm-card > *{
  position: relative;
  z-index: 1;
}

/* ---------- Text ---------- */
html body .ejm h3{
  font: 800 21px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ejm a.ejm-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  max-width: none;
}

/* "Learn more" stays at the bottom so all 4 cards line up */
html body .ejm .ejm-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font: 700 16px / 1.2 "DM Sans", Arial, sans-serif;
  color: #1a73d1;
  transition: gap 0.3s ease;
}

html body .ejm .ejm-more svg{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  fill: none !important;
  stroke: #1a73d1 !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Hover / keyboard focus ---------- */
html body .ejm a.ejm-card:hover,
html body .ejm a.ejm-card:focus-visible{
  transform: translateY(-8px);
  border-color: #1a73d1 !important;
  background: #f9fbff;
  box-shadow: 0 26px 44px -26px rgba(11, 27, 52, 0.35);
  outline: none;
}

html body .ejm a.ejm-card:hover::before,
html body .ejm a.ejm-card:focus-visible::before{
  transform: scaleX(1);
}

html body .ejm a.ejm-card:hover::after,
html body .ejm a.ejm-card:focus-visible::after{
  opacity: 1;
  transform: scale(1);
}

html body .ejm a.ejm-card:hover h3,
html body .ejm a.ejm-card:focus-visible h3{
  color: #1a73d1 !important;
}

html body .ejm a.ejm-card:hover .ejm-more,
html body .ejm a.ejm-card:focus-visible .ejm-more{
  gap: 14px;
}

html body .ejm a.ejm-card:hover .ejm-more svg,
html body .ejm a.ejm-card:focus-visible .ejm-more svg{
  transform: translateX(4px);
}

/* ---------- Load animation ---------- */
@keyframes ejmUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ejm .ejm-head,
html body .ejm a.ejm-card{
  animation: ejmUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html body .ejm a.ejm-card:nth-child(1){ animation-delay: 0.1s; }
html body .ejm a.ejm-card:nth-child(2){ animation-delay: 0.2s; }
html body .ejm a.ejm-card:nth-child(3){ animation-delay: 0.3s; }
html body .ejm a.ejm-card:nth-child(4){ animation-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  html body .ejm .ejm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  html body .ejm{ padding: 56px 0 64px; }
  html body .ejm .ejm-head{ margin-bottom: 36px; }
  html body .ejm .ejm-grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ejm *, html body .ejm *::before, html body .ejm *::after{
    transition: none !important;
    animation: none !important;
  }
}








/* ===== WordPress development hero (theme-proof, prefix ewd) ===== */
.ewd-sink{color:inherit}

html body .ewd{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #f5f8fe;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ewd *,
html body .ewd *::before,
html body .ewd *::after{
  box-sizing: border-box;
}

html body .ewd br,
html body .ewd p:empty{
  display: none !important;
}

html body .ewd .ewd-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* ---------- Left content ---------- */
html body .ewd h1{
  font: 800 clamp(36px, 4.4vw, 58px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  max-width: 520px;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

html body .ewd p{
  padding: 0 !important;
  text-transform: none !important;
  max-width: 520px;
  font-family: "DM Sans", Arial, sans-serif;
}

html body .ewd p.ewd-lead{
  font-size: 21px !important;
  line-height: 1.5 !important;
  color: #0b1b34 !important;
  margin: 0 0 18px !important;
}

html body .ewd p.ewd-text{
  font-size: 16.5px !important;
  line-height: 1.7 !important;
  color: #5a6a85 !important;
  margin: 0 0 16px !important;
}

/* ---------- Checklist ---------- */
html body .ewd ul.ewd-list{
  list-style: none !important;
  margin: 22px 0 32px !important;
  padding: 0 !important;
  display: grid;
  gap: 4px;
}

html body .ewd ul.ewd-list li{
  list-style: none !important;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 0 -12px !important;
  padding: 7px 12px !important;
  font-size: 17px;
  font-weight: 500;
  color: #0b1b34;
  border-radius: 12px;
  transition: background 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ewd ul.ewd-list li::before,
html body .ewd ul.ewd-list li::after{
  content: none !important;
  display: none !important;
}

html body .ewd .ewd-tick{
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ewd .ewd-tick svg{
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .ewd ul.ewd-list li:hover{
  background: #fff;
  transform: translateX(6px);
}

html body .ewd ul.ewd-list li:hover .ewd-tick{
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 0 6px 14px rgba(26, 115, 209, 0.35);
}

/* ---------- Buttons ---------- */
html body .ewd .ewd-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

html body .ewd a.ewd-btn{
  display: inline-block !important;
  padding: 17px 30px !important;
  border-radius: 999px !important;
  font: 700 17px/1.2 "DM Sans", Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.25s, color 0.25s;
}

html body .ewd a.ewd-btn--primary{
  background: linear-gradient(135deg, #1a73d1, #14b8cc) !important;
  color: #fff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 8px 20px rgba(26, 115, 209, 0.3);
}

html body .ewd a.ewd-btn--primary:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 115, 209, 0.45);
}

html body .ewd a.ewd-btn--outline{
  background: transparent !important;
  color: #1a73d1 !important;
  border: 2px solid #1a73d1 !important;
  box-shadow: none;
}

html body .ewd a.ewd-btn--outline:hover{
  background: #1a73d1 !important;
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 115, 209, 0.25);
}

html body .ewd a.ewd-btn:focus-visible{
  outline: 3px solid #14b8cc;
  outline-offset: 3px;
}

/* ---------- Right: browser mockup ---------- */
html body .ewd .ewd-visual{
  position: relative;
  min-width: 0;
  max-width: 470px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 40px;
}

html body .ewd .ewd-win{
  background: #fff;
  border: 1px solid #dde5f1;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(11, 27, 52, 0.1);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ewd .ewd-visual:hover .ewd-win{
  transform: translateY(-6px);
  box-shadow: 0 40px 80px rgba(26, 115, 209, 0.2);
}

html body .ewd .ewd-bar{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid #dde5f1;
}

html body .ewd .ewd-dot{
  display: block;
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: #d6dded;
}

html body .ewd .ewd-url{
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #f1f5fb;
  font-size: 12.5px;
  color: #5a6a85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .ewd .ewd-body{
  padding: 24px 18px 22px;
}

html body .ewd .ewd-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 4px 18px;
}

html body .ewd .ewd-title{
  font: 800 21px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif;
  color: #0b1b34;
}

html body .ewd .ewd-up{
  display: block;
  width: 70px;
  height: 22px;
  border-radius: 10px 10px 0 0;
  background: #1a73d1;
}

/* tiles */
html body .ewd .ewd-tiles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

html body .ewd .ewd-tile{
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  color: #fff;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ewd .ewd-tile:hover{
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 18px 30px -12px rgba(11, 27, 52, 0.4);
}

html body .ewd .ewd-tile svg{
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .ewd .ewd-tile--dark svg{
  fill: #fff !important;
  stroke: none !important;
}

html body .ewd .ewd-tile--blue{ background: linear-gradient(135deg, #1b78d4, #16b4cc); }
html body .ewd .ewd-tile--dark{ background: #0a1830; }
html body .ewd .ewd-tile--purple{ background: linear-gradient(135deg, #8b5cf6, #5b36c4); }

html body .ewd .ewd-tile--pdf{
  background: #fde8e6;
  border: 1px solid #f6c9c5;
}

html body .ewd .ewd-tile--pdf b{
  font: 800 13px/1 "DM Sans", Arial, sans-serif;
  color: #c93a30;
}

html body .ewd .ewd-tile--faded{ opacity: 0.55; }

/* first tile: a new file "uploads" in a loop */
html body .ewd .ewd-tile--new{
  background: linear-gradient(135deg, #ffab1f, #ff7a3d);
  animation: ewdNew 7s ease-in-out infinite;
}

@keyframes ewdNew{
  0%, 12%   { opacity: 0; transform: scale(0.6); }
  22%, 88%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: scale(0.6); }
}

/* progress bar */
html body .ewd .ewd-progress{
  height: 8px;
  margin-top: 18px;
  border-radius: 99px;
  background: #dfe6f2;
  overflow: hidden;
}

html body .ewd .ewd-progress span{
  display: block;
  height: 100%;
  width: 30%;
  border-radius: 99px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  animation: ewdBar 7s ease-in-out infinite;
}

@keyframes ewdBar{
  0%   { width: 8%; }
  70%  { width: 100%; }
  100% { width: 100%; }
}

/* ---------- Floating chips ---------- */
html body .ewd .ewd-chip{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: #fff;
  border-radius: 16px;
  font: 700 14px/1.2 "DM Sans", Arial, sans-serif;
  color: #0b1b34;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(11, 27, 52, 0.14);
  animation: ewdFloat 5s ease-in-out infinite alternate;
  transition: box-shadow 0.3s ease;
}

html body .ewd .ewd-chip:hover{
  box-shadow: 0 20px 40px rgba(26, 115, 209, 0.3);
}

html body .ewd .ewd-chip svg{
  display: block !important;
  flex: none;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  fill: none !important;
  stroke: #1a73d1 !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .ewd .ewd-chip--edit{ top: 8px; right: -14px; }
html body .ewd .ewd-chip--media{ bottom: 6px; left: -24px; animation-delay: -2.5s; }

@keyframes ewdFloat{
  to{ transform: translateY(-8px); }
}

/* ---------- Load animation ---------- */
@keyframes ewdUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ewd .ewd-copy{ animation: ewdUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html body .ewd .ewd-visual{ animation: ewdUp 0.9s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .ewd{ padding: 60px 0; }
  html body .ewd .ewd-in{ grid-template-columns: minmax(0, 1fr); gap: 54px; }
  html body .ewd .ewd-chip--edit{ right: 6px; }
  html body .ewd .ewd-chip--media{ left: 6px; }
}

@media (max-width: 520px) {
  html body .ewd a.ewd-btn{ width: 100%; text-align: center; }
  html body .ewd .ewd-chip{ font-size: 12.5px; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ewd *, html body .ewd *::before, html body .ewd *::after{
    transition: none !important;
    animation: none !important;
  }
}











/* ===== Benefits of WordPress bento (theme-proof, prefix ewb) ===== */
.ewb-sink{color:inherit}

html body .ewb{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #ffffff;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ewb *,
html body .ewb *::before,
html body .ewb *::after{
  box-sizing: border-box;
}

html body .ewb br,
html body .ewb p:empty{
  display: none !important;
}

html body .ewb .ewb-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ewb .ewb-head{
  max-width: 700px;
  margin-bottom: 52px;
}

html body .ewb h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .ewb p.ewb-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Bento grid ---------- */
html body .ewb .ewb-grid{
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

html body .ewb .ewb-card{
  position: relative;
  overflow: hidden;
  padding: 32px 30px 34px;
  background: #ffffff;
  border: 1px solid #dde5f1;
  border-radius: 34px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.4s ease,
              background 0.4s ease;
}

html body .ewb .ewb-card--hero{ grid-column: 1; grid-row: 1 / span 2; }
html body .ewb .ewb-card--a{ grid-column: 2; grid-row: 1; }
html body .ewb .ewb-card--b{ grid-column: 3; grid-row: 1; }
html body .ewb .ewb-card--c{ grid-column: 2 / span 2; grid-row: 2; }

/* gradient bar that grows across the top on hover (white cards) */
html body .ewb .ewb-card:not(.ewb-card--hero)::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Text ---------- */
html body .ewb h3{
  font: 800 22px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ewb .ewb-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
}

/* ---------- Icon tile ---------- */
html body .ewb .ewb-ico{
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-radius 0.35s ease;
}

html body .ewb .ewb-ico svg{
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Editor buttons (B I U bullet) ---------- */
html body .ewb .ewb-keys{
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

html body .ewb .ewb-key{
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eef3fb;
  border: 1px solid #dde5f1;
  font: 700 13px/1 "DM Sans", Arial, sans-serif;
  color: #0b1b34;
  cursor: default;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
}

html body .ewb .ewb-key b,
html body .ewb .ewb-key i,
html body .ewb .ewb-key u{
  font: inherit;
  color: inherit;
}

html body .ewb .ewb-key i{ font-style: italic; }

html body .ewb .ewb-card--c:hover .ewb-key{
  background: #ffffff;
}

html body .ewb .ewb-key:hover{
  background: linear-gradient(135deg, #1a73d1, #14b8cc) !important;
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-4px) scale(1.1);
}

/* ---------- Tall dark card ---------- */
html body .ewb .ewb-card--hero{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  border: 0;
  background: linear-gradient(160deg, #0a1830 0%, #134a8f 62%, #14b8cc 112%);
  color: #ffffff;
  isolation: isolate;
}

html body .ewb .ewb-c1,
html body .ewb .ewb-c2{
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ewb .ewb-c1{ width: 270px; height: 270px; right: -80px; top: -50px; }
html body .ewb .ewb-c2{ width: 150px; height: 150px; left: -50px; top: 80px; }

html body .ewb .ewb-card--hero:hover .ewb-c1{ transform: scale(1.18) translate(-14px, 14px); }
html body .ewb .ewb-card--hero:hover .ewb-c2{ transform: scale(1.25) translate(14px, -10px); }

html body .ewb .ewb-ico--glass{
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 22px;
}

html body .ewb .ewb-card--hero h3{
  font-size: 28px !important;
  color: #ffffff !important;
}

html body .ewb .ewb-card--hero p{
  color: #e3eefc !important;
  font-size: 16.5px !important;
}

/* ---------- Hover / keyboard focus ---------- */
html body .ewb .ewb-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 44px -26px rgba(11, 27, 52, 0.4);
}

html body .ewb .ewb-card:not(.ewb-card--hero):hover{
  border-color: #1a73d1;
  background: #f9fbff;
}

html body .ewb .ewb-card:not(.ewb-card--hero):hover::before{
  transform: scaleX(1);
}

html body .ewb .ewb-card:not(.ewb-card--hero):hover h3{
  color: #1a73d1 !important;
}

html body .ewb .ewb-card:hover .ewb-ico{
  transform: translateY(-4px) rotate(-8deg) scale(1.08);
  border-radius: 50%;
  box-shadow: 0 14px 26px rgba(20, 184, 204, 0.4);
}

html body .ewb .ewb-card--hero:hover{
  box-shadow: 0 34px 60px -30px rgba(19, 74, 143, 0.7);
}

/* ---------- Load animation ---------- */
@keyframes ewbUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ewb .ewb-head,
html body .ewb .ewb-card{
  animation: ewbUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html body .ewb .ewb-card--hero{ animation-delay: 0.1s; }
html body .ewb .ewb-card--a{ animation-delay: 0.2s; }
html body .ewb .ewb-card--b{ animation-delay: 0.3s; }
html body .ewb .ewb-card--c{ animation-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .ewb .ewb-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .ewb .ewb-card--hero{ grid-column: 1 / span 2; grid-row: auto; min-height: 340px; }
  html body .ewb .ewb-card--a{ grid-column: 1; grid-row: auto; }
  html body .ewb .ewb-card--b{ grid-column: 2; grid-row: auto; }
  html body .ewb .ewb-card--c{ grid-column: 1 / span 2; grid-row: auto; }
}

@media (max-width: 600px) {
  html body .ewb{ padding: 56px 0 64px; }
  html body .ewb .ewb-head{ margin-bottom: 36px; }
  html body .ewb .ewb-grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html body .ewb .ewb-card--hero,
  html body .ewb .ewb-card--a,
  html body .ewb .ewb-card--b,
  html body .ewb .ewb-card--c{ grid-column: 1; }
  html body .ewb .ewb-card--hero{ min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ewb *, html body .ewb *::before, html body .ewb *::after{
    transition: none !important;
    animation: none !important;
  }
}

.header_top_bottom_holder {
    position: relative;
   
}









/* ===== Experts and support (theme-proof, prefix ewe) ===== */
.ewe-sink{color:inherit}

html body .ewe{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 80px 0 90px;
  background: #0a1830;
  color: #ffffff;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
  isolation: isolate;
}

/* soft blue glow in the top-left corner */
html body .ewe::before{
  content: "";
  position: absolute;
  z-index: -1;
  width: 640px;
  height: 640px;
  left: -220px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 116, 212, 0.5), transparent 68%);
  pointer-events: none;
}

html body .ewe *,
html body .ewe *::before,
html body .ewe *::after{
  box-sizing: border-box;
}

html body .ewe br,
html body .ewe p:empty{
  display: none !important;
}

html body .ewe .ewe-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ewe .ewe-head{
  max-width: 700px;
  margin-bottom: 52px;
}

html body .ewe h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
  max-width: 600px;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .ewe p.ewe-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 640px;
}

/* ---------- 2 cards ---------- */
html body .ewe .ewe-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

html body .ewe .ewe-card{
  position: relative;
  overflow: hidden;
  padding: 36px 32px 38px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 34px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.4s ease,
              background 0.4s ease;
}

/* gradient bar that grows across the top on hover */
html body .ewe .ewe-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* soft light that appears in the corner on hover */
html body .ewe .ewe-card::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 260px;
  height: 260px;
  right: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 204, 0.3), transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

html body .ewe .ewe-card > *{
  position: relative;
  z-index: 1;
}

/* ---------- Icon tile ---------- */
html body .ewe .ewe-ico{
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: rgba(130, 150, 255, 0.22);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.35s ease,
              border-radius 0.35s ease;
}

html body .ewe .ewe-ico svg{
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  fill: none !important;
  stroke: #9fe0f5 !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

/* ---------- Text ---------- */
html body .ewe h3{
  font: 800 25px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ewe .ewe-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #b8c8df !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
  transition: color 0.3s ease;
}

/* ---------- Live status line ---------- */
html body .ewe .ewe-live{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font: 700 16px/1.2 "DM Sans", Arial, sans-serif;
  color: #9fe8f2;
}

html body .ewe .ewe-dot{
  position: relative;
  display: block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2fe39a;
}

/* pulsing ring around the green dot */
html body .ewe .ewe-dot::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(47, 227, 154, 0.35);
  animation: eweDot 2s ease-out infinite;
}

@keyframes eweDot{
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Hover / keyboard focus ---------- */
html body .ewe .ewe-card:hover{
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.11);
  border-color: #14b8cc;
  box-shadow: 0 30px 50px -28px rgba(20, 184, 204, 0.5);
}

html body .ewe .ewe-card:hover::before{
  transform: scaleX(1);
}

html body .ewe .ewe-card:hover::after{
  opacity: 1;
  transform: scale(1);
}

html body .ewe .ewe-card:hover .ewe-ico{
  background: linear-gradient(135deg, #1a73d1, #14b8cc);
  border-radius: 50%;
  transform: translateY(-4px) rotate(-8deg) scale(1.08);
  box-shadow: 0 14px 26px rgba(20, 184, 204, 0.4);
}

html body .ewe .ewe-card:hover .ewe-ico svg{
  stroke: #ffffff !important;
}

html body .ewe .ewe-card:hover h3{
  color: #9fe8f2 !important;
}

html body .ewe .ewe-card:hover p{
  color: #d6e2f3 !important;
}

/* ---------- Load animation ---------- */
@keyframes eweUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ewe .ewe-head,
html body .ewe .ewe-card{
  animation: eweUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html body .ewe .ewe-card:nth-child(1){ animation-delay: 0.1s; }
html body .ewe .ewe-card:nth-child(2){ animation-delay: 0.2s; }

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
  html body .ewe .ewe-grid{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  html body .ewe{ padding: 56px 0 64px; }
  html body .ewe .ewe-head{ margin-bottom: 36px; }
  html body .ewe .ewe-card{ padding: 30px 24px 32px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ewe *, html body .ewe *::before, html body .ewe *::after{
    transition: none !important;
    animation: none !important;
  }
}







/* ===== Works well with, WordPress (theme-proof, prefix ewv) ===== */
.ewv-sink{color:inherit}

html body .ewv{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 90px 0;
  background: #f5f8fe;
  color: #0b1b34;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

html body .ewv *,
html body .ewv *::before,
html body .ewv *::after{
  box-sizing: border-box;
}

html body .ewv br,
html body .ewv p:empty{
  display: none !important;
}

html body .ewv .ewv-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ewv .ewv-head{
  max-width: 640px;
  margin-bottom: 52px;
}

html body .ewv h2{
  font: 800 clamp(34px, 4.4vw, 54px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

html body .ewv p.ewv-sub{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Cards ---------- */
html body .ewv .ewv-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

html body .ewv a.ewv-card{
  position: relative;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 26px 28px !important;
  background: #ffffff;
  border: 1px solid #dde5f1 !important;
  border-radius: 28px;
  text-decoration: none !important;
  color: #0b1b34 !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.4s ease,
              background 0.4s ease;
}

/* gradient bar that grows across the top on hover */
html body .ewv a.ewv-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73d1, #14b8cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* soft cyan circle that grows in the corner on hover */
html body .ewv a.ewv-card::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 150px;
  right: -60px;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 204, 0.22), transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

html body .ewv a.ewv-card > *{
  position: relative;
  z-index: 1;
}

/* ---------- Text ---------- */
html body .ewv h3{
  font: 800 21px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #0b1b34 !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ewv a.ewv-card p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #5a6a85 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  max-width: none;
}

/* "Learn more" stays at the bottom so all 4 cards line up */
html body .ewv .ewv-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font: 700 16px / 1.2 "DM Sans", Arial, sans-serif;
  color: #1a73d1;
  transition: gap 0.3s ease;
}

html body .ewv .ewv-more svg{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  fill: none !important;
  stroke: #1a73d1 !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Hover / keyboard focus ---------- */
html body .ewv a.ewv-card:hover,
html body .ewv a.ewv-card:focus-visible{
  transform: translateY(-8px);
  border-color: #1a73d1 !important;
  background: #ffffff;
  box-shadow: 0 26px 44px -26px rgba(11, 27, 52, 0.35);
  outline: none;
}

html body .ewv a.ewv-card:hover::before,
html body .ewv a.ewv-card:focus-visible::before{
  transform: scaleX(1);
}

html body .ewv a.ewv-card:hover::after,
html body .ewv a.ewv-card:focus-visible::after{
  opacity: 1;
  transform: scale(1);
}

html body .ewv a.ewv-card:hover h3,
html body .ewv a.ewv-card:focus-visible h3{
  color: #1a73d1 !important;
}

html body .ewv a.ewv-card:hover .ewv-more,
html body .ewv a.ewv-card:focus-visible .ewv-more{
  gap: 14px;
}

html body .ewv a.ewv-card:hover .ewv-more svg,
html body .ewv a.ewv-card:focus-visible .ewv-more svg{
  transform: translateX(4px);
}

/* ---------- Load animation ---------- */
@keyframes ewvUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: none; }
}

html body .ewv .ewv-head,
html body .ewv a.ewv-card{
  animation: ewvUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html body .ewv a.ewv-card:nth-child(1){ animation-delay: 0.1s; }
html body .ewv a.ewv-card:nth-child(2){ animation-delay: 0.2s; }
html body .ewv a.ewv-card:nth-child(3){ animation-delay: 0.3s; }
html body .ewv a.ewv-card:nth-child(4){ animation-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  html body .ewv .ewv-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  html body .ewv{ padding: 56px 0 64px; }
  html body .ewv .ewv-head{ margin-bottom: 36px; }
  html body .ewv .ewv-grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ewv *, html body .ewv *::before, html body .ewv *::after{
    transition: none !important;
    animation: none !important;
  }
}


/* buttons */
.btn{display:inline-block;padding:15px 30px;border-radius:50px;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;font-weight:700;transition:.3s;box-shadow:0 8px 24px rgba(27,116,212,.35)}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn.o2{background:none;border:2px solid var(--blue);color:var(--blue);box-shadow:none}
.btn.o2:hover{background:var(--blue);color:#fff}
 
/* reveal animation */
.rv{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
 
/* section layout */
section.swx{padding:100px 0}
.swx h2{margin-bottom:18px}
.sw-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.sw-copy p{color:var(--mut);margin-bottom:18px}
.sw-copy p.lead{color:var(--ink);font-size:21px;line-height:1.55}
.sw-ticks{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:13px}
.sw-ticks li{display:flex;gap:14px;align-items:flex-start;font-weight:500}
.sw-ticks i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-top:1px}
.sw-ticks svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sw-btns{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:900px){.sw-grid2{grid-template-columns:1fr;gap:46px}}
 
/* floating chips */
.sw-mock-wrap{position:relative;padding:0 0 30px}
.sw-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;color:var(--navy);border-radius:16px;padding:12px 16px;font-weight:700;font-size:15px;box-shadow:0 20px 40px -16px rgba(10,24,48,.5);animation:swbob 5s ease-in-out infinite alternate}
.sw-chip svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw-c1{left:-20px;bottom:0}
.sw-c2{right:-14px;top:60px;animation-delay:-2s}
@keyframes swbob{to{transform:translateY(-9px)}}
@media(max-width:900px){.sw-c1{left:8px}.sw-c2{right:8px}}
 
/* server diagram */
.hs-diag{position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:18px 14px 10px;box-shadow:0 40px 70px -40px rgba(10,24,48,.5)}
.hs-diag svg{display:block;width:100%;height:auto}
.hs-lines path{fill:none;stroke:rgba(27,116,212,.45);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 10;animation:hsflow 1.4s linear infinite}
@keyframes hsflow{to{stroke-dashoffset:-16}}
.hs-site{fill:var(--bg);stroke:var(--line);stroke-width:2}
.hs-site.me{fill:url(#hsg);stroke:none;transform-box:fill-box;transform-origin:center;animation:hspulse 2.6s ease-in-out infinite}
@keyframes hspulse{50%{transform:scale(1.07)}}
.hs-dot{fill:var(--line)}
.hs-bar{fill:var(--line)}
.hs-site.me ~ .x{}
.hs-rack{fill:var(--navy)}
.hs-unit{fill:#12294a}
.hs-slot{fill:#0a1830}
.hs-led{fill:#2ee59d;animation:hsled 1.8s ease-in-out infinite}
.hs-led.b{fill:#16b8cc;animation-delay:.5s}
.hs-led.c{animation-delay:1s}
@keyframes hsled{0%,100%{opacity:.25}50%{opacity:1}}
.hs-lab{font:700 14px 'DM Sans',Arial,sans-serif;fill:var(--ink)}
.hs-lab.m{fill:var(--mut);font-weight:600;font-size:13px}
.hs-lab.w{fill:#fff}
@media(prefers-reduced-motion:reduce){.hs-lines path,.hs-site.me,.hs-led{animation:none}}
 
@media(max-width:860px){section{padding:76px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}.sw-chip{animation:none}}















/* sacrificial rule: absorbs any broken CSS pasted just above */
.ess-sink{color:inherit}

/* ===== How we set up your store (theme-proof, prefix ess) ===== */
html body .ess{
  display: block;
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 100px 0 110px;
  background: #0a1830;
  color: #ffffff;
  font: 400 18px/1.6 "DM Sans", Arial, sans-serif;
  overflow: hidden;
  isolation: isolate;
}

/* soft blue glow in the top-left corner */
html body .ess::before{
  content: "";
  position: absolute;
  z-index: -1;
  width: 640px;
  height: 640px;
  left: -200px;
  top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 116, 212, 0.55), transparent 68%);
  pointer-events: none;
}

html body .ess *,
html body .ess *::before,
html body .ess *::after{
  box-sizing: border-box;
}

html body .ess br,
html body .ess p:empty{
  display: none !important;
}

html body .ess .ess-in{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Heading ---------- */
html body .ess h2{
  font: 800 clamp(36px, 4.6vw, 60px) / 1.08 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-transform: none !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

html body .ess p.ess-lead{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 21px !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 640px;
}

/* ---------- Steps row ---------- */
html body .ess .ess-steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: 64px;
  padding-top: 52px;
}

/* the horizontal line */
html body .ess .ess-steps::before,
html body .ess .ess-steps::after{
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  height: 3px;
  border-radius: 3px;
}

html body .ess .ess-steps::before{
  right: 0;
  background: rgba(255, 255, 255, 0.18);
}

html body .ess .ess-steps::after{
  right: 0;
  background: linear-gradient(90deg, #1e73d8, #14b4cc);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ess .ess-step{
  position: relative;
  min-width: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .ess .ess-num{
  position: absolute;
  top: -52px;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #14b8cc;
  color: #06222a;
  font: 700 14px/1 "DM Sans", Arial, sans-serif;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, background 0.35s, color 0.35s;
}

html body .ess h3{
  font: 800 24px / 1.2 "Bricolage Grotesque", "DM Sans", Arial, sans-serif !important;
  font-optical-sizing: auto !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  transition: color 0.3s ease;
}

html body .ess .ess-step p{
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #c6d5ea !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 280px;
  transition: color 0.3s ease;
}

/* ---------- Hover ---------- */
html body .ess .ess-step:hover{
  transform: translateY(-6px);
}

html body .ess .ess-step:hover .ess-num{
  background: #ffffff;
  color: #0a1830;
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(20, 184, 204, 0.3), 0 10px 22px rgba(20, 184, 204, 0.45);
}

html body .ess .ess-step:hover h3{
  color: #9fe8f2 !important;
}

html body .ess .ess-step:hover p{
  color: #ffffff !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  html body .ess .ess-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px 40px;
  }
  html body .ess .ess-steps::before,
  html body .ess .ess-steps::after{
    display: none;
  }
}

@media (max-width: 560px) {
  html body .ess { padding: 64px 0 70px; }
  html body .ess .ess-steps{
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    margin-top: 40px;
    padding-top: 0;
  }
  html body .ess .ess-num{
    position: static;
    margin-bottom: 14px;
  }
  html body .ess .ess-step p{ max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ess *, html body .ess *::before, html body .ess *::after { transition: none !important; }
}