/*

 * Tri-Force Mega Menu — Stylesheet v1.0.0

 * Blue top bar · white sticky mega-nav · black announcement bar.

 * All selectors prefixed .tf- to avoid theme conflicts.

 */



*, *::before, *::after { box-sizing: border-box; }



:root {

  /* ── Brand (from the Tri-Force logo) ── */

  --tf-blue:        #1226e6;   /* primary royal blue */

  --tf-blue-deep:   #0a18c4;

  --tf-blue-bright: #2045ff;   /* top-bar bright royal blue */

  --tf-violet:      #7c3aed;   /* "EXCELLENCE" */

  --tf-orange:      #f1841a;   /* "INTEGRITY"  */

  --tf-pink:        #ec3fb4;   /* "CUSTOMIZATION" */

  --tf-ink:         #0b0b14;   /* bottom bar / headings */



  /* CTA gradient — deprecated in v1.3.1 (all gradient usages replaced with solid --tf-blue) */

  --tf-grad:        linear-gradient(325deg, rgba(1,126,228,1) 0%, rgba(184,0,255,1) 100%);

  --tf-grad-hover:  linear-gradient(310deg, rgba(184,0,255,1) 0%, rgba(1,126,228,1) 100%);



  /* ── Icon-chip palette ── */

  --c-blue:#2563eb;    --c-blue-bg:#eef3ff;

  --c-indigo:#4f46e5;  --c-indigo-bg:#ecebff;

  --c-violet:#7c3aed;  --c-violet-bg:#f3effe;

  --c-pink:#db2f9e;    --c-pink-bg:#fdeaf6;

  --c-orange:#e07712;  --c-orange-bg:#fff3e3;

  --c-emerald:#059669; --c-emerald-bg:#e7f7f0;

  --c-teal:#0d9488;    --c-teal-bg:#e2f6f4;

  --c-sky:#0284c7;     --c-sky-bg:#e6f4fd;

  --c-amber:#d97706;   --c-amber-bg:#fdf2df;

  --c-rose:#e11d48;    --c-rose-bg:#fdeaef;



  --tf-text:    #14151f;

  --tf-text-2:  #4a4f5e;

  --tf-muted:   #8a90a0;

  --tf-white:   #ffffff;

  --tf-soft:    #f7f8fb;

  --tf-border:  rgba(15,18,40,0.09);

  --tf-divider: rgba(15,18,40,0.13);

  --tf-shadow:  0 26px 70px rgba(10,16,60,0.16), 0 8px 26px rgba(10,16,60,0.08);



  --tf-r:   16px;

  --tf-r-sm:10px;

  --tf-font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tf-ease:cubic-bezier(.4,0,.2,1);

}



/* ── Colour chips ── */

.tf-chip {

  display:inline-flex; align-items:center; justify-content:center;

  width:34px; height:34px; border-radius:10px; flex-shrink:0;

  font-size:14px; transition:box-shadow .15s, transform .15s;

}

.tf-chip-lg { width:42px; height:42px; border-radius:12px; font-size:16px; }

.tf-chip-sm { width:27px; height:27px; border-radius:7px;  font-size:11px; }

.tf-color-blue    { background:var(--c-blue-bg);    color:var(--c-blue);    }

.tf-color-indigo  { background:var(--c-indigo-bg);  color:var(--c-indigo);  }

.tf-color-violet  { background:var(--c-violet-bg);  color:var(--c-violet);  }

.tf-color-pink    { background:var(--c-pink-bg);    color:var(--c-pink);    }

.tf-color-orange  { background:var(--c-orange-bg);  color:var(--c-orange);  }

.tf-color-emerald { background:var(--c-emerald-bg); color:var(--c-emerald); }

.tf-color-teal    { background:var(--c-teal-bg);    color:var(--c-teal);    }

.tf-color-sky     { background:var(--c-sky-bg);     color:var(--c-sky);     }

.tf-color-amber   { background:var(--c-amber-bg);   color:var(--c-amber);   }

