/*:root{
     --bg-0:#0d0d0d;
     --bg-1:#141414;
     --bg-2:#1b1b1b;
     --bg-3:#222;
     --text-main:#e8e2d8;
     --text-muted:#aaa;
     --text-dim:#777;
     --gold:#3b82f6;
     --gold-soft:#e8c684;
     --bronze:#2563eb;
     --signal:#1f9d6b;
     --border:rgba(199,154,69,.12);
     --font-serif:"Fraunces",Georgia,serif;
     --font-sans:"Inter",system-ui,sans-serif;
     --font-mono:"IBM Plex Mono",monospace;
}
*/
 :root{
     --bg-0:#ffffff;
     --bg-1:#f8fafc;
     --bg-2:#eef3f8;
     --bg-3:#e2e8f0;
     --text-main: #333;
     --text-muted:#6b7280;
     --text-dim:#94a3b8;
     --blue:#3b82f6;
     --blue-soft:#60a5fa;
     --blue-dark:#2563eb;
     --signal:#10b981;
     --border:rgba(59,130,246,.12);
     --font-serif:"Sora",Georgia,serif;
     --font-sans:"Inter",system-ui,sans-serif;
     --font-mono:"IBM Plex Mono",monospace;
}
 *{
     box-sizing:border-box;
     margin:0;
     padding:0 
}
 html{
     scroll-behavior:smooth;
     -webkit-font-smoothing:antialiased;
     background: #fff;
}
 body{
     background:var(--bg-0);
     color:var(--text-main);
     font-family:var(--font-sans);
     line-height:1.5 
}
 body{
     background:var(--bg-0);
     color:var(--text-main);
     font-family:var(--font-sans);
     line-height:1.5;
     background: radial-gradient(circle at top left, #ddf1ff 0%, #fff 25%), radial-gradient(circle at bottom right, #e8f7ff 0%, #ffffff 20%), linear-gradient(180deg,#ffffff 0%,#f8fcff 100%) !important;
     background-attachment: fixed;
     line-height: 1.55;
     -webkit-font-smoothing: antialiased;
}
 img{
     max-width:100%;
     display:block 
}
 a{
     color:inherit;
     text-decoration:none 
}
 ::selection{
     background:rgba(199,154,69,.35);
     color:#0d0d0d 
}
 .container{
     max-width:96%;
     margin:0 auto;
     padding:0 24px 
}
 .gold-text{
     background:linear-gradient(135deg,#93c5fd,#60a5fa 50%,#2563eb);
     -webkit-background-clip:text;
     background-clip:text;
     color:transparent 
}
 .ivory-soft{
     color: #333;
}
 .kicker{
     font-family:var(--font-mono);
     font-size:11px;
     letter-spacing:.25em;
     text-transform:uppercase;
     color:var(--gold) 
}
 .kicker.center{
     text-align:center 
}
 .mt{
     margin-top:24px 
}
 .mt-lg{
     margin-top:56px 
}
/* NAV */
 #navbar{
     position:fixed;
     top:1px;
     left:1px;
     right:1px;
     z-index:50;
     transition:all .4s 
}
/*#navbar.scrolled{
     background:rgba(13,13,13,.85);
     backdrop-filter:blur(14px);
     border-bottom:1px solid var(--border) 
}
*/
 #navbar.scrolled{
     background:rgba(255,255,255,.95);
     backdrop-filter:blur(14px);
     border-bottom:1px solid var(--border);
}
 .nav{
     height:80px;
     display:flex;
     align-items:center;
     justify-content:space-between 
}
 .brand{
     display:flex;
     align-items:center;
     gap:12px 
}
 .brand img {
     height: 60px;
     width: auto;
     border-radius: 6px;
     box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
}
 .brand-name{
     font-family:var(--font-serif);
     font-size:18px;
     letter-spacing:-.02em 
}
 .brand-sub{
     font-family:var(--font-mono);
     font-size:10px;
     letter-spacing:.2em;
     text-transform:uppercase;
     color:var(--text-dim) 
}
 .nav-links{
     display:none;
     gap: 16px;
     list-style:none 
}
 .nav-links a{
     font-size: 14px;
     color: #333;
     transition:color .2s 
}
 .nav-links a:hover{
     color:var(--gold) 
}
 .nav-cta{
     display:flex;
     align-items:center;
     gap:12px 
}
 .menu-btn{
     background:none;
     border:none;
     font-size:22px;
     color:var(--text-main);
     cursor:pointer;
     display:block 
}
 .mobile-menu{
     display:none;
     flex-direction:column;
     gap:16px;
     padding:24px;
     background: #fff;
     border-top:1px solid var(--border) 
}
 .mobile-menu.open{
     display:flex 
}
 .mobile-menu a{
     font-family:var(--font-serif);
     font-size:20px;
     color: #333;
}
 @media(min-width:1024px){
     .nav-links{
         display:flex 
    }
     .menu-btn{
         display:none 
    }
     .mobile-menu{
         display:none!important 
    }
}
/* BUTTONS */
 .btn{
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding:10px 20px;
     border-radius:999px;
     font-size:14px;
     font-weight:500;
     transition:all .2s;
     cursor:pointer;
     border:none 
}
 .btn-lg{
     padding:16px 28px;
     font-size:15px 
}
 .btn-gold{
     background:linear-gradient(135deg,#bfdbfe,#60a5fa 45%,#2563eb);
     color:#0d0d0d;
     box-shadow: 0 20px 60px -20px rgb(117 162 217);
}
 .btn-gold:hover{
     filter:brightness(1.08) 
}
 .btn-ghost{
     background:rgba(255,255,255,.04);
     backdrop-filter:blur(14px);
     border:1px solid rgba(199,154,69,.18);
     color:var(--text-main) 
}
 .btn-ghost:hover{
     border-color:var(--gold) 
}
/* HERO */
 .hero{
     position:relative;
     min-height:100vh;
     padding:140px 0 100px;
     overflow:hidden;
     padding-bottom:30px;
     margin-bottom: -50px;
}
 .hero-bg{
     position:absolute;
     inset:0;
     z-index:-1 
}
 .hero-bg img{
     width:100%;
     height:100%;
     object-fit:cover;
     opacity:.25 
}
 .hero-overlay{
     position:absolute;
     inset:0;
     background: linear-gradient(180deg, #ffffff, #b1d3fe66 60%, #fff);
     background: none;
}
 .grid-bg{
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(199,154,69,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(199,154,69,.06) 1px,transparent 1px);
     background-size:56px 56px;
     mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
     -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
     opacity:.6;
     background: #fff;
}
 .hero-grid{
     display:grid;
     grid-template-columns:1fr;
     gap:40px;
     align-items:center 
}
/*.hero-grid {
     grid-template-columns: 7fr 5fr;
}
 */
 @media(min-width:1024px){
     .hero-grid{
    }
}
 .chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 14px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .04);
     backdrop-filter: blur(14px);
     border: 1px solid var(--border);
     font-family: 'Sora';
     font-size: 12px;
     text-transform: uppercase;
     color: rgba(232, 226, 216, .8) !important;
     color: #333;
}
 .chip.gold{
     color:var(--gold);
     border-color: rgb(165 204 252);
     font-family: 'Sora';
     letter-spacing: 1px;
}
 .chips{
     display:flex;
     flex-wrap:wrap;
     gap:8px;
     margin-top:24px 
}
 .chips.center{
     justify-content:center 
}
 .display{
     margin-top:24px;
     font-family:var(--font-serif);
     font-size:clamp(40px,7vw,80px);
     line-height:1.02;
     letter-spacing:-.02em;
     color: var(--text-main);
}
 .lead{
     margin-top:28px;
     max-width:640px;
     font-size:18px;
     color: #333;
     line-height:1.6 
}
 .cta-row{
     margin-top:36px;
     display:flex;
     flex-wrap:wrap;
     gap:16px 
}
/* hero panels */
 .hero-panels{
     position:relative;
     height:480px;
     display:none 
}
 @media(min-width:1024px){
     .hero-panels{
         display:block 
    }
}
 .ring{
     position:absolute;
     border-radius:50%;
     border:1px solid rgba(199,154,69,.25);
     inset:0;
     margin:auto;
     animation:spin 60s linear infinite 
}
 .ring-1{
     width:380px;
     height:380px 
}
 .ring-2{
     width:260px;
     height:260px;
     border-color:rgba(199,154,69,.18);
     animation-duration:90s;
     animation-direction:reverse 
}
 .halo{
     position:absolute;
     inset:0;
     margin:auto;
     width:128px;
     height:128px;
     border-radius:50%;
     background:linear-gradient(135deg,#e8c684,#3b82f6,#2563eb);
     opacity:.3;
     filter:blur(60px) 
}
 .panel{
     position:absolute;
     min-width:160px;
     padding:14px 16px;
     border-radius:14px;
     background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
     border:1px solid rgba(199,154,69,.18);
     box-shadow:0 20px 50px -25px rgba(0,0,0,.5);
     animation:float 7s ease-in-out infinite 
}
 .panel:nth-child(5){
     animation-delay:.8s 
}
 .panel:nth-child(6){
     animation-delay:1.6s 
}
 .panel-label{
     font-family:var(--font-mono);
     font-size:10px;
     letter-spacing:.2em;
     text-transform:uppercase;
     color:var(--text-dim) 
}
 .panel-value{
     font-family:var(--font-serif);
     font-size:26px;
     margin-top:4px;
     color:var(--text-main) 
}
 .panel-delta{
     font-size:11px;
     color:var(--signal);
     margin-top:2px 
}
 @keyframes spin{
     to{
         transform:rotate(360deg) 
    }
}
 @keyframes float{
     0%,100%{
         transform:translateY(0) 
    }
     50%{
         transform:translateY(-10px) 
    }
}
/* SECTIONS */
 .section{
     padding: 30px 0;
     position:relative 
}
 .section-head{
     max-width:760px;
     margin-bottom:64px 
}
 .section-head h2{
     margin-top:14px;
     font-family:var(--font-serif);
     font-size:clamp(32px,5vw,52px);
     line-height:1.05;
     letter-spacing:-.02em 
}
 .section-head .intro{
     margin-top:20px;
     font-size:18px;
     color: #333;
     line-height:1.6 
}
/* CARDS */
 .cards-3,.cards-4{
     display:grid;
     gap:20px;
     grid-template-columns:1fr 
}
 @media(min-width:700px){
     .cards-3,.cards-4{
         grid-template-columns:repeat(2,1fr) 
    }
}
 @media(min-width:1024px){
     .cards-3{
         grid-template-columns:repeat(3,1fr) 
    }
     .cards-4{
         grid-template-columns:repeat(4,1fr) 
    }
}
/*.card{
     position:relative;
     padding:22px;
     border-radius:18px;
     background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
     border:1px solid var(--border);
     box-shadow:0 30px 80px -50px rgba(0,0,1px,.5);
     transition:transform .3s,box-shadow .3s 
}
*/
 .card {
     position: relative;
     padding: 32px;
     border-radius: 18px;
     background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01));
     border: 1px solid var(--border);
     box-shadow: 0 30px 80px -50px rgba(0,0,1px,.5);
     transition: transform .3s, box-shadow .3s;
}
 .card:hover{
     transform:translateY(-4px);
     box-shadow:0 30px 80px -30px rgba(199,154,69,.25) 
}
 .card-num{
     font-family:var(--font-mono);
     font-size:11px;
     letter-spacing:.25em;
     color:var(--gold);
     margin-bottom:18px 
}
 .card h3 {
     font-family: var(--font-serif);
     font-size: 17px;
     margin-bottom: 10px;
     letter-spacing: -.01em;
     line-height: 20px;
}
 .card p {
     color: #333;
     font-size: 13px;
     line-height: 1.4;
}
 .stat{
     font-family:var(--font-serif);
     font-size:48px;
     background:linear-gradient(135deg,#93c5fd,#60a5fa 50%,#2563eb);
     -webkit-background-clip:text;
     background-clip:text;
     color:transparent;
     margin-bottom:8px 
}
/* TIERS */
 .tier-head{
     text-align:center;
     margin-bottom:24px 
}
 .tier-sub{
     margin-top:6px;
     color:rgba(232,226,216,.6);
     font-size:14px 
}
 .tier-grid{
     display:grid;
     gap:12px;
     grid-template-columns:repeat(2,1fr) 
}
 @media(min-width:700px){
     .tier-grid{
         grid-template-columns:repeat(5,1fr) 
    }
}
 .tier-block{
     padding:18px;
     border-radius:14px;
     background:rgba(255,255,255,.04);
     backdrop-filter:blur(14px);
     border:1px solid var(--border);
     text-align:center;
     font-size:14px;
     color:rgba(232,226,216,.85);
     transition:all .2s 
}
 .tier-block:hover{
     transform:translateY(-2px);
     border-color:var(--gold) 
}
 .gold-block{
     background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
     position:relative 
}
 .gold-block::before{
     content:"";
     position:absolute;
     inset:0;
     padding:1px;
     border-radius:inherit;
     background:linear-gradient(135deg,rgba(199,154,69,.7),rgba(15,31,74,.08),rgba(199,154,69,.5));
     -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
     -webkit-mask-composite:xor;
     mask-composite:exclude;
     pointer-events:none 
}
/* FLOW LINES */
 .flow-lines{
     height:64px;
     margin:24px 0;
     background:linear-gradient(to bottom,transparent 49.5%,rgba(199,154,69,.3) 50%,transparent 50.5%);
     position:relative 
}
/* SLAB */
 .slab{
     position:relative;
     padding:56px 32px;
     border-radius:24px;
     background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
     border:1px solid rgba(199,154,69,.18);
     text-align:center;
     box-shadow:0 0 1px rgba(199,154,69,.25),0 20px 60px -20px rgba(199,154,69,.35) 
}
 .slab-tag{
     position:absolute;
     top:-12px;
     left:50%;
     transform:translateX(-50%);
     padding:5px 14px;
     border-radius:999px;
     background:linear-gradient(135deg,#bfdbfe,#60a5fa 45%,#2563eb);
     color:#0d0d0d;
     font-family:var(--font-mono);
     font-size:10px;
     letter-spacing:.22em;
     text-transform:uppercase 
}
 .slab h3{
     font-family:var(--font-serif);
     font-size:clamp(26px,4vw,40px);
     line-height:1.1;
     letter-spacing:-.02em 
}
 .slab .chips{
     margin-top:24px 
}
/* SECTORS */
 .sector-grid{
     display:grid;
     gap:20px;
     grid-template-columns:1fr 
}
 @media(min-width:700px){
     .sector-grid{
         grid-template-columns:repeat(2,1fr) 
    }
}
 @media(min-width:1024px){
     .sector-grid{
         grid-template-columns:repeat(3,1fr) 
    }
}
 .sector-card{
     overflow:hidden;
     border-radius:18px;
     background:var(--bg-2);
     border:1px solid var(--border);
     transition:transform .3s,box-shadow .3s;
     display:block 
}
 .sector-card:hover{
     transform:translateY(-4px);
     box-shadow: 0 30px 80px -30px rgb(80 148 246 / 23%);
}
 .sector-card img{
     width:100%;
     height:200px;
     object-fit:cover 
}
 .sector-body{
     padding:24px 
}
 .sector-body h3{
     font-family:var(--font-serif);
     font-size:22px;
     margin:8px 0 10px;
     color:var(--text-main) 
}
 .sector-body p{
     color: #333;
     font-size:14px 
}
/* COMPARE */
 .compare{
     display:grid;
     gap:20px;
     grid-template-columns:1fr 
}
 @media(min-width:1024px){
     .compare{
         grid-template-columns:repeat(3,1fr) 
    }
}
 .compare-col{
     padding:32px;
     border-radius:18px;
     background:var(--bg-2);
     border:1px solid var(--border) 
}
 .compare-col h3{
     font-family:var(--font-serif);
     font-size:22px;
     margin:10px 0 16px;
     color:var(--text-main) 
}
 .compare-col ul{
     list-style:none;
     display:flex;
     flex-direction:column;
     gap:10px 
}
 .compare-col li{
     padding-left:20px;
     position:relative;
     color: #333;
     font-size:14px 
}
 .compare-col li::before{
     content:"";
     position:absolute;
     left:1px;
     top:9px;
     width:8px;
     height:8px;
     border-radius:50%;
     background:var(--gold);
     opacity:.5 
}
 .compare-col.highlight{
     background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
     box-shadow: 0 0 1px rgb(88 88 88 / 35%), 0 30px 80px -30px rgb(153 197 252 / 73%);
}
 .compare-col.highlight li::before{
     opacity:1 
}
/* CTA SECTION */
 .cta-section{
     background:var(--bg-1) 
}
 .cta-inner{
     text-align:center;
     max-width:760px;
     margin:0 auto 
}
 .cta-inner img{
     margin:0 auto 24px;
     border-radius:12px;
     box-shadow:0 20px 60px -20px rgba(199,154,69,.4) 
}
 .cta-inner h2{
     font-family:var(--font-serif);
     font-size:clamp(32px,5vw,52px);
     line-height:1.05;
     letter-spacing:-.02em 
}
 .cta-inner .intro{
     margin:20px 0 36px;
     color: #333;
     font-size:18px 
}
/* FOOTER */
 footer{
     border-top:1px solid rgba(199,154,69,.15);
     background:var(--bg-0);
     padding:56px 0 1px 
}
 .footer-grid{
     display:grid;
     gap:40px;
     grid-template-columns:1fr 
}
 @media(min-width:700px){
     .footer-grid{
         grid-template-columns:1fr 2fr 
    }
}
 .muted{
     margin-top:20px;
     color: #333;
     font-size:14px;
     max-width:380px;
     line-height:1.6 
}
 .footer-links{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:16px 
}
 @media(min-width:700px){
     .footer-links{
         grid-template-columns:repeat(3,1fr) 
    }
}
 .footer-links a{
     font-size:14px;
     color: #333;
     transition:color .2s 
}
 .footer-links a:hover{
     color:var(--gold) 
}
 .footer-bottom{
     border-top:1px solid rgba(199,154,69,.12);
     margin-top:48px;
     padding:24px;
     display:flex;
     flex-wrap:wrap;
     gap:12px;
     justify-content:space-between;
     font-family:var(--font-mono);
     font-size:11px;
     letter-spacing:.18em;
     text-transform:uppercase;
     color:var(--text-dim) 
}
/* REVEAL */
 .reveal{
     opacity:0;
     transform:translateY(20px);
     transition:opacity .8s ease,transform .8s ease 
}
 .reveal.in{
     opacity:1;
     transform:none 
}
 .section-head.reveal.in{
     max-width: 100%;
}
 .spog_wrap{
     max-width:100%;
     margin:auto;
     padding:50px 35px;
     background: #def1ff;
     margin-top: 30px;
     zoom: 0.8;
     border-radius: 20px;
}
/* ========================= HEADER ========================= */
 .spog_title{
     font-size:48px;
     line-height:1.1;
     font-weight:700;
     margin-bottom:20px;
}
 .spog_title span{
     color:#8a1f49;
}
 .spog_subtitle{
     font-size:22px;
     margin-bottom:30px;
}
/* ========================= MAIN GRID ========================= */
 .spog_layout{
     display:grid;
     grid-template-columns:280px 1fr;
     gap:35px;
}
/* ========================= LEFT LABELS ========================= */
 .spog_side{
     display:flex;
     flex-direction:column;
}
 .spog_side_block{
     margin-bottom:110px;
}
 .spog_side_title{
     font-size:16px;
     letter-spacing:5px;
     color:#8a8a8a;
     margin-bottom:10px;
     font-weight:700;
}
 .spog_side_text{
     font-size:18px;
     line-height:1.5;
     font-style:italic;
}
/* ========================= TOP DECISION MAKERS ========================= */
 .spog_top{
     display:grid;
     grid-template-columns:repeat(7,1fr);
     gap:18px;
}
 .spog_card{
     position:relative;
}
 .spog_person{
     background:#8a1f49;
     color:#fff;
     text-align:center;
     padding:10px;
     border-radius:50px;
     font-size:15px;
     font-weight:700;
     min-height:42px;
     display:flex;
     justify-content:center;
     align-items:center;
     line-height:1.2;
     height: 50px;
}
 .spog_question{
     margin-top:6px;
     border:2px solid #b06d85;
     background:#fff;
     min-height:115px;
     display:flex;
     align-items:center;
     justify-content:center;
     text-align:center;
     padding:15px;
     font-size:15px;
     font-style:italic;
     line-height:1.3;
     position:relative;
}
 .spog_question:after{
     content:"";
     position:absolute;
     bottom:-28px;
     left:50%;
     transform:translateX(-50%);
     width:10px;
     height:28px;
     background:#8a1f49;
}
/* ========================= SPOG LAYER ========================= */
 .spog_layer{
     margin-top:25px;
     background:#8a1f49;
     color:#fff;
     text-align:center;
     padding:55px 30px;
     position:relative;
}
 .spog_layer h2{
     font-size:34px;
     margin-bottom:18px;
}
 .spog_layer_services{
     font-size:18px;
     line-height:1.7;
}
 .spog_layer_usecase{
     margin-top:10px;
     font-size:16px;
     font-style:italic;
}
 .spog_process{
     margin-top:30px;
     letter-spacing:10px;
     font-size:15px;
}
/* ========================= CONNECTOR LINES ========================= */
 .spog_connectors{
     display:grid;
     grid-template-columns:2.8fr repeat(4,1fr);
     gap:18px;
     margin-top:0px;
     margin-bottom:0px;
}
 .spog_line{
     width:8px;
     height:36px;
     background:#d8d8d8;
     margin:auto;
}
/* ========================= STACK SECTION ========================= */
 .spog_stack{
     display:grid;
     grid-template-columns:2.8fr repeat(4,1fr);
     gap:18px;
}
 .spog_systems{
     background:#8a1f49;
     padding:12px;
}
 .spog_systems_title{
     text-align:center;
     color:#fff;
     font-size:20px;
     font-weight:700;
     margin-bottom:10px;
}
 .spog_system_grid{
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:10px;
}
 .spog_system_grid div{
     background:#fff;
     padding:14px;
     text-align:center;
     font-size:14px;
     min-height:50px;
     display:flex;
     align-items:center;
     justify-content:center;
}
 .spog_vendor{
     background:#f2f2f2;
     border:2px solid #e4e4e4;
     min-height:130px;
     display:flex;
     align-items:center;
     justify-content:center;
     text-align:center;
     padding:20px;
}
 .spog_vendor_inner{
     display:flex;
     flex-direction:column;
     gap:8px;
}
 .spog_vendor_name{
     font-size:18px;
     font-weight:700;
}
 .spog_vendor_text{
     font-style:italic;
     color:#777;
}
 .spog_vendor_other{
     background:#eef2ee;
}
/* ========================= FOOTER ========================= */
 .spog_footer{
     margin-top:25px;
     text-align:center;
     font-size:20px;
     font-style:italic;
}
 .spog_footer strong{
     color:#8a1f49;
}
 .spog_credit{
     text-align:right;
     margin-top:15px;
     color:#8a8a8a;
     font-style:italic;
}
/* ========================= RESPONSIVE ========================= */
 @media(max-width:1400px){
     .spog_top{
         grid-template-columns:repeat(4,1fr);
    }
}
 @media(max-width:992px){
     .spog_layout{
         grid-template-columns:1fr;
    }
     .spog_side{
         display:none;
    }
     .spog_top{
         grid-template-columns:repeat(2,1fr);
    }
     .spog_stack, .spog_connectors{
         grid-template-columns:1fr;
    }
}
 @media(max-width:768px){
     .spog_title{
         font-size:40px;
    }
     .spog_subtitle{
         font-size:20px;
    }
     .spog_top{
         grid-template-columns:1fr;
    }
     .spog_system_grid{
         grid-template-columns:1fr;
    }
     .spog_process{
         letter-spacing:3px;
         line-height:2;
    }
}
/* MAIN BACKGROUND */
 body{
     background: #fff;
     color:#111827;
}
/* TITLE */
 .spog_title{
     color:#111827;
}
 .spog_title span{
     color:#3b82f6;
}
/* SUBTITLE */
 .spog_subtitle{
     color:#d2c4ae;
}
/* LEFT LABELS */
 .spog_side_title{
     color:#8f836f;
}
 .spog_side_text{
     color:#475569;
}
/* PERSON PILLS */
 .spog_person{
     background:#3b82f6;
     color:#110f0d;
}
/* QUESTION BOXES */
 .spog_question{
     background:#181512;
     border:1px solid #3b82f6;
     color:#f1e7d7;
}
/* CONNECTORS */
 .spog_question:after{
     background:#3b82f6;
}
/* SPOG LAYER */
 .spog_layer{
     background:linear-gradient( 135deg, #1b1713 0%, #241d16 100% );
     border:1px solid #3b82f6;
     color:#fff;
     box-shadow:0 0 30px rgba(199,154,69,.12);
}
 .spog_layer h2{
     color:#3b82f6;
}
 .spog_layer_services{
     color:#f1e7d7;
}
 .spog_layer_usecase{
     color:#3b82f6;
}
 .spog_process{
     color:#111827;
}
/* STACK AREA */
 .spog_systems{
     background:#1b1713;
     border:1px solid #3b82f6;
}
 .spog_systems_title{
     color:#3b82f6;
}
 .spog_system_grid div{
     background:#110f0d;
     border:1px solid rgba(199,154,69,.4);
     color:#111827;
}
/* CONNECTOR LINES */
 .spog_line{
     background:#3b82f6;
}
/* VENDOR BOXES */
 .spog_vendor{
     background:#181512;
     border:1px solid rgba(199,154,69,.5);
}
 .spog_vendor_name{
     color:#3b82f6;
}
 .spog_vendor_text{
     color:#9f927f;
}
 .spog_vendor_other{
     background:#1e1a15;
}
/* FOOTER */
 .spog_footer{
     color:#e8decd;
}
 .spog_footer strong{
     color:#3b82f6;
}
 .spog_credit{
     color:#8f836f;
}
 .clear{
     clear: both;
     width: 100%;
}
 #problem{
     padding-top: 120px;
}
 .section-head h2, .display{
     font-size: clamp(32px,5vw,52px);
     line-height: 1.2;
}
 #top{
     padding-top: 120px;
}
 .section-head.reveal.in{
     margin-bottom: 0px;
}
 .cards-3.reveal.in{
     margin-top: 20px;
}
 .how_img{
     display: none;
}
 .container.hero-grid .lead{
     max-width: 90%;
}
 #top {
     padding-top: 70px;
}
 @media screen and (max-width: 768px) {
     .tab_content{
         background: #000000;
         border: 1px solid rgba(255, 255, 255, .08);
         border-radius: 16px;
         padding: 0px;
         color: #fff;
    }
     .how_img{
         display: inline-block;
         float: left;
         width: 100%;
         margin-top: 10px;
         margin-bottom: 20px;
    }
     .container {
         max-width: 100%;
         margin: 0 auto;
         padding: 0 14px;
    }
     #top {
         padding-top: 70px;
         padding-bottom: 50px;
    }
    /*.spog_wrap{
         display: none;
    }
    */
     .intro, .lead{
         font-size: 15px !important;
         display: inline-block;
         line-height: 22px !important;
    }
     #pillars h2, #why-now h2{
         margin-bottom: 40px;
    }
     .brand-name {
         font-size: 14px;
    }
     .btn {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 7px 9px;
         border-radius: 999px;
         font-size: 11px;
         font-weight: 500;
         transition: all .2s;
         cursor: pointer;
         border: none;
    }
     .mobile-menu a{
         font-size: 15px;
    }
}
 .spog_outer{
     width:100%;
     overflow-x:auto 
}
 .spog_wrap_1{
     width:100%;
     min-width:100%;
     margin:0px;
     margin-top:60px;
}
 .spog_heading{
     text-align:center;
     margin-bottom:40px 
}
 .spog_heading h1{
     font-size: 50px;
     line-height:1.2;
     font-family: var(--font-serif);
     margin-top: 50px;
     display: inline-block;
}
 .spog_gradient{
     background:linear-gradient(135deg,#93c5fd,#60a5fa 50%,#2563eb);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent 
}
 .spog_heading p{
     margin-top:15px;
     color:#64748b;
     font-size:20px 
}
 .spog_steps{
     display:flex;
     justify-content:center;
     gap:15px;
     margin:40px 0 
}
 .spog_btn{
     padding:14px 28px;
     background:#111;
     color:#fff;
     border:1px solid rgba(199,154,69,.3);
     border-radius:40px;
     cursor:pointer 
}
 .spog_btn.active{
     background:linear-gradient(135deg,#93c5fd,#60a5fa 50%,#2563eb);
     border:none 
}
 .spog_grid{
     display:grid;
     grid-template-columns:240px 1fr;
     gap:40px 
}
 .spog_left{
     display:flex;
     flex-direction:column;
     gap:110px 
}
 .spog_left h3{
     letter-spacing:3px;
     margin-bottom:10px 
}
 .spog_left p{
     color:#999 
}
 .spog_actors,.spog_questions,.spog_arrows{
     display:grid;
     grid-template-columns:repeat(6,1fr);
     gap:15px 
}
 .spog_actor{
     background:linear-gradient(135deg,#93c5fd,#60a5fa 50%,#2563eb);
     padding: 11px 14px;
     border-radius:40px;
     text-align:center;
     font-weight:bold;
     line-height: 19px;
}
 .spog_questions{
     margin-top:15px 
}
 .spog_question{
     border:1px solid rgba(255,255,255,.25);
     padding:20px;
     height:120px;
     display:flex;
     align-items:center;
     justify-content:center;
     text-align:center 
}
 .spog_arrows{
     margin:20px 0 
}
 .spog_arrow{
     text-align:center;
     font-size:36px;
     color:#3b82f6 
}
 .spog_layer{
     border:2px solid #3b82f6;
     padding:50px;
     text-align:center;
     margin-bottom:40px 
}
 .spog_layer h2{
     font-size:48px;
     margin-bottom:20px 
}
 .spog_services{
     font-size:28px;
     line-height:1.8 
}
 .spog_process{
     margin-top:20px;
     letter-spacing:6px;
     color:#ccc 
}
 .spog_stack{
     display:grid;
     grid-template-columns:2fr repeat(4,1fr);
     gap:20px 
}
 .spog_systems,.spog_vendor{
     border:1px solid rgba(199,154,69,.4);
     padding:20px 
}
 .spog_systems h3{
     text-align:center;
     margin-bottom:15px 
}
 .sys_grid{
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:10px 
}
 .sys{
     border:1px solid rgba(255,255,255,.2);
     padding:12px;
     text-align:center 
}
 .spog_vendor{
     min-height:180px;
     display:flex;
     align-items:center;
     justify-content:center;
     flex-direction:column 
}
 .spog_vendor h4{
     font-size:28px 
}
 .spog_vendor p{
     color:#999 
}
 .tab_wrap{
     width:100%;
}
 .tab_nav{
     display:flex;
     gap:12px;
     margin-bottom:20px;
}
 .tab_nav > button{
     flex:1;
     border:none;
     background:#2b2b2b;
     color:#ffffff;
     padding: 24px 20px;
     border-radius:12px;
     cursor:pointer;
     font-size: 22px;
     font-weight:600;
     transition:all .3s ease;
}
 .tab_nav > button.active{
     background:linear-gradient( 135deg, #e8c684, #3b82f6 45%, #2563eb );
     color:#111;
}
 .tab_content{
     border:1px solid rgba(255,255,255,.08);
     border-radius:16px;
     padding: 0px;
     color:#fff;
     overflow: hidden;
}
 .tab_panel{
     display:none;
}
 .tab_panel.active{
     display:block;
}
 .tab_panel > h2{
     margin-bottom:10px;
     font-size:28px;
}
 .tab_panel > p{
     color:#b9c0cf;
     line-height:1.7;
}
 .tab_content .tab_panel img{
     width: 100%;
}
 @media screen and (max-width: 768px) {
     .tab_content{
         background: #000000;
         border: 1px solid rgba(255, 255, 255, .08);
         border-radius: 16px;
         padding: 0px;
         color: #fff;
    }
     .spog_wrap {
         max-width: 100%;
         margin: auto;
         padding: 10px 5px;
         background:#ffffff;
         border:1px solid #dbeafe;
         margin-top: 30px;
         zoom: 0.8;
         border-radius: 20px;
    }
     .tab_nav > button {
         flex: 1;
         border: none;
         background: #2b2b2b;
         color: #ffffff;
         padding: 15px 15px;
         border-radius: 12px;
         cursor: pointer;
         font-size: 19px;
         font-weight: 600;
         transition: all .3s ease;
    }
     .section {
         padding: 20px 0;
         position: relative;
    }
     .hero{
         min-height: auto;
    }
}
 .card{
     background:#ffffff;
     border:1px solid #dbeafe;
     box-shadow:0 10px 30px rgba(0,0,0,.06);
}
 .card:hover{
     box-shadow:0 20px 40px rgba(59,130,246,.15);
}
 .btn-gold{
     background:linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
     color:#ffffff;
}
 .btn-ghost{
     background:#ffffff;
     border:1px solid #dbeafe;
     color:#111827;
}
 .chip{
     background: #b9d7fd24;
     border:1px solid #dbeafe;
     color: #333 !important;
}
 .tab_nav > button{
     background: #fff;
     color:#111827;
}
 .tab_nav > button.active{
     background:linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
     color:#ffffff;
}
 .tab_content{
     background:#ffffff;
     border:1px solid #dbeafe;
     color:#111827;
}
 .mn_t_container{
     max-width: 100%;
     margin:auto;
     margin-top: 60px;
}
/* Main Tabs */
 .mn_t_main_tabs{
     display:flex;
     flex-wrap:wrap;
     gap: 0.5%;
     margin-bottom:20px;
    /* display: inline-block;
     */
}
 .mn_t_main_btn{
     padding: 22px 1px;
     border:none;
     background: #def1ff;
     border-radius: 14px;
     cursor:pointer;
     font-weight: 600;
     transition:.3s;
     font-size: 18px;
     color: #333;
     float: left;
     width: 19.6%;
     margin-bottom: 5px;
     margin-top: 10px;
}
 .mn_t_main_btn.mn_t_active{
     background: linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
     color:#fff;
}
 .mn_t_main_panel {
     display: none;
     background: #def1ff;
     border-radius: 10px;
     padding: 10px 30px 30px 30px;
}
 .mn_t_main_panel.mn_t_show{
     display:block;
}
/* Sub Tabs */
 .mn_t_sub_tabs{
     display:flex;
     gap:10px;
     margin:20px 0;
     flex-wrap:wrap;
}
 .mn_t_sub_btn{
     padding: 12px 26px;
     border:none;
     background: #fff;
     border-radius:10px;
     cursor:pointer;
     border-radius: 100px;
     font-size: 15px;
}
 .mn_t_sub_btn.mn_t_active{
     background: linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
     color:#fff;
}
 .mn_t_sub_panel{
     display:none;
     border: 0px solid #e5e7eb;
     border-radius:15px;
     padding: 10px;
     background: #fff;
     overflow: hidden;
}
 .mn_t_sub_panel.mn_t_show{
     display:block;
}
 .mn_t_title{
     color: #333;
     margin-bottom:10px;
     font-size: 45px !important;
}
 @media(max-width:768px){
     .mn_t_main_tabs, .mn_t_sub_tabs{
         flex-direction:column;
         display: inline-block;
    }
     .mn_t_main_btn, .mn_t_sub_btn{
         width: 31.333333%;
         float: left;
         margin-left: 1%;
         margin-right: 1%;
         margin-bottom: 20px;
    }
}
 .mn_t_sub_panel img{
     width: 100%;
}
 .mn_t_radio{
     width:18px;
     height:18px;
     border:2px solid #cbd5e1;
     border-radius:50%;
     background:#fff;
     display:block;
}

.mn_t_sub_panel img {
    width: 100%;
    margin-top: -30px;
}


 .mn_t_main_btn.mn_t_active .mn_t_radio{
     border-color:#fff;
     background: radial-gradient(circle,#fff 40%,transparent 45%);
}
 .main_til{
    float: left;
    width: 100%;
    font-size: 17px;
    text-transform: capitalize;
}
 .main_til_sml{
     float: left;
     width: 100%;
     font-size: 14px;
     font-weight: 500;
     text-transform: capitalize;
     margin-top: 2px;
}
 .whr_section{
     width:100%;
     padding: 40px 20px;
}
 .whr_container{
     max-width: 94%;
     margin:auto;
     text-align: left;
}
 .whr_top{
     text-align: left;
     margin-bottom: 30px;
}
 .whr_small_title{
     font-size:18px;
     letter-spacing:1px;
     text-transform:uppercase;
     margin-bottom:20px;
     font-family: var(--font-mono);
     font-size: 11px;
     letter-spacing: .25em;
     text-transform: uppercase;
}
 .whr_main_title{
     font-size:58px;
     line-height:1.15;
     font-weight:700;
     margin-bottom:25px;
}
 .whr_main_title span{
     background:linear-gradient(135deg,#93c5fd,#60a5fa 50%,#2563eb);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
}
 .whr_desc{
     max-width: 70%;
     font-size: 18px;
     line-height: 1.5;
     color:#333;
}
 .whr_grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap: 35px 30px;
}
 .whr_card{
     display:flex;
     align-items:center;
     gap:18px;
     background: #eef3f8;
     padding: 20px 15px;
     border-radius: 18px;
}
 .whr_icon_box{
     min-width:115px;
     width:115px;
     height:115px;
     border-radius:22px;
     background:linear-gradient(135deg,#93c5fd,#60a5fa 50%,#2563eb);
     display:flex;
     align-items:center;
     justify-content:center;
     flex-shrink:0;
}
 .whr_icon_box svg{
     width:55px;
     height:55px;
     stroke:#fff;
     fill:none;
     stroke-width:1.8;
}
 .whr_content{
    /* background:#fff;
     */
     border-radius:24px;
     padding: 0px;
    /* box-shadow:0 4px 18px rgba(0,0,0,0.06);
     */
     flex:1;
     min-height:115px;
}
 .whr_content h3{
     font-size: 20px;
     font-weight:700;
     margin-bottom: 5px;
     background: linear-gradient(135deg, #2762d9, #60a5fa 50%, #2563eb);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
     font-family: "Sora",Georgia,serif;
}
 .whr_content p{
     font-size: 14px;
     line-height: 1.5;
     color:#444;
}
 @media(max-width:991px){
     .whr_main_title{
         font-size:42px;
    }
     .whr_grid{
         grid-template-columns:1fr;
    }
}
 @media(max-width:767px){
     .whr_section{
         padding:60px 15px;
    }
     .whr_main_title{
         font-size:34px;
    }
     .whr_desc{
         font-size:16px;
    }
     .whr_card{
         flex-direction:column;
         align-items:stretch;
         text-align: center;
         display: inline-block;
         width: 100%;
    }
     .whr_icon_box{
         width:100%;
         height: 70px;
         border-radius:18px;
         width: 70px;
         padding: 0px;
         display: inline-block;
         min-width: auto;
         text-align: center;
         padding-top: 18px;
         margin-bottom: 10px;
    }
     .whr_content{
         padding:24px;
    }
}
 @media (max-width: 768px) {
     .main_til{
         font-size: 15px;
    }
     .main_til_sml{
         font-size: 12px;
    }
     .mn_t_container{
         margin-top: 30px;
    }
     .mn_t_title{
         font-size: 32px !important;
    }
     .mn_t_main_tabs, .mn_t_sub_tabs {
         flex-direction: column;
         display: inline-block;
         width: 100%;
    }
     .mn_t_sub_btn{
         margin-bottom: 0px;
    }
     .mn_t_sub_tabs {
         margin-top: 0px;
         margin-bottom: 10px;
    }
     .cards-3.reveal .card{
         padding: 10px 20px;
         float: left;
         width: 100%;
         padding: 10px 10px;
         margin: 5px 0%;
    }
     .cards-3.reveal.in{
         display: inline-block;
         width: 100%;
    }
     .mn_t_main_tabs{
         margin-bottom: 0px;
    }
     .cards-3.reveal.in .card-num{
         margin-bottom: 7px;
    }
     .container.hero-grid .hero-copy.reveal.in .display br{
         display: none;
    }
     .sector-body {
         padding: 10px 13px;
    }
     .sector-body h3 {
         margin-bottom: 0px;
         margin-top: 0px;
    }
     #pillars .card {
         position: relative;
         padding: 14px;
         border-radius: 8px;
    }
     .mn_t_sub_btn {
         width: auto;
         padding: 11px 13px;
         font-size: 14px;
         border-radius: 10px;
    }
     .whr_content {
         padding: 0px;
    }
     .whr_icon_box svg {
         width: 35px;
         height: 35px;
         stroke: #fff;
         fill: none;
         stroke-width: 1.8;
    }
     .whr_grid {
         gap: 15px 20px;
    }
     #who-we .whr_main_title{
         margin-bottom: 10px;
    }
     #who-we .whr_main_title br{
         display: none;
    }
     .whr_desc {
         max-width: 100%;
         font-size: 18px;
         line-height: 1.3;
         color: #333;
         font-size: 14px !important;
    }
}
 @media (max-width: 640px) {
     .mn_t_main_btn{
         margin-bottom: 10px;
    }
     .mn_t_container {
         margin-top: 20px;
    }
     .mn_t_main_btn {
         border-radius: 8px;
         padding: 10px 0px;
    }
     .mn_t_main_tabs {
         margin-bottom: 0px;
         width: 104%;
         margin-left: -2%;
    }
     .main_til {
         font-size: 11px;
    }
     .main_til_sml {
         font-size: 9px;
    }
     .section-head h2, .display {
         line-height: 1.3;
         font-size: 28px;
    }
}
/*====================================== CONTACT SECTION ======================================*/
 .cnt_contact_section{
     padding:120px 0;
      
}
 .cnt_container{
     max-width:1400px;
     margin:auto;
     padding:0 30px;
}
/*====================================== TOP BOX ======================================*/
 .cnt_top_box{
    background: linear-gradient(135deg,#1e60ef,#7ec0ff);
    color:#fff;
    border-radius: 20px;
    padding:90px 80px;
    text-align:center;
    margin-bottom:80px;
    margin-top: 50px;
}
 .cnt_badge{
    display:inline-block;
    padding: 10px 24px;
    border: 1px solid #fff;
    border-radius:40px;
    color: #fff;
    font-size: 12px;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:35px;
}
 .cnt_top_box h2{
     font-size:52px;
     font-weight:700;
     margin-bottom:30px;
     color:#fff;
}
 .cnt_top_box p{
    max-width: 60%;
    margin:auto;
    color: #fff;
    font-size: 20px;
    line-height: 1.6;
}
/*====================================== MAIN WRAPPER ======================================*/
 .cnt_wrapper{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:90px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 20px;
    padding-top: 50px;
}
/*====================================== LEFT SIDE ======================================*/
 .cnt_left h2{
    font-size: 34px !important;
    margin-bottom: 35px !important;
    color:#0b172d;
}
 .cnt_intro{
    font-size: 18px;
    line-height: 1.6;
    color:#727b87;
    margin-bottom:60px;
}
/*====================================== TIMELINE ======================================*/
 .cnt_steps{
     position:relative;
}
 .cnt_step{
     display:flex;
     align-items:flex-start;
     gap:25px;
     margin-bottom:60px;
}
 .cnt_number{
    width:46px;
    height:46px;
    border-radius:50%;
    background: linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
    color: #fff;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:22px;
}
 .cnt_content h3{
    font-size: 20px;
    margin-bottom: 4px;
    color:#111827;
}
 .cnt_content p{
    font-size: 15px;
    line-height: 1.5;
    color:#6d7480;
}
 .cnt_steps::after{
     content:"";
     display:block;
     width:100%;
     height:1px;
     background:#dddddd;
     margin-top:50px;
}
/*====================================== FORM ======================================*/
 .cnt_form{
     width:100%;
}
 .cnt_row{
     display:flex;
     gap:25px;
     margin-bottom:28px;
}
 .cnt_field{
     flex:1;
}
 .cnt_full{
     width:100%;
}
 .cnt_field label{
    display:block;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 6px;
    color:#111827;
}
 .cnt_field input, .cnt_field select, .cnt_field textarea{
    width:100%;
    border:1px solid #d8dce3;
    border-radius: 10px;
    padding: 15px 15px;
    font-size: 16px;
    outline:none;
    transition:.3s;
    background:#fff;
}
 .cnt_field textarea{
     resize:vertical;
     min-height:220px;
}
 .cnt_field input:focus, .cnt_field select:focus, .cnt_field textarea:focus{
     border-color:#2450d4;
     box-shadow:0 0 0 4px rgba(36,80,212,.08);
}
 .cnt_btn_wrap .cnt_submit{
     float: right;
     background: linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
     color: #fff;
     border: 0px;
     padding: 15px 22px;
     font-size: 17px;
     margin-top: 20px;
     border-radius: 60px;
     font-weight: 500;
}


.cnt_checkbox{

}

.cnt_checkbox label{

}

.cnt_checkbox label input{display: inline-block;float: left;width: 16px;height: 16px;}

.cnt_checkbox label span{float: left;margin-left: 9px;margin-top: -4px;line-height: 21px;}



.page-header-box {
    position: relative;
    text-align: center;
    z-index: 1;
    margin-top: 100px;
    background: #ffffff;
    display: inline-block;
    width: 100%;
    box-shadow: 0px 0px 10px #33333314;
    border-radius: 35px;
    padding: 60px 0px;
    margin-bottom: 30px;
}

.page-header-box h1 {
    font-size: 52px;
    line-height: 1.2em;
    font-weight: 300;
    margin-bottom: 15px; 
}

.page-header-box h1 span {
    font-weight: 700;
    background: linear-gradient(135deg,#8fc6ff,#2b66ef);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s ease-in-out;
}

.page-header-box ol {
    margin: 0;
    padding: 0;
    justify-content: center;
    list-style-type: none;
    text-align: center;
    display: inline-block;
    width: 100%;
}

.page-header-box ol li.breadcrumb-item {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--text-color);
    text-align: center;
    display: inline-block;
    margin-left: 2px;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    color: var(--text-color);
    margin-right: 4px;
}

.breadcrumb-item svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: -8px;
    display: inline-block;
}

a:focus-visible{
    outline: none;
}


.page-services {
    position: relative;
    padding: 180px 0 60px;
    z-index: 1;
    padding-top: 10px;
}

.page-services .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
        padding: 10px 15px;
    }



    .page-services .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));

        margin-right: -15px;
    margin-left: -15px;
}

