/* ══════════════════════════════════════════════════
   CCI ENTERPRISE — SHARED STYLESHEET
   style.css  |  Used by all 7 pages
══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── TOKENS ─────────────────────────────────── */
:root{
  --navy:#0D2260;
  --navy2:#0D2260;
  --navy3:#112880;
  --red:#c5220db3;
  --red2:#E03A1E;
  --blue:#3B6EF5;
  --cyan:#7EB3FF;
  --ink:#0D0D0D;
  --ink2:#2A2A2A;
  --ink3:#4A4A4A;
  --ink4:#767676;
  --surface:#F5F5F3;
  --white:#FFFFFF;
  --border:#DEDCDA;
  --border2:#C8C6C2;
  --mono:'IBM Plex Mono',monospace;
  --display:'Plus Jakarta Sans',sans-serif;
  --body:'Inter',sans-serif;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --out:cubic-bezier(0.16,1,0.3,1);
}

/* ── RESET ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--white);color:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ── ANIMATIONS ─────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}60%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{opacity:.8}50%{opacity:1}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--out),transform .7s var(--out)}
.reveal.visible{opacity:1;transform:none}
.reveal.left{transform:translateX(-22px)}.reveal.left.visible{transform:none}
.reveal.right{transform:translateX(22px)}.reveal.right.visible{transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* ── NAVIGATION ─────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  transition:background .35s,border-color .35s,box-shadow .35s;
}
.nav.scrolled{background:linear-gradient(to bottom, rgb(10 26 74 / 39%) 0%, rgb(2 97 105 / 85%) 100%);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 4px 24px rgba(0,0,0,.25)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-brand-mark{width:36px;height:36px;background:var(--navy);border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:14px;color:#fff;flex-shrink:0;transition:background .3s}
.nav.scrolled .nav-brand-mark{background:var(--red)}
/* .nav-brand-name{font-family:var(--display);font-weight:800;font-size:28px;color:var(--navy);line-height:1.1;transition:color .3s} */
/* .nav-brand-sub{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink4);line-height:1;transition:color .3s}
 */
 .nav-brand-name{
    font-family:var(--display);
    font-weight:1;
    font-size:28px;
    color:var(--navy);
    line-height:1.1;
    margin-bottom:6px;   /* Adds space below the company name */
    transition:color .3s;
}
 
