/*--------------------------------------------------------------
# Community Concepts — 2026 Redesign
# Built on top of main.css brand tokens:
#   --color-secondary : #16ACE2  (brand primary blue)
#   --color-primary   : #000000  (ink)
#   --color-default    : #2b180d
# This file ONLY adds new tokens derived from the brand blue —
# it never introduces an off-brand hue.
--------------------------------------------------------------*/

:root{
  --cc-blue: var(--color-secondary, #16ACE2);
  --cc-blue-dark: #0e84ac;
  --cc-blue-deep: #0a5f7d;
  --cc-blue-50: #eef9fd;
  --cc-blue-100: #dcf2fb;
  --cc-blue-200: #b3e6f6;
  --cc-ink: #0c1b26;
  --cc-ink-soft: #4a5b68;
  --cc-white: #ffffff;
  --cc-line: #e4edf2;
  --cc-radius: 18px;
  --cc-shadow: 0 20px 45px -20px rgba(10, 60, 80, 0.28);
  --cc-shadow-sm: 0 10px 25px -12px rgba(10, 60, 80, 0.22);
}

/*--------------------------------------------------------------
# Utility resets
--------------------------------------------------------------*/
.cc-section{ padding: 100px 0; overflow: hidden; }
@media (max-width: 768px){ .cc-section{ padding: 64px 0; } }

.cc-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-blue-dark);
  background: var(--cc-blue-50);
  border: 1px solid var(--cc-blue-200);
  padding: 8px 16px;
  border-radius: 999px;
}
.cc-eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cc-blue);
  flex: none;
}

.cc-heading{
  font-family: var(--font-primary);
  font-weight: 800;
  color: var(--cc-ink);
  letter-spacing: -0.01em;
  margin: 18px 0 0;
}
.cc-heading.xl{ font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.12; }
.cc-heading.lg{ font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.18; }

.cc-subtext{
  font-family: var(--font-default);
  color: var(--cc-ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: 16px;
}

.cc-header-block{ max-width: 720px; }
.cc-header-block.center{ margin: 0 auto; text-align: center; }

/* Buttons */
.cc-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: all .3s ease;
  white-space: nowrap;
}
.cc-btn-primary{
  background: var(--cc-blue);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(22,172,226,0.55);
}
.cc-btn-primary:hover{ background: var(--cc-blue-dark); color:#fff; transform: translateY(-2px); }
.cc-btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.cc-btn-ghost:hover{ background: rgba(255,255,255,0.14); color:#fff; border-color:#fff; }
.cc-btn-outline{
  background: transparent;
  border-color: var(--cc-blue);
  color: var(--cc-blue-dark);
}
.cc-btn-outline:hover{ background: var(--cc-blue); color:#fff; transform: translateY(-2px); }

/*--------------------------------------------------------------
# Header polish
--------------------------------------------------------------*/
#header.header{
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 2px 12px rgba(12,27,38,0.08);
}
/* Top-level desktop nav links: the template ships these as
   rgba(255,255,255,.6) for a transparent/dark header — since our
   header is light, they must be dark for any contrast at all. */
#header .navbar > ul > li > a{
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .02em;
  color: var(--cc-ink) !important;
}
#header .navbar > ul > li > a.active,
#header .navbar > ul > li > a:hover,
#header .navbar > ul > li:hover > a{ color: var(--cc-blue-dark) !important; }

/* Dropdown caret icons inherit the link color above automatically,
   but pin it explicitly so it never falls back to the template default. */
#header .navbar > ul > li > a i{ color: inherit; }

/* Mobile hamburger icon sits on the light header — must be dark.
   The "X" close icon sits over the dark slide-in overlay, so it
   stays white (template default) and is left untouched. */
#header .mobile-nav-toggle.mobile-nav-show{ color: var(--cc-ink); }

/* Sticky/scrolled state: template swaps in a dark navy background
   with white text — keep that pairing consistent (no dark-on-dark). */
#header.header.sticked{ background: rgba(12,27,38,0.95); }
#header.header.sticked .navbar > ul > li > a{ color: rgba(255,255,255,0.85) !important; }
#header.header.sticked .navbar > ul > li > a.active,
#header.header.sticked .navbar > ul > li > a:hover{ color: #fff !important; }
#header.header.sticked .mobile-nav-toggle.mobile-nav-show{ color: #fff; }

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.cc-hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 160px 0 100px;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(255,255,255,0.16), transparent 60%),
    linear-gradient(125deg, rgba(10,95,125,0.90) 0%, rgba(14,132,172,0.86) 42%, rgba(22,172,226,0.72) 100%),
    url("../img/hero_bg.png");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  overflow: hidden;
  color: #fff;
}
@media (min-width: 1365px){
  .cc-hero{ background-attachment: scroll, scroll, fixed; }
}
.cc-hero::before,
.cc-hero::after{
  content:"";
  position:absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.cc-hero::before{ width: 620px; height:620px; right: -180px; top: -220px; }
.cc-hero::after{ width: 360px; height:360px; left: -120px; bottom: -160px; background: rgba(255,255,255,0.06); }

.cc-hero-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 991px){
  .cc-hero-grid{ grid-template-columns: 1fr; }
  .cc-hero{ min-height: auto; padding: 130px 0 70px; text-align:center; }
}