.page-services .container{
        position: relative;
        padding-right: 15px;
        padding-left: 15px;
        z-index: 1;
        margin-top: 0px;
}

.service-item {
    background: #f0f7ff;
    border: 0px solid #dbe3ed;
    border-radius: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 20px 25px;
    transition: all 0.4s ease-in-out;
}

.service-item-content {
    margin-bottom: 0px;
}

.service-item-content h3 {
    font-size: 20px;
    margin-bottom: 15px;
    line-height: 27px;
}

.service-item-content h3 svg {
    width: 70px;
    height: 70px;
    stroke-width: 1.5px;
    background: linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
    border-radius: 15px;
    padding: 14px;
    color: #fff;
}

.service-item-content h3 a {
    margin-top: 20px !important;
    display: inline-block;
    width: 100%;
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
}

.service-item-content p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 25px;
}

.use_case_gtetx {
    margin-bottom: 20px !important;
}

.service-btn .readmore-btn {
    display: inline-block;
    line-height: 1em;
    background: linear-gradient( 135deg, #bfdbfe, #60a5fa 45%, #2563eb );
    padding: 13px 21px;
    border-radius: 100px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}




.serv_ak {
    width: 100%;
    box-sizing: border-box;
}

.serv_ak > .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

 
.serv_ak > .grid > .card > h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #000;
}