.nav-brand-sub{
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #0A1A4A;       /* Same color as title */
    line-height: 1.3;
}
 
 
 .nav.scrolled .nav-brand-name{color:#fff}
.nav.scrolled .nav-brand-sub{color:rgba(255,255,255)}
.nav-links{display:flex;align-items:center}
.nav-links a{
  font-size:13px;font-weight:500;color:var(--ink3);
  padding:6px 14px;position:relative;transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-1px;left:14px;right:14px;
  height:2px;background:var(--red);transform:scaleX(0);
  transition:transform .22s var(--out);
}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav.scrolled .nav-links a{color:rgba(255,255,255,.6)}
.nav.scrolled .nav-links a:hover,.nav.scrolled .nav-links a.active{color:#fff}
.nav-cta{font-size:12px;font-weight:700;padding:8px 20px;background:var(--navy);color:#fff;border-radius:4px;box-shadow:0 2px 10px rgba(10,26,74,.2);transition:background .2s,box-shadow .2s,transform .15s}
.nav-cta:hover{background:var(--navy3);transform:translateY(-1px);box-shadow:0 5px 18px rgba(10,26,74,.3)}
.nav.scrolled .nav-cta{background:var(--red)}
.nav.scrolled .nav-cta:hover{background:var(--red2)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:5px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.nav.scrolled .hamburger span{background:#fff}
.mobile-menu{
  display:none;position:fixed;top:64px;left:0;right:0;z-index:899;
  background:var(--white);border-bottom:1px solid var(--border);
  flex-direction:column;padding:1rem 1.5rem 1.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:14px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--border);color:var(--ink2);display:block}
.mobile-menu a:last-child{border-bottom:none}

/* ── BUTTONS ────────────────────────────────── */
.btn-navy{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:11px 24px;background:var(--navy);color:#fff;border-radius:4px;box-shadow:0 3px 14px rgba(10,26,74,.25);transition:background .2s,transform .15s,box-shadow .2s;cursor:pointer}
.btn-navy:hover{background:var(--navy3);transform:translateY(-2px);box-shadow:0 7px 22px rgba(10,26,74,.35)}
.btn-red{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:11px 24px;background:var(--red);color:#fff;border-radius:4px;box-shadow:0 3px 14px rgba(197,34,13,.28);transition:background .2s,transform .15s,box-shadow .2s;cursor:pointer}
.btn-red:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 7px 22px rgba(197,34,13,.38)}
.btn-outline-w{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:11px 24px;background:transparent;color:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.22);border-radius:4px;transition:border-color .2s,background .2s,color .2s;cursor:pointer}
.btn-outline-w:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.07);color:#fff}
.btn-outline-d{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:11px 24px;background:transparent;color:var(--navy);border:1.5px solid var(--border2);border-radius:4px;transition:border-color .2s,background .2s;cursor:pointer}
.btn-outline-d:hover{border-color:var(--navy);background:rgba(10,26,74,.04)}
.btn-white{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:11px 24px;background:#fff;color:var(--navy);border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.15);transition:transform .15s,box-shadow .2s;cursor:pointer}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.2)}

/* ── SECTIONS ───────────────────────────────── */
.section{padding:5.5rem 3rem}
.section-alt{background:var(--surface)}
.section-dark{background:var(--navy);color:#fff}
.s-inner{max-width:1280px;margin:0 auto}
.s-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem;display:flex;align-items:center;gap:8px}
.s-eyebrow::before{content:'';width:20px;height:2px;background:var(--red);border-radius:1px;flex-shrink:0}
.s-eyebrow.light{color:rgba(126,179,255,.7)}.s-eyebrow.light::before{background:rgba(126,179,255,.5)}
.s-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.5vw,2.9rem);letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.s-title.light{color:#fff}
.s-sub{font-size:15px;color:var(--ink3);line-height:1.8;max-width:52ch;margin-top:.75rem}
.s-sub.light{color:rgba(255,255,255,.5)}

/* ── PAGE HERO (inner pages) ────────────────── */
.page-hero{padding-top:64px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);padding-bottom:3rem;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(59,110,245,.2),transparent 70%);pointer-events:none;filter:blur(20px)}
.page-hero-inner{padding:3.5rem 3rem 0;max-width:1280px;margin:0 auto}
.page-hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.75rem;display:flex;align-items:center;gap:8px}
.page-hero-eyebrow::before{content:'';width:16px;height:1.5px;background:rgba(255,255,255,.3)}
.page-hero-title{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.4rem);letter-spacing:-.035em;color:#fff;line-height:1.0;margin-bottom:.75rem}
.page-hero-sub{font-size:15px;color:rgba(255,255,255,.5);line-height:1.75;max-width:52ch}

/* ── DETAIL PANELS ──────────────────────────── */
.detail-panel{display:none;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:2.5rem;margin-bottom:1.5rem;animation:slideDown .3s var(--out)}
.detail-panel.open{display:block}
.dp-header{display:flex;justify-content:space-between;gap:2rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.dp-title{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.025em;color:var(--ink);margin-bottom:.4rem}
.dp-desc{font-size:14px;color:var(--ink3);line-height:1.75;max-width:62ch}
.dp-close{width:32px;height:32px;border-radius:5px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink3);cursor:pointer;flex-shrink:0;transition:background .18s}
.dp-close:hover{background:var(--border2)}
.dp-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.dp-module{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:1.25rem;transition:border-color .2s,box-shadow .2s}
.dp-module:hover{border-color:rgba(10,26,74,.2);box-shadow:0 4px 16px rgba(10,26,74,.06)}
.dp-module-name{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.dp-module-name::before{content:'›';color:var(--red);font-size:18px;font-weight:700}
.dp-module-desc{font-size:13px;color:var(--ink3);line-height:1.6}

/* ── PRODUCT ROW ────────────────────────────── */
.product-row{display:flex;align-items:center;gap:1.5rem;padding:1.5rem 2rem;border:1px solid var(--border);border-radius:8px;background:var(--white);cursor:pointer;transition:border-color .22s,box-shadow .22s,transform .2s;margin-bottom:1rem}
.product-row:hover{border-color:var(--navy);box-shadow:0 6px 24px rgba(10,26,74,.09);transform:translateX(4px)}
.product-row-icon{width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.product-row-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);background:rgba(197,34,13,.07);padding:3px 9px;border-radius:3px;flex-shrink:0;white-space:nowrap}
.product-row-name{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);flex:1;line-height:1.2}
.product-row-desc{font-size:13px;color:var(--ink4);flex:2;line-height:1.55}
.product-row-arr{color:var(--border2);font-size:22px;flex-shrink:0;transition:color .2s,transform .2s}
.product-row:hover .product-row-arr{color:var(--navy);transform:translateX(5px)}

/* ── CLIENTS STRIP ──────────────────────────── */
.clients-strip{background:var(--surface);padding:2rem 3rem;border-top:1px solid var(--border)}
.clients-strip-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);text-align:center;margin-bottom:1.25rem}
.clients-strip-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.cs-item{font-family:var(--display);font-weight:700;font-size:12px;color:var(--border2);padding:0 2rem;border-right:1px solid var(--border);text-transform:uppercase;letter-spacing:.06em}
.cs-item:last-child{border-right:none}

/* ── FOOTER ─────────────────────────────────── */
.footer{background:var(--ink);padding:4.5rem 3rem 2.5rem}
.footer-top{display:flex;gap:4rem;flex-wrap:wrap;padding-bottom:3.5rem;margin-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand{flex:0 0 250px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:1rem}
.footer-logo-mark{width:36px;height:36px;background:var(--red);border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:14px;color:#fff}
.footer-brand-name{font-family:var(--display);font-weight:800;font-size:18px;color:#fff}
.footer-brand-name span{color:var(--red2)}
.footer-brand-desc{font-size:13px;color:rgba(255,255,255,.32);line-height:1.7;max-width:26ch}
.footer-col{flex:1;min-width:140px}
.footer-col-title{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:1rem}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.42);transition:color .18s}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-copy{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.04em}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.22);transition:color .18s}
.footer-bottom-links a:hover{color:rgba(255,255,255,.6)}

/* ── SCROLL-TO-TOP ──────────────────────────── */
.scroll-top{position:fixed;bottom:2rem;right:2rem;z-index:800;width:42px;height:42px;background:var(--navy);color:#fff;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 4px 16px rgba(10,26,74,.3)}
.scroll-top.visible{opacity:1;pointer-events:all}
.scroll-top:hover{transform:translateY(-3px)}

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:1100px){
  .section{padding:4.5rem 2.5rem}
  .page-hero-inner{padding:3rem 2.5rem 0}
  .footer{padding:3.5rem 2.5rem 2rem}
  .clients-strip{padding:2rem 2.5rem}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .nav{padding:0 1.25rem}
  .nav-brand{gap:8px}
  .nav-brand-name{font-size:16px;margin-bottom:1px}
  .nav-brand-sub{font-size:7px;letter-spacing:.14em}
  .section{padding:3.5rem 1.5rem}
  .footer-top{flex-direction:column;gap:2.5rem}
  .footer{padding:2.5rem 1.5rem}
}
@media(max-width:400px){
  .nav{padding:0 .85rem}
  .nav-brand-sub{display:none}
}