.tf-color-rose    { background:var(--c-rose-bg);    color:var(--c-rose);    }



/* ═══════════════════════════════════════════════════════════════

   TOP UTILITY BAR (blue)

   ═══════════════════════════════════════════════════════════════ */

.tf-utility-bar {

  background: linear-gradient(100deg, var(--tf-blue-deep) 0%, var(--tf-blue) 45%, var(--tf-blue-bright) 100%);

  color:#fff; font-family:var(--tf-font); position:relative; z-index:102;

}

.tf-utility-inner {

  max-width:1440px; margin:0 auto; padding:0 24px; min-height:42px;

  display:flex; align-items:center; justify-content:space-between; gap:16px;

}

.tf-utility-left { display:flex; align-items:center; gap:14px; }

.tf-phone {

  display:inline-flex; align-items:center; gap:8px;

  color:#fff; text-decoration:none; font-size:13.5px; font-weight:700;

  letter-spacing:.01em; transition:opacity .2s;

}

.tf-phone i { font-size:12px; opacity:.9; }

.tf-phone:hover { opacity:.85; color:#fff; }

.tf-util-sep { width:1px; height:18px; background:rgba(255,255,255,.28); }

.tf-socials { display:flex; align-items:center; gap:4px; }

.tf-social {

  display:inline-flex; align-items:center; justify-content:center;

  width:28px; height:28px; border-radius:50%;

  color:rgba(255,255,255,.85); text-decoration:none; font-size:12.5px;

  transition:background .2s, color .2s, transform .2s;

}

.tf-social:hover { background:rgba(255,255,255,.18); color:#fff; transform:translateY(-1px); }



.tf-utility-right { display:flex; align-items:center; gap:6px; }

.tf-util-link {

  display:inline-flex; align-items:center; gap:7px;

  padding:5px 11px; border-radius:6px;

  color:rgba(255,255,255,.92); text-decoration:none;

  font-size:13px; font-weight:600; white-space:nowrap;

  transition:background .18s, color .18s;

}

.tf-util-link i { font-size:11px; opacity:.85; }

.tf-util-link:hover { background:rgba(255,255,255,.16); color:#fff; }



/* ═══════════════════════════════════════════════════════════════

   MAIN HEADER (white, sticky)

   ═══════════════════════════════════════════════════════════════ */

#tf-site-header {

  position:sticky; top:0; z-index:100;

  background:#fff; border-bottom:1px solid var(--tf-border);

  font-family:var(--tf-font); -webkit-font-smoothing:antialiased;

  transition:box-shadow .3s, border-color .3s;

}

#tf-site-header.tf-scrolled { box-shadow:0 6px 26px rgba(10,16,60,.10); border-color:transparent; }

.tf-header-inner {

  max-width:1440px; margin:0 auto; padding:0 24px;

  height:74px; display:flex; align-items:center; gap:18px;

}



/* Logo */

.tf-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }

.tf-logo-img { height:48px; width:auto; display:block; }



/* Desktop nav */

.tf-desktop-nav { display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }

.tf-nav-item { position:relative; height:74px; display:flex; align-items:center; }
/* invisible hover-bridge: lets the cursor travel from a trigger down into its
   mega panel without crossing a dead gap (only present while open) */
.tf-nav-item[data-menu].tf-open::before {
  content:''; position:absolute; left:-24px; right:-24px; top:100%; height:20px; z-index:1;
}

.tf-nav-trigger {

  display:inline-flex; align-items:center; gap:6px;

  padding:9px 13px; border-radius:9px;

  font-family:var(--tf-font); font-size:15px; font-weight:600;

  color:var(--tf-text-2); background:none; border:none; cursor:pointer;

  text-decoration:none; white-space:nowrap; line-height:1;

  transition:color .18s, background .18s;

}

.tf-nav-trigger:hover { color:var(--tf-blue); background:rgba(18,38,230,.07); }

.tf-chev { font-size:9px; color:var(--tf-muted); transition:transform .2s, color .18s; }

.tf-nav-item.tf-open .tf-nav-trigger { color:var(--tf-blue); background:rgba(18,38,230,.09); }

.tf-nav-item.tf-open .tf-chev { transform:rotate(180deg); color:var(--tf-blue); }

/* animated underline */

.tf-nav-trigger::after {

  content:''; position:absolute; left:13px; right:13px; bottom:16px; height:2px;

  background:var(--tf-blue); border-radius:2px;

  transform:scaleX(0); transform-origin:center; opacity:0;

  transition:transform .25s var(--tf-ease), opacity .2s;

}

.tf-nav-trigger:hover::after,

.tf-nav-item.tf-open .tf-nav-trigger::after { transform:scaleX(1); opacity:1; }



/* CTAs */

.tf-header-ctas { display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:auto; }



/* Solid blue button (v1.3.1 — gradient removed; hover #000) */

.tf-btn-gradient {

  display:inline-flex; align-items:center; justify-content:center;

  color:#fff; background:var(--tf-blue);

  border-radius:6px; border:0; box-shadow:none; text-decoration:none;

  white-space:nowrap; font-size:14px; font-weight:700; line-height:1;

  font-family:var(--tf-font);

  padding:13px 22px; cursor:pointer; transform-origin:center center;

  transition:transform .4s, opacity .4s, background .3s, box-shadow .3s;

}

.tf-btn-gradient:hover {

  color:#fff; background:#000;

  transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.25);

}