.cc-hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  color:#fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cc-hero h1{
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  margin: 22px 0 0;
  letter-spacing: -0.015em;
}
.cc-hero h1 span{ color: #dff6ff; }
.cc-hero p.lead{
  font-size: 1.12rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.92);
  margin: 20px 0 32px;
  max-width: 560px;
}
@media (max-width: 991px){ .cc-hero p.lead{ margin-left:auto; margin-right:auto; } }

.cc-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width: 991px){ .cc-hero-actions{ justify-content:center; } }

.cc-hero-stats{
  display:flex; gap: 34px; margin-top: 46px; flex-wrap: wrap;
}
@media (max-width: 991px){ .cc-hero-stats{ justify-content:center; } }
.cc-hero-stats .stat b{
  display:block; font-family: var(--font-primary); font-size: 2rem; font-weight: 800;
}
.cc-hero-stats .stat span{ font-size: 13px; color: rgba(255,255,255,0.8); }

.cc-hero-card{
  position: relative;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 24px;
  padding: 34px;
  backdrop-filter: blur(6px);
}
.cc-hero-card .cc-hc-item{
  display:flex; gap:16px; align-items:flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.cc-hero-card .cc-hc-item:last-child{ border-bottom:none; }
.cc-hero-card .cc-hc-icon{
  flex:none; width:46px; height:46px; border-radius: 12px;
  background: rgba(255,255,255,0.16);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.25rem; color:#fff;
}
.cc-hero-card h5{ color:#fff; font-family: var(--font-primary); font-size:1rem; font-weight:700; margin:0 0 4px; }
.cc-hero-card p{ color: rgba(255,255,255,0.82); font-size: .92rem; margin:0; line-height:1.6; }

/*--------------------------------------------------------------
# Who we are / values tabs (restyle existing swiper section)
--------------------------------------------------------------*/
.cc-why{ background: var(--cc-white); }
.cc-why-visual{
  position: relative;
  border-radius: var(--cc-radius);
  min-height: 420px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--cc-shadow);
}
.cc-why-visual::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,26,38,0.55) 100%);
  border-radius: var(--cc-radius);
}
.cc-why .swiper-slide .item{
  background: var(--cc-blue-50);
  border: 1px solid var(--cc-blue-200);
  border-radius: var(--cc-radius);
  padding: 40px;
  min-height: 320px;
}
.cc-why .swiper-slide .item h3{ color: var(--cc-blue-deep); font-family: var(--font-primary); font-weight:800; }
.cc-why .swiper-slide .item h4{ color: var(--cc-ink); }
.cc-why .swiper-slide .item p{ color: var(--cc-ink-soft); line-height:1.8; }

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.cc-services{ background: var(--cc-blue-50); }
.cc-service-card{
  background:#fff;
  border-radius: var(--cc-radius);
  padding: 36px 30px;
  height:100%;
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cc-service-card:hover{ transform: translateY(-8px); box-shadow: var(--cc-shadow); }
.cc-service-icon{
  width: 62px; height:62px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cc-blue), var(--cc-blue-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size: 1.6rem;
  margin-bottom: 22px;
  box-shadow: 0 12px 24px -10px rgba(22,172,226,0.55);
}
.cc-service-card h4{ font-family: var(--font-primary); font-weight:700; font-size:1.2rem; color: var(--cc-ink); }
.cc-service-card p{ color: var(--cc-ink-soft); line-height:1.75; margin: 12px 0 18px; }
.cc-service-card a{
  font-family: var(--font-primary); font-weight:700; font-size:.9rem; color: var(--cc-blue-dark);
  display:inline-flex; align-items:center; gap:6px;
}
.cc-service-card a i{ transition: transform .25s ease; }
.cc-service-card:hover a i{ transform: translateX(4px); }

/*--------------------------------------------------------------
# About / Why choose us
--------------------------------------------------------------*/
.cc-about-list{ list-style:none; padding:0; margin: 24px 0 0; display:grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
@media (max-width: 576px){ .cc-about-list{ grid-template-columns: 1fr; } }
.cc-about-list li{
  display:flex; align-items:flex-start; gap:12px;
  font-size: .98rem; color: var(--cc-ink-soft);
}
.cc-about-list li i{
  color: var(--cc-blue); font-size: 1.15rem; margin-top: 2px; flex:none;
}

.cc-feature-row{
  display:flex; align-items:flex-start; gap:16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cc-line);
}
.cc-feature-row:last-child{ border-bottom:none; }
.cc-feature-num{
  flex:none; width:44px; height:44px; border-radius:12px;
  background: var(--cc-blue-50); color: var(--cc-blue-dark);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-primary); font-weight:800;
}
.cc-feature-row h5{ font-family: var(--font-primary); font-weight:700; margin:0; color: var(--cc-ink); font-size:1.02rem;}
.cc-feature-row p{ margin:4px 0 0; color: var(--cc-ink-soft); font-size:.92rem; }