.serv_ak > .grid > .card > p {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin: 0;
}

.serv_ak > .grid > .card {
    background: #f0f7ff;
    padding: 20px;
    border-radius: 16px;
    transition: 0.3s ease;
    padding-bottom: 20px;
    border: 0px;
    box-shadow: 0px 0px 0px;
}

.red_mr_br{
        display: inline-block;
        line-height: 1em;
        background: linear-gradient(135deg, #bfdbfe, #60a5fa 45%, #2563eb);
        padding: 10px 17px;
        border-radius: 100px;
        overflow: hidden;
        color: #fff;
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 500;
        margin-top: 12px;
        cursor: pointer;
}


.spog_case_section{
    max-width: 100%;
    margin:auto;
    padding:70px 20px;
    padding-top: 20px;
}

/* Heading Label */

.spog_label{
    display:inline-block;
    font-size: 22px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#2563eb;
    margin-bottom:18px;
    position:relative;
}

.spog_label::after{
    content:"";
    width:70px;
    height:3px;
    border-radius:10px;
    background:linear-gradient(
    135deg,
    #bfdbfe,
    #60a5fa 45%,
    #2563eb
    );
    display:block;
    margin-top:8px;
}

.spog_case_intro{
    background:#fff;
    padding: 30px;
    border-radius: 28px;
    box-shadow:0 15px 40px rgba(37,99,235,.08);
    margin-bottom:35px;
}

.spog_case_intro p{
    font-size: 19px;
    line-height: 1.5;
    color:#334155;
    margin:0;
}

/* Grid */

.spog_info_grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-bottom:35px;
}