.tf-btn-gradient:active { transform:translateY(0); }

.tf-btn-sm { padding:10px 16px; font-size:13px; }



/* Hamburger */

.tf-hamburger {

  display:none; background:none; border:none; cursor:pointer;

  width:42px; height:42px; flex-direction:column; align-items:center; justify-content:center; gap:5px;

  border-radius:9px; transition:background .15s;

}

.tf-hamburger:hover { background:rgba(18,38,230,.08); }

.tf-hamburger span { display:block; width:23px; height:2px; background:var(--tf-ink); border-radius:2px; transition:transform .3s var(--tf-ease), opacity .3s; }

.tf-hamburger.tf-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }

.tf-hamburger.tf-open span:nth-child(2) { opacity:0; }

.tf-hamburger.tf-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }



/* ═══════════════════════════════════════════════════════════════

   MEGA PANELS — shared base

   ═══════════════════════════════════════════════════════════════ */

.tf-mega {

  position:fixed; left:0; right:0; margin-top:2px;

  background:#fff; box-shadow:var(--tf-shadow);

  display:none; z-index:99; font-family:var(--tf-font);

  -webkit-font-smoothing:antialiased; overflow:hidden;

  max-height:calc(100vh - 140px);

}

.tf-mega.tf-visible { display:block; animation:tfPop .19s var(--tf-ease) forwards; }

@keyframes tfPop { from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }



/* full-width services bar gets a top brand hairline */

.tf-mega-services { border-top:3px solid var(--tf-blue); }



/* Card megas — centred, rounded card */

.tf-mega-card {

  left:50%; right:auto; transform:translateX(-50%);

  border-radius:18px; border:1px solid var(--tf-divider); margin-top:8px;

  width:720px; max-width:96vw;

}

.tf-mega-speaker { width:560px; }

.tf-mega-card.tf-visible { animation:tfPopC .19s var(--tf-ease) forwards; }

@keyframes tfPopC { from{opacity:0; transform:translateX(-50%) translateY(-10px);} to{opacity:1; transform:translateX(-50%) translateY(0);} }



/* ── IT SERVICES — grouped columns + promo rail ── */

.tf-services-inner {

  display:flex; gap:0; max-width:1440px; margin:0 auto; width:100%;

  max-height:calc(100vh - 140px);

}

.tf-services-grid {

  flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px 22px;

  padding:30px 30px 32px; overflow-y:auto;

}