/*--------------------------------------------------------------
# CTA banner
--------------------------------------------------------------*/
.cc-cta{
  position:relative;
  border-radius: 28px;
  padding: 56px 40px;
  text-align:center;
  color:#fff;
  background: linear-gradient(120deg, var(--cc-blue-deep), var(--cc-blue));
  box-shadow: var(--cc-shadow);
  overflow:hidden;
}
.cc-cta::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background: rgba(255,255,255,0.08); top:-220px; right:-120px;
}
.cc-cta h3{ font-family: var(--font-primary); font-weight:800; font-size: clamp(1.5rem,3vw,2rem); position:relative; }
.cc-cta p{ color: rgba(255,255,255,0.9); max-width:640px; margin: 12px auto 26px; position:relative; }

/*--------------------------------------------------------------
# Leadership preview (home)
--------------------------------------------------------------*/
.cc-team-preview-card{
  background:#fff; border-radius: var(--cc-radius);
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-sm);
  padding: 30px 22px;
  text-align:center;
  height:100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.cc-team-preview-card:hover{ transform: translateY(-6px); box-shadow: var(--cc-shadow); }
.cc-avatar{
  width: 84px; height:84px; border-radius:50%;
  margin: 0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-primary); font-weight:800; font-size:1.4rem;
  color:#fff;
  background: linear-gradient(135deg, var(--cc-blue), var(--cc-blue-deep));
  box-shadow: 0 10px 22px -8px rgba(22,172,226,0.6);
}
.cc-team-preview-card h5{ font-family: var(--font-primary); font-weight:700; margin: 4px 0 2px; color: var(--cc-ink); }
.cc-team-preview-card span{ color: var(--cc-blue-dark); font-size:.85rem; font-weight:600; }

