/* ================================================================
   CI360 v2.5 — editable header/footer, cinematic insights hero,
   and flexible services layouts.
   ================================================================ */

/* ---------- Editable image logos ---------- */
.site-header .logo.logo--image,
.footer .logo.logo--image{
  display:inline-flex;
  align-items:center;
  width:auto;
  max-width:min(var(--ci-logo-width,142px),32vw);
  line-height:1;
  letter-spacing:0;
}
.site-header .logo.logo--image .ci360-logo-img,
.footer .logo.logo--image .ci360-logo-img{
  display:block;
  width:var(--ci-logo-width,142px);
  max-width:100%;
  height:auto;
  max-height:52px;
  object-fit:contain;
  object-position:left center;
}
.footer .logo.logo--image .ci360-logo-img{
  max-height:64px;
  object-position:left center;
}
@media(max-width:767px){
  .site-header .logo.logo--image{max-width:42vw}
  .site-header .logo.logo--image .ci360-logo-img{max-height:42px}
}

/* ---------- Insights hero: new cinematic default ---------- */
#ci360-insights-archive-root .ci360-insights-hero.has-custom-background::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,6,23,.96) 0%,rgba(2,6,23,.88) 40%,rgba(2,6,23,.58) 68%,rgba(2,6,23,.88) 100%),
    var(--ci-insights-hero-bg) center/cover no-repeat;
  opacity:.5;
}
#ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic{
  min-height:clamp(650px,76vh,820px);
  display:flex;
  align-items:center;
  padding-top:clamp(112px,9vw,142px);
  padding-bottom:clamp(72px,7vw,100px);
  background:
    radial-gradient(circle at 20% 22%,rgba(36,197,255,.10),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(74,105,255,.16),transparent 30%),
    linear-gradient(145deg,#061026 0%,#030918 58%,#020617 100%);
}
#ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic .ci360-insights-hero-grid{
  align-items:center;
}
#ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic .ci360-insights-hero-left{
  gap:24px;
  padding:clamp(10px,2vw,28px) 0;
}
#ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic h1{
  font-size:clamp(56px,6.3vw,96px);
  line-height:.96;
  letter-spacing:-.065em;
  max-width:820px;
}
#ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic .ci360-insights-hero-left>p{
  max-width:680px;
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.78;
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight{
  position:relative;
  min-height:520px;
  padding:0;
  overflow:hidden;
  gap:0;
  border:1px solid rgba(147,197,253,.22);
  border-radius:30px;
  background:#071129;
  box-shadow:0 36px 90px rgba(0,0,0,.5);
  isolation:isolate;
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,.04) 10%,rgba(2,6,23,.12) 44%,rgba(2,6,23,.94) 100%);
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-media{
  position:absolute;
  inset:0;
  height:100%;
  border-radius:0;
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-img{
  height:100%;
  filter:saturate(.9) contrast(1.03);
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-card-badge{
  top:22px;
  left:22px;
  z-index:3;
  padding:7px 14px;
  background:rgba(2,6,23,.72);
  border-color:rgba(125,211,252,.35);
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-copy{
  position:absolute;
  z-index:3;
  left:28px;
  right:28px;
  bottom:92px;
  gap:10px;
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-copy>strong{
  max-width:760px;
  font-size:clamp(22px,2vw,31px);
  letter-spacing:-.035em;
  line-height:1.12;
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-copy>span:last-child{
  max-width:700px;
  color:#c3d1ea;
  font-size:13px;
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-copy .ci360-insights-meta{
  color:#c6d3eb;
}
#ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-button{
  position:absolute;
  z-index:3;
  left:28px;
  bottom:26px;
  width:auto;
  max-width:max-content;
  padding:12px 22px;
}
#ci360-insights-archive-root .ci360-insights-hero.no-spotlight .ci360-insights-hero-grid{
  grid-template-columns:minmax(0,900px)!important;
  justify-content:center;
  text-align:center;
}
#ci360-insights-archive-root .ci360-insights-hero.no-spotlight .ci360-insights-hero-left{
  align-items:center;
}
#ci360-insights-archive-root .ci360-insights-hero.no-spotlight .ci360-insights-hero-left>p{
  margin-inline:auto;
}

/* Minimal hero choice */
#ci360-insights-archive-root .ci360-insights-hero.hero-style-minimal{
  padding-top:clamp(118px,10vw,150px);
  padding-bottom:clamp(70px,8vw,110px);
  background:linear-gradient(145deg,#071126,#020617);
}
#ci360-insights-archive-root .hero-style-minimal .ci360-insights-hero-grid{
  grid-template-columns:minmax(0,940px)!important;
}
#ci360-insights-archive-root .hero-style-minimal .ci360-insights-hero-right{display:none}
#ci360-insights-archive-root .hero-style-minimal h1{font-size:clamp(62px,8vw,118px)}

@media(min-width:1024px){
  #ci360-insights-archive-root .hero-style-cinematic .ci360-insights-hero-grid{
    grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
    gap:clamp(48px,5vw,88px);
  }
}
@media(max-width:1023px){
  #ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic{min-height:auto}
  #ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight{min-height:430px}
}
@media(max-width:767px){
  #ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic{padding-top:96px;padding-bottom:54px}
  #ci360-insights-archive-root .ci360-insights-hero.hero-style-cinematic h1{font-size:clamp(44px,13vw,64px)}
  #ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight{min-height:390px;border-radius:22px}
  #ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-copy{left:20px;right:20px;bottom:86px}
  #ci360-insights-archive-root .hero-style-cinematic .ci360-insights-spotlight-button{left:20px;bottom:20px}
  #ci360-insights-archive-root .hero-style-cinematic .ci360-insights-card-badge{top:16px;left:16px}
}