.tf-svc-col { display:flex; flex-direction:column; }

.tf-svc-col-head {

  display:flex; align-items:center; gap:10px; padding:0 0 12px 4px; margin-bottom:6px;

  border-bottom:1px solid var(--tf-border);

}

.tf-svc-col-title { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tf-ink); }

.tf-svc-links { display:flex; flex-direction:column; gap:2px; padding-top:8px; }

.tf-svc-link {

  display:flex; align-items:flex-start; gap:12px;

  padding:11px 12px; border-radius:12px;

  border:1.5px solid transparent; text-decoration:none;

  transition:background .15s, border-color .15s, transform .15s, box-shadow .15s;

}

.tf-svc-link:hover { background:var(--tf-soft); transform:translateY(-1px); box-shadow:0 6px 18px rgba(10,16,60,.07); }

.tf-svc-link:hover .tf-chip { box-shadow:0 4px 12px rgba(0,0,0,.13); }

.tf-svc-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }

.tf-svc-name { font-size:13.5px; font-weight:700; color:var(--tf-text); line-height:1.25; }

.tf-svc-desc { font-size:11.5px; color:var(--tf-muted); line-height:1.4; }

.tf-svc-arrow { font-size:10px; color:transparent; margin-top:11px; transition:color .15s, transform .15s; }

.tf-svc-link:hover .tf-svc-arrow { color:var(--tf-blue); transform:translateX(2px); }

.tf-edge-blue:hover   { border-color:rgba(37,99,235,.28); }

.tf-edge-indigo:hover { border-color:rgba(79,70,229,.28); }

.tf-edge-violet:hover { border-color:rgba(124,58,237,.28); }

.tf-edge-pink:hover   { border-color:rgba(219,47,158,.28); }

.tf-edge-orange:hover { border-color:rgba(224,119,18,.28); }

.tf-edge-emerald:hover{ border-color:rgba(5,150,105,.28); }

.tf-edge-teal:hover   { border-color:rgba(13,148,136,.28); }

.tf-edge-sky:hover    { border-color:rgba(2,132,199,.28); }



/* Promo rail */