/* ── ENTERPRISE OVERVIEW & RECOGNITION MATRIX ────────────────── */
.cc-overview-section {
  background: var(--surface);
  padding: 6rem 2rem;
  border-bottom: 1px solid var(--border);
}

.cc-overview-container {
  max-width: 1280px;
  margin: 0 auto;
}

.cc-overview-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  margin-bottom: 5rem;
  align-items: center;
}

.cc-overview-left h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 2rem;
}

.cc-overview-left p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink3);
  margin-bottom: 1.5rem;
}

.cc-overview-right img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

/* Overview Dashboard Counters */
.cc-overview-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid var(--border);
  padding-top: 3.5rem;
}

.cc-factbox {
  background: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.cc-fact-num {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.cc-factbox p {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  line-height: 1.4;
}

/* Global Recognition Tickers */
.cc-recognition-section {
  background: #ffffff;
  padding: 6rem 2rem;
  border-bottom: 1px solid var(--border);
}

.cc-recog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
}

.cc-recog-left h2 {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.cc-recog-box {
  border-left: 3px solid var(--navy);
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}

.cc-recog-box span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--red);
  letter-spacing: 0.1em;
}

.cc-recog-box h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink2);
  margin-top: 0.25rem;
}

/* Vertical Scrolling Logos Panel */
.cc-ticker-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.cc-ticker-wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #fff 0%, transparent 15%, transparent 85%, #fff 100%);
  pointer-events: none;
}

.cc-v-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cc-v-col.up { animation: scrollUpWall 25s linear infinite; }
.cc-v-col.down { animation: scrollDownWall 25s linear infinite; }

.cc-logo-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.cc-logo-frame img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: all 0.3s;
}

.cc-logo-frame:hover img {
  filter: grayscale(0) opacity(1);
}

@keyframes scrollUpWall {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDownWall {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Interactive Testimonials Module */
.cc-testimonial-section {
  background: var(--navy);
  color: #ffffff;
  padding: 2rem 2rem;
}

.cc-test-container {
  max-width: 95%;
  margin: 0 auto;
}

.cc-test-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 5rem;
  align-items: center;
}

.cc-test-left-pane {
  position: relative;
}

.cc-test-item {
  display: none;
}

.cc-test-item.active {
  display: block;
  animation: fadeIn 0.5s ease forwards;
}

.cc-test-quote {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.cc-test-profile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
}

.cc-test-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cci-glow);
}

.cc-profile-meta h4 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.cc-profile-meta p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.cc-test-right-pane img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.cc-test-nav {
  display: flex;
  gap: 10px;
  margin-top: 2rem;
}

.cc-test-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cc-test-btn:hover {
  background: var(--red);
  border-color: transparent;
}

@media(max-width: 960px) {
  .cc-overview-split, .cc-recog-grid, .cc-test-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .cc-overview-facts {
    grid-template-columns: 1fr 1fr;
  }
  .cc-ticker-wall {
    height: 250px;
  }
  .cc-test-right-pane img {
    height: 320px;
  }
}

/*=========================================================
        ENTERPRISE WORKFLOW
=========================================================*/

.workflow-section{

    position:relative;

    overflow:hidden;

    padding:35px 0;

    background:#f7f9fc;

}

/* Blue Glow */
.workflow-section::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:rgba(54,125,255,.10);
    filter:blur(120px);
    right:-220px;
    top:-220px;
}

/* Red Glow */
.workflow-section::after{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    background:rgba(197,34,13,.06);
    left:-180px;
    bottom:-180px;
    filter:blur(110px);
}

/* subtle grid */
/*=========================================
        WORKFLOW CONTAINER
=========================================*/

.workflow-section .container{

    position:relative;

    width:95%;
    max-width:95%;

    margin:0 auto;

    padding:0 20px;

    z-index:2;
}

.workflow-section .container::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:60px 60px;
    pointer-events:none;
    opacity:.25;
}

/*================ HEADER ================*/

.workflow-header{
    position:relative;
    text-align:center;
    max-width:920px;
    margin:0 auto 95px;
    z-index:2;
}

.workflow-tag{
    display:inline-block;
    padding:10px 18px;
    border-radius:40px;
    border:1px solid rgb(54 82 133);
    background:rgb(255 244 244 / 35%);

    color:#456ecd;
    font-size:12px;
    font-weight:700;
    letter-spacing:.28em;
    text-transform:uppercase;

    margin-bottom:28px;
}

.workflow-header h2{
    color:#081D55;
    font-size:clamp(42px,5vw,32px);
    line-height:1.08;
    font-weight:800;
    margin-bottom:28px;
}

.workflow-header p{
    color:#0B2A66;
    font-size:20px;
    line-height:1.8;
    max-width:820px;
    margin:auto;
}
/*=========================================================
        TIMELINE & STEPS
=========================================================*/

.workflow-timeline{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:22px;
    margin-top:30px;
    padding:40px 0 20px;
    z-index:2;
    overflow-x:auto;
}

/* Main Timeline */

.workflow-progress-line{
    position:absolute;
    top:90px;
    left:7%;
    right:7%;
    height:4px;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        rgba(126,179,255,.25),
        rgba(126,179,255,.9),
        rgba(126,179,255,.25)
    );
    overflow:hidden;
}

.workflow-progress-line::after{

    content:"";

    position:absolute;

    left:-35%;

    top:0;

    width:35%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        #ffffff,
        transparent
    );

    animation:dataFlow 5s linear infinite;

}