/* ---------- Services page: new editable layouts ---------- */
.ci360-services-section{
  position:relative;
  padding-top:clamp(70px,7vw,112px);
  padding-bottom:clamp(76px,8vw,128px);
}
.ci360-services-heading{margin-bottom:clamp(38px,5vw,66px)}
.ci360-services-heading .section-label{margin-bottom:20px}
.ci360-services-heading-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);
  gap:clamp(28px,6vw,100px);
  align-items:end;
}
.ci360-services-heading-grid h2{
  margin:0;
  max-width:820px;
  color:var(--navy);
  font-size:clamp(42px,5.6vw,80px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.ci360-services-heading-grid h2 em{font-style:normal;color:var(--royal)}
.ci360-services-heading-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}

.ci360-services-grid{
  display:grid;
  gap:clamp(22px,2.2vw,34px);
}
.ci360-services-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ci360-services-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ci360-service-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #dce5f5;
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 50px rgba(15,31,78,.07);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.ci360-service-card:hover{
  transform:translateY(-7px);
  border-color:#a9c3ff;
  box-shadow:0 28px 70px rgba(20,48,132,.14);
}
.ci360-service-card-media{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(145deg,#0a27c5,#103ee8 60%,#081f9c);
}
.ci360-service-card-visual,
.ci360-service-card-visual>.service-visual,
.ci360-service-card-photo{
  display:block;
  width:100%;
  height:100%;
}
.ci360-service-card-visual>.service-visual{border-radius:0!important;min-height:0!important}
.ci360-service-card-photo{object-fit:cover;transition:transform .75s var(--ease)}
.ci360-service-card:hover .ci360-service-card-photo{transform:scale(1.045)}
.ci360-service-card-index{
  position:absolute;
  right:20px;
  bottom:18px;
  z-index:6;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.92);
  color:var(--navy);
  font-size:11px;
  font-weight:700;
  box-shadow:0 12px 34px rgba(3,15,72,.18);
}
.ci360-service-card-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:310px;
  padding:clamp(24px,2.4vw,34px);
}
.ci360-service-card-kicker{
  margin-bottom:13px;
  color:#6174a3;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ci360-service-card-content h3{
  margin:0;
  color:var(--navy);
  font-size:clamp(27px,2.3vw,38px);
  line-height:1.08;
  letter-spacing:-.045em;
}
.ci360-service-card-content h3 a{color:inherit}
.ci360-service-card-content p{
  margin:17px 0 0;
  max-width:600px;
  color:#657399;
  font-size:13px;
  line-height:1.72;
}
.ci360-service-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px;
}
.ci360-service-card-tags>span{
  padding:6px 10px;
  border:1px solid #dbe5fb;
  border-radius:999px;
  background:#f4f7ff;
  color:#3456af;
  font-size:9px;
  font-weight:600;
}
.ci360-service-card-link{
  display:inline-flex;
  margin-top:auto;
  padding-top:25px;
  color:var(--royal);
}
.ci360-service-card-cta{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:11px;
  font-weight:700;
}
.ci360-service-card-cta .icon{width:17px;height:17px;transition:transform .3s ease}
.ci360-service-card:hover .ci360-service-card-cta .icon{transform:translate(3px,-3px)}

/* Compact services list */
.ci360-services-section--compact .ci360-services-grid{grid-template-columns:1fr!important;gap:14px}
.ci360-services-section--compact .ci360-service-card{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  border-radius:22px;
}
.ci360-services-section--compact .ci360-service-card-media{aspect-ratio:auto;min-height:270px}
.ci360-services-section--compact .ci360-service-card-content{min-height:270px;padding:32px 36px}
.ci360-services-section--compact .ci360-service-card-content h3{font-size:clamp(28px,3vw,44px)}

/* Classic option keeps original card markup/styles. */
.ci360-services-section--classic{padding-top:clamp(58px,6vw,92px)}
.ci360-services-section--classic .services-grid.layout-classic{width:100%}

@media(max-width:1100px){
  .ci360-services-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .ci360-services-heading-grid{grid-template-columns:1fr;gap:18px}
  .ci360-services-grid.cols-2,.ci360-services-grid.cols-3{grid-template-columns:1fr}
  .ci360-services-section--compact .ci360-service-card{grid-template-columns:1fr}
  .ci360-services-section--compact .ci360-service-card-media{min-height:220px;aspect-ratio:16/9}
  .ci360-services-section--compact .ci360-service-card-content{min-height:0;padding:26px}
}
@media(max-width:520px){
  .ci360-services-section{padding-top:54px;padding-bottom:72px}
  .ci360-service-card{border-radius:20px}
  .ci360-service-card-content{min-height:0;padding:23px 20px}
  .ci360-service-card-index{width:44px;height:44px;right:14px;bottom:14px}
}