.tf-svc-promo {

  width:300px; flex-shrink:0; padding:34px 30px;

  background:radial-gradient(120% 100% at 0% 0%, #1a1f5c 0%, #0b0e36 55%, #07081f 100%);

  color:#fff; display:flex; flex-direction:column; gap:14px;

  position:relative; overflow:hidden;

}

.tf-svc-promo::before {

  content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px;

  background:var(--tf-blue); filter:blur(46px); opacity:.5; border-radius:50%;

}

.tf-promo-badge {

  position:relative; align-self:flex-start;

  font-size:11px; font-weight:800; letter-spacing:.05em;

  padding:5px 11px; border-radius:30px; color:#fff;

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

}

.tf-promo-title { position:relative; font-size:20px; font-weight:800; line-height:1.2; }

.tf-promo-sub { position:relative; font-size:13px; line-height:1.55; color:rgba(255,255,255,.74); }

.tf-promo-btn {

  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;

  margin-top:auto; padding:12px 18px; border-radius:8px;

  background:var(--tf-blue); color:#fff; text-decoration:none;

  font-size:13.5px; font-weight:700; transition:transform .3s, box-shadow .3s, background .3s;

}

.tf-promo-btn:hover { color:#fff; background:#000; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.3); }

.tf-promo-link {

  position:relative; display:inline-flex; align-items:center; gap:8px;

  color:rgba(255,255,255,.82); text-decoration:none; font-size:12.5px; font-weight:600;

  transition:color .2s;

}

.tf-promo-link:hover { color:#fff; }



/* ── CARD GRID megas (Company / Resources / Speaker) ── */

.tf-card-wrap { padding:26px 28px 28px; overflow-y:auto; max-height:calc(100vh - 150px); }

.tf-card-head {

  display:flex; align-items:center; gap:9px; margin-bottom:16px;

  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--tf-blue);

}

.tf-card-head i { font-size:13px; }

.tf-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.tf-card {

  display:flex; align-items:flex-start; gap:13px;

  padding:14px 15px; border-radius:13px;

  border:1.5px solid var(--tf-border); background:#fff; text-decoration:none;

  transition:border-color .18s, background .18s, transform .18s, box-shadow .18s;

}

.tf-card:hover {

  border-color:rgba(18,38,230,.32); background:#fbfbff;

  transform:translateY(-2px); box-shadow:0 8px 22px rgba(10,16,60,.10);

}

.tf-card:hover .tf-chip { box-shadow:0 4px 12px rgba(0,0,0,.14); }

.tf-card-body { flex:1; min-width:0; }

.tf-card-title { display:block; font-size:14px; font-weight:700; color:var(--tf-text); margin-bottom:3px; }

.tf-card-desc  { display:block; font-size:12px; color:var(--tf-muted); line-height:1.45; }

.tf-card-arrow { font-size:11px; color:var(--tf-muted); margin-top:4px; flex-shrink:0; transition:transform .15s, color .15s; }

.tf-card:hover .tf-card-arrow { color:var(--tf-blue); transform:translateX(3px); }



/* Speaker compact */

.tf-speaker-grid { display:grid; grid-template-columns:1fr; gap:12px; }

.tf-speaker-cta {

  border-radius:13px; padding:18px;

  background:radial-gradient(130% 120% at 100% 0%, #f3effe 0%, #f7f8fb 60%);

  border:1px solid var(--tf-border);

}

.tf-speaker-cta-title { font-size:14.5px; font-weight:800; color:var(--tf-ink); }

.tf-speaker-cta-sub { font-size:12.5px; color:var(--tf-text-2); line-height:1.5; margin:5px 0 12px; }



/* scrollbars */

.tf-services-grid::-webkit-scrollbar,

.tf-card-wrap::-webkit-scrollbar { width:6px; }

.tf-services-grid::-webkit-scrollbar-thumb,

.tf-card-wrap::-webkit-scrollbar-thumb { background:rgba(15,18,40,.16); border-radius:10px; }



/* ═══════════════════════════════════════════════════════════════

   MOBILE MENU

   ═══════════════════════════════════════════════════════════════ */

.tf-mobile-menu {

  display:none; position:fixed; left:0; right:0; bottom:0;

  top:116px; background:#fff; z-index:98; overflow-y:auto;

  padding:10px 22px 48px; font-family:var(--tf-font);

}

.tf-mobile-menu.tf-open { display:block; }

.tf-m-direct, .tf-m-trigger {

  display:flex; align-items:center; justify-content:space-between;

  width:100%; padding:15px 4px; font-size:15.5px; font-weight:700;

  color:var(--tf-ink); border:none; border-bottom:1px solid var(--tf-border);

  background:none; text-align:left; cursor:pointer; font-family:var(--tf-font); text-decoration:none;

}

.tf-m-direct:hover, .tf-m-trigger:hover { color:var(--tf-blue); }

.tf-chev-m { font-size:11px; color:var(--tf-muted); transition:transform .2s, color .2s; }

.tf-m-trigger.tf-open .tf-chev-m { transform:rotate(180deg); color:var(--tf-blue); }

.tf-m-sub { display:none; padding:6px 0 14px 2px; }

.tf-m-sub.tf-open { display:block; }

.tf-m-sub ul { list-style:none; margin:0; padding:0; }

.tf-m-sub ul li a {

  display:flex; align-items:center; gap:11px; padding:9px 6px;

  font-size:14px; font-weight:500; color:var(--tf-text-2);

  text-decoration:none; border-radius:9px; transition:color .15s, background .15s;

}

.tf-m-sub ul li a:hover { color:var(--tf-blue); background:rgba(18,38,230,.06); }

.tf-m-cat { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--tf-blue); padding:13px 6px 4px; }

.tf-m-cat:first-child { padding-top:6px; }

.tf-m-viewall {

  display:inline-flex; align-items:center; gap:7px; margin:10px 0 2px 6px;

  font-size:13px; font-weight:700; color:var(--tf-blue); text-decoration:none;

}

.tf-m-utility {

  margin-top:18px; padding-top:16px; border-top:1px solid var(--tf-border);

  display:flex; flex-direction:column; gap:4px;

}

.tf-m-utility a {

  display:flex; align-items:center; gap:10px; padding:10px 6px;

  font-size:13.5px; font-weight:600; color:var(--tf-text-2); text-decoration:none; border-radius:8px;

}

.tf-m-utility a:hover { color:var(--tf-blue); background:rgba(18,38,230,.06); }

.tf-m-utility a i { width:16px; color:var(--tf-muted); }

.tf-m-ctas { margin-top:16px; }

.tf-m-ctas .tf-btn-gradient { width:100%; padding:15px; font-size:15px; }



/* ═══════════════════════════════════════════════════════════════

   BOTTOM ANNOUNCEMENT BAR (black)

   ═══════════════════════════════════════════════════════════════ */

.tf-bottom-bar {

  background:var(--tf-ink); color:rgba(255,255,255,.88);

  text-align:center; padding:12px 22px;

  font-family:var(--tf-font); font-size:14px; font-weight:600; letter-spacing:.01em;

  position:relative; z-index:97;

}

.tf-bottom-sep { color:rgba(255,255,255,.3); margin:0 8px; }

.tf-bottom-link { color:#7fa0ff; font-weight:700; text-decoration:none; transition:color .18s; }

.tf-bottom-link:hover { color:#aebfff; text-decoration:underline; }



/* ═══════════════════════════════════════════════════════════════

   RESPONSIVE

   ═══════════════════════════════════════════════════════════════ */

@media (max-width:1280px){

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

}

@media (max-width:1180px){

  .tf-desktop-nav { gap:0; }

  .tf-nav-trigger { font-size:14px; padding:9px 10px; }

}

@media (max-width:1024px){

  .tf-desktop-nav { display:none; }

  .tf-hamburger { display:flex; }

}

@media (max-width:920px){

  .tf-services-inner { flex-direction:column; }

  .tf-svc-promo { width:100%; }

}

@media (max-width:768px){

  .tf-header-inner { height:64px; padding:0 16px; }

  .tf-logo-img { height:40px; }

  .tf-utility-inner { padding:6px 16px; flex-wrap:wrap; gap:8px 14px; min-height:0; }

  .tf-utility-right { display:none; }

  .tf-mobile-menu { top:auto; }

  .tf-card-grid { grid-template-columns:1fr; }

  .tf-mega-card { width:auto; left:8px; right:8px; transform:none; }

  .tf-mega-card.tf-visible { animation:tfPop .19s var(--tf-ease) forwards; }

  .tf-header-ctas .tf-btn-gradient { display:none; }

  .tf-bottom-bar { font-size:12.5px; padding:10px 16px; }

}

@media (max-width:480px){

  .tf-utility-left { width:100%; justify-content:center; }

  .tf-logo-img { height:36px; }

}



/* Accessibility */

.tf-nav-trigger:focus-visible,

.tf-btn-gradient:focus-visible,

.tf-card:focus-visible,

.tf-svc-link:focus-visible,

.tf-util-link:focus-visible {

  outline:2px solid var(--tf-blue); outline-offset:2px;

}

@media (prefers-reduced-motion:reduce){

  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }

}



/* ── Card panel footer button (v1.3.1 — solid blue pill, hover #000) ── */
.tf-card-foot { display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; padding:13px 22px; border-radius:999px; border:0;
  font-size:14px; font-weight:700; color:#fff; background:var(--tf-blue); text-decoration:none;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease; }
.tf-card-foot:hover { background:#000; color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.22); }
.tf-card-foot i { font-size:12px; transition:transform .15s ease; }
.tf-card-foot:hover i { transform:translateX(3px); }