@keyframes dataFlow{

    100%{

        left:135%;

    }

}

/*====================================*/

.workflow-step{

    position:relative;

    flex:1;

    min-width:140px;

    text-align:center;

    z-index:2;

    transition:.45s cubic-bezier(.16,1,.3,1);

}

/* Circle */

.step-circle{

    position:relative;

    width:105px;

    height:105px;

    margin:0 auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0B2A66;

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    transition:.45s cubic-bezier(.16,1,.3,1);

    box-shadow:
        0 0 0 rgba(0,0,0,0),
        0 18px 45px rgba(0,0,0,.20);

}

/* Blue Glow */

.step-circle::before{

    content:"";

    position:absolute;

    width:145px;

    height:145px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(75,145,255,.20),
        transparent 70%
    );

    z-index:-1;

    transition:.45s;

}

/* Floating animation */

@keyframes floatIcon{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-7px);

    }

}

.step-circle{

    animation:floatIcon 5s ease-in-out infinite;

}

/* Icons */

.step-circle img{

    width:42px;

    height:42px;

    object-fit:contain;

    filter:brightness(0) invert(1);

    transition:.4s;

}

/* Number Badge */

.step-number{

    position:absolute;

    top:-6px;

    right:-6px;

    width:30px;

    height:30px;

    border-radius:50%;

    background:#C5220D;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

    box-shadow:0 10px 20px rgba(197,34,13,.40);

    z-index:5;

}

/* Titles */

.workflow-step h3{

    color:#081d55;

    margin-top:24px;

    margin-bottom:12px;

    font-size:22px;

    font-weight:700;

}

.workflow-step p{

    color:#0B2A66;

    font-size:14px;

    line-height:1.75;

}

/*====================================
            HOVER
====================================*/

.workflow-step:hover{

    transform:translateY(-10px);

}

.workflow-step:hover .step-circle{

    background:#fff;

    border-color:#7EB3FF;

    box-shadow:
        0 0 30px rgba(126,179,255,.35),
        0 20px 55px rgba(0,0,0,.35);

}

.workflow-step:hover .step-circle::before{

    transform:scale(1.18);

    opacity:1;

}

.workflow-step:hover img{

    filter:none;

    transform:scale(1.15);

}

.workflow-step:hover h3{

    color:#7EB3FF;

}
/*=========================================================
        BENEFITS
=========================================================*/

.workflow-bottom{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:90px;

}

.workflow-bottom > div{

    position:relative;

    padding:34px 28px;

    border-radius:22px;

    background:rgba(255,255,255,.05);

    border:1px solid rgb(30 67 173);

    backdrop-filter:blur(18px);

    transition:.45s cubic-bezier(.16,1,.3,1);

    overflow:hidden;

}

/* Blue top line */

.workflow-bottom > div::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:linear-gradient(
        90deg,
        #5EA8FF,
        #89C2FF
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

/* Glow */

.workflow-bottom > div::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-80px;

    top:-80px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(94,168,255,.18),
        transparent 70%
    );

    opacity:0;

    transition:.45s;

}

/* Hover */

.workflow-bottom > div:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.08);

    box-shadow:
        0 25px 60px rgba(0,0,0,.28);

}

.workflow-bottom > div:hover::before{

    transform:scaleX(1);

}

.workflow-bottom > div:hover::after{

    opacity:1;

}

.workflow-bottom h4{

    color:#081B4B;

    font-size:22px;

    margin-bottom:14px;

    font-weight:700;

}

.workflow-bottom p{

    color:#0B2A66;

    line-height:1.8;

    font-size:15px;

}

/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1400px){

.workflow-timeline{

gap:14px;

}

.workflow-step{

min-width:105px;

}

}

@media(max-width:1200px){

.workflow-step{

min-width:95px;

}

}

@media(max-width:992px){

.workflow-header h2{

font-size:44px;

}

.workflow-header p{

font-size:18px;

}

.workflow-bottom{

grid-template-columns:repeat(2,1fr);

}

.workflow-progress-line{

left:90px;

right:90px;

}

}

@media(max-width:768px){

.workflow-section{

padding:90px 0;

}

.workflow-header{

margin-bottom:60px;

}

.workflow-header h2{

font-size:34px;

}

.workflow-header p{

font-size:16px;

}

.workflow-timeline{

overflow-x:auto;

padding-bottom:30px;

}

.workflow-step{

min-width:170px;

}

.workflow-bottom{

grid-template-columns:1fr;

margin-top:60px;

}

}

@media(max-width:600px){

.workflow-timeline{

flex-direction:column;

align-items:center;

overflow-x:visible;

gap:56px;

padding:20px 0 0;

}

.workflow-step{

min-width:0;

width:100%;

max-width:280px;

}

.workflow-step:not(:last-child)::after{

content:"";

position:absolute;

top:100%;

left:50%;

transform:translateX(-50%);

width:3px;

height:56px;

border-radius:50px;

background:linear-gradient(180deg,rgba(126,179,255,.9),rgba(126,179,255,.25));

}

.workflow-progress-line{

display:none;

}

.step-circle{

width:80px;

height:80px;

}

.step-circle::before{

width:112px;

height:112px;

}

.step-circle img{

width:32px;

height:32px;

}

.workflow-step h3{

font-size:19px;

margin-top:18px;

}

.workflow-step p{

font-size:14px;

}

}

/*=========================================================
        SCROLLBAR
=========================================================*/

.workflow-timeline::-webkit-scrollbar{

height:8px;

}

.workflow-timeline::-webkit-scrollbar-thumb{

background:#3B6FD6;

border-radius:30px;

}