/* ---------- Services hero: redesigned + editable ---------- */
.services-hero{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:none;
  padding:0;
}
.services-hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:var(--ci-services-hero-bg) center/cover no-repeat;
}
.services-hero.has-custom-background::before{opacity:.16}
.services-hero-shell{position:relative;z-index:1;padding-top:clamp(70px,7vw,108px);padding-bottom:clamp(78px,8vw,122px)}
.services-hero .breadcrumb{margin-bottom:clamp(36px,4vw,56px)}
.services-hero .services-hero-grid{
  width:100%;
  max-width:none;
  padding:0;
  background:none;
  border-radius:0;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  gap:clamp(46px,6vw,96px);
  align-items:center;
}
.services-hero .services-hero-copy{min-width:0}
.services-hero .services-hero-copy .display{
  margin:0;
  max-width:860px;
  font-size:clamp(58px,6.4vw,98px);
  line-height:.98;
  letter-spacing:-.065em;
}
.services-hero .services-hero-copy>p{max-width:650px;margin-top:28px;font-size:14px;line-height:1.8}
.services-hero .services-hero-copy>.button{margin-top:30px}
.services-hero .services-hero-art{
  position:relative;
  aspect-ratio:1.08;
  min-height:460px;
  overflow:visible;
  padding:clamp(22px,2vw,30px);
  border:1px solid rgba(42,82,190,.15);
  border-radius:34px;
  background:linear-gradient(145deg,#0a27c5,#103ee8 58%,#071d94);
  box-shadow:0 34px 90px rgba(15,42,124,.18);
}
.services-hero .services-hero-art .service-visual{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:22px!important;
  overflow:hidden;
}
.services-hero .hero-art-badge{
  right:-18px;
  bottom:-18px;
  width:112px;
  height:112px;
  background:linear-gradient(145deg,#7dd3fc,#4f7df3);
  color:#fff;
  box-shadow:0 18px 44px rgba(41,88,211,.28);
}
.services-hero .hero-art-badge>small{font-size:7px;line-height:1.35}

/* Editorial split: new default */
.services-hero--editorial{
  background:
    radial-gradient(circle at 88% 18%,rgba(89,126,255,.11),transparent 25%),
    radial-gradient(circle at 10% 2%,rgba(125,211,252,.10),transparent 24%),
    #f7f9fd;
}
.services-hero--editorial .display{color:var(--navy)}
.services-hero--editorial .display em{color:var(--royal)}
.services-hero--editorial .services-hero-copy>p{color:#657399}

/* Blue panel option */
.services-hero--panel{
  color:#fff;
  background:linear-gradient(145deg,#02093e,#061aaf 62%,#0f4ef2);
}
.services-hero--panel::after{
  content:'';
  position:absolute;
  width:680px;height:680px;border-radius:50%;
  right:-180px;top:-260px;
  background:radial-gradient(circle,rgba(125,211,252,.18),transparent 64%);
  pointer-events:none;
}
.services-hero--panel .breadcrumb,.services-hero--panel .breadcrumb a{color:#b7c9f2}
.services-hero--panel .section-label,.services-hero--panel .section-label span+span{color:#c5d5fb}
.services-hero--panel .display,.services-hero--panel .display em{color:#fff}
.services-hero--panel .services-hero-copy>p{color:#c5d5fb}
.services-hero--panel .services-hero-art{border-color:rgba(255,255,255,.16);background:rgba(4,16,81,.38);box-shadow:none}

/* Minimal option */
.services-hero--minimal{background:#f7f9fd}
.services-hero--minimal .services-hero-grid{grid-template-columns:minmax(0,900px);justify-content:start}
.services-hero--minimal .services-hero-art{display:none}
.services-hero--minimal .services-hero-copy .display{font-size:clamp(62px,8vw,118px);max-width:1040px}
.services-hero.no-visual .services-hero-grid{grid-template-columns:minmax(0,900px)}

@media(max-width:1023px){
  .services-hero .services-hero-grid{grid-template-columns:1fr;gap:44px}
  .services-hero .services-hero-art{min-height:0;aspect-ratio:16/10;max-width:760px}
  .services-hero .hero-art-badge{right:16px;bottom:16px}
}
@media(max-width:767px){
  .services-hero-shell{padding-top:48px;padding-bottom:70px}
  .services-hero .breadcrumb{margin-bottom:30px}
  .services-hero .services-hero-copy .display{font-size:clamp(46px,13vw,68px)}
  .services-hero .services-hero-copy>p{font-size:13px;margin-top:22px}
  .services-hero .services-hero-art{padding:14px;border-radius:22px;aspect-ratio:1.12}
  .services-hero .services-hero-art .service-visual{border-radius:15px!important}
  .services-hero .hero-art-badge{width:86px;height:86px;font-size:28px}
}

/* ---------- 1. Showcase Card Layout & Headline Title Fix ---------- */
.showcase {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: center !important;
}

.showcase-copy {
  padding: clamp(24px, 3.5vw, 60px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: visible !important;
}

.showcase-copy h3 {
  font-size: clamp(36px, 4vw, 68px) !important;
  color: var(--navy, #060f26) !important;
  letter-spacing: -0.05em !important;
  line-height: 1.05 !important;
  margin: 0 0 10px 0 !important;
}

.showcase-headline {
  font-size: clamp(18px, 1.8vw, 26px) !important;
  font-weight: 600 !important;
  color: #173682 !important;
  line-height: 1.35 !important;
  margin-top: 10px !important;
  margin-bottom: 16px !important;
  display: block !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

.showcase-copy > p:not(.showcase-headline) {
  color: var(--muted, #475569) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
}

@media (max-width: 991px) {
  .showcase {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .showcase-media {
    width: 100% !important;
    height: auto !important;
    min-height: 280px !important;
    max-height: 480px !important;
    aspect-ratio: 4/3 !important;
    border-radius: 18px !important;
  }
  .showcase-copy {
    width: 100% !important;
    padding: 24px 16px 20px !important;
  }
}

/* ---------- 2. Full-Width Brand Logo Marquee Slider (No side label text) ---------- */
.brand-strip > .small-label {
  display: none !important;
}
.brand-strip {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
}
.brand-marquee {
  width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 100% !important;
}

/* ---------- 3. Header "Let's talk" Button Removal ---------- */
a.nav-contact,
.site-header .nav-contact {
  display: none !important;
}

/* ---------- 4. Phone View: Hero Section Image First (Order Top) ---------- */
@media (max-width: 767px) {
  .hero,
  .services-hero-grid,
  .service-detail-grid,
  .about-teaser,
  .founder-studio,
  .capability-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-collage,
  .hero-art,
  .services-hero-art,
  .service-detail-art,
  .about-wide-image,
  .studio-photo,
  .project-hero-visual,
  .capability-preview,
  .founder-photo {
    order: -1 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
}

/* ---------- 5. New 5-Column Footer Design Styling ---------- */
.ci360-new-footer {
  background: #040a1f !important;
  color: #ffffff !important;
  padding-top: 60px;
  padding-bottom: 40px;
}
.ci360-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.1fr 1.3fr 1.1fr;
  gap: 40px 30px;
  padding-block: 50px 40px;
}
@media (max-width: 1024px) {
  .ci360-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
}
@media (max-width: 640px) {
  .ci360-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.ci360-fcol-brand .ci360-footer-about {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.65;
  margin-top: 20px;
  max-width: 280px;
}
.ci360-fhead {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.ci360-flist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ci360-flist li {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 10px;
  line-height: 1.5;
}
.ci360-flist a {
  color: #cbd5e1;
  transition: color 0.25s;
}
.ci360-flist a:hover {
  color: #22d3ee;
}
.ci360-loc-group {
  font-size: 13px;
  color: #94a3b8;
}
.ci360-flag-head {
  display: block;
  color: #f1f5f9;
  font-size: 14px;
  margin-bottom: 8px;
}
.ci360-loc-block {
  margin-bottom: 8px;
}
.ci360-loc-block strong {
  color: #e2e8f0;
  display: block;
  font-size: 13px;
}
.ci360-loc-block p {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}
.ci360-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.ci360-contact-list li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #cbd5e1;
  font-size: 13px;
  margin-bottom: 12px;
  transition: color 0.25s;
}
.ci360-contact-list li a:hover {
  color: #22d3ee;
}
.ci360-social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ci360-social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  color: #060f26;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.ci360-social-icons a:hover {
  transform: translateY(-3px);
  background: #22d3ee;
  color: #040a1f;
}
.ci360-social-icons a polygon {
  fill: #ffffff;
  transition: fill 0.25s;
}
.ci360-social-icons a:hover polygon {
  fill: #22d3ee;
}

@media (max-width: 767px) {
  .site-header {
    height: 64px !important;
    padding-inline: 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    margin: 0 !important;
    background: rgba(245, 248, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(40, 70, 170, 0.08) !important;
  }
  .site-header .logo {
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
  }
  .site-header .menu-toggle {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Page Loader Overlay & Brand Icon Animation */
.page-wipe {
  background: linear-gradient(145deg, #020617, #030d36, #06195c) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.page-wipe .page-loader-logo,
.page-wipe img.page-loader-logo,
.page-wipe img {
  width: 90px !important;
  height: 90px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 25px rgba(34, 211, 238, 0.6)) !important;
  animation: pageLoaderPulse 1.6s ease-in-out infinite alternate !important;
}

@keyframes pageLoaderPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.85;
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.5));
  }
  100% {
    transform: scale(1.08);
    opacity: 1;
    filter: drop-shadow(0 0 45px rgba(0, 212, 255, 0.95));
  }
}

/* ================================================================
   REUSABLE BLUE RADIAL GLOW CONTAINER BACKGROUND CLASS (.ci360-blue-glow-bg)
   ================================================================ */
.ci360-blue-glow-bg,
.ci360-navy-glow-bg,
.ci360-glow-bg,
.dark-section {
  position: relative !important;
  background-color: #030a38 !important;
  background-image: radial-gradient(ellipse 110% 90% at 85% 25%, rgba(13, 71, 226, 0.5) 0%, transparent 68%),
                    linear-gradient(135deg, #020617 0%, #061899 55%, #040e56 100%) !important;
  color: #ffffff !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Outer & inner glowing radial arc circles in background */
.ci360-blue-glow-bg::before,
.ci360-navy-glow-bg::before,
.ci360-glow-bg::before,
.dark-section::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  border: 1.5px solid rgba(59, 130, 246, 0.18);
  box-shadow: 0 0 120px rgba(37, 99, 235, 0.25) inset;
  pointer-events: none;
  z-index: 0;
}

.ci360-blue-glow-bg::after,
.ci360-navy-glow-bg::after,
.ci360-glow-bg::after,
.dark-section::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -22%;
  transform: translateY(-50%);
  width: 1350px;
  height: 1350px;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, 0.12);
  pointer-events: none;
  z-index: 0;
}

/* Ensure container content renders above background glow rings */
.ci360-blue-glow-bg > *,
.ci360-navy-glow-bg > *,
.ci360-glow-bg > *,
.dark-section > * {
  position: relative;
  z-index: 1;
}

/* Headings inside container */
.ci360-blue-glow-bg h1,
.ci360-blue-glow-bg h2,
.ci360-blue-glow-bg h3,
.ci360-blue-glow-bg h4,
.ci360-blue-glow-bg .display,
.ci360-navy-glow-bg h1,
.ci360-navy-glow-bg h2,
.ci360-navy-glow-bg h3,
.ci360-navy-glow-bg h4,
.ci360-navy-glow-bg .display,
.ci360-glow-bg h1,
.ci360-glow-bg h2,
.ci360-glow-bg h3,
.ci360-glow-bg h4,
.ci360-glow-bg .display,
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section .display {
  color: #ffffff !important;
}

/* Heading span & em accent text (e.g. Connected perspectives.) */
.ci360-blue-glow-bg h1 span,
.ci360-blue-glow-bg h2 span,
.ci360-blue-glow-bg h3 span,
.ci360-blue-glow-bg h4 span,
.ci360-blue-glow-bg .display span,
.ci360-blue-glow-bg h1 em,
.ci360-blue-glow-bg h2 em,
.ci360-blue-glow-bg h3 em,
.ci360-blue-glow-bg h4 em,
.ci360-blue-glow-bg .display em,
.ci360-navy-glow-bg h1 span,
.ci360-navy-glow-bg h2 span,
.ci360-navy-glow-bg h3 span,
.ci360-navy-glow-bg h4 span,
.ci360-navy-glow-bg .display span,
.ci360-navy-glow-bg h1 em,
.ci360-navy-glow-bg h2 em,
.ci360-navy-glow-bg h3 em,
.ci360-navy-glow-bg h4 em,
.ci360-navy-glow-bg .display em,
.ci360-glow-bg h1 span,
.ci360-glow-bg h2 span,
.ci360-glow-bg h3 span,
.ci360-glow-bg h4 span,
.ci360-glow-bg .display span,
.ci360-glow-bg h1 em,
.ci360-glow-bg h2 em,
.ci360-glow-bg h3 em,
.ci360-glow-bg h4 em,
.ci360-glow-bg .display em,
.dark-section h1 span,
.dark-section h2 span,
.dark-section h3 span,
.dark-section h4 span,
.dark-section .display span,
.dark-section h1 em,
.dark-section h2 em,
.dark-section h3 em,
.dark-section h4 em,
.dark-section .display em,
.ci360-heading-accent,
span.ci360-heading-accent {
  color: #a5f3fc !important;
  font-style: normal;
}

/* Custom Service Visual Images (Main Background + Foreground Card Image) */
.strategy-paper-has-img,
.brand-board-has-img {
  overflow: hidden !important;
  padding: 0 !important;
}
.strategy-paper-has-img img,
.brand-board-has-img img,
.metric-card-has-img img,
.film-card-img img,
.crm-card-overlay img,
.campaign-card-img img,
.service-card-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}

/* ================================================================
   TIMELINE SECTION TYPOGRAPHY & EDITABLE COLOR / WEIGHT
   ================================================================ */
#ci360-timeline-section .ci360-tl-heading h2 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(44px, 5.5vw, 76px) !important;
  font-weight: var(--ci-tl-font-weight, 500);
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  color: var(--ci-tl-heading-color, #ffffff);
  margin-bottom: 0 !important;
}

#ci360-timeline-section .ci360-tl-heading h2 em,
#ci360-timeline-section .ci360-tl-heading h2 span {
  font-style: normal !important;
  font-weight: inherit;
  background: linear-gradient(135deg, var(--ci-tl-accent-color, #22d3ee) 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ci-tl-accent-color, #22d3ee);
}

#ci360-timeline-section .ci360-tl-year-big {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(44px, 5vw, 76px) !important;
  font-weight: var(--ci-tl-font-weight, 600) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  background: linear-gradient(135deg, var(--ci-tl-accent-color, #22d3ee) 0%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--ci-tl-accent-color, #22d3ee) !important;
  margin-bottom: 10px !important;
}

#ci360-timeline-section .ci360-tl-card-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(26px, 3.2vw, 44px) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
  color: var(--ci-tl-card-title-color, #ffffff) !important;
  margin: 0 !important;
}

#ci360-timeline-section .ci360-tl-card-desc {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #cbd5e1 !important;
}

/* Fix Service Visual Card Container Dimensions */
.service-detail-art {
  position: relative !important;
  width: 100% !important;
  min-height: 380px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
}

.service-visual {
  position: relative !important;
  width: 100% !important;
  min-height: 380px !important;
  height: 100% !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.service-detail-art .service-visual {
  min-height: 420px !important;
  aspect-ratio: 4 / 3 !important;
}

/* Fix Website & Digital Experiences device visual mockups */
.service-visual .device-browser {
  position: absolute !important;
  left: 6% !important;
  top: 14% !important;
  width: 82% !important;
  height: 66% !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
  transform: rotate(-6deg) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}

.service-visual .device-browser .browser-bar {
  height: 24px !important;
  min-height: 24px !important;
  background: #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 12px !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

.service-visual .device-browser .browser-bar i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important;
  display: inline-block !important;
}

.service-visual .device-browser img,
.service-visual .device-browser .service-photo,
.service-visual .device-browser .service-card-photo-img {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: calc(100% - 24px) !important;
  flex: 1 1 auto !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  filter: saturate(0.9) contrast(1.02) !important;
}

.service-visual .device-phone {
  position: absolute !important;
  right: 6% !important;
  bottom: 8% !important;
  height: 64% !important;
  width: 28% !important;
  background: #0f172a !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 4px solid #1e293b !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
  z-index: 2 !important;
}

.service-visual .device-phone img,
.service-visual .device-phone .service-photo,
.service-visual .device-phone .service-card-photo-img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  filter: saturate(0.9) contrast(1.02) !important;
}

/* Selected Work Homepage Section - Mobile Responsiveness Fixes */
@media (max-width: 767px) {
  .work-section {
    padding-block: 40px !important;
    overflow-x: hidden !important;
  }

  .work-section .wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
    overflow-x: hidden !important;
  }

  .work-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .showcase {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .showcase-media {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.15 / 1 !important;
    max-height: 300px !important;
    min-height: 200px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .showcase-media .poster-scene {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .showcase-copy {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 10px 14px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .showcase-copy .small-label {
    font-size: 11px !important;
    margin-bottom: 12px !important;
    display: block !important;
  }

  .showcase-copy h3 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 10px 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .showcase-headline {
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.35 !important;
    margin-top: 10px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .showcase-copy > p:not(.showcase-headline) {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .showcase-copy .text-link {
    font-size: 13px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .work-end {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .showcase {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .showcase-media {
    max-height: 260px !important;
    aspect-ratio: 1.1 / 1 !important;
    border-radius: 14px !important;
  }

  .showcase-copy {
    padding: 16px 6px 10px !important;
  }

  .showcase-copy h3 {
    font-size: clamp(24px, 7.5vw, 32px) !important;
  }

  .showcase-headline {
    font-size: 15px !important;
  }

  .showcase-copy > p:not(.showcase-headline) {
    font-size: 13px !important;
  }
}

/* Blog / Posts Grid - 4 Columns Layout & Enhanced Media Styling */
@media (min-width: 900px) {
  .articles-grid,
  .insights-grid,
  .ci360-insights-grid,
  .blog-section .articles-grid,
  .blog-section .insights-grid,
  [class*="articles-grid"],
  [class*="insights-grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px 16px !important;
  }
}

@media (min-width: 601px) and (max-width: 899px) {
  .articles-grid,
  .insights-grid,
  .ci360-insights-grid,
  .blog-section .articles-grid,
  .blog-section .insights-grid,
  [class*="articles-grid"],
  [class*="insights-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
}

@media (max-width: 600px) {
  .articles-grid,
  .insights-grid,
  .ci360-insights-grid,
  .blog-section .articles-grid,
  .blog-section .insights-grid,
  [class*="articles-grid"],
  [class*="insights-grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}
  .articles-grid,
  .insights-grid,
  .blog-section .articles-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Article Card Enhancements */
.article-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(7, 17, 61, 0.05) !important;
  border: 1px solid rgba(40, 70, 170, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.article-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 45px rgba(7, 17, 61, 0.12) !important;
}

.article-cover {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
}

.article-cover img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  z-index: 1 !important;
  transition: transform 0.5s ease !important;
}

.article-card:hover .article-cover img {
  transform: scale(1.05) !important;
}

.article-cover-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(0deg, rgba(6, 15, 38, 0.4) 0%, rgba(6, 15, 38, 0) 60%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.article-card.has-featured-image .cover-index {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  background: rgba(6, 15, 38, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.article-card .article-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 16px 8px 16px !important;
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.article-card h3 {
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  padding: 0 16px 18px 16px !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.article-card h3 a {
  color: #060f26 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.2s ease !important;
}

.article-card h3 a:hover {
  color: #2563eb !important;
}

/* Modern Single Post Content & Full-Width Layout */
.article-reading.no-toc {
  grid-template-columns: 1fr !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}

.article-reading.no-toc .article-body {
  grid-column: 1 / -1 !important;
  max-width: 100% !important;
}

.article-wp-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #1e293b;
}

.article-wp-content p {
  margin-bottom: 1.5em;
}

.article-wp-content h2,
.article-wp-content h3,
.article-wp-content h4 {
  color: #0f172a;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.article-wp-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5em 0;
}

.article-wp-content blockquote {
  border-left: 4px solid #2563eb;
  padding-left: 1.25rem;
  margin: 1.5em 0;
  font-style: italic;
  color: #475569;
}

/* ==========================================================================
   Modern Single Blog Post Styling
   ========================================================================== */
.ci360-modern-blog-single {
  padding-top: 40px;
  padding-bottom: 80px;
}

.ci360-blog-header {
  max-width: 900px;
  margin: 0 auto 40px auto;
}

.ci360-blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 24px;
}

.ci360-blog-breadcrumb a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.ci360-blog-breadcrumb a:hover {
  text-decoration: underline;
}

.ci360-blog-breadcrumb .current {
  color: #0f172a;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.ci360-blog-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.ci360-cat-badge {
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ci360-read-badge,
.ci360-date-badge {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
}

.ci360-blog-main-heading {
  font-size: 42px;
  line-height: 1.25;
  font-weight: 800;
  color: #060f26;
  letter-spacing: -0.03em;
  margin: 0 0 24px 0;
}

@media (max-width: 768px) {
  .ci360-blog-main-heading {
    font-size: 28px;
  }
}

.ci360-blog-hero-media {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  border-radius: 20px;
  margin-top: 28px;
  box-shadow: 0 20px 50px rgba(6, 15, 38, 0.12);
}

.ci360-blog-hero-media img,
.ci360-modern-hero-img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}

.ci360-blog-container {
  max-width: 840px;
  margin: 0 auto;
}

.ci360-blog-content {
  font-size: 18px;
  line-height: 1.8;
  color: #1e293b;
}

.ci360-blog-content p {
  margin-bottom: 1.6em;
}

.ci360-blog-content h2,
.ci360-blog-content h3,
.ci360-blog-content h4 {
  color: #0f172a;
  font-weight: 700;
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  line-height: 1.3;
}

.ci360-blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 2em 0;
}

/* Social Share Bar */
.ci360-blog-share-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  margin-top: 50px;
}

.ci360-share-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ci360-share-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ci360-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.ci360-share-btn:hover {
  background: #2563eb;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

/* Next / Previous Navigation */
.ci360-blog-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 640px) {
  .ci360-blog-nav {
    grid-template-columns: 1fr;
  }
}

.ci360-nav-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ci360-nav-card.disabled {
  visibility: hidden;
}

.ci360-nav-card:hover {
  background: #ffffff;
  border-color: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(6, 15, 38, 0.08);
}

.ci360-nav-card .nav-label {
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ci360-nav-card .nav-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

/* Related Section & 4-in-a-Row Grid */
.ci360-blog-related-section {
  margin-top: 70px;
  padding-top: 50px;
  border-top: 1px solid #e2e8f0;
}

.ci360-blog-related-section .articles-grid,
.articles-grid.four-col {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin-top: 32px !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  .ci360-blog-related-section .articles-grid,
  .articles-grid.four-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .ci360-blog-related-section .articles-grid,
  .articles-grid.four-col {
    grid-template-columns: 1fr !important;
  }
}

/* Full-Screen Hero Banner 100vh */
.ci360-blog-hero-full,
.ci360-hero-full-screen,
.ci360-case-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: flex-end;
  padding: 100px 0 60px 0;
  margin-bottom: 50px;
  box-sizing: border-box;
}

.ci360-hero-full-overlay,
.ci360-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 15, 38, 0.45) 0%, rgba(6, 15, 38, 0.92) 100%);
  z-index: 1;
}

.ci360-hero-full-content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.ci360-blog-breadcrumb-light {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.ci360-blog-breadcrumb-light a {
  color: #70e3ff;
  text-decoration: none;
  font-weight: 500;
}

.ci360-blog-breadcrumb-light a:hover {
  text-decoration: underline;
}

.ci360-blog-breadcrumb-light .current {
  color: #ffffff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.ci360-blog-kicker-light {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ci360-blog-kicker-light span,
.ci360-cat-badge-light,
.ci360-case-hero .ci360-blog-kicker-light span,
.ci360-case-kicker span,
.case-study-kicker span {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: inline-block !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.ci360-meta-badge-light {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.ci360-hero-full-title {
  font-size: clamp(32px, 4.5vw, 54px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
  max-width: 980px !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  .ci360-blog-hero-full {
    height: 85vh;
    min-height: 85vh;
    padding: 60px 0 40px 0;
  }

  .ci360-hero-full-title {
    font-size: 26px !important;
  }
}

/* 2-Column Main Layout: Content + Sidebar */
.ci360-blog-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 50px;
  align-items: start;
}

@media (max-width: 992px) {
  .ci360-blog-layout {
    grid-template-columns: 1fr;
  }
}

.ci360-blog-main-content {
  min-width: 0;
}

/* Sidebar Widgets Styling */
.ci360-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 100px;
}

.ci360-sidebar-widget {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
}

.widget-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Categories List */
.ci360-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ci360-cat-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  color: #334155;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
}

.ci360-cat-list li.active a,
.ci360-cat-list li a:hover {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

.ci360-cat-list small {
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Featured Case Studies Widget */
.ci360-sidebar-projects {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ci360-sidebar-project-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 6px;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.ci360-sidebar-project-item:hover {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.sidebar-proj-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-proj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-proj-cat {
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ci360-sidebar-project-item h4 {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin: 2px 0 0 0;
  line-height: 1.3;
}

/* Core Services Widget */
.ci360-sidebar-services {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ci360-sidebar-services li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ci360-sidebar-services li a:hover {
  border-color: #2563eb;
  color: #2563eb;
  transform: translateX(3px);
}

.ci360-sidebar-services .icon {
  width: 14px;
  height: 14px;
}

/* Sidebar CTA Box */
.ci360-sidebar-cta-box {
  background: linear-gradient(135deg, #020734 0%, #0b36e2 100%);
  color: #ffffff;
  padding: 28px 24px;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(2, 7, 52, 0.25);
}

.cta-kicker {
  font-size: 10px;
  font-weight: 800;
  color: #70e3ff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ci360-sidebar-cta-box h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 8px 0 10px 0;
  line-height: 1.25;
}

.ci360-sidebar-cta-box p {
  font-size: 13px;
  color: #dbe8ff;
  line-height: 1.6;
  margin-bottom: 20px;
}

.ci360-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #6ee7ff;
  color: #020734;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ci360-cta-button:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

/* Clean Flat Container & Grid for Related Reads */
.ci360-related-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 40px 0 20px 0 !important;
  box-shadow: none !important;
  border-top: 1px solid #e2e8f0 !important;
}

.ci360-blog-related-section {
  margin-top: 50px;
  padding-top: 0;
  border-top: none;
}

.ci360-related-box .section-heading,
.ci360-related-box .ci360-related-header {
  margin-bottom: 24px;
}

.ci360-related-box .section-heading h2,
.ci360-related-box .ci360-related-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Individual Related Cards with Border & Padding */
.ci360-related-box .blog-card,
.ci360-related-box .article-card,
.ci360-related-box .ci360-related-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.ci360-related-box .blog-card:hover,
.ci360-related-box .article-card:hover,
.ci360-related-box .ci360-related-card:hover {
  transform: translateY(-4px) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 16px 36px rgba(59, 130, 246, 0.12) !important;
}

/* Image container inside card */
.ci360-related-box .blog-card-media,
.ci360-related-box .article-card .media,
.ci360-related-box .ci360-related-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  border-top-left-radius: 17px !important;
  border-top-right-radius: 17px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden !important;
  background: #0f172a !important;
  margin-bottom: 0 !important;
}

.ci360-related-box .blog-card-media img,
.ci360-related-box .ci360-related-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease !important;
}

.ci360-related-box .blog-card:hover .blog-card-media img,
.ci360-related-box .ci360-related-card:hover .ci360-related-media img {
  transform: scale(1.06) !important;
}

/* Body content inside card */
.ci360-related-box .blog-card-body,
.ci360-related-box .ci360-related-body {
  padding: 20px 22px 24px 22px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}

.ci360-related-box .blog-card-meta,
.ci360-related-box .ci360-related-cat {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.ci360-related-box .blog-card h3,
.ci360-related-box .ci360-related-body h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #0f172a !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

.ci360-related-box .blog-card:hover h3,
.ci360-related-box .ci360-related-card:hover h3 {
  color: #2563eb !important;
}

.ci360-related-box .blog-card-excerpt,
.ci360-related-box .ci360-related-body p {
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Card footer */
.ci360-related-box .blog-card-foot {
  border-top: 1px solid #f1f5f9 !important;
  padding: 14px 22px !important;
  background: #ffffff !important;
  margin-top: auto !important;
}

.ci360-related-box .blog-card-read,
.ci360-related-box .ci360-related-link {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}



/* 90% Container Width Side Alignment */
.ci360-full-blog-single .wrap,
.ci360-blog-hero-full .wrap,
.ci360-blog-layout.wrap,
.ci360-blog-related-section.wrap {
  width: 90% !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero Content Exact Left Alignment with Main Content Grid */
.ci360-hero-full-content {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 40px !important;
  align-items: flex-end !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ci360-blog-layout {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 40px !important;
  align-items: start !important;
}

.ci360-hero-left-align {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}

@media (max-width: 992px) {
  .ci360-hero-full-content,
  .ci360-blog-layout {
    grid-template-columns: 1fr !important;
  }
}

.ci360-blog-breadcrumb-light,
.ci360-blog-kicker-light {
  justify-content: flex-start !important;
  text-align: left !important;
}

.ci360-hero-full-title {
  text-align: left !important;
}

/* ---------- Impact & Brand Section ---------- */
.ci360-impact-brand-section {
  padding: 60px 0;
  width: 90% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.ci360-brand-channels-wrapper {
  text-align: center;
  margin-bottom: 40px;
}

.ci360-brand-channels-title {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.ci360-brand-channels-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ci360-brand-ch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #0f172a;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ci360-brand-ch-icon:hover {
  background-color: #2563eb;
  color: #ffffff;
  transform: translateY(-2px);
}

.ci360-brand-ch-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Dark Navy Container Box */
.ci360-impact-box {
  background: #0d1527;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.ci360-impact-header {
  background: #060c1a;
  padding: 24px 30px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ci360-impact-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.ci360-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 36px;
}

@media (max-width: 992px) {
  .ci360-impact-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 30px 24px;
  }
}

@media (max-width: 640px) {
  .ci360-impact-grid {
    grid-template-columns: 1fr;
    padding: 24px 16px;
  }
}

.ci360-impact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 36px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  transition: all 0.3s ease;
}

.ci360-impact-card:hover {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.ci360-impact-card-content p {
  color: #e2e8f0;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}

/* ---------- Challenge & Approach Section ---------- */
.ci360-challenge-approach-section {
  padding: 50px 0;
  width: 90% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.ci360-ca-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

@media (max-width: 992px) {
  .ci360-ca-grid {
    grid-template-columns: 1fr;
  }
}

.ci360-ca-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 36px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ci360-ca-card-header {
  margin-bottom: 16px;
}

.ci360-ca-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38bdf8;
  display: block;
  margin-bottom: 8px;
}

.ci360-ca-card-header h3 {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}

.ci360-ca-card-body p {
  font-size: 16px;
  line-height: 1.7;
  color: #94a3b8;
  margin: 0;
}

.ci360-ca-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

@media (max-width: 640px) {
  .ci360-ca-stats-row {
    grid-template-columns: 1fr;
  }
}

.ci360-ca-stat-card {
  background: #090e1a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.2s ease;
}

.ci360-ca-stat-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
}

.ci360-ca-stat-number {
  font-size: 36px;
  font-weight: 800;
  color: #38bdf8;
  display: block;
  line-height: 1.1;
  margin-bottom: 6px;
}

.ci360-ca-stat-label {
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  display: block;
}

/* ---------- Case Study Layout & Navigation ---------- */
.ci360-case-article {
  font-size: 18px;
  line-height: 1.8;
  color: #334155;
}

.ci360-case-story-block {
  margin-bottom: 36px;
}

.ci360-case-story-block h2,
.ci360-case-story-block h3 {
  font-size: 28px;
  font-weight: 500 !important;
  margin-bottom: 16px;
  line-height: 1.3;
}

.ci360-case-hero {
  height: 100vh !important;
  min-height: 100vh !important;
  background-color: #0f172a !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

.ci360-case-body {
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: #334155 !important;
  margin-bottom: 40px !important;
}

.ci360-case-body p {
  margin-bottom: 24px !important;
}

.ci360-case-body h2,
.ci360-case-body h3,
.ci360-case-article h2,
.ci360-case-article h3 {
  font-weight: 500 !important;
  margin-top: 36px;
  margin-bottom: 16px;
}

/* Ensure Elementor heading widgets in case study pages use medium font-weight (500) */
.ci360-case-body .elementor-widget-heading .elementor-heading-title,
.ci360-case-study-page .elementor-widget-heading .elementor-heading-title,
.ci360-case-study-page h2.elementor-heading-title,
.ci360-case-study-page h3.elementor-heading-title {
  font-weight: 500 !important;
}

/* End-of-content Related Case Studies Section */
.ci360-case-end-related,
.ci360-case-top-related {
  margin-top: 50px !important;
  margin-bottom: 40px !important;
  padding-top: 40px !important;
  border-top: 1px solid #e2e8f0 !important;
}

.ci360-case-end-related .ci360-related-box,
.ci360-case-top-related .ci360-related-box {
  border-top: none !important;
  padding-top: 0 !important;
}

.ci360-case-main-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.ci360-case-full-width {
  width: 100% !important;
  max-width: 100% !important;
}

/* Professional Case Study Navigation Buttons */
.ci360-case-nav-pro {
  display: flex !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-top: 60px !important;
  padding-top: 40px !important;
  border-top: 1px solid #e2e8f0 !important;
}

@media (max-width: 640px) {
  .ci360-case-nav-pro {
    flex-direction: column !important;
  }
}

.ci360-case-nav-pro .ci360-case-nav-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 24px 28px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.ci360-case-nav-pro .ci360-case-nav-btn:hover {
  background: #0f172a !important;
  border-color: #0f172a !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15) !important;
}

.ci360-case-nav-pro .nav-arrow {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #3b82f6 !important;
  transition: transform 0.2s ease !important;
}

.ci360-case-nav-pro .ci360-case-nav-btn.prev:hover .nav-arrow {
  transform: translateX(-4px) !important;
  color: #38bdf8 !important;
}

.ci360-case-nav-pro .ci360-case-nav-btn.next:hover .nav-arrow {
  transform: translateX(4px) !important;
  color: #38bdf8 !important;
}

.ci360-case-nav-pro .nav-content small {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
  display: block !important;
  margin-bottom: 4px !important;
  transition: color 0.2s ease !important;
}

.ci360-case-nav-pro .nav-content strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: block !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease !important;
}

.ci360-case-nav-pro .ci360-case-nav-btn:hover small {
  color: #38bdf8 !important;
}

.ci360-case-nav-pro .ci360-case-nav-btn:hover strong {
  color: #ffffff !important;
}

.ci360-case-nav-pro .ci360-case-nav-btn.disabled {
  visibility: hidden !important;
  pointer-events: none !important;
}

  padding: 20px 24px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.25 ease;
}

.ci360-case-nav-btn:hover {
  background: #0f172a;
  border-color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}

.ci360-case-nav-btn small {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.ci360-case-nav-btn strong {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.ci360-case-nav-btn:hover small {
  color: #38bdf8;
}

.ci360-case-nav-btn:hover strong {
  color: #ffffff;
}

/* Share Icons Bar */
.ci360-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
  padding: 20px 28px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

@media (max-width: 640px) {
  .ci360-share-bar {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

.ci360-share-label {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.ci360-share-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ci360-share-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ci360-share-icon:hover {
  transform: translateY(-3px);
  color: #ffffff;
}

.ci360-share-icon.fb:hover { background-color: #1877f2; }
.ci360-share-icon.tw:hover { background-color: #000000; }
.ci360-share-icon.li:hover { background-color: #0a66c2; }
.ci360-share-icon.wa:hover { background-color: #25d366; }
.ci360-share-icon.copy:hover { background-color: #2563eb; }

/* Case Sidebar Meta Box */
.ci360-case-meta-box {
  background: #f8fafc !important;
}

.ci360-case-meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ci360-case-meta-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
}

.ci360-case-meta-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ci360-case-meta-list strong {
  color: #64748b;
  font-weight: 600;
}

.ci360-case-meta-list span {
  color: #0f172a;
  font-weight: 700;
  text-align: right;
}

/* ==========================================================================
   SINGLE SERVICE PAGE HIGH FIDELITY DESIGN STYLES
   ========================================================================== */
.ci360-single-service-page {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0f172a;
  background-color: #ffffff;
  overflow-x: hidden;
}

.ci360-title-gradient {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.ci360-sub-kicker {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #2563eb !important;
  display: block !important;
  margin-bottom: 12px !important;
}

.ci360-section-title {
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 768px) {
  .ci360-section-title {
    font-size: 28px !important;
  }
}

/* 1. Hero Section */
.ci360-service-hero {
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.35) 0%, rgba(6, 15, 38, 1) 65%);
  padding: 120px 0 90px 0;
  color: #ffffff;
  overflow: hidden;
}

.ci360-service-hero-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.4;
  pointer-events: none;
}

.ci360-service-hero-wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 992px) {
  .ci360-service-hero-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.ci360-service-breadcrumb {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ci360-service-breadcrumb a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ci360-service-breadcrumb a:hover {
  color: #38bdf8;
}

.ci360-service-breadcrumb .sep {
  color: #64748b;
  font-size: 11px;
}

.ci360-service-breadcrumb .current {
  color: #38bdf8;
  font-weight: 500;
}

.ci360-service-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #38bdf8;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ci360-service-hero-title {
  font-size: 54px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 768px) {
  .ci360-service-hero-title {
    font-size: 36px !important;
  }
}

.ci360-service-hero-lead {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #cbd5e1 !important;
  margin: 0 0 36px 0 !important;
  max-width: 620px !important;
}

.ci360-service-hero-btns {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ci360-btn-pill-primary {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  color: #ffffff !important;
  padding: 14px 30px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4) !important;
  transition: all 0.3s ease !important;
}

.ci360-btn-pill-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5) !important;
}

.ci360-btn-pill-outline {
  background: rgba(15, 23, 42, 0.6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 14px 30px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.ci360-btn-pill-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

/* Hero Right 3D Visual Stage */
.ci360-service-visual-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.ci360-hero-main-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0f172a;
}

/* When stats/badges are removed: remove background box, borders, and extra elements */
.ci360-service-visual-stage.no-badges,
.ci360-hero-main-card.no-badges {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.ci360-hero-main-card.no-badges .ci360-glass-badge,
.ci360-hero-main-card.no-badges .ci360-platform-pills {
  display: none !important;
}

.ci360-hero-main-card.no-badges img,
.ci360-hero-main-card.no-badges video,
.ci360-hero-main-card.no-badges .ci360-hero-img-main,
.ci360-hero-main-card.no-badges .hero-carousel-stage {
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4) !important;
  background: transparent !important;
  border: none !important;
}

.ci360-hero-img-main {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.ci360-glass-badge {
  position: absolute;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 18px;
  border-radius: 14px;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.ci360-glass-badge .label {
  font-size: 11px;
  color: #94a3b8;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ci360-glass-badge .value {
  font-size: 20px;
  font-weight: 700;
  color: #38bdf8;
  display: block;
}

.ci360-glass-badge .trend {
  font-size: 11px;
  font-weight: 600;
  color: #4ade80;
  display: inline-block;
  margin-top: 2px;
}

.badge-followers { top: 20px; left: 20px; }
.badge-engagement { top: 120px; left: -10px; }
.badge-reach { bottom: 70px; left: 20px; }

.ci360-platform-pills {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  background: rgba(15, 23, 42, 0.8);
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.platform-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3b82f6;
  display: inline-block;
}

/* 2. Overview Section */
.ci360-service-overview {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  padding: 90px 0;
  align-items: start;
}

@media (max-width: 992px) {
  .ci360-service-overview {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 0;
  }
}

.ci360-overview-copy {
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 36px;
}

.ci360-overview-features {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.ci360-feat-item {
  flex: 1;
  min-width: 160px;
  background: #f8fafc;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.ci360-feat-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15) !important;
  transition: all 0.3s ease !important;
}

.ci360-feat-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #2563eb !important;
  transition: transform 0.3s ease !important;
}

.ci360-feat-item:hover .ci360-feat-icon {
  background: #2563eb !important;
  color: #ffffff !important;
}

.ci360-feat-item:hover .ci360-feat-icon svg {
  stroke: #ffffff !important;
  transform: scale(1.1) !important;
}

.ci360-feat-text h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.ci360-feat-text p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Highlights Dark Card */
.ci360-highlights-card {
  background: #060f26;
  color: #ffffff;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(6, 15, 38, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ci360-highlights-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 24px 0;
}

.ci360-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ci360-highlights-list li {
  font-size: 15px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ci360-highlights-list li i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.ci360-btn-pill-card {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  width: 100% !important;
  padding: 16px 24px !important;
  border-radius: 9999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3) !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.ci360-btn-pill-card .icon,
.ci360-btn-pill-card svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: transform 0.3s ease !important;
}

.ci360-btn-pill-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.45) !important;
}

.ci360-btn-pill-card:hover .icon,
.ci360-btn-pill-card:hover svg {
  transform: translate(3px, -3px) !important;
}

.ci360-card-subtext {
  font-size: 12px;
  color: #94a3b8;
  display: block;
  text-align: center;
  margin-top: 12px;
}

/* 3. What's Included Section */
.ci360-service-included {
  padding: 80px 0;
  background: #f8fafc;
  border-radius: 32px;
  margin-bottom: 80px;
}

.ci360-section-header {
  max-width: 680px;
  margin: 0 0 40px 0 !important;
  text-align: left !important;
}

.ci360-section-sub {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

.ci360-included-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0 30px;
}

@media (max-width: 992px) {
  .ci360-included-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }
}

@media (max-width: 640px) {
  .ci360-included-grid {
    grid-template-columns: 1fr;
  }
}

.ci360-inc-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ci360-inc-card:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}

.ci360-inc-thumb {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #0f172a;
}

.ci360-inc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ci360-inc-card:hover .ci360-inc-thumb img {
  transform: scale(1.06);
}

.ci360-inc-icon {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 18px;
}

.ci360-inc-body {
  padding: 24px;
  flex: 1;
}

.ci360-inc-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.ci360-inc-body p {
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
}

/* 4. Our Approach Section */
.ci360-service-approach {
  padding: 70px 0 90px 0;
}

.ci360-approach-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .ci360-approach-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.ci360-approach-intro {
  font-size: 16px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

.ci360-approach-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 992px) {
  .ci360-approach-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ci360-approach-timeline {
    grid-template-columns: 1fr;
  }
}

.ci360-step-item {
  background: #f8fafc;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.step-head,
.step-num,
.step-icon,
.step-arrow {
  display: none !important;
}

.ci360-step-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.ci360-step-item p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* 5. Dark CTA Banner */
.ci360-service-cta-banner {
  margin-bottom: 90px;
}

.ci360-cta-banner-inner {
  background: radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.4) 0%, rgba(6, 15, 38, 1) 70%);
  color: #ffffff;
  padding: 60px 70px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 24px 60px rgba(6, 15, 38, 0.2);
}

@media (max-width: 992px) {
  .ci360-cta-banner-inner {
    flex-direction: column;
    padding: 40px 30px;
    text-align: center;
  }
}

.ci360-cta-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #38bdf8;
  display: block;
  margin-bottom: 12px;
}

.ci360-cta-text h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
}

.ci360-cta-text p {
  font-size: 16px;
  color: #cbd5e1;
  margin: 0;
  max-width: 580px;
}

.ci360-btn-cta-blue {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.4) !important;
  white-space: nowrap !important;
  transition: all 0.3s ease !important;
}

.ci360-btn-cta-blue:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.55) !important;
}

.ci360-cta-sub {
  font-size: 12px;
  color: #94a3b8;
  display: block;
  margin-top: 10px;
  text-align: center;
}

/* 6. Main Content Area */
.ci360-service-main-content {
  margin-bottom: 80px;
}

.ci360-service-body {
  font-size: 17px;
  line-height: 1.8;
  color: #334155;
}

/* 7. Related Services Section */
.ci360-service-related {
  padding-bottom: 100px;
}

.ci360-services-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .ci360-services-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ci360-services-grid-4 {
    grid-template-columns: 1fr;
  }
}

.ci360-service-card-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.ci360-service-card-item:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}

.ci360-service-card-thumb {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #0f172a;
}

.ci360-service-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ci360-service-card-item:hover .ci360-service-card-thumb img {
  transform: scale(1.06);
}

.ci360-service-card-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ci360-service-card-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.ci360-service-card-content p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ci360-service-card-link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ci360-service-card-link:hover {
  color: #0284c7;
}

/* Category & Archive Page Header */
.ci360-archive-hero {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 60px 0 40px 0 !important;
  margin-bottom: 0 !important;
}

/* Related Card Category Pill Badge inside Media */
.ci360-related-media .ci360-related-cat {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  z-index: 2 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Archive Pagination Bar */
.ci360-pagination-wrap .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.ci360-pagination-wrap a.page-numbers,
.ci360-pagination-wrap span.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.ci360-pagination-wrap span.page-numbers.current,
.ci360-pagination-wrap a.page-numbers:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}