/*
Theme Name: CX14 Theme
Theme URI: http://wordpress.org/themes/CX14
Tags: CX14
Author: CX14
Description: This is news testing version for CX14 custom theme
Version: 1.0.0
*/

 :root{
     --charcoal:#1E1D22;
     --cream:#FFFCEA;
     --blue:#217DDA;
     --blue-shade:#3D89DC;
     --blue-shade2:#498FDD;
     --blue-stroke:#468EDD;
     --gray:#737373;
     --stroke:#E5E5E5;
     --chip:#EAEAEB;
     --on-blue:#F2F2F2;
     --wa:#25D366;
     --display:'Clash Display','Segoe UI',sans-serif;
     --body:'General Sans','Geist',-apple-system,'Segoe UI',sans-serif;
}
 *{
    margin:0;
    padding:0;
    box-sizing:border-box
}
 html{
    scroll-behavior:smooth
}
 body{
    background:var(--cream);
    color:var(--charcoal);
    font-family:var(--body);
    overflow-x:hidden
}
 h1,h2,h3,.display{
    font-family:var(--display);
    font-weight:600;
    letter-spacing:-.02em
}
 img{
    display:block;
    max-width:100%
}
 section{
    position:relative
}
 .wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 6vw
}
 .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:20px
}
 .eyebrow::before{
    content:"";
    width:28px;
    height:1px;
    background:var(--blue)
}
 .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--body);
    font-weight:500;
    font-size:16px;
    padding:14px 30px;
    border-radius:10px;
    text-decoration:none;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    border:none
}
 .btn:hover{
    transform:translateY(-2px)
}
 .btn-blue{
    background:var(--blue);
    color:var(--on-blue)
}
 .btn-ghost{
    border:1px solid rgba(255,252,234,.35);
    color:var(--cream);
    background:transparent
}
 .btn-wa{
    border:1px solid var(--wa);
    color:var(--wa);
    background:transparent
}
 .reveal{
    opacity:0;
    transform:translateY(26px)
}
/* ---- floating UI chips over photos ---- */
 .photo-card{
    position:relative;
    border-radius:16px;
    overflow:visible
}
 .photo-card img{
    border-radius:16px;
    width:100%;
    height:100%;
    object-fit:cover
}
 .float-chip{
    position:absolute;
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:12px;
    padding:10px 14px;
    font-size:12.5px;
    font-weight:500;
    box-shadow:0 16px 40px -18px rgba(30,29,34,.35);
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    z-index:3
}
 .float-chip .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--wa);
    flex-shrink:0
}
 .float-chip.blue{
    background:var(--blue-shade);
    border-color:var(--blue-stroke);
    color:#fff
}
 .float-chip .wa-b{
    background:#D2F0D9;
    border-radius:10px;
    border-top-left-radius:3px;
    padding:8px 10px;
    font-weight:400;
    white-space:normal;
    max-width:200px
}
/* ============ NAV ============ */
 nav{
    position:fixed;
    inset:0 0 auto 0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 6vw;
    background:rgba(30,29,34,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,252,234,.08);
    transition:background .3s
}
 nav .logo svg{
    height:26px;
    width:auto;
    display:block
}
 nav .links{
    display:flex;
    gap:28px;
    align-items:center
}
 nav .links a{
    color:rgba(255,252,234,.75);
    text-decoration:none;
    font-size:14.5px;
    font-weight:500;
    transition:color .2s
}
 nav .links a:hover{
    color:var(--cream)
}
 nav .nav-cta{
    display:flex;
    gap:12px;
    align-items:center
}
 nav .lang{
    border:1px solid rgba(255,252,234,.25);
    color:var(--cream);
    border-radius:999px;
    padding:6px 14px;
    font-size:13px;
    text-decoration:none
}
 nav .demo{
    background:var(--blue);
    color:#fff;
    border-radius:10px;
    padding:10px 20px;
    font-size:14px;
    text-decoration:none;
    font-weight:500
}
 .announce{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:101;
    background:var(--blue);
    color:#fff;
    text-align:center;
    font-size:12.5px;
    padding:7px;
    letter-spacing:.02em
}
 .announce a{
    color:#fff;
    font-weight:600;
    text-decoration:underline
}
 body{
    padding-top:0
}
 nav{
    top:30px
}
/* ============ 1 HERO ============ */
 .hero{
    min-height:100vh;
    background:var(--charcoal);
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:150px 6vw 100px;
    position:sticky;
    top:0;
    z-index:0
}
 body>section:not(.hero),body>footer{
    position:relative;
    z-index:2
}
 .trust{
    border-radius:32px 32px 0 0;
    box-shadow:0 -34px 70px -18px rgba(10,10,14,.55)
}
 .hero-glow{
    position:absolute;
    inset:-20%;
    background:radial-gradient(ellipse 60% 50% at 28% 38%,rgba(33,125,218,.16),transparent 65%),radial-gradient(ellipse 50% 45% at 78% 72%,rgba(73,143,221,.08),transparent 60%);
    pointer-events:none
}
 .hero-grid{
    position:relative;
    z-index:3;
    display:flex;
    gap:5vw;
    align-items:center;
    width:100%;
    max-width:1360px;
    margin:0 auto;
    flex-wrap:wrap
}
 .hero-copy{
    flex:1.1;
    min-width:320px
}
 .hero h1{
    font-size:clamp(38px,4.8vw,66px);
    color:var(--cream);
    line-height:1.05;
    opacity:0;
    transform:translateY(30px)
}
 .hero h1 em{
    font-style:normal;
    color:var(--blue-shade2)
}
 .hero p.sub{
    font-size:clamp(16px,1.6vw,19px);
    color:rgba(255,252,234,.65);
    margin:22px 0 36px;
    max-width:520px;
    opacity:0;
    transform:translateY(30px)
}
 .hero-ctas{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    opacity:0;
    transform:translateY(30px)
}
 .hero-proof{
    margin-top:26px;
    font-size:13px;
    color:rgba(255,252,234,.5);
    opacity:0
}
 .hero-photos{
    flex:.9;
    min-width:300px;
    position:relative;
    height:520px
}
 .hp{
    position:absolute;
    width:min(240px,42vw);
    height:320px;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.6)
}
 .hp img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(1.05)
}
 .hp1{
    top:0;
    left:4%;
    transform:rotate(-4deg)
}
 .hp2{
    top:90px;
    right:2%;
    transform:rotate(3deg)
}
 .hp3{
    bottom:0;
    left:26%;
    transform:rotate(-1deg);
    width:min(220px,40vw);
    height:280px
}
 .scroll-hint{
    position:absolute;
    bottom:32px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,252,234,.5);
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    z-index:4
}
 .scroll-hint::after{
    content:"";
    display:block;
    width:1px;
    height:40px;
    background:linear-gradient(var(--blue),transparent);
    margin:8px auto 0;
    animation:hint 2s ease-in-out infinite
}
 @keyframes hint{
    0%,100%{
        transform:scaleY(.4);
        transform-origin:top
    }
    50%{
        transform:scaleY(1);
        transform-origin:top
    }
}
/* ============ 2 TRUST BAR ============ */
 .trust{
    background:var(--cream);
    border-bottom:1px solid var(--stroke);
    padding:26px 0;
    overflow:hidden
}
 .trust .row{
    display:flex;
    align-items:center;
    gap:36px;
    padding:0 6vw;
    flex-wrap:wrap;
    justify-content:center
}
 .mbp{
    height:56px;
    width:auto;
    border-radius:12px
}
 .trust .line{
    font-size:13.5px;
    color:var(--gray)
}
 .logo-ticker{
    overflow:hidden;
    margin-top:22px;
    mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)
}
 .logo-track{
    display:flex;
    gap:64px;
    width:max-content;
    animation:tick 30s linear infinite
}
 .logo-track span{
    font-family:var(--display);
    font-weight:600;
    font-size:19px;
    color:var(--gray);
    opacity:.75;
    white-space:nowrap
}
 @keyframes tick{
    to{
        transform:translateX(-50%)
    }
}
/* ============ 4 PROBLEM → PROMISE ============ */
 .promise{
    background:var(--cream);
    padding:130px 0 150px
}
 .promise .cols{
    display:flex;
    gap:7vw;
    align-items:flex-start;
    flex-wrap:wrap
}
 .promise .left{
    flex:1;
    min-width:320px
}
 .promise .right{
    flex:1;
    min-width:320px;
    padding-top:37px
}
 .promise h2{
    font-family:var(--display);
    font-size:clamp(38px,4.6vw,64px);
    line-height:1.06;
    letter-spacing:-.02em
}
 .promise h2 .b{
    color:var(--blue)
}
 .promise p.lead{
    font-size:18px;
    color:var(--gray);
    line-height:1.75;
    max-width:460px;
    margin:30px 0 44px
}
 .promise-photo{
    position:relative
}
 .promise-photo img{
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:16px
}
 .wa-notify{
    position:absolute;
    left:26px;
    bottom:26px;
    background:#fff;
    border-radius:14px;
    padding:11px 16px 11px 12px;
    display:flex;
    align-items:center;
    gap:11px;
    box-shadow:0 18px 44px -16px rgba(30,29,34,.4);
    z-index:3
}
 .wa-ic{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--wa);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0
}
 .wa-txt{
    display:flex;
    flex-direction:column;
    line-height:1.3
}
 .wa-txt b{
    font-size:14px;
    font-weight:600;
    color:var(--charcoal)
}
 .wa-txt i{
    font-style:normal;
    font-size:12.5px;
    color:var(--gray)
}
 .stat-row{
    display:flex;
    align-items:baseline;
    gap:20px;
    padding:30px 0;
    border-bottom:1px solid var(--stroke)
}
 .stat-row:first-child{
    padding-top:0
}
 .stat-row .bullet{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue);
    flex-shrink:0;
    align-self:center
}
 .stat-row .n{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(38px,3.8vw,56px);
    letter-spacing:-.02em;
    color:var(--charcoal);
    white-space:nowrap
}
 .stat-row .l{
    font-size:16px;
    color:var(--gray)
}
 .btn-outline{
    border:1px solid var(--charcoal);
    color:var(--charcoal);
    border-radius:999px;
    background:transparent;
    font-weight:600
}
 .btn-outline:hover{
    background:var(--charcoal);
    color:var(--cream)
}
/* ============ 5 PINNED SHOWCASE ============ */
 .pin-section{
    background:var(--cream)
}
 .pin-stage{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8vw;
    padding:0 6vw
}
 .pin-copy-wrap{
    position:relative;
    flex:1;
    max-width:480px;
    height:340px;
    display:flex;
    align-items:center
}
 .pin-step{
    position:absolute;
    opacity:0;
    transform:translateY(40px);
    max-width:480px
}
 .pin-step h2{
    font-size:clamp(30px,3.4vw,46px);
    line-height:1.08;
    margin-bottom:16px
}
 .pin-step h2 .b{
    color:var(--blue)
}
 .pin-step p{
    font-size:16.5px;
    color:var(--gray);
    line-height:1.65
}
 .phone{
    width:min(310px,38vw);
    height:min(620px,74vh);
    background:var(--charcoal);
    border-radius:44px;
    padding:12px;
    box-shadow:0 40px 90px -30px rgba(30,29,34,.45);
    flex-shrink:0
}
 .phone-screen{
    background:#E9E2D6;
    border-radius:34px;
    height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
 .wa-header{
    background:var(--charcoal);
    color:var(--cream);
    padding:16px 14px 11px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    font-weight:600
}
 .wa-avatar{
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--blue);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:#fff;
    font-family:var(--display)
}
 .wa-body{
    flex:1;
    padding:14px 12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:hidden
}
 .bubble{
    max-width:84%;
    padding:10px 13px;
    border-radius:14px;
    font-size:12.5px;
    line-height:1.45;
    opacity:0;
    transform:translateY(16px) scale(.97)
}
 .bubble.in{
    background:#fff;
    align-self:flex-start;
    border-top-left-radius:4px
}
 .bubble.out{
    background:#D2F0D9;
    align-self:flex-end;
    border-top-right-radius:4px
}
 .bubble .tag{
    display:inline-block;
    background:var(--chip);
    border:1px solid var(--blue-stroke);
    color:var(--blue);
    border-radius:999px;
    font-size:9.5px;
    padding:2px 8px;
    margin-bottom:6px;
    font-weight:500
}
 .fake-img{
    width:100%;
    height:78px;
    border-radius:8px;
    margin-bottom:8px;
    background:linear-gradient(135deg,var(--blue),var(--blue-shade2));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:var(--display);
    font-size:17px
}
 .progress-rail{
    position:absolute;
    left:5vw;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:4
}
 .progress-rail .bar{
    width:3px;
    height:46px;
    border-radius:99px;
    background:#DEDACB;
    position:relative;
    overflow:hidden;
    display:block
}
 .progress-rail .bar i{
    position:absolute;
    inset:0;
    background:var(--blue);
    border-radius:99px;
    transform:scaleY(0);
    transform-origin:top;
    display:block
}
/* ============ 6 ATOM ============ */
 .atom-section{
    background:var(--charcoal);
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:130px 6vw
}
 .atom-grid-bg{
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(33,125,218,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(33,125,218,.07) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(circle at 30% 50%,#000 30%,transparent 75%)
}
 .atom-wrap{
    display:flex;
    align-items:center;
    gap:6vw;
    width:100%;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
    max-width:1280px;
    margin:0 auto
}
 .atom{
    position:relative;
    width:min(360px,68vw);
    height:min(360px,68vw);
    flex-shrink:0
}
 .atom-core{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
 .atom-core .num{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(84px,9vw,140px);
    color:var(--cream);
    line-height:1
}
 .atom-core .el{
    font-size:12px;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--blue-shade2);
    margin-top:6px
}
 .orbit{
    position:absolute;
    inset:0;
    border:1px solid rgba(33,125,218,.35);
    border-radius:50%
}
 .orbit.o2{
    inset:13%
}
.orbit.o3{
    inset:26%
}
 .orbit .e{
    position:absolute;
    top:-5px;
    left:50%;
    width:10px;
    height:10px;
    margin-left:-5px;
    border-radius:50%;
    background:var(--blue-shade2);
    box-shadow:0 0 14px var(--blue-shade2)
}
 .atom-copy{
    flex:1;
    min-width:280px
}
 .atom-copy h2{
    color:var(--cream);
    font-size:clamp(30px,3.8vw,50px);
    line-height:1.08;
    margin-bottom:20px
}
 .atom-copy p{
    color:rgba(255,252,234,.6);
    font-size:16.5px;
    line-height:1.7;
    max-width:520px;
    margin-bottom:42px
}
 .stats{
    display:flex;
    gap:44px;
    flex-wrap:wrap
}
 .stat .n{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(34px,3.8vw,52px);
    color:var(--blue-shade2)
}
 .stat .l{
    font-size:13px;
    color:rgba(255,252,234,.55);
    margin-top:4px
}
/* ============ 7 PILLARS ============ */
 .hscroll{
    background:var(--cream)
}
 .hscroll-stage{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:36px;
    overflow:hidden;
    padding-top:70px
}
 .hscroll-head{
    padding:0 6vw;
    flex-shrink:0
}
 .hscroll-head h2{
    font-size:clamp(28px,3.4vw,46px);
    max-width:720px;
    line-height:1.1
}
 .hscroll-head h2 .b{
    color:var(--blue)
}
 .hscroll-head .hs-sub{
    margin-top:14px;
    color:var(--gray);
    font-size:16px;
    max-width:560px;
    line-height:1.6
}
 .hscroll-track{
    display:flex;
    gap:26px;
    padding:0 6vw;
    will-change:transform
}
 .pillar{
    width:min(380px,80vw);
    flex-shrink:0;
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:16px;
    padding:32px;
    min-height:360px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:border-color .3s,transform .3s
}
 .pillar:hover{
    border-color:var(--blue-stroke);
    transform:translateY(-4px)
}
 .pillar.blue{
    background:var(--blue-shade);
    border-color:var(--blue-stroke)
}
 .pillar.blue h3,.pillar.blue p{
    color:var(--on-blue)
}
 .pillar .chip{
    align-self:flex-start;
    background:var(--chip);
    border:1px solid var(--stroke);
    border-radius:999px;
    padding:5px 14px;
    font-size:12px;
    font-weight:500
}
 .pillar.blue .chip{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.3);
    color:#fff
}
 .pillar h3{
    font-size:24px;
    margin:70px 0 10px;
    line-height:1.15
}
 .pillar p{
    font-size:14.5px;
    color:var(--gray);
    line-height:1.6
}
 .pillar .idx{
    font-family:var(--display);
    font-size:15px;
    color:var(--blue);
    margin-top:24px
}
 .pillar.blue .idx{
    color:#fff
}
/* ============ 8 INDUSTRIES ============ */
 .industries{
    background:var(--charcoal);
    padding:150px 0 160px
}
 .industries h2{
    color:var(--cream);
    font-size:clamp(30px,4vw,52px);
    line-height:1.1;
    max-width:760px
}
 .ind-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:44px 0 40px
}
 .ind-tab{
    border:1px solid rgba(255,252,234,.22);
    background:transparent;
    color:rgba(255,252,234,.75);
    border-radius:999px;
    padding:9px 20px;
    font-size:13.5px;
    font-family:var(--body);
    font-weight:500;
    cursor:pointer;
    transition:all .25s
}
 .ind-tab:hover{
    border-color:var(--blue-shade2);
    color:var(--cream)
}
 .ind-tab.on{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff
}
 .ind-panel{
    display:none;
    background:var(--cream);
    border-radius:20px;
    overflow:hidden;
    grid-template-columns:1fr 1.15fr;
    min-height:440px
}
 .ind-panel.on{
    display:grid
}
 .ind-photo{
    position:relative;
    min-height:320px
}
 .ind-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0
}
 .ind-photo .float-chip{
    bottom:24px;
    left:24px
}
 .ind-body{
    padding:46px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:18px
}
 .ind-body h3{
    font-size:clamp(24px,2.4vw,32px);
    line-height:1.15
}
 .ind-body p.lead{
    color:var(--gray);
    font-size:16px;
    line-height:1.65
}
 .ind-body ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px
}
 .ind-body li{
    font-size:14.5px;
    display:flex;
    gap:10px;
    align-items:flex-start
}
 .ind-body li::before{
    content:"✓";
    color:var(--blue);
    font-weight:700;
    flex-shrink:0
}
 .mini-chat{
    background:#E9E2D6;
    border-radius:12px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:6px
}
 .mini-chat .mb{
    font-size:12px;
    padding:8px 11px;
    border-radius:11px;
    max-width:85%;
    line-height:1.4
}
 .mini-chat .mi{
    background:#fff;
    align-self:flex-start;
    border-top-left-radius:3px
}
 .mini-chat .mo{
    background:#D2F0D9;
    align-self:flex-end;
    border-top-right-radius:3px
}
/* ============ 9 PARTNERSHIP ============ */
 .partner{
    background:var(--cream);
    padding:150px 0
}
 .partner .cols{
    display:flex;
    gap:5vw;
    align-items:center;
    flex-wrap:wrap
}
 .partner .photo-card{
    flex:1;
    min-width:300px;
    height:460px
}
 .partner .photo-card .float-chip{
    top:26px;
    right:-14px
}
 .partner .cards{
    flex:1;
    min-width:300px;
    display:flex;
    flex-direction:column;
    gap:16px
}
 .partner h2{
    font-size:clamp(30px,3.8vw,50px);
    line-height:1.1;
    margin-bottom:28px
}
 .pcard{
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:16px;
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:center
}
 .pcard img{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0
}
 .pcard h4{
    font-family:var(--display);
    font-size:17px;
    margin-bottom:3px
}
 .pcard p{
    font-size:13.5px;
    color:var(--gray);
    line-height:1.5
}
/* ============ 10 RESULTS + TESTIMONIALS ============ */
 .results{
    background:var(--cream);
    padding:0 0 150px
}
 .metric-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    margin-top:50px
}
 .metric{
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:16px;
    padding:30px
}
 .metric .n{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(32px,3.4vw,46px);
    color:var(--blue)
}
 .metric .d{
    font-size:14px;
    color:var(--charcoal);
    margin-top:8px;
    font-weight:500
}
 .metric .s{
    font-size:12.5px;
    color:var(--gray);
    margin-top:4px
}
 .twrap{
    margin-top:90px;
    text-align:center;
    position:relative
}
 .t-eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--blue)
}
 .t-line{
    width:34px;
    height:2px;
    background:var(--blue);
    margin:26px auto 34px
}
 .tslide{
    display:none;
    max-width:880px;
    margin:0 auto
}
 .tslide.on{
    display:block
}
 .tslide blockquote{
    font-size:clamp(20px,2.6vw,30px);
    line-height:1.5;
    color:var(--charcoal);
    font-weight:400
}
 .tslide img{
    width:78px;
    height:78px;
    border-radius:50%;
    object-fit:cover;
    margin:44px auto 18px;
    border:3px solid #fff;
    box-shadow:0 8px 24px -10px rgba(30,29,34,.25)
}
 .t-name{
    font-weight:600;
    font-size:16px
}
 .t-role{
    color:var(--gray);
    font-size:14px;
    margin-top:5px
}
 .t-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin-top:44px
}
 .t-controls button{
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid var(--stroke);
    background:#fff;
    color:var(--charcoal);
    cursor:pointer;
    font-size:20px;
    line-height:1;
    transition:all .25s
}
 .t-controls button:hover{
    border-color:var(--blue);
    color:var(--blue)
}
 .t-dots{
    display:flex;
    gap:8px;
    align-items:center
}
 .t-dots i{
    width:8px;
    height:8px;
    border-radius:99px;
    background:#DEDACB;
    transition:all .35s
}
 .t-dots i.on{
    width:26px;
    background:var(--gray)
}
/* ============ 11 HOW IT WORKS ============ */
 .how{
    background:var(--charcoal);
    padding:150px 0
}
 .how-head{
    text-align:center;
    margin-bottom:70px
}
 .eyebrow.nol::before{
    display:none
}
 .how-head .eyebrow{
    justify-content:center;
    display:inline-flex
}
 .how-head h2{
    color:var(--cream);
    font-size:clamp(32px,4.4vw,58px);
    line-height:1.12
}
 .how-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:26px
}
 .hcard{
    background:#26252B;
    border:1px solid rgba(255,252,234,.09);
    border-radius:18px;
    overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s
}
 .hcard:hover{
    transform:translateY(-6px);
    border-color:rgba(73,143,221,.45)
}
 .himg{
    position:relative;
    height:220px;
    overflow:hidden
}
 .himg img{
    width:100%;
    height:100%;
    object-fit:cover
}
 .day{
    position:absolute;
    top:16px;
    left:16px;
    background:rgba(30,29,34,.75);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,252,234,.18);
    color:var(--cream);
    font-size:12.5px;
    font-weight:500;
    border-radius:999px;
    padding:6px 14px;
    z-index:2
}
 .hbody{
    padding:30px 28px 34px
}
 .hnum{
    font-family:var(--display);
    font-weight:700;
    font-size:44px;
    color:var(--blue-shade2);
    line-height:1;
    margin-bottom:16px
}
 .hbody h3{
    color:var(--cream);
    font-size:21px;
    line-height:1.25;
    margin-bottom:12px
}
 .hbody p{
    color:rgba(255,252,234,.55);
    font-size:14.5px;
    line-height:1.7
}
/* ============ 12 OMNICHANNEL ============ */
 .omni{
    background:var(--cream);
    padding:150px 0;
    text-align:center;
    overflow:hidden
}
 .omni h2{
    font-size:clamp(30px,3.8vw,50px);
    line-height:1.1;
    margin-bottom:14px
}
 .omni p.sub{
    color:var(--gray);
    font-size:17px;
    margin-bottom:60px
}
 .omni-viz{
    position:relative;
    max-width:760px;
    margin:0 auto;
    height:340px
}
 .omni-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
 .omni-svg path{
    stroke:var(--blue-stroke);
    stroke-width:1.5;
    fill:none;
    stroke-dasharray:8 8
}
 .omni-node{
    position:absolute;
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:14px;
    padding:12px 18px;
    font-size:13.5px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:0 14px 34px -18px rgba(30,29,34,.3)
}
 .omni-node i{
    width:10px;
    height:10px;
    border-radius:3px;
    display:inline-block
}
 .omni-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:var(--charcoal);
    border-radius:18px;
    padding:22px 34px;
    z-index:2
}
 .omni-center svg{
    height:30px;
    width:auto
}
/* ============ 13 INTEGRATIONS ============ */
 .integr{
    background:var(--cream);
    padding:0 0 150px
}
 .integr .cols{
    display:flex;
    gap:5vw;
    align-items:center;
    flex-wrap:wrap
}
 .integr .grid{
    flex:1.1;
    min-width:300px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}
 .igrid-item{
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:14px;
    padding:22px 10px;
    text-align:center;
    font-size:13.5px;
    font-weight:600;
    color:var(--charcoal);
    transition:all .25s
}
 .igrid-item:hover{
    border-color:var(--blue-stroke);
    transform:translateY(-3px)
}
 .integr .code{
    flex:1;
    min-width:300px;
    background:var(--charcoal);
    border-radius:16px;
    padding:28px;
    font-family:ui-monospace,monospace;
    font-size:12.5px;
    color:#B9D9F7;
    line-height:1.7;
    overflow:auto
}
 .integr .code .c{
    color:#5f6b7a
}
.integr .code .k{
    color:var(--blue-shade2)
}
.integr .code .s{
    color:#8FD3A7
}
/* ============ 14 FAQ ============ */
 .faq{
    background:var(--cream);
    padding:0 0 150px
}
 .faq h2{
    font-size:clamp(30px,3.6vw,46px);
    margin-bottom:44px
}
 .qa{
    border-bottom:1px solid var(--stroke)
}
 .qa button.q{
    width:100%;
    background:none;
    border:none;
    text-align:left;
    font-family:var(--display);
    font-size:18px;
    padding:24px 40px 24px 0;
    cursor:pointer;
    position:relative;
    color:var(--charcoal)
}
 .qa button.q::after{
    content:"+";
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    font-size:26px;
    color:var(--blue);
    transition:transform .3s;
    font-family:var(--body);
    font-weight:300
}
 .qa.open button.q::after{
    transform:translateY(-50%) rotate(45deg)
}
 .qa .a{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s cubic-bezier(.2,.8,.2,1)
}
 .qa .a p{
    padding:0 0 24px;
    color:var(--gray);
    font-size:15px;
    line-height:1.7;
    max-width:720px
}
/* ============ 15 CTA ============ */
 .cta{
    background:var(--charcoal);
    padding:160px 6vw;
    text-align:center;
    overflow:hidden
}
 .cta-photo{
    position:absolute;
    inset:0;
    opacity:.1
}
 .cta-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1)
}
 .cta-circuit{
    position:absolute;
    inset:0;
    opacity:.5
}
 .cta-circuit path{
    fill:none;
    stroke:rgba(33,125,218,.55);
    stroke-width:1
}
 .cta-inner{
    position:relative;
    z-index:2
}
 .cta h2{
    color:var(--cream);
    font-size:clamp(34px,4.8vw,62px);
    line-height:1.06;
    margin-bottom:18px
}
 .cta p{
    color:rgba(255,252,234,.6);
    font-size:18px;
    margin-bottom:40px
}
 .cta .btns{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap
}
 .cta .wm{
    width:110px;
    margin:66px auto 0;
    opacity:.45
}
/* ============ 16 FOOTER ============ */
 footer{
    background:var(--charcoal);
    border-top:1px solid rgba(255,252,234,.1);
    padding:70px 6vw 36px;
    color:rgba(255,252,234,.65)
}
 .f-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(4,1fr);
    gap:34px;
    max-width:1280px;
    margin:0 auto
}
 .f-grid h5{
    color:var(--cream);
    font-family:var(--display);
    font-size:14.5px;
    margin-bottom:16px;
    letter-spacing:.04em
}
 .f-grid a{
    display:block;
    color:rgba(255,252,234,.55);
    text-decoration:none;
    font-size:13.5px;
    margin-bottom:10px;
    transition:color .2s
}
 .f-grid a:hover{
    color:var(--blue-shade2)
}
 .f-brand svg{
    height:26px;
    margin-bottom:16px
}
 .f-brand p{
    font-size:13px;
    line-height:1.6;
    max-width:240px
}
 .f-bottom{
    max-width:1280px;
    margin:50px auto 0;
    padding-top:26px;
    border-top:1px solid rgba(255,252,234,.1);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    font-size:12.5px;
    color:rgba(255,252,234,.45)
}
 .mbp-foot{
    height:46px;
    width:auto;
    border-radius:10px
}
/* ============ META VERIFIED ============ */
 .metasec{
    background:var(--charcoal);
    padding:150px 0
}
 .meta-cols{
    display:flex;
    gap:6vw;
    align-items:center;
    flex-wrap:wrap
}
 .meta-left{
    flex:1;
    min-width:300px
}
 .mbp-lg{
    height:88px;
    width:auto;
    border-radius:14px
}
 .metasec h2{
    color:var(--cream);
    font-size:clamp(30px,3.8vw,50px);
    line-height:1.1;
    margin-bottom:20px
}
 .metasec .meta-left p{
    color:rgba(255,252,234,.6);
    font-size:16.5px;
    line-height:1.7;
    max-width:480px
}
 .meta-cards{
    flex:1;
    min-width:300px;
    display:flex;
    flex-direction:column;
    gap:16px
}
 .mcard{
    background:rgba(255,252,234,.04);
    border:1px solid rgba(255,252,234,.12);
    border-radius:16px;
    padding:24px 26px;
    display:flex;
    gap:18px;
    align-items:flex-start
}
 .mic{
    width:42px;
    height:42px;
    border-radius:12px;
    background:var(--blue);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    flex-shrink:0
}
 .mcard h4{
    color:var(--cream);
    font-family:var(--display);
    font-size:17px;
    margin-bottom:6px
}
 .mcard p{
    color:rgba(255,252,234,.55);
    font-size:13.5px;
    line-height:1.6
}
/* ============ CONTACT ============ */
 .contact{
    background:var(--charcoal);
    padding:150px 0;
    overflow:hidden
}
 .contact-grid-bg{
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(33,125,218,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(33,125,218,.05) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(circle at 70% 30%,#000 20%,transparent 80%)
}
 .contact .wrap{
    position:relative;
    z-index:2
}
 .contact-cols{
    display:flex;
    gap:5vw;
    align-items:flex-start;
    flex-wrap:wrap
}
 .contact-copy{
    flex:.9;
    min-width:320px
}
 .pill-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid rgba(255,252,234,.2);
    border-radius:999px;
    padding:8px 18px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--cream)
}
 .pill-badge i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue-shade2);
    display:inline-block
}
 .contact-copy h2{
    color:var(--cream);
    font-size:clamp(34px,4.4vw,58px);
    line-height:1.08;
    margin:26px 0 20px
}
 .contact-copy h2 .b{
    color:var(--blue-shade)
}
 .contact-copy>p{
    color:rgba(255,252,234,.6);
    font-size:16.5px;
    line-height:1.7;
    max-width:440px
}
 .c-chat{
    margin-top:40px;
    background:#26252B;
    border:1px solid rgba(255,252,234,.1);
    border-radius:18px;
    overflow:hidden;
    max-width:520px
}
 .c-chat-head{
    background:#2C2B32;
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:12px
}
 .c-av{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--wa);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0
}
 .c-chat-head b{
    color:var(--cream);
    font-size:14.5px;
    display:block
}
 .c-chat-head em{
    font-style:normal;
    color:var(--wa);
    font-size:12px
}
 .c-chat-body{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:12px
}
 .cb{
    max-width:74%;
    padding:12px 16px;
    border-radius:14px;
    font-size:13.5px;
    line-height:1.5
}
 .cb.in{
    background:#fff;
    color:var(--charcoal);
    align-self:flex-start;
    border-top-left-radius:4px
}
 .cb.out{
    background:var(--blue);
    color:#fff;
    align-self:flex-end;
    border-top-right-radius:4px
}
 .typing{
    align-self:flex-end;
    background:#31303a;
    border-radius:999px;
    padding:9px 14px;
    display:flex;
    gap:5px
}
 .typing i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,252,234,.6);
    animation:tp 1.2s ease-in-out infinite
}
 .typing i:nth-child(2){
    animation-delay:.15s
}
.typing i:nth-child(3){
    animation-delay:.3s
}
 @keyframes tp{
    0%,100%{
        opacity:.3;
        transform:translateY(0)
    }
    50%{
        opacity:1;
        transform:translateY(-3px)
    }
}
 .c-feats{
    margin-top:22px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:14px 26px;
    justify-content:center
}
 .cf{
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(255,252,234,.8);
    font-size:14.5px
}
 .cf span{
    width:32px;
    height:32px;
    border-radius:9px;
    border:1px solid rgba(73,143,221,.5);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    flex-shrink:0
}
 .contact .c-alt{
    margin-top:26px;
    color:rgba(255,252,234,.75)
}
 .contact .c-alt a{
    color:var(--blue-shade2)
}
 .contact-right{
    flex:1.1;
    min-width:330px;
    display:flex;
    flex-direction:column
}
 .contact-form{
    width:100%;
    background:rgba(255,252,234,.03);
    border:1px solid rgba(255,252,234,.12);
    border-radius:20px;
    padding:38px;
    backdrop-filter:blur(8px)
}
 .contact-form label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--cream);
    margin-bottom:18px
}
 .contact-form label em{
    color:var(--blue-shade2);
    font-style:normal
}
 .contact-form input,.contact-form select,.contact-form textarea{
    display:block;
    width:100%;
    margin-top:8px;
    padding:13px 15px;
    border:1px solid rgba(255,252,234,.16);
    border-radius:10px;
    font-family:var(--body);
    font-size:14.5px;
    background:rgba(255,252,234,.05);
    color:var(--cream);
    transition:border-color .2s;
    outline:none
}
 .contact-form ::placeholder{
    color:rgba(255,252,234,.35)
}
 .contact-form select{
    color:rgba(255,252,234,.75)
}
 .contact-form select option{
    background:var(--charcoal);
    color:var(--cream)
}
 .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
    border-color:var(--blue-shade)
}
 .f-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
 .f-label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--cream);
    margin-bottom:10px
}
 .f-services{
    margin-bottom:20px
}
 .svc-chips{
    display:flex;
    flex-wrap:wrap;
    gap:9px
}
 .svc{
    margin-bottom:0!important
}
 .svc input{
    display:none
}
 .svc span{
    display:inline-block;
    border:1px solid rgba(255,252,234,.2);
    border-radius:999px;
    padding:8px 16px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:all .2s;
    background:transparent;
    color:rgba(255,252,234,.75)
}
 .svc input:checked+span{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff
}
 .f-submit{
    width:100%;
    justify-content:center;
    font-size:16px;
    margin-top:4px
}
 .f-note{
    margin-top:14px;
    text-align:center;
    font-size:13px;
    color:rgba(255,252,234,.45)
}
 .f-success{
    display:none;
    margin-top:16px;
    background:rgba(37,211,102,.12);
    border:1px solid rgba(37,211,102,.35);
    color:#7fe0a5;
    border-radius:10px;
    padding:13px 16px;
    font-size:14px
}
/* ============ FLOATING CHAT ============ */
 .chat-fab{
    position:fixed;
    bottom:26px;
    right:26px;
    z-index:130;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:14px
}
 .fab-btn{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--wa);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 14px 34px -10px rgba(37,211,102,.55);
    position:relative;
    transition:transform .3s
}
 .fab-btn:hover{
    transform:scale(1.07)
}
 .fab-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid var(--wa);
    animation:ring 2.4s ease-out infinite
}
 @keyframes ring{
    0%{
        transform:scale(1);
        opacity:.8
    }
    100%{
        transform:scale(1.65);
        opacity:0
    }
}
 .chat-pop{
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:18px;
    padding:18px;
    width:290px;
    box-shadow:0 30px 70px -20px rgba(30,29,34,.4);
    display:flex;
    gap:13px;
    align-items:flex-start;
    position:relative;
    opacity:0;
    transform:translateY(14px) scale(.96);
    pointer-events:none;
    transition:all .45s cubic-bezier(.2,.9,.3,1.2)
}
 .chat-pop.on{
    opacity:1;
    transform:none;
    pointer-events:auto
}
 .chat-pop img{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    border:2px solid var(--wa)
}
 .cp-txt{
    display:flex;
    flex-direction:column;
    gap:5px
}
 .cp-txt b{
    font-size:14.5px
}
 .cp-txt span{
    font-size:12.5px;
    color:var(--gray);
    line-height:1.5
}
 .cp-btn{
    margin-top:8px;
    background:var(--blue);
    color:#fff;
    border-radius:8px;
    padding:8px 14px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    align-self:flex-start
}
 .cp-x{
    position:absolute;
    top:8px;
    right:10px;
    border:none;
    background:none;
    font-size:18px;
    color:var(--gray);
    cursor:pointer;
    line-height:1
}
 @media (max-width:960px){
     nav .links{
        display:none
    }
     .hero-photos{
        height:420px;
        width:100%
    }
     .ind-panel{
        grid-template-columns:1fr
    }
     .ind-photo{
        min-height:260px
    }
     .f-grid{
        grid-template-columns:1fr 1fr
    }
     .pin-stage{
        flex-direction:column;
        gap:20px;
        padding-top:80px
    }
     .pin-copy-wrap{
        height:210px;
        max-width:100%
    }
     .phone{
        width:min(250px,70vw);
        height:52vh
    }
     .progress-rail{
        left:16px
    }
     .promise .left{
        position:static
    }
     .contact-copy{
        position:static
    }
     .f-row{
        grid-template-columns:1fr
    }
}
 @media (prefers-reduced-motion:reduce){
     *,*::before,*::after{
        animation:none!important;
        transition:none!important
    }
     .reveal{
        opacity:1;
        transform:none
    }
}
/* custom azzam */
 .results {
     padding-top: 150px;
}
 .faq {
     padding-top: 150px;
}
 .mcard h4 {
     width: 150px;
     margin: 0;
     font-weight: 600;
}
 .mcard-content-wrapper {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 8px;
}
 .hp {
     overflow: visible;
}
 .logo-ticker img {
     max-width: 100px;
}
 .stats-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:24px;
}
 .stat-card{
     background:#fff;
     border:1px solid #ECECEC;
     border-radius:28px;
     padding:34px 17px;
     transition:.35s ease;
     box-shadow: 0 6px 24px rgba(0,0,0,.04), inset 0 1px rgba(255,255,255,.8);
}
 .stat-card:hover{
     transform:translateY(-8px);
     box-shadow: 0 18px 45px rgba(0,0,0,.08);
}
 .stat-icon{
     width:62px;
     height:62px;
     border-radius:50%;
     display:flex;
     align-items:center;
     justify-content:center;
     margin-bottom:26px;
     font-size:22px;
     position:relative;
     overflow:hidden;
}
 .stat-icon::after{
     content:"";
     position:absolute;
     inset:8px;
     border-radius:50%;
     background:rgba(255,255,255,.55);
     filter:blur(6px);
}
 .stat-icon.blue{
     background:#EAF2FF;
     color:#3A7BFF;
}
 .stat-icon.green{
     background:#E8F9EE;
     color:#22C55E;
}
 .stat-number{
     font-size:64px;
     font-weight:800;
     line-height:1;
     color:#111;
     margin-bottom:14px;
}
 .stat-title{
     font-size:21px;
     font-weight:600;
     color:#202020;
     line-height:1.35;
}
 .stat-subtitle{
     margin-top:10px;
     font-size:16px;
     color:#9A9A9A;
     line-height:1.5;
}
 .stat-card{
     position:relative;
     overflow:hidden;
}
 .stat-card::before{
     content:"";
     position:absolute;
     left:0;
     top:0;
     width:100%;
     height:4px;
     background:#2F80ED;
     transform:scaleX(0);
     transform-origin:left;
     transition:.35s;
}
 .stat-card:hover::before{
     transform:scaleX(1);
}
 @media(max-width:768px){
     .stats-grid{
         grid-template-columns:1fr;
    }
     .stat-card{
         padding:28px;
    }
     .stat-number{
         font-size:52px;
    }
}
 .stat-card{
     opacity:0;
     transform:translateY(30px);
     animation:fadeUp .7s forwards;
}
 @keyframes fadeUp{
     from{
         opacity:0;
         transform:translateY(30px);
    }
     to{
         opacity:1;
         transform:translateY(0);
    }
}
 .promise .eyebrow, .promise h2 .b {
     color: var(--wa);
}
 .promise .eyebrow::before {
     background: var(--wa);
}
 .pillar {
     min-height: 160px;
}
 .pillar h3 {
     margin-top: 0px;
}
 .feature-icon{
     width:54px;
     height:54px;
     display:flex;
     align-items:center;
     justify-content:center;
     margin:18px 0 20px;
     border-radius:16px;
     border:2px solid #2F80ED;
     color:#2F80ED;
     font-size:22px;
     transition:.3s;
}
 .pillar:hover .feature-icon{
     background:#2F80ED;
     color:#fff;
}
 .pillar.blue .feature-icon{
     border-color:rgba(255,255,255,.6);
     color:#fff;
}
 .pillar.blue:hover .feature-icon{
     background:#fff;
     color:#2F80ED;
}
 .pillar:first-child .chip {
     margin-bottom: 15px;
}
 .pillar .pillar-content p {
     font-size: 14px;
}
/**/
 .omni-viz{
     position:relative;
     height:520px;
}
 .omni-svg{
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
}
 .omni-node i{
     width:26px;
     height:26px;
     display:flex;
     align-items:center;
     justify-content:center;
     border-radius:50%;
     color:#fff;
     font-size:13px;
     margin-right:10px;
     flex-shrink:0;
}
 .fa-whatsapp{
     background:#25D366;
}
 .fa-instagram{
     background:#E1306C;
}
 .fa-facebook-messenger{
     background:#0084FF;
}
 .fa-facebook{
     background:#1877F2;
}
 .fa-comments{
     background:#5B9BD5;
}
 #nav .links a, nav .links a {
     position:relative;
     transition:.25s ease;
}
 #nav .links a.active, nav .links a.active{
     color:#2F80ED;
}
 #nav .links a, nav .links a{
     padding:8px 14px;
     border-radius:999px;
     transition:.25s;
}
 #nav .links a.active, nav .links a.active {
     background:#EEF5FF;
     color:#2F80ED;
}


@media (min-width: 993px) {
}
@media screen and (max-width: 1100px) {}
 
@media screen and (max-width: 992px) {

}

@media screen and (max-width: 575px) {
 
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 480px) {

}