.workflow-timeline::-webkit-scrollbar-track{

background:rgba(255,255,255,.06);

}

/*=========================================================
        PREMIUM MICRO ANIMATION
=========================================================*/

.workflow-step:nth-child(2) .step-circle{

animation-delay:.2s;

}

.workflow-step:nth-child(3) .step-circle{

animation-delay:.4s;

}

.workflow-step:nth-child(4) .step-circle{

animation-delay:.6s;

}

.workflow-step:nth-child(5) .step-circle{

animation-delay:.8s;

}

.workflow-step:nth-child(6) .step-circle{

animation-delay:1s;

}

.workflow-step:nth-child(7) .step-circle{

animation-delay:1.2s;

}

.workflow-step:nth-child(8) .step-circle{

animation-delay:1.4s;

}
/*=========================================================
        WHY COELHO CONSULTING
=========================================================*/

.comparison-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 15px 0 80px;

    background: #ffffff;

}


/*=========================================================
        BACKGROUND GLOW
=========================================================*/

.comparison-section::before {

    content: "";

    position: absolute;

    width: 900px;

    height: 900px;

    right: -350px;

    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47,107,219,.10),
            transparent 70%
        );

    z-index: 0;

    pointer-events: none;

}


.comparison-section::after {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -280px;

    bottom: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47,107,219,.08),
            transparent 70%
        );

    z-index: 0;

    pointer-events: none;

}


/*=========================================================
        CONTAINER
        SAME APPROACH AS WHO WE SERVE
=========================================================*/

.comparison-section .container {

    position: relative;

    width: 95%;

    max-width: none;

    margin: auto;

    padding: 0 20px;

    z-index: 2;

}


/*=========================================================
        MAIN GRID
=========================================================*/

.comparison-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 420px minmax(0, 1fr);

    gap: 50px;

    align-items: center;

    width: 100%;

}


/*=========================================================
        LEFT CONTENT
=========================================================*/

.comparison-intro {

    width: 100%;

    max-width: 520px;

    padding-left: 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.comparison-tag {

    display: block;

    color: #D9342B;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: .28em;

    text-transform: uppercase;

    margin-bottom: 26px;

}


.comparison-tag::before {

    content: "";

    display: block;

    width: 42px;

    height: 2px;

    margin-bottom: 12px;

    background: #D9342B;

}


.comparison-intro h2 {

    color: #081B4B;

    font-size: 38px;

    line-height: 1.05;

    font-weight: 800;

    margin: 0 0 30px;

}


.comparison-intro p {

    color: #0B2A66;

    font-size: 21px;

    line-height: 1.8;

    margin: 0;

    max-width: 520px;

}


/*=========================================================
        RIGHT SIDE
=========================================================*/

.comparison-content {

    position: relative;

    width: 100%;

    min-width: 0;

    display: flex;

    justify-content: center;

}


/*=========================================================
        COMPARISON WRAPPER
=========================================================*/

.comparison-wrapper {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 35px;

}


/*=========================================================
        COMPARISON CARDS
=========================================================*/

.comparison-card {

    position: relative;

    flex: 0 0 420px;

    width: 420px;

    max-width: 420px;

    background: #ffffff;

    border: 1px solid #E6ECF5;

    border-radius: 22px;

    padding: 42px;

    box-shadow:
        0 18px 45px rgba(8,27,75,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/*=========================================================
        LEFT CARD
=========================================================*/

.comparison-left {

    background: #ffffff;

}


/*=========================================================
        RIGHT CARD
=========================================================*/

.comparison-right {

    color: #ffffff;

    border: none;

    /*
        IMPORTANT:
        Removed margin-left:-50px
        because it causes horizontal overflow.
    */

    margin-left: 0;

    background:
        linear-gradient(
            135deg,
            #1F5AFF 0%,
            #1648D6 55%,
            #0B2F89 100%
        );

}


/*=========================================================
        CARD TITLES
=========================================================*/

.comparison-card h3 {

    font-size: 18px;

    font-weight: 800;

    letter-spacing: .20em;

    text-transform: uppercase;

    margin: 0 0 28px;

}


.comparison-left h3 {

    color: #20386A;

}


.comparison-right h3 {

    color: #ffffff;

}


.comparison-card h3::after {

    content: "";

    display: block;

    width: 100%;

    height: 1px;

    margin-top: 18px;

    background: rgba(0,0,0,.08);

}


.comparison-right h3::after {

    background: rgba(255,255,255,.18);

}


/*=========================================================
        LIST
=========================================================*/

.comparison-card ul {

    list-style: none;

    margin: 0;

    padding: 0;

}


.comparison-card li {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 18px 0;

    font-size: 18px;

    line-height: 1.55;

    border-bottom:
        1px solid rgba(0,0,0,.08);

    transition: .3s ease;

}


.comparison-right li {

    border-bottom:
        1px solid rgba(255,255,255,.12);

}


.comparison-card li:last-child {

    border-bottom: none;

}


/*=========================================================
        ICONS
=========================================================*/

.compare-icon {

    width: 34px;

    height: 34px;

    min-width: 34px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    font-size: 15px;

    font-weight: 700;

    transition: .35s;

}


.compare-bad {

    background: #a99898;

    color: #ffffff;

}


.compare-good {

    background: #ffffff;

    color: #1F5AFF;

}


/*=========================================================
        CENTER ARROW
=========================================================*/

.comparison-arrow {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

}


.comparison-arrow::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 150px;

    background-image:
        radial-gradient(
            #C7D8FF 1.3px,
            transparent 1.3px
        );

    background-size: 14px 14px;

    opacity: .55;

    z-index: -1;

}


.arrow-circle {

    width: 82px;

    height: 82px;

    border-radius: 50%;

    background: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    color: #0B2F89;

    box-shadow:
        0 18px 45px rgba(8,27,75,.15);

    animation:
        arrowFloat 3s ease-in-out infinite;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/*=========================================================
        HOVER EFFECTS
=========================================================*/

.comparison-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 35px 80px rgba(8,27,75,.16);

}


.comparison-left:hover {

    border-color: #2F6BDB;

}


.comparison-right:hover {

    box-shadow:
        0 35px 90px rgba(31,90,255,.35);

}


.comparison-card:hover li {

    transform: translateX(6px);

}


.comparison-card:hover .compare-icon {

    transform: scale(1.15);

}


.comparison-arrow:hover .arrow-circle {

    transform: scale(1.08);

    box-shadow:
        0 25px 60px rgba(31,90,255,.25);

}


/*=========================================================
        ARROW ANIMATION
=========================================================*/

@keyframes arrowFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}


/*=========================================================
        FOOTER
=========================================================*/

.comparison-footer {

    text-align: center;

    margin-top: 90px;

}


.comparison-footer h3 {

    color: #081B4B;

    font-size: 48px;

    font-weight: 800;

    line-height: 1.15;

    margin: 0 0 18px;

}


.comparison-footer p {

    color: #0B2A66;

    font-size: 20px;

    line-height: 1.7;

    max-width: 760px;

    margin: 0 auto;

}


/*=========================================================
        BUTTONS
=========================================================*/

.comparison-buttons {

    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 40px;

    flex-wrap: wrap;

}


.comparison-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    padding: 18px 36px;

    border-radius: 8px;

    font-size: 17px;

    font-weight: 700;

    transition: .35s ease;

}