.spog_info_card{
    background:#f7fbff;
    border-radius:20px;
    padding:35px;
    border:1px solid #dbeafe;
}

.spog_info_card h4{
    margin:0 0 20px;
    font-size: 22px;
    color:#2563eb;
    text-transform:uppercase;
}

.spog_info_card ul{
    margin:0;
    padding-left:18px;
}

.spog_info_card li{
    margin-bottom: 8px;
    color:#475569;
    line-height:1.6;
}

/* Quote */

.spog_quote{
    margin:35px 0;
    padding:40px;
    border-radius:24px;
    background:linear-gradient(
    135deg,
    #bfdbfe,
    #60a5fa 45%,
    #2563eb
    );
    color:#fff;
}

.spog_quote h4{
    margin:0 0 18px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:15px;
}

.spog_quote blockquote{
    margin:0;
    font-size:28px;
    font-style:italic;
    line-height:1.5;
    font-weight:300;
}

/* Solution */

.spog_solution{
    background:#fff;
    padding:40px;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(37,99,235,.08);
}

.spog_solution h4{
    color:#2563eb;
    margin-bottom:25px;
    text-transform:uppercase;
    font-size: 22px;
}

.spog_solution ul{
    padding-left:22px;
    margin:0;
}

.spog_solution li{
    margin-bottom: 12px;
    line-height: 1.5;
    color:#475569;
    font-size: 16px;
}