/*--------------------------------------------------------------
# Partners strip
--------------------------------------------------------------*/
.cc-partners{ background:#fff; }
.cc-partners .customer-logos img{
  filter: grayscale(100%) opacity(0.65);
  transition: filter .3s ease, transform .3s ease;
}
.cc-partners .customer-logos .slide:hover img{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

/*--------------------------------------------------------------
# Org chart (Team page)
--------------------------------------------------------------*/
.cc-orgwrap{
  background: var(--cc-blue-50);
  border: 1px solid var(--cc-blue-200);
  border-radius: 28px;
  padding: 56px 24px 40px;
}
.cc-org{
  display:flex; flex-direction:column; align-items:center;
  gap: 0;
}
.cc-org-tier{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; position:relative; }
.cc-org-connector{
  width:2px; height: 34px; background: var(--cc-blue-200);
  margin: 0 auto;
}
.cc-org-node{
  background:#fff;
  border: 2px solid var(--cc-blue-200);
  border-radius: 16px;
  padding: 18px 26px;
  min-width: 230px;
  text-align:center;
  box-shadow: var(--cc-shadow-sm);
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cc-org-node:hover{ transform: translateY(-4px); border-color: var(--cc-blue); box-shadow: var(--cc-shadow); }
.cc-org-node.top{
  background: linear-gradient(135deg, var(--cc-blue), var(--cc-blue-deep));
  border-color: transparent;
  color:#fff;
  min-width: 260px;
}
.cc-org-node .cc-org-avatar{
  width:50px; height:50px; border-radius:50%;
  margin: 0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-primary); font-weight:800; font-size:1rem;
  background: var(--cc-blue-50); color: var(--cc-blue-dark);
}
.cc-org-node.top .cc-org-avatar{ background: rgba(255,255,255,0.22); color:#fff; }
.cc-org-node h4{ font-family: var(--font-primary); font-weight:700; font-size:1.02rem; margin:0; }
.cc-org-node.top h4{ color:#fff; }
.cc-org-node span{ display:block; font-size:.82rem; color: var(--cc-ink-soft); margin-top:4px; font-weight:600; letter-spacing:.02em; }
.cc-org-node.top span{ color: rgba(255,255,255,0.85); }

.cc-org-branch{ display:flex; flex-direction:column; align-items:center; }
.cc-org-hline{
  height:2px; background: var(--cc-blue-200); align-self:stretch;
}

/* simple responsive tree using flex + borders for connecting lines */
.cc-orgtree{ width:100%; display:flex; flex-direction:column; align-items:center; }
.cc-orgtree .row1{ display:flex; flex-direction:column; align-items:center; }
.cc-orgtree .stem{ width:2px; height:30px; background:var(--cc-blue-200); }
.cc-orgtree .row2{
  display:flex; justify-content:center; position:relative; margin-top:0;
}
.cc-orgtree .row2::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:2px; background:var(--cc-blue-200);
}
.cc-orgtree .branch{ display:flex; flex-direction:column; align-items:center; padding: 0 26px; position:relative; }
.cc-orgtree .branch .up{ width:2px; height:30px; background:var(--cc-blue-200); }
.cc-orgtree .row3{ display:flex; flex-direction:column; align-items:center; margin-top:0; }

@media (max-width: 767px){
  .cc-org-tier{ flex-direction:column; align-items:center; gap: 30px; }
  .cc-orgtree .row2{ flex-direction:column; gap:30px; }
  .cc-orgtree .row2::before{ display:none; }
  .cc-orgtree .branch{ padding:0; }
}

/*--------------------------------------------------------------
# Team grid (Team page — 4 members)
--------------------------------------------------------------*/
.cc-team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 991px){ .cc-team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){ .cc-team-grid{ grid-template-columns: 1fr; } }

.cc-team-card{
  background:#fff;
  border-radius: 20px;
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-sm);
  overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  text-align:center;
}
.cc-team-card:hover{ transform: translateY(-8px); box-shadow: var(--cc-shadow); }
.cc-team-card .cc-team-top{
  background: linear-gradient(135deg, var(--cc-blue), var(--cc-blue-deep));
  padding: 38px 20px 54px;
  position:relative;
}
.cc-team-card .cc-avatar-lg{
  width: 96px; height:96px; border-radius:50%;
  margin: 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-primary); font-weight:800; font-size:1.7rem;
  background:#fff; color: var(--cc-blue-dark);
  border: 4px solid rgba(255,255,255,0.5);
  position:relative;
  z-index:2;
}
.cc-team-card .cc-team-body{ padding: 44px 20px 28px; margin-top:-40px; }
.cc-team-card h4{ font-family: var(--font-primary); font-weight:700; font-size:1.1rem; color: var(--cc-ink); margin:0; }
.cc-team-card .cc-role{
  display:inline-block; margin-top:8px;
  color: var(--cc-blue-dark); background: var(--cc-blue-50);
  border: 1px solid var(--cc-blue-200);
  font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding: 5px 14px; border-radius:999px;
}
.cc-team-card .cc-team-loc{ margin-top:14px; font-size:.85rem; color: var(--cc-ink-soft); display:flex; align-items:center; justify-content:center; gap:6px; }


/*--------------------------------------------------------------
# Footer accent
--------------------------------------------------------------*/
.footer .footer-content{ background: #0f2431; }
.footer .footer-legal{ background: var(--cc-ink); }

/* Everything below overrides main.css text colors that were written
   for a LIGHT (#f7f9fc) footer. Now that the footer is dark navy,
   those colors (black, #29486a, #31547c) are unreadable — repoint
   them to light/brand-blue tones so the footer is clearly legible. */
.footer .footer-content .footer-info p{ color: rgba(255,255,255,0.82) !important; }
.footer .footer-content .footer-info .logo span{ color: var(--cc-blue) !important; }
.footer .footer-content h4{ color: #fff !important; }
.footer .footer-content .footer-links ul a{ color: rgba(255,255,255,0.78) !important; }
.footer .footer-content .footer-links ul a:hover{ color: var(--cc-blue) !important; }
.footer .footer-content .footer-links ul i{ color: var(--cc-blue) !important; }
.footer .footer-content .footer-contact p{ color: rgba(255,255,255,0.82) !important; }
.footer .footer-content .footer-contact p strong{ color: #fff; }
.footer .footer-content .social-links a{
  background-color: var(--cc-blue) !important;
  color: #fff !important;
}
.footer .footer-content .social-links a:hover{ background-color: var(--cc-blue-dark) !important; }
.footer .footer-legal .copyright,
.footer .footer-legal .credits{ color: rgba(255,255,255,0.75) !important; }
.footer .footer-legal .copyright strong,
.footer .footer-legal .copyright span{ color: var(--cc-blue) !important; }