.comparison-btn-primary {

    background: #C5220D;

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(197,34,13,.25);

}


.comparison-btn-primary:hover {

    background: #A91D0A;

    transform: translateY(-4px);

}


.comparison-btn-outline {

    background: #ffffff;

    border: 2px solid #2F6BDB;

    color: #2F6BDB;

}


.comparison-btn-outline:hover {

    background: #2F6BDB;

    color: #ffffff;

    transform: translateY(-4px);

}


/*=========================================================
        LARGE SCREEN
=========================================================*/

@media (min-width: 1600px) {

    .comparison-section .container {

        width: 95%;

    }

    .comparison-grid {

        grid-template-columns:
            420px minmax(0, 1fr);

        gap: 70px;

    }

}


/*=========================================================
        LAPTOP
=========================================================*/

@media (max-width: 1500px) {

    .comparison-section .container {

        width: 95%;

    }

    .comparison-grid {

        grid-template-columns:
            320px minmax(0, 1fr);

        gap: 30px;

    }

    .comparison-wrapper {

        gap: 16px;

    }

    .comparison-card {

        flex-basis: 340px;

        width: 340px;

        max-width: 340px;

        padding: 28px;

    }

    .arrow-circle {

        width: 64px;

        height: 64px;

        font-size: 26px;

    }

}


/*=========================================================
        TABLET / SMALL LAPTOP
=========================================================*/

@media (max-width: 1200px) {

    .comparison-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .comparison-intro {

        max-width: 760px;

        margin: 0 auto;

        padding-left: 0;

        text-align: center;

    }

    .comparison-intro p {

        margin-left: auto;

        margin-right: auto;

    }

    .comparison-tag::before {

        margin-left: auto;

        margin-right: auto;

    }

    .comparison-content {

        width: 100%;

    }

    .comparison-wrapper {

        max-width: 950px;

        margin: 0 auto;

    }

    .comparison-card {

        flex-basis: 420px;

        width: 420px;

        max-width: 420px;

    }

}


/*=========================================================
        TABLET
=========================================================*/

@media (max-width: 950px) {

    .comparison-wrapper {

        flex-direction: column;

        gap: 35px;

    }

    .comparison-card {

        width: 420px;

        max-width: 100%;

    }

    .comparison-arrow {

        transform: rotate(90deg);

    }

}


/*=========================================================
        MOBILE
=========================================================*/

@media (max-width: 768px) {

    .comparison-section {

        padding: 70px 0;

    }

    .comparison-section .container {

        width: 95%;

        padding: 0 10px;

    }

    .comparison-intro h2 {

        font-size: 42px;

    }

    .comparison-intro p {

        font-size: 18px;

    }

    .comparison-card {

        width: 100%;

        max-width: 420px;

        padding: 30px;

    }

    .comparison-card li {

        font-size: 16px;

    }

    .arrow-circle {

        width: 68px;

        height: 68px;

        font-size: 28px;

    }

    .comparison-footer h3 {

        font-size: 34px;

    }

    .comparison-footer p {

        font-size: 18px;

    }

}


/*=========================================================
        SMALL MOBILE
=========================================================*/

@media (max-width: 480px) {

    .comparison-section .container {

        width: 100%;

        padding: 0 15px;

    }

    .comparison-intro h2 {

        font-size: 34px;

    }

    .comparison-card {

        padding: 24px;

    }

}
/*=========================================================
                    WHO WE HELP
=========================================================*/

.who-help-section{
    position:relative;
    padding:120px 0;
    background:#f8fbff;
    overflow:hidden;
}

.who-help-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    right:-250px;
    top:-250px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(47,107,219,.08),
        transparent 70%);
}

.who-help-section::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-220px;
    bottom:-220px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(197,34,13,.05),
        transparent 70%);
}

.who-help-section .container{
    position:relative;
    z-index:2;
}


.bottom-stats .container{
    width:95%;
    max-width:95%;
    margin:0 auto;
    padding:0 20px;
    position:relative;
    z-index:2;
}