/* Metrics */

.spog_metrics{
    margin-top:45px;
}

.spog_metrics h4{
    color:#2563eb;
    text-transform:uppercase;
    margin-bottom:25px;
    font-size: 22px;
}

.spog_metric_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.spog_metric{
    background:#fff;
    border-radius:22px;
    text-align:center;
    padding:35px 20px;
    box-shadow:0 12px 35px rgba(37,99,235,.08);
    transition:.35s;
}

.spog_metric:hover{
    transform:translateY(-8px);
}

.spog_metric h2{
    margin:0;
    font-size:52px;
    font-weight:800;
    background:linear-gradient(
    135deg,
    #bfdbfe,
    #60a5fa 45%,
    #2563eb
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.spog_metric p{
    margin-top:15px;
    color:#64748b;
    font-size:16px;
}

/* Responsive */

@media(max-width:992px){

.spog_info_grid,
.spog_metric_grid{
    grid-template-columns:1fr;
}

.spog_case_intro p{
    font-size:20px;
}

.spog_quote blockquote{
    font-size:22px;
}

}

@media(max-width:768px){

.spog_case_section{
    padding:45px 18px;
}

.spog_case_intro,
.spog_solution,
.spog_quote,
.spog_info_card,
.spog_metric{
    padding:25px;
}

.spog_case_intro p{
    font-size:18px;
}

.spog_quote blockquote{
    font-size:20px;
}

.spog_metric h2{
    font-size:40px;
}

}



@media(max-width:991px){

.spog_info_grid,
.spog_metric_grid{

    grid-template-columns:1fr;

}

.spog_case_intro p{

    font-size:22px;

}

.spog_quote blockquote{

    font-size:26px;

}

}

@media(max-width:767px){

.spog_case_section{

    padding:50px 18px;

}

.spog_case_intro,
.spog_info_card,
.spog_quote,
.spog_solution,
.spog_metric{

    padding:28px;

}

.spog_case_intro p{

    font-size:18px;

}

.spog_quote blockquote{

    font-size:20px;

}

.spog_metric h2{

    font-size:42px;

}

.spog_cta a{

    width:100%;

    justify-content:center;

    padding:18px;

}

}

.spog_cta{

    margin-top:60px;

    text-align:center;

}

.spog_cta a{
        display:inline-flex;
        align-items:center;
        gap:15px;
        padding: 15px 33px;
        border-radius:60px;
        color:#fff;
        font-weight: 600;
        background:linear-gradient(
        135deg,
        #bfdbfe,
        #60a5fa 45%,
        #2563eb
    );
        box-shadow:0 20px 45px rgba(37,99,235,.28);
        transition:.35s;
        text-transform: uppercase;
        font-size: 16px;
        }

.spog_cta a:hover{

    transform:translateY(-5px);

    box-shadow:0 28px 60px rgba(37,99,235,.35);

}

.spog_cta span{

    transition:.35s;

}

.spog_cta a:hover span{

    transform:translateX(8px);

}





@media(max-width:767px){

.page-services .col-lg-4 {
    flex: 0 0 auto;
    width: 100%;
    padding: 10px 15px; 
}

.service-item {
        background: #fff;
        margin-bottom: 10px;
        height: auto;
        box-shadow: 0px 0px 10px #33333317;
    }

.serv_ak > .grid > .card {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    transition: 0.3s ease;
    padding-bottom: 20px;
    border: 0px;
    box-shadow: 0px 0px 10px #33333317;
    width: 96%;
    margin-left: 2%;
}


.page-header-box h1 {
        font-size: 26px;
        line-height: 1.1em;
        font-weight: 300;
        margin-bottom: 7px;
    }


.page-header-box ol li.breadcrumb-item {
    font-size: 12px;
}

.page-header-box {
    position: relative;
    text-align: center;
    z-index: 1;
    margin-top: 100px;
    background: #ffffff;
    display: inline-block;
    width: 100%;
    box-shadow: 0px 0px 10px #33333314;
    border-radius: 15px;
    padding: 30px 0px;
    margin-bottom: 30px;
}

.serv_ak > .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 17px;
    text-align: center;
}

.spog_case_intro{
    margin-top: -60px;
}

.serv_ak > .grid > .card > h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 4px 0 5px 0;
    color: #000;
}


}


