/*
 ═══════════════════════════════════════════════════════════════
  COMPULINK TECHNOLOGIES — ZOHO SITES CUSTOM CSS
  Settings → Custom CSS → paste this entire file → Save
 ═══════════════════════════════════════════════════════════════
*/


/* ─────────────────────────────────────────────────────────────
   PART 1 — NAVIGATION / HEADER BAR
   Blends Zoho's sticky nav seamlessly into the hero gradient.
   Colour = top-left corner of the hero (#e6f2f9 + blue tint).
   ─────────────────────────────────────────────────────────────
   ▸ To find your theme's nav class:
     Right-click nav in browser → Inspect → copy the <header>
     or top-level nav class and add it to the selector list below
   ───────────────────────────────────────────────────────────── */

.site-header,
.site-header-container,
.zs-header-container,
.zs-header,
.zs-nav,
.zs-navbar,
header.site-header,
#site-header,
.header-wrapper,
.top-navigation,
.nav-bar-wrapper {
  /* Solid fallback */
  background-color: #dce9f4 !important;

  /* Gradient — mirrors top of hero section */
  background:
    radial-gradient(
      ellipse 120% 200% at 0% 0%,
      rgba(0, 112, 160, 0.13) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 80% 100% at 100% 0%,
      rgba(35, 75, 160, 0.08) 0%,
      transparent 55%
    ),
    linear-gradient(
      155deg,
      #e6f2f9 0%,
      #edf5fc 50%,
      #e8f2f9 100%
    ) !important;

  /* Glassmorphism — same as hero trust strip */
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;

  /* Soft separator */
  border-bottom: 1px solid rgba(0, 112, 160, 0.10) !important;
  box-shadow: none !important;
}

/* Nav link colours — readable on light bg */
.site-header a,
.site-header .nav-link,
.zs-header a,
.zs-navbar a,
.top-navigation a {
  color: #0D1B3E !important;
}
.site-header a:hover,
.zs-navbar a:hover,
.top-navigation a:hover {
  color: #0070A0 !important;
}
.site-header a.active,
.zs-navbar a.active,
.site-header .current-menu-item a {
  color: #0070A0 !important;
  font-weight: 700 !important;
}

/*
   ─ AGGRESSIVE OVERRIDE ─────────────────────────────────────
   Uncomment if Zoho's inline styles are overriding the above:

[data-section-type="header"],
[class*="header"],
[id*="header"],
[class*="navbar"],
[class*="nav-bar"] {
  background: linear-gradient(155deg, #e6f2f9 0%, #edf5fc 50%, #e8f2f9 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0,112,160,0.1) !important;
}
   ───────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────
   PART 2 — SECTION BACKGROUNDS
   Add these class names to any Zoho section via:
   Section → Style panel → Custom Class field

   CLASSES AVAILABLE:
     .hero-section-bg        Full hero gradient (strong)
     .hero-section-bg-light  Lighter version (alternating rows)
     .hero-dot-grid          Dot pattern overlay (stack with above)
     .section-white          Pure white
     .section-site-bg        Site body colour #e8f1f8
     .section-border-top     Thin blue separator line
   ───────────────────────────────────────────────────────────── */