/*=========================================
        SERVICE PROCESS CONTAINER
=========================================*/

.service-process .container{

    width:100%;
    max-width:100%;

    margin:0 auto;

    padding:0 0px;

    position:relative;
    z-index:2;
}

/*=========================================
        WHY COELHO CONTAINER
=========================================*/

.why-coelho .container{

    width:95%;
    max-width:95%;

    margin:0 auto;

    padding:0 20px;

    position:relative;
    z-index:2;
}
/*=========================================
        CLIENTS INTRO CONTAINER
=========================================*/

.clients-intro .container{

    width:100%;
    max-width:100%;

    margin:0 auto;

    padding:0 20px;

    position:relative;
    z-index:2;
}

.why-clients .container {
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/*=========================================
        WHY WORK HERE CONTAINER
=========================================*/

.why-work-section .container {
    position: relative;
    z-index: 2;

    width: 95%;
    max-width: 95%;

    margin: 0 auto;
    padding: 0 20px;
}
/*=========================================================
    WHO YOU'LL WORK WITH
    RESPONSIVE 95% CONTAINER
=========================================================*/

.who-youll-work-with .container {

    width: 95%;
    max-width: 95%;

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;

    box-sizing: border-box;
}

/* 95% WIDTH - HOW WE WORK SECTION */
.work-culture-section .container {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/*=========================================================
    CAREER OPPORTUNITIES - 95% CONTAINER
=========================================================*/

.career-opportunities .container {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
/*=========================================================
    CAREERS CTA - 95% CONTAINER
=========================================================*/

.career-cta .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    box-sizing: border-box;
}
/*=========================================================
    OUR OFFICES - 95% CONTAINER
=========================================================*/

.about-offices .container {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
/*=========================================================
    DEMO CTA - 95% WIDTH
=========================================================*/

.demo-cta .demo-box {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/*=========================================================
    AWARD SECTION - 95% CONTAINER
=========================================================*/

.award-section .container {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
/*=========================================================
    ABOUT CTA - 95% CONTAINER
=========================================================*/

.about-cta .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    box-sizing: border-box;
}

/*=========================
HEADER
=========================*/

.who-help-header{

    max-width:900px;

    margin:0 auto 80px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:9px 20px;

    border-radius:40px;

    background:#eef4ff;

    color:#c5220d;

    font-size:12px;

    font-weight:700;

    letter-spacing:.25em;

    text-transform:uppercase;

    margin-bottom:22px;

}

.who-help-header h2{

    font-size:58px;

    font-weight:800;

    line-height:1.08;

    color:#081b4b;

    margin-bottom:24px;

}

.who-help-header p{

    max-width:760px;

    margin:auto;

    color:#667085;

    line-height:1.8;

    font-size:19px;

}

/*=========================
LAYOUT
=========================*/

.who-help-grid{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:28px;

    align-items:start;
	padding-right:30px;
}

/*==========================================
        LEFT INTRO PANEL
==========================================*/

.who-help-intro{

    background:#ffffff;

    border-radius:24px;

    padding:55px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-shadow:
        0 15px 45px rgba(20,40,80,.08);

    border:1px solid #E8EDF8;

}

.who-help-intro::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(255,255,255,.08),
        transparent 70%);

}
/*.who-help-intro span::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:28px;

    height:2px;

    background:#D6402F;

}*/
.who-help-intro span{

    color:#D6402F;

    font-size:17px;

    font-weight:700;

    letter-spacing:.25em;

    text-transform:uppercase;

    margin-bottom:18px;

    position:relative;

    padding-left:0px;

}

.who-help-intro h3{

    color:#081B4B;

    font-size:38px;

    line-height:1.15;

    font-weight:800;

    margin:0 0 18px;

}

.who-help-intro p{

    color:#5B6478;

    font-size:18px;

    line-height:1.9;

    max-width:420px;

}
.who-help-intro p::before{

    content:"";

    /*display:block;*/

    width:60px;

    height:3px;

    background:#D6402F;

    margin-bottom:28px;

}
/*=========================
RIGHT GRID
=========================*/

.who-help-cards{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    grid-template-areas:

        "government government coc coc nonprofit nonprofit"
        "finance finance finance program program program";

    gap:22px;
align-items:stretch;
}

/*=========================================================
                IMAGE CARDS
=========================================================*/

.help-card{

    position:relative;

    min-height:260px;

    overflow:hidden;

    border-radius:22px;

    background:#0A1A4A;

    cursor:pointer;

    text-decoration:none;

    box-shadow:
        0 18px 40px rgba(15,23,42,.10);

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease;

}

/*-------------------------
GRID POSITIONS
-------------------------*/

.government{

    grid-area:government;

}

.coc{

    grid-area:coc;

}

.nonprofit{

    grid-area:nonprofit;

}

.finance{

    grid-area:finance;

    min-height:290px;

}

.program{

    grid-area:program;

    min-height:290px;

}

/*-------------------------
IMAGE
-------------------------*/

.help-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .9s ease;

}

/*-------------------------
OVERLAY
-------------------------*/

.help-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(8,27,75,.15),
        rgba(8,27,75,.40),
        rgba(8,27,75,.92)
    );

    transition:.4s;

}

.help-overlay::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(47,107,219,.10),
        rgba(47,107,219,.45)
    );

    opacity:0;

    transition:.45s;

}

/*-------------------------
CONTENT
-------------------------*/

.help-content{

    position:absolute;

    left:26px;

    right:26px;

    bottom:24px;

    z-index:2;

    color:#fff;

}

.help-content i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(12px);

    font-size:22px;

    margin-bottom:18px;

    transition:.35s;

}