.spog_info_grid{

}

.spog_info_grid > .spog_info_card:last-child > ul > li:last-child::after {
    content: "3 of 100+ integrations. We build on your stack.";
    display: list-item;
    margin-left: 0px;
    margin-top: 8px;
}

.brand img.main_lg {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
    float: left;
    height: 45px;
    border-radius: 0px;
}


.scrolled .brand img.main_lg {
    height: 40px;
    border-radius: 0px;
}


.cards-3.reveal.in h3{
    font-size: 22px;
}

.chp_mn_bg{
    font-size: 15px;
    font-weight: 500;
}

#how.how_sec{
    padding-top: 0px;
}

.brand_footer .brand_footer_img {
    box-shadow: 0px 0px 0px;
    height: 50px;
    border-radius: 0px;
}

.bok_mnt {
    box-shadow: 0px 0px 0px !important;
    border-radius: 0px !important;
    width: 210px;
    margin-top: 20px !important;
}


 @media(max-width:768px){
    .footer-bottom.container{
        margin-top: 20px;
    }

.mn_t_main_panel {
    display: none;
    background: #def1ff;
    border-radius: 10px;
    padding: 10px;
}

.mn_t_title {
        font-size: 20px !important;
        font-weight: 600;
    }

    


    .mn_t_sub_panel img {
    width: 100%;
    margin-top: -10px;
}

.mn_t_sub_panel{
    border-radius: 10px !important;
}


.cyber_proof_box h2{
    font-size: 30px;
}

.cyber_proof_box div {
    background: white;
    padding: 10px 20px;
}

}

 @media(max-width:420px){

    .scrolled .brand img.main_lg, .brand img.main_lg{
        height: 33px;
    }





 }


 @media(min-width:1700px){
     #top.hero{
        z-index: 9;
     }

     #top.hero{
        margin-bottom: -150px;
     }

 }


  @media(min-width:1900px){
     #top.hero{
        z-index: 9;
     }

     #top.hero{
        margin-bottom: -250px;
     }

 }