/* Full hero gradient — identical to the hero section */
.hero-section-bg {
  background-color: #dce9f3 !important;
  background:
    radial-gradient(
      ellipse 80% 70% at 0% 0%,
      rgba(0, 112, 160, 0.16) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 60% at 100% 100%,
      rgba(35, 75, 160, 0.12) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 55% 50% at 55% 45%,
      rgba(64, 176, 208, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 40% 40% at 90% 10%,
      rgba(0, 173, 239, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(
      155deg,
      #e6f2f9 0%,
      #edf5fc 35%,
      #e4eff8 65%,
      #f0f7fc 100%
    ) !important;
}

/* Lighter variant — good for alternating sections */
.hero-section-bg-light {
  background-color: #eef5fb !important;
  background:
    radial-gradient(
      ellipse 60% 50% at 0% 0%,
      rgba(0, 112, 160, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 50% at 100% 100%,
      rgba(64, 176, 208, 0.06) 0%,
      transparent 55%
    ),
    linear-gradient(
      155deg,
      #eef5fb 0%,
      #f2f7fd 40%,
      #edf4f9 70%,
      #f5f9fd 100%
    ) !important;
}

/* Dot grid overlay — stack on top of a gradient class */
.hero-dot-grid {
  background-image: radial-gradient(
    circle,
    rgba(0, 112, 160, 0.055) 1px,
    transparent 1px
  ) !important;
  background-size: 36px 36px !important;
}

/* Utility classes */
.section-white      { background-color: #ffffff !important; }
.section-site-bg    { background-color: #e8f1f8 !important; }
.section-border-top { border-top: 1px solid rgba(0, 112, 160, 0.08) !important; }


/*
 ═══════════════════════════════════════════════════════════════
  COLOUR REFERENCE — use in Zoho's colour picker
  ─────────────────────────────────────────────────────────────
  Nav / hero top-left:   #e6f2f9
  Hero solid fallback:   #dce9f3
  Body background:       #e8f1f8
  Brand blue:            #0070A0
  Brand cyan:            #40B0D0
  Brand navy:            #234BA0
  CTA blue:              #00ADEF
  Dark text:             #0D1B3E
 ═══════════════════════════════════════════════════════════════
*/

/*
 ═══════════════════════════════════════════════════════════════
  COMPULINK TECHNOLOGIES — ZOHO SITES CUSTOM CSS
  Settings → Custom CSS → paste this entire file → Save
 ═══════════════════════════════════════════════════════════════
*/


/* ─────────────────────────────────────────────────────────────
   PART 1 — NAVIGATION / HEADER BAR
   Blends Zoho's sticky nav seamlessly into the hero gradient.
   Colour = top-left corner of the hero (#e6f2f9 + blue tint).
   ─────────────────────────────────────────────────────────────
   ▸ To find your theme's nav class:
     Right-click nav in browser → Inspect → copy the <header>
     or top-level nav class and add it to the selector list below
   ───────────────────────────────────────────────────────────── */

.site-header,
.site-header-container,
.zs-header-container,
.zs-header,
.zs-nav,
.zs-navbar,
header.site-header,
#site-header,
.header-wrapper,
.top-navigation,
.nav-bar-wrapper {
  /* Solid fallback */
  background-color: #dce9f4 !important;

  /* Gradient — mirrors top of hero section */
  background:
    radial-gradient(
      ellipse 120% 200% at 0% 0%,
      rgba(0, 112, 160, 0.13) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 80% 100% at 100% 0%,
      rgba(35, 75, 160, 0.08) 0%,
      transparent 55%
    ),
    linear-gradient(
      155deg,
      #e6f2f9 0%,
      #edf5fc 50%,
      #e8f2f9 100%
    ) !important;

  /* Glassmorphism — same as hero trust strip */
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;

  /* Soft separator */
  border-bottom: 1px solid rgba(0, 112, 160, 0.10) !important;
  box-shadow: none !important;
}

/* Nav link colours — readable on light bg */
.site-header a,
.site-header .nav-link,
.zs-header a,
.zs-navbar a,
.top-navigation a {
  color: #0D1B3E !important;
}
.site-header a:hover,
.zs-navbar a:hover,
.top-navigation a:hover {
  color: #0070A0 !important;
}
.site-header a.active,
.zs-navbar a.active,
.site-header .current-menu-item a {
  color: #0070A0 !important;
  font-weight: 700 !important;
}

/*
   ─ AGGRESSIVE OVERRIDE ─────────────────────────────────────
   Uncomment if Zoho's inline styles are overriding the above:

[data-section-type="header"],
[class*="header"],
[id*="header"],
[class*="navbar"],
[class*="nav-bar"] {
  background: linear-gradient(155deg, #e6f2f9 0%, #edf5fc 50%, #e8f2f9 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0,112,160,0.1) !important;
}
   ───────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────
   PART 2 — SECTION BACKGROUNDS
   Add these class names to any Zoho section via:
   Section → Style panel → Custom Class field

   CLASSES AVAILABLE:
     .hero-section-bg        Full hero gradient (strong)
     .hero-section-bg-light  Lighter version (alternating rows)
     .hero-dot-grid          Dot pattern overlay (stack with above)
     .section-white          Pure white
     .section-site-bg        Site body colour #e8f1f8
     .section-border-top     Thin blue separator line
   ───────────────────────────────────────────────────────────── */

/* Full hero gradient — identical to the hero section */
.hero-section-bg {
  background-color: #dce9f3 !important;
  background:
    radial-gradient(
      ellipse 80% 70% at 0% 0%,
      rgba(0, 112, 160, 0.16) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 60% at 100% 100%,
      rgba(35, 75, 160, 0.12) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 55% 50% at 55% 45%,
      rgba(64, 176, 208, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 40% 40% at 90% 10%,
      rgba(0, 173, 239, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(
      155deg,
      #e6f2f9 0%,
      #edf5fc 35%,
      #e4eff8 65%,
      #f0f7fc 100%
    ) !important;
}

/* Lighter variant — good for alternating sections */
.hero-section-bg-light {
  background-color: #eef5fb !important;
  background:
    radial-gradient(
      ellipse 60% 50% at 0% 0%,
      rgba(0, 112, 160, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 50% at 100% 100%,
      rgba(64, 176, 208, 0.06) 0%,
      transparent 55%
    ),
    linear-gradient(
      155deg,
      #eef5fb 0%,
      #f2f7fd 40%,
      #edf4f9 70%,
      #f5f9fd 100%
    ) !important;
}

/* Dot grid overlay — stack on top of a gradient class */
.hero-dot-grid {
  background-image: radial-gradient(
    circle,
    rgba(0, 112, 160, 0.055) 1px,
    transparent 1px
  ) !important;
  background-size: 36px 36px !important;
}

/* Utility classes */
.section-white      { background-color: #ffffff !important; }
.section-site-bg    { background-color: #e8f1f8 !important; }
.section-border-top { border-top: 1px solid rgba(0, 112, 160, 0.08) !important; }

/* ── Zero-padding for full-bleed HTML blocks ──
   Add class  section-no-pad  to any Zoho section
   whose Custom HTML block needs to bleed edge-to-edge.
   Also works for CTA band, hero, timeline, etc.     */
.section-no-pad {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  padding-left:   0 !important;
  padding-right:  0 !important;
}
/* Belt-and-suspenders: also zero Zoho's inner wrappers */
.section-no-pad > .zs-section-content,
.section-no-pad > div > .zs-section-content,
.section-no-pad > .zsb-section-container {
  padding:    0 !important;
  max-width: 100% !important;
  width:     100% !important;
}
.section-site-bg    { background-color: #e8f1f8 !important; }
.section-border-top { border-top: 1px solid rgba(0, 112, 160, 0.08) !important; }


/*
 ═══════════════════════════════════════════════════════════════
  COLOUR REFERENCE — use in Zoho's colour picker
  ─────────────────────────────────────────────────────────────
  Nav / hero top-left:   #e6f2f9
  Hero solid fallback:   #dce9f3
  Body background:       #e8f1f8
  Brand blue:            #0070A0
  Brand cyan:            #40B0D0
  Brand navy:            #234BA0
  CTA blue:              #00ADEF
  Dark text:             #0D1B3E
 ═══════════════════════════════════════════════════════════════
*/

<div class="cl-sb">
  <div class="cl-ss"><div class="cl-sn blue">8</div><div class="cl-sl">MBE Certifications</div><div class="cl-sx">City · State · Federal</div></div>
  <div class="cl-ss"><div class="cl-sn">25</div><div class="cl-sl">OGS Manufacturers</div><div class="cl-sx">Direct-award statewide</div></div>
  <div class="cl-ss"><div class="cl-sn">OMNIA</div><div class="cl-sl">National Contract</div><div class="cl-sx">#152613 · Publicly awarded</div></div>
  <div class="cl-ss"><div class="cl-sn">Prime</div><div class="cl-sl">Citywide Vendor</div><div class="cl-sx">Prime contractor</div></div>
</div>