.help-content h4{

    font-size:24px;

    font-weight:800;

    margin-bottom:8px;

    line-height:1.2;

}

.help-content p{

    font-size:15px;

    line-height:1.7;

    color:rgba(255,255,255,.82);

}

/*-------------------------
HOVER
-------------------------*/

.help-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 65px rgba(15,23,42,.18);

}

.help-card:hover img{

    transform:scale(1.08);

}

.help-card:hover .help-overlay::after{

    opacity:1;

}

.help-card:hover i{

    background:#2F6BDB;

    transform:scale(1.08);

}

/* Premium shine */

.help-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:60%;

    height:250%;

    background:linear-gradient(
        rgba(255,255,255,0),
        rgba(255,255,255,.18),
        rgba(255,255,255,0)
    );

    transform:rotate(25deg);

    transition:1s;

    z-index:3;

}

.help-card:hover::before{

    left:130%;

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media (max-width:1200px){

    .who-help-grid{

        grid-template-columns:360px 1fr;

        gap:22px;

    }

    .who-help-intro{

        min-height:520px;

        padding:40px;

    }

    .who-help-intro h3{

        font-size:36px;

    }

}

@media (max-width:992px){

    .who-help-grid{

        grid-template-columns:1fr;

    }

    .who-help-intro{

        min-height:auto;

    }

    .who-help-cards{

        grid-template-columns:repeat(2,1fr);

        grid-template-areas:

        "government coc"

        "nonprofit finance"

        "program program";

    }

}

@media (max-width:768px){

    .who-help-section{

        padding:90px 0;

    }

    .who-help-header{

        margin-bottom:60px;

    }

    .who-help-header h2{

        font-size:42px;

    }

    .who-help-header p{

        font-size:17px;

    }

    .who-help-cards{

        grid-template-columns:1fr;

        grid-template-areas:

        "government"

        "coc"

        "nonprofit"

        "finance"

        "program";

    }

    .help-card{

        min-height:240px;

    }

    .finance,

    .program{

        min-height:240px;

    }

    .who-help-intro{

        padding:35px;

    }

    .who-help-intro h3{

        font-size:32px;

    }

}

/*=========================================================
                MICRO ANIMATIONS
=========================================================*/

.help-card{

    animation:floatCard 7s ease-in-out infinite;

}

.help-card:nth-child(2){

    animation-delay:.4s;

}

.help-card:nth-child(3){

    animation-delay:.8s;

}

.help-card:nth-child(4){

    animation-delay:1.2s;

}

.help-card:nth-child(5){

    animation-delay:1.6s;

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

/*=========================================================
            PREMIUM BORDER
=========================================================*/

.help-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.08);

    pointer-events:none;

}

/*=========================================================
            HOVER IMPROVEMENTS
=========================================================*/

.help-card:hover .help-content h4{

    color:#A8D0FF;

}

.help-card:hover .help-content p{

    color:#ffffff;

}

.help-card:hover{

    border-radius:24px;

}

/*=========================================================
            IMAGE QUALITY
=========================================================*/

.help-card img{

    image-rendering:auto;

}

/*=========================================================
            ACCESSIBILITY
=========================================================*/

.help-card:focus-visible{

    outline:3px solid #2F6BDB;

    outline-offset:4px;

}


/*=========================================================
        GLOBAL RESPONSIVE / SCREEN SAFETY
=========================================================*/

/* Prevent accidental horizontal scrolling */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Make all elements calculate width correctly */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Images should never exceed their container */
img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Text should be allowed to wrap */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span {
    overflow-wrap: break-word;
}

/*=========================================================
        GLOBAL CONTAINER
=========================================================*/

.container {
    width: min(92%, 1400px);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/*=========================================================
        LARGE DESKTOP
=========================================================*/

@media (max-width: 1600px) {

    .container {
        width: 94%;
        max-width: 1350px;
    }

}

/*=========================================================
        LAPTOP
=========================================================*/

@media (max-width: 1366px) {

    .container {
        width: 94%;
        max-width: 1250px;
    }

    h1 {
        font-size: clamp(36px, 4.5vw, 58px);
    }

    h2 {
        font-size: clamp(30px, 4vw, 48px);
    }

}

/*=========================================================
        SMALL LAPTOP
=========================================================*/

@media (max-width: 1200px) {

    .container {
        width: 92%;
        max-width: 1100px;
    }

    /* Prevent fixed-width children from breaking layout */
    .workflow-step,
    .step,
    .why-item,
    .service-item,
    .card,
    .dashboard-card {
        min-width: 0;
    }

}

/*=========================================================
        TABLET
=========================================================*/

@media (max-width: 992px) {

    .container {
        width: 90%;
        max-width: 900px;
    }

    /* Convert large multi-column layouts */
    .workflow-timeline {
        grid-template-columns: repeat(4, 1fr);
    }

    .workflow-bottom {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* General grid safety */
    [class*="grid"] {
        min-width: 0;
    }

}

/*=========================================================
        MOBILE
=========================================================*/

@media (max-width: 768px) {

    .container {
        width: 92%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* Large headings */
    h1 {
        font-size: clamp(32px, 9vw, 46px);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.15;
    }

    h3 {
        font-size: 22px;
    }

    /* Common grids */
    .workflow-bottom,
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Prevent fixed flex children */
    .workflow-step,
    .step,
    .why-item {
        width: 100%;
        min-width: 0;
    }

}

/*=========================================================
        SMALL MOBILE
=========================================================*/

@media (max-width: 480px) {

    .container {
        width: 90%;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 28px;
    }

    p {
        font-size: 15px;
        line-height: 1.7;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons a {
        width: 100%;
    }

}