/*____________________*/


 .cyber_left br, .spog_hero .spog_container br{
    display: none;
 }

.cyber_left h1, .spog_hero .spog_container h1 {
    font-size: 40px !important;
    margin-bottom: 0px !important;
    line-height: 43px !important;
}

 .cyber_hero .spog_badge, .spog_hero .spog_badge{
    display: none;
 }

 .cyber_gain, .spog_gain{
    display: none;
 }

 .spog_architecture, .cyber_architecture{
        display: none !important;
 }



 .prvcontainer{
    max-width:100%; 
    padding:0 20px;
    padding-top: 100px;

}

.prvsection {
    margin-bottom: 50px;
    padding: 20px 2.5% !important;
}



.prvtitle {
    font-size: 34px !important;
    margin-bottom: 20px !important;
}



.prvsubtitle {
    font-size: 24px !important;
    margin-bottom: 0px !important;
    margin-top: 30px !important;
}

.prvtext{
    margin-bottom:15px;
}

.prvlist{
    padding-left:20px;
}

.prvlist li{
    margin-bottom:10px;
}

.prvemail{
    color:#0066cc;
    text-decoration:none;
}


.video_bg_as{
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.vid_bg_mn {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

 

.vid_bg_mn::before {
    content: "Read this: ";
    font-size: 0px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-image: linear-gradient(to top, #edf7ff, #ffffffe3);
}

#problem{
    position: relative;
    z-index: 99;
}

#navbar{
    z-index: 999;
}


.sc-vm9sor-0.dpNejy.sc-vm9sor-0.dpNejy{
        background-color: rgb(60 125 241) !important; 
}




.prd_form_section{
padding:80px 20px;
padding-top: 100px;
}

.prd_container{
max-width:90%;
margin:auto;
background:#fff;
border-radius:20px;
padding:50px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.prd_heading{
text-align:center;
margin-bottom:45px;
}

.prd_heading>span{
display:inline-block;
background:#60a5fa;
color:#fff;
padding:8px 18px;
border-radius:30px;
font-size:14px;
margin-bottom:15px;
}

.prd_heading>h2{
font-size:42px;
margin-bottom:15px;
}

.prd_heading>p{
max-width:700px;
margin:auto;
color:#666;
line-height:1.7;
}

.prd_group{
margin-bottom:45px;
}

.prd_group>h3{
font-size:24px;
margin-bottom:25px;
color:#60a5fa;
padding-bottom:10px;
border-bottom:2px solid #60a5fa;
}

.prd_grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.prd_field{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:20px;
}

.prd_field>label{
font-weight:600;
}

.prd_field>input,
.prd_field>select,
.prd_field>textarea{
width:100%;
padding:15px;
border:1px solid #d7d7d7;
border-radius:10px;
font-size:15px;
outline:none;
transition:.3s;
}

.prd_field>input:focus,
.prd_field>select:focus,
.prd_field>textarea:focus{
border-color:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.15);
}

.prd_checkbox_wrap{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-bottom:25px;
}

.prd_checkbox{
display:flex;
align-items:center;
gap:10px;
padding:15px;
border:1px solid #d8d8d8;
border-radius:10px;
cursor:pointer;
transition:.3s;
}

.prd_checkbox:hover{
border-color:#60a5fa;
background:#f4f9ff;
}

.prd_checkbox>input{
width:18px;
height:18px;
accent-color:#60a5fa;
}

.prd_consent{
margin-bottom:30px;
}

.prd_btn{
background:#60a5fa;
color:#fff;
border:none;
padding:18px 45px;
border-radius:10px;
font-size:17px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.prd_btn:hover{
background:#3d8ef6;
}

@media(max-width:768px){

.prd_container{
padding:30px 20px;
}

.prd_grid{
grid-template-columns:1fr;
}

.prd_checkbox_wrap{
grid-template-columns:1fr;
}

.prd_heading>h2{
font-size:30px;
}