/* Technology Clicks MSP - Professional Theme v2 */
/* Inspired by nfd.ca style: clean, full-width, mobile-first */

/* ─── VARIABLES ─────────────────────────────────────────── */
:root {
  --tc-black: #05070A;
  --tc-navy: #0B1220;
  --tc-navy-light: #111d30;
  --tc-blue: #00AEEF;
  --tc-cyan: #00D4FF;
  --tc-white: #FFFFFF;
  --tc-gray: #8B9BB4;
  --tc-text: #C8D8E8;
  --tc-border: rgba(0,174,239,0.15);
  --tc-glow: 0 2px 20px rgba(0,174,239,0.08);
  --tc-radius: 8px;
  --tc-max-width: 1180px;
  --tc-header-height: 72px;
}

/* ─── RESET / BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--tc-black) !important;
  color: var(--tc-text) !important;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

/* ─── HEADER ────────────────────────────────────────────── */
header.header,
.container-header {
  background: var(--tc-navy) !important;
  border-bottom: 1px solid var(--tc-border) !important;
  height: var(--tc-header-height);
  display: flex !important;
  align-items: center;
  padding: 0 2rem !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}

.container-header .grid-child { display: flex; align-items: center; }

.navbar-brand { flex-shrink: 0; }

.brand-logo {
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-logo span,
.site-name {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--tc-white) !important;
  text-decoration: none !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand-logo:hover span,
.site-name:hover { color: var(--tc-cyan) !important; }

.site-description, .tagline {
  font-size: 0.68rem !important;
  color: var(--tc-gray) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* ─── NAVIGATION ────────────────────────────────────────── */
.container-nav { margin-left: auto; }

.mod-menu, .mod-menu__list, .nav, #mod-menu1 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px;
}

.mod-menu__list li, .nav li, .nav-item {
  display: block !important;
  position: relative;
}

.mod-menu__list li a, .nav li a, .nav-item a {
  color: #B0C4D8 !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 13px !important;
  border-radius: 5px;
  text-decoration: none !important;
  transition: all 0.18s ease;
  white-space: nowrap;
  display: block;
}

.mod-menu__list li a:hover,
.nav li a:hover,
.nav-item:not(.active) a:hover {
  color: var(--tc-cyan) !important;
  background: rgba(0,212,255,0.08) !important;
}

.mod-menu__list li.active a,
.nav-item.active a,
.mod-menu__list li.current a {
  color: var(--tc-cyan) !important;
  background: rgba(0,212,255,0.1) !important;
  font-weight: 700 !important;
}

/* ─── MOBILE NAV TOGGLE ─────────────────────────────────── */
.navbar-toggle, .navbar-toggler {
  display: none;
  background: transparent;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--tc-white);
  margin-left: auto;
}

/* ─── PAGE LAYOUT ───────────────────────────────────────── */
.site-grid {
  background: var(--tc-black) !important;
  min-height: calc(100vh - var(--tc-header-height));
}

.container-component {
  max-width: var(--tc-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

main, #sp-main-body {
  background: var(--tc-black) !important;
  min-height: 70vh;
}

/* ─── ARTICLE / CONTENT ─────────────────────────────────── */
.com-content-article, .item-page, article {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 3rem 0 !important;
  margin-bottom: 0;
  box-shadow: none !important;
  max-width: var(--tc-max-width);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Page title style */
.page-header {
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none !important;
}

.page-header h1 {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--tc-white) !important;
  letter-spacing: -0.03em;
  margin: 0 0 0.25rem 0;
  line-height: 1.15;
}

/* ─── HERO IMAGE (full bleed inside content) ────────────── */
.item-page img, article img, .com-content-article img {
  display: block;
  width: calc(100% + 3rem);
  max-width: calc(100% + 3rem);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 0;
  margin-bottom: 2.5rem;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--tc-white) !important;
  font-weight: 700 !important;
  line-height: 1.25;
}

h1 { font-size: 2.4rem !important; font-weight: 800 !important; letter-spacing: -0.03em; }
h2 { font-size: 1.6rem !important; color: var(--tc-white) !important; font-weight: 700 !important; border-bottom: none !important; padding-bottom: 0; margin-top: 2.5rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.2rem !important; color: var(--tc-blue) !important; font-weight: 600 !important; margin-top: 1.75rem; margin-bottom: 0.5rem; }
h4 { font-size: 1rem !important; color: #A0B4CC !important; }

p { color: var(--tc-text) !important; font-size: 1rem; line-height: 1.8; margin-bottom: 1.1rem; }

a {
  color: var(--tc-blue) !important;
  text-decoration: none !important;
  transition: color 0.18s;
}
a:hover { color: var(--tc-cyan) !important; }

ul, ol { padding-left: 1.4rem; margin-bottom: 1rem; }
ul li, ol li { color: var(--tc-text) !important; margin-bottom: 0.5rem; line-height: 1.7; font-size: 1rem; }
ul li::marker { color: var(--tc-blue) !important; }
ol li::marker { color: var(--tc-blue) !important; }

strong, b { color: var(--tc-white) !important; font-weight: 700; }

hr { border: none !important; border-top: 1px solid var(--tc-border) !important; margin: 2.5rem 0 !important; }

/* ─── SECTION DIVIDERS (h2 as section headers) ──────────── */
/* ─── H2 CYAN ACCENT LINE (single line above section headings) ─── */
/* Pattern: cyan bar pinned top-left, heading text centred — on ALL pages */
.item-page h2,
article h2 {
  position: relative;
  padding-top: 22px;
  text-align: center;
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  box-sizing: border-box;
}
.item-page h2::before,
article h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--tc-cyan);
  border-radius: 2px;
}

/* ─── FIX: Exclude cyan bar from h2s in left-column layouts ─── */
.tc-why-content h2::before,
.tc-why-grid h2::before,
.tc-about-content h2::before {
  display: none !important;
}


/* ─── TABLES ────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  display: block;
}

table thead tr {
  background: rgba(0,174,239,0.12) !important;
  border-bottom: 2px solid var(--tc-blue) !important;
}

table thead th {
  color: var(--tc-cyan) !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

table tbody tr {
  border-bottom: 1px solid var(--tc-border) !important;
  background: transparent !important;
  transition: background 0.15s;
}

table tbody tr:hover { background: rgba(0,174,239,0.04) !important; }

table tbody td {
  color: var(--tc-text) !important;
  padding: 12px 16px !important;
  vertical-align: middle;
}

table tbody td:first-child { font-weight: 600; color: var(--tc-white) !important; }

/* ─── BUTTONS (inline styled links used as buttons) ─────── */
a[style*="background"],
a[style*="background-color"],
.btn-primary {
  background: var(--tc-blue) !important;
  color: var(--tc-white) !important;
  padding: 13px 28px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 4px 16px rgba(0,174,239,0.25) !important;
  display: inline-block;
  letter-spacing: 0.02em;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: none;
  margin: 0.25rem;
}

a[style*="background"]:hover,
a[style*="background-color"]:hover,
.btn-primary:hover {
  background: var(--tc-cyan) !important;
  color: var(--tc-black) !important;
  box-shadow: 0 6px 24px rgba(0,212,255,0.35) !important;
  transform: translateY(-2px);
}

/* ─── FOOTER ────────────────────────────────────────────── */
footer, .footer, .site-footer {
  background: var(--tc-navy) !important;
  border-top: 1px solid var(--tc-border) !important;
  color: var(--tc-gray) !important;
  text-align: center;
  padding: 2rem !important;
  font-size: 0.83rem;
}

/* ─── BACK TO TOP ───────────────────────────────────────── */
#back-to-top {
  background: var(--tc-blue) !important;
  color: var(--tc-white) !important;
  border-radius: 6px !important;
  width: 40px !important;
  height: 40px !important;
}

/* ─── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--tc-black); }
::-webkit-scrollbar-thumb { background: #1a2a40; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tc-blue); }

/* ─── HOME PAGE: hide article title ────────────────────── */
.itemid-101 .page-header { display: none !important; }

/* ─── MOBILE: ≤ 768px ───────────────────────────────────── */
@media (max-width: 768px) {
  :root { --tc-header-height: 60px; }

  header.header, .container-header {
    padding: 0 1rem !important;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--tc-header-height);
  }

  .container-header .grid-child:first-child {
    flex: 1;
    justify-content: flex-start;
  }

  /* Hamburger button */
  .container-header .grid-child.container-nav {
    display: none;
    width: 100%;
    padding: 0.5rem 0 1rem;
    border-top: 1px solid var(--tc-border);
    margin-top: 0.5rem;
  }

  .container-header .grid-child.container-nav.nav-open {
    display: block !important;
  }

  .mod-menu, .mod-menu__list, .nav, #mod-menu1 {
    flex-direction: column !important;
    gap: 0;
    width: 100%;
  }

  .mod-menu__list li, .nav-item { width: 100%; }

  .mod-menu__list li a, .nav-item a {
    padding: 12px 8px !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid var(--tc-border);
    border-radius: 0 !important;
  }

  .brand-logo span, .site-name {
    font-size: 1.1rem !important;
  }

  /* Article content */
  .com-content-article, .item-page, article {
    padding: 1.5rem 0 !important;
  }

  .container-component { padding: 0 1rem; }

  h1, .page-header h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }

  p { font-size: 0.97rem; }

  .item-page img, article img, .com-content-article img {
    width: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    max-height: 260px;
  }

  table { font-size: 0.82rem; }
  table thead th { padding: 10px 10px !important; font-size: 0.7rem; }
  table tbody td { padding: 9px 10px !important; }

  a[style*="background"], a[style*="background-color"] {
    padding: 12px 20px !important;
    font-size: 0.85rem !important;
    display: block !important;
    text-align: center;
    margin: 0.5rem 0 !important;
    width: 100%;
  }
}

/* ─── MOBILE: ≤ 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  h1, .page-header h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem !important; }

  .item-page img, article img, .com-content-article img {
    max-height: 200px;
  }
}

/* ─── ADDITIONAL LAYOUT IMPROVEMENTS ───────────────────── */

/* Cassiopeia's own mobile breakpoint support */
/* Override Cassiopeia's template.css container limits */
.container-component,
.site-grid .container-component {
  width: 100% !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Better article container centering */
.com-content-article, .item-page {
  width: 100%;
}

/* Full-width images inside article (override inline styles) */
.item-page p img,
.item-page img[style*="width: 100%"],
article p img {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;
}

/* Page title - cleaner look */
.page-header h1 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Cassiopeia mobile nav - ensure the sticky header works on mobile */
.header.sticky-top {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
  z-index: 999;
}

/* Cassiopeia's built-in navbar toggler styling */
.navbar-toggler {
  background: transparent !important;
  border: 1px solid rgba(0,174,239,0.4) !important;
  color: var(--tc-white) !important;
  border-radius: 4px;
  padding: 6px 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2300AEEF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* ─── CONTACT PAGE FORM STYLING ─────────────────────────── */
.contact form input,
.contact form textarea,
form input[type="text"],
form input[type="email"],
form textarea {
  background: rgba(11,18,32,0.8) !important;
  border: 1px solid var(--tc-border) !important;
  color: var(--tc-white) !important;
  border-radius: 6px;
  padding: 10px 14px;
  width: 100%;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

form input:focus, form textarea:focus {
  border-color: var(--tc-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,174,239,0.12);
}

form input[type="submit"], form button[type="submit"], .btn {
  background: var(--tc-blue) !important;
  color: var(--tc-white) !important;
  border: none !important;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

form input[type="submit"]:hover, form button[type="submit"]:hover {
  background: var(--tc-cyan) !important;
  color: var(--tc-black) !important;
}

@media (max-width: 768px) {
  .container-component {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  h1, .page-header h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.3rem !important; margin-top: 2rem; }
  h3 { font-size: 1.1rem !important; }
  p { font-size: 0.96rem; }

  .com-content-article, .item-page {
    padding: 2rem 0 !important;
  }

  /* Simplify image full-width on mobile */
  .item-page img, article img {
    width: calc(100% + 2rem) !important;
    max-width: calc(100% + 2rem) !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    max-height: 240px;
    object-fit: cover;
  }

  /* Stack buttons vertically */
  a[style*="background"],
  a[style*="background-color"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0.4rem 0 !important;
    padding: 14px 20px !important;
  }

  /* Scrollable tables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ─── SOLUTIONS DROPDOWN ARROW FIX ──────────────────────── */
/* Make toggle button appear inline to the right of the text */
.nav-item.deeper.parent,
.nav-item.parent.deeper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    position: relative;
  }

.nav-item.deeper.parent > a,
.nav-item.parent.deeper > a {
    flex: 0 0 auto !important;
    display: inline !important;
  }

.mod-menu__toggle-sub {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #B0C4D8 !important;
    padding: 4px 6px !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
    font-size: 0.75rem !important;
    transition: color 0.18s ease !important;
    margin-left: 2px !important;
  }

.mod-menu__toggle-sub:hover {
    color: var(--tc-cyan) !important;
  }

.nav-item.deeper.parent .icon-chevron-down,
.nav-item.parent.deeper .icon-chevron-down {
    font-size: 0.7rem !important;
    transition: transform 0.2s ease !important;
  }

.nav-item.deeper.parent.open .icon-chevron-down,
.nav-item.deeper.parent[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(180deg) !important;
  }

/* ─── MOBILE HAMBURGER BUTTON ──────────────────────────── */
.tc-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--tc-border);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--tc-white);
  margin-left: auto;
  transition: all 0.2s ease;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tc-nav-toggle:hover {
  border-color: var(--tc-cyan);
  color: var(--tc-cyan);
}

.tc-nav-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
  border-radius: 2px;
  transition: all 0.25s ease;
}

.tc-nav-toggle.open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tc-nav-toggle.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.tc-nav-toggle.open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 992px) {
  .tc-nav-toggle {
    display: flex !important;
  }

  .container-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .grid-child.container-nav {
    display: none !important;
    width: 100% !important;
    order: 3;
    padding: 0.75rem 0 1rem;
    border-top: 1px solid var(--tc-border);
    margin-top: 0.5rem;
  }

  .grid-child.container-nav.tc-nav-open {
    display: block !important;
  }

  .mod-menu, .mod-menu__list, .nav, #mod-menu1 {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .nav-item, .mod-menu__list li {
    width: 100% !important;
  }

  .nav-item > a,
  .mod-menu__list li > a {
    width: 100% !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(0,174,239,0.08) !important;
  }

  .nav-item.deeper.parent,
  .nav-item.parent.deeper {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .nav-item.deeper.parent > a {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .mod-menu__sub,
  .nav-child {
    position: static !important;
    display: none !important;
    width: 100% !important;
    background: rgba(0,10,25,0.5) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Cassiopeia adds show-menu class when expanded; also support our custom tc-sub-open */
  .mod-menu__sub.show-menu,
  .nav-item.tc-sub-open > .nav-child,
  .nav-item.tc-sub-open > .mod-menu__sub {
    display: block !important;
  }

  .container-header .grid-child:first-child {
    flex: 1;
    padding: 0.75rem 0;
  }

  .nav-item > a:hover,
  .mod-menu__list li > a:hover {
    background: rgba(0,174,239,0.08) !important;
    padding-left: 18px !important;
    transition: padding 0.15s;
  }

  .container-component {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ─── HERO SECTION ───────────────────────────────────────── */
.tc-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 !important;
}

.tc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tc-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,7,16,0.88) 0%, rgba(11,18,32,0.72) 60%, rgba(0,174,239,0.12) 100%);
}

.tc-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
  padding: 2rem 1.5rem;
  margin: 0 auto;
}

.tc-hero-tagline {
  display: inline-block;
  background: rgba(0,174,239,0.15);
  border: 1px solid rgba(0,174,239,0.4);
  color: var(--tc-cyan);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.tc-hero-heading {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #fff !important;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.tc-hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--tc-text);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 2.5rem;
}

.tc-hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.tc-btn-primary {
  background: #00bcd4 !important; background-image: none !important;
  color: #fff !important;
  border: none !important;
  padding: 0.85rem 2rem !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  display: inline-block;
  transition: opacity 0.2s, transform 0.2s;
}

.tc-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  color: #fff !important;
}

.tc-btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  padding: 0.85rem 2rem !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  display: inline-block;
  transition: border-color 0.2s, transform 0.2s;
}

.tc-btn-outline:hover {
  border-color: var(--tc-cyan) !important;
  color: var(--tc-cyan) !important;
  transform: translateY(-2px);
}

/* ─── HOME PAGE SECTIONS ─────────────────────────────────── */
.tc-home-section {
  padding: 5rem 1.5rem;
}

.tc-section-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.tc-section-label {
  display: inline-block;
  color: var(--tc-cyan);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Align top-level section labels (eyebrow text) with the centered section title below them, matching the "WHY TECHNOLOGY CLICKS" style */
.tc-section > .tc-section-label {
  display: block;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.tc-home-section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #fff !important;
  margin-bottom: 1.25rem;
}

.tc-home-section p {
  color: var(--tc-text);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 700px;
}

/* Stats row */
.tc-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.tc-stat {
  background: rgba(11,18,32,0.8);
  border: 1px solid rgba(0,174,239,0.2);
  border-radius: 10px;
  padding: 1.75rem 1rem;
  text-align: center;
}

.tc-stat-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--tc-cyan);
  margin-bottom: 0.4rem;
}

.tc-stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--tc-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Service cards grid on home */
.tc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.tc-card {
  background: rgba(11,18,32,0.85);
  border: 1px solid rgba(0,174,239,0.15);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  transition: border-color 0.3s, transform 0.3s;
}

.tc-card:hover {
  border-color: rgba(0,174,239,0.5);
  transform: translateY(-4px);
}

.tc-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.tc-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 0.6rem;
}

.tc-card p {
  font-size: 0.95rem;
  color: var(--tc-text);
  margin: 0;
}

/* CTA strip section */
.tc-cta-strip {
  background: linear-gradient(135deg, rgba(0,174,239,0.08) 0%, rgba(124,58,237,0.08) 100%);
  border-top: 1px solid rgba(0,174,239,0.15);
  border-bottom: 1px solid rgba(0,174,239,0.15);
}

.tc-cta-strip h2 {
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.tc-cta-strip p {
  max-width: 500px;
  margin: 0 auto 2rem;
}

/* Make home article full-width (no container padding restriction) */
.com-content-article.view-article .article-info-term,
.com-content-article.view-article .article-details {
  display: none !important;
}

/* Ensure hero goes edge-to-edge */
body.view-article .item-page > .com-content-article,
.com-content-article .article-fulltext {
  padding: 0 !important;
  margin: 0 !important;
}

/* Prevent hero from being constrained inside Cassiopeia's article container */
.item-page .tc-hero {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
}

@media (max-width: 768px) {
  .tc-hero {
    min-height: 85vh;
  }
  .tc-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─── PRICING PAGE ───────────────────────────────────────── */
.tc-pricing-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.tc-pricing-header {
  text-align: center;
  margin-bottom: 3rem;
}

.tc-pricing-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #fff !important;
  margin: 0.5rem 0 1rem;
}

.tc-pricing-header p {
  color: var(--tc-text);
  font-size: 1.05rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

.tc-pricing-group-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff !important;
  text-align: center;
  margin-bottom: 0.5rem;
}

.tc-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.tc-price-card {
  background: rgba(11,18,32,0.9) !important;
  border: 1px solid rgba(0,174,239,0.2);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.tc-price-card.tc-price-featured {
  border-color: #00AEEF;
  box-shadow: 0 0 30px rgba(0,174,239,0.15);
}

.tc-price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #00bcd4; background-image: none;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
}

.tc-price-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tc-cyan) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.tc-price-amount {
  font-size: 3rem;
  font-weight: 900;
  color: #fff !important;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.tc-price-currency {
  font-size: 1.5rem;
  vertical-align: top;
  margin-top: 0.5rem;
  display: inline-block;
}

.tc-price-period {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--tc-text);
}

.tc-price-devices {
  font-size: 0.8rem;
  color: rgba(0,174,239,0.8);
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0,174,239,0.15);
}

.tc-price-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  flex: 1;
}

.tc-price-features li {
  padding: 0.4rem 0;
  color: var(--tc-text);
  font-size: 0.92rem;
  border: none !important;
}

.tc-price-features li em {
  color: var(--tc-cyan);
  font-style: italic;
}

.tc-price-btn {
  display: block;
  text-align: center;
  background: #00bcd4 !important; background-image: none !important;
  color: #fff !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.2s;
  margin-top: auto;
}

.tc-price-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  color: #fff !important;
}

/* Device Add-Ons */
.tc-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.tc-addon-card {
  background: rgba(11,18,32,0.85) !important;
  border: 1px solid rgba(0,174,239,0.15);
  border-radius: 12px;
  padding: 2rem 1.5rem;
}

.tc-addon-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.tc-addon-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 0.5rem;
}

.tc-addon-price {
  font-size: 2rem;
  font-weight: 900;
  color: var(--tc-cyan) !important;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,174,239,0.15);
}

.tc-addon-price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--tc-text);
}

.tc-addon-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tc-addon-card ul li {
  padding: 0.35rem 0;
  color: var(--tc-text);
  font-size: 0.9rem;
  border: none !important;
}

.tc-addon-card ul li::before {
  content: "✓ ";
  color: var(--tc-cyan);
}

/* Pricing footer */
.tc-pricing-footer {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,174,239,0.1);
}

.tc-pricing-footer p {
  color: var(--tc-text);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .tc-pricing-grid {
    grid-template-columns: 1fr;
  }
  .tc-addon-grid {
    grid-template-columns: 1fr;
  }
}


/* ─── CONTACT PAGE ───────────────────────────────────────── */
.tc-contact-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.tc-contact-header {
  text-align: center;
  margin-bottom: 3rem;
}

.tc-contact-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #fff !important;
  margin: 0.5rem 0 1rem;
}

.tc-contact-header p {
  color: var(--tc-text);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.tc-contact-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem;
  align-items: start;
}

.tc-contact-info {
  background: rgba(11,18,32,0.85) !important;
  border: 1px solid rgba(0,174,239,0.2);
  border-radius: 12px;
  padding: 2rem 1.5rem;
}

.tc-contact-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,174,239,0.15);
}

.tc-contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  color: var(--tc-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.tc-contact-icon {
  font-size: 1.4rem;
  min-width: 2rem;
}

.tc-contact-item a {
  color: var(--tc-cyan) !important;
  text-decoration: none;
}

.tc-contact-item a:hover {
  text-decoration: underline;
}

.tc-contact-item strong {
  display: block;
  color: #fff;
  margin-bottom: 0.25rem;
}

.tc-contact-form-wrap {
  background: rgba(11,18,32,0.85) !important;
  border: 1px solid rgba(0,174,239,0.2);
  border-radius: 12px;
  padding: 2rem 2rem;
}

/* Style Convert Forms to match dark theme */
.tc-contact-form-wrap .convertforms input,
.tc-contact-form-wrap .convertforms textarea,
.tc-contact-form-wrap .convertforms select {
  background: rgba(5,7,16,0.8) !important;
  border: 1px solid rgba(0,174,239,0.3) !important;
  color: #C8D8E8 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
}

.tc-contact-form-wrap .convertforms input:focus,
.tc-contact-form-wrap .convertforms textarea:focus,
.tc-contact-form-wrap .convertforms select:focus {
  border-color: var(--tc-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important;
}

.tc-contact-form-wrap .convertforms label {
  color: #C8D8E8 !important;
  font-weight: 600;
}

.tc-contact-form-wrap .convertforms button[type=submit],
.tc-contact-form-wrap .convertforms input[type=submit] {
  background: #00bcd4 !important; background-image: none !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: opacity 0.2s !important;
}

.tc-contact-form-wrap .convertforms button[type=submit]:hover {
  opacity: 0.9 !important;
}

/* Hide branding/powered by links */
.convertforms .cf-branding,
.convertforms [class*="powered"],
.convertforms [class*="branding"] {
  display: none !important;
}

@media (max-width: 768px) {
  .tc-contact-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== SOLUTION PAGE STYLES ===== */
.tc-solution-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px; }
.tc-solution-page h2 { font-size: 1.6em; margin-bottom: 16px; }
.tc-solution-page p { line-height: 1.8; margin-bottom: 16px; color: #cdd9e5; }
.tc-solution-page ul li { color: #cdd9e5; }
.tc-solution-page img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 8px; display: block; }

/* ===== FOOTER STYLES ===== */
.tc-footer-module { background: #0a1520 !important; padding: 0 !important; }
.tc-footer-module .custom-module-content { padding: 0 !important; }
/* Footer grid responsive */
#sp-footer .custom { background: #0a1520; }
#sp-footer { background: #0a1520; }
/* Cassiopeia footer override */
footer.footer, #footer, .footer { background: #0a1520 !important; border-top: 1px solid #1e3a5f; }
/* Remove default Joomla footer padding when we have our own */
.footer .custom { padding: 0; margin: 0; }

/* ===== CONTACT US FORM COLOUR FIX ===== */
/* Convert Forms on Contact Us - match site dark theme */
.cf-form { 
  background: #111e30 !important; 
  border: 1px solid #2d4a6e !important; 
  border-radius: 10px !important;
  padding: 32px !important;
}
.cf-form .cf-field label { color: #cdd9e5 !important; font-weight: 600; margin-bottom: 8px; }
.cf-form .cf-field input[type="text"],
.cf-form .cf-field input[type="email"],
.cf-form .cf-field input[type="tel"],
.cf-form .cf-field textarea,
.cf-form .cf-field select {
  background: #0d1b2a !important;
  border: 1px solid #2d4a6e !important;
  color: #e0eaf2 !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 1em !important;
  width: 100% !important;
  box-sizing: border-box;
}
.cf-form .cf-field input:focus,
.cf-form .cf-field textarea:focus,
.cf-form .cf-field select:focus {
  border-color: #00bcd4 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,188,212,0.15) !important;
}
.cf-form .cf-field input::placeholder,
.cf-form .cf-field textarea::placeholder { color: #6b8299 !important; }
.cf-form .cf-submit button,
.cf-form input[type="submit"],
.cf-form button[type="submit"] {
  background: #00bcd4 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 36px !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  width: 100% !important;
  letter-spacing: 0.3px;
  transition: background 0.2s;
}
.cf-form .cf-submit button:hover { background: #0097a7 !important; }
.cf-form .cf-field .cf-field-description { color: #7eb8d4 !important; font-size: 0.9em; margin-top: 4px; }

/* ===== RESPONSIVE IMPROVEMENTS ===== */
@media (max-width: 768px) {
  /* Solution page grid single column */
  .tc-solution-page { padding: 0 12px 30px; }
  
  /* Services page alternating grid */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: block !important;
  }
  div[style*="grid-template-columns:1fr 1fr"] > div,
  div[style*="grid-template-columns: 1fr 1fr"] > div {
    margin-bottom: 20px !important;
    width: 100% !important;
  }
  
  /* About Us stats grid */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:20px"] > div {
    display: inline-block !important;
    width: 48% !important;
    margin: 1% !important;
  }
  
  /* Footer grid - stack on mobile */
  #sp-footer div[style*="grid-template-columns:2fr"],
  div[style*="grid-template-columns: 2fr"] {
    display: block !important;
  }
  #sp-footer div[style*="grid-template-columns:2fr"] > div,
  div[style*="grid-template-columns: 2fr"] > div {
    margin-bottom: 30px !important;
    width: 100% !important;
  }
  
  /* Footer bottom bar */
  div[style*="justify-content:space-between"],
  div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  /* Hero headings */
  h1[style*="font-size:2.6em"] { font-size: 1.8em !important; }
  
  /* Nav solutions dropdown arrow */
  .nav-item.dropdown > .nav-link { 
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}


/* ===== CONVERT FORMS DARK THEME FIX (FINAL) ===== */
/* Override ConvertForms white background with CSS variables AND direct properties */
.convertforms {
  --background-color: #1a2840 !important;
  --background-image: none !important;
  background: #1a2840 !important;
  background-color: #1a2840 !important;
  border: 1px solid #243550 !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

.convertforms .cf-field label,
.convertforms label,
.convertforms .cf-field > label {
  color: #c8d8e8 !important;
  font-weight: 500 !important;
}

.convertforms input[type="text"],
.convertforms input[type="email"],
.convertforms input[type="tel"],
.convertforms input[type="number"],
.convertforms textarea,
.convertforms select,
.convertforms .cf-field input,
.convertforms .cf-field textarea,
.convertforms .cf-field select {
  background: rgba(5, 7, 16, 0.8) !important;
  background-color: rgba(5, 7, 16, 0.8) !important;
  border: 1px solid #2a3f5f !important;
  color: #e0eaf6 !important;
  border-radius: 4px !important;
}

.convertforms input[type="text"]:focus,
.convertforms input[type="email"]:focus,
.convertforms input[type="tel"]:focus,
.convertforms textarea:focus,
.convertforms select:focus {
  border-color: #00bcd4 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.25) !important;
}

.convertforms input::placeholder,
.convertforms textarea::placeholder {
  color: #5a7a9a !important;
}

.convertforms select option {
  background: #1a2840 !important;
  color: #e0eaf6 !important;
}

/* Submit button - solid cyan, override gradient */
.cf-btn,
.convertforms button[type="submit"],
.convertforms input[type="submit"],
.convertforms .cf-btn {
  background: #00bcd4 !important;
  background-image: none !important;
  background-color: #00bcd4 !important;
  color: #0d1b2a !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.cf-btn:hover,
.convertforms button[type="submit"]:hover,
.convertforms input[type="submit"]:hover {
  background: #0097a7 !important;
  background-image: none !important;
  background-color: #0097a7 !important;
  color: #ffffff !important;
}

.convertforms .cf-field .cf-required {
  color: #00bcd4 !important;
}

.convertforms .cf-field .cf-error-message {
  color: #ff6b6b !important;
}
/* ===== END CONVERT FORMS DARK THEME FIX (FINAL) ===== */

/* updated: 1781966807760 */

/* ---- GET STARTED DROPDOWN FIX ---- */

/* Style the Get Started toggle button like other nav links */
.nav-item.item-172 > .mod-menu__toggle-sub,
.nav-item.item-104 > .mod-menu__toggle-sub {
  color: #B0C4D8 !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 6px 13px !important;
  border-radius: 5px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.18s ease !important;
}

.nav-item.item-172 > .mod-menu__toggle-sub:hover,
.nav-item.item-104 > .mod-menu__toggle-sub:hover {
  color: var(--tc-cyan) !important;
  background: rgba(0,212,255,0.08) !important;
}

/* Dark dropdown sub-menu to match site colour scheme */
.nav-item.item-172 > .mod-menu__sub,
.mod-menu .nav-item.deeper.parent:last-child .mod-menu__sub {
  right: 0 !important;
  left: auto !important;
  background: #0B1220 !important;
  border: 1px solid rgba(0,174,239,0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  padding: 6px 0 !important;
  min-width: 180px !important;
  margin-top: 4px !important;
}

/* Dropdown items */
.nav-item.item-172 .mod-menu__sub li a,
.mod-menu .nav-item.deeper.parent:last-child .mod-menu__sub li a {
  color: #B0C4D8 !important;
  background: transparent !important;
  padding: 10px 18px !important;
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border-bottom: 1px solid rgba(0,174,239,0.08) !important;
  border-radius: 0 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.nav-item.item-172 .mod-menu__sub li:last-child a {
  border-bottom: none !important;
}

.nav-item.item-172 .mod-menu__sub li a:hover {
  color: var(--tc-cyan) !important;
  background: rgba(0,174,239,0.1) !important;
  padding-left: 22px !important;
}

/* Also fix the Solutions dropdown to match */
.mod-menu__sub {
  background: #0B1220 !important;
  border: 1px solid rgba(0,174,239,0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  padding: 6px 0 !important;
}

.mod-menu__sub li a {
  color: #B0C4D8 !important;
  background: transparent !important;
  padding: 10px 18px !important;
  font-size: 0.85rem !important;
  border-bottom: 1px solid rgba(0,174,239,0.08) !important;
  border-radius: 0 !important;
}

.mod-menu__sub li:last-child a { border-bottom: none !important; }

.mod-menu__sub li a:hover {
  color: var(--tc-cyan) !important;
  background: rgba(0,174,239,0.1) !important;
}

/* ─── JS SUPPORT TICKET: Hide Powered By / Copyright ─────────── */
#js-tk-copyright,
.js-tk-copyright-logo-wrapper,
.js-tk-copyright-desc-wrapper,
.js-cp-right { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   JS SUPPORT TICKET — Dark Theme Override (Session 13)
   Matches site colour scheme: #0B1220 / #1a2840 / #00bcd4
   ═══════════════════════════════════════════════════════════════ */

/* ─── Top Navigation Bar ───────────────────────────────────────── */
#jsst-header {
  background-color: #1a2840 !important;
  border-bottom: 2px solid #00bcd4 !important;
}

#jsst-tabs-wrp {
  background-color: #1a2840 !important;
}

.jsst-header-tab {
  background-color: transparent !important;
}

.js-cp-menu-link {
  color: #c8d8e8 !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0.6rem 1.2rem !important;
  display: inline-block !important;
  font-weight: 500 !important;
  transition: color 0.2s, background-color 0.2s !important;
}

.js-cp-menu-link:hover {
  color: #00bcd4 !important;
  background-color: rgba(0, 188, 212, 0.15) !important;
  text-decoration: none !important;
}

.js-cp-menu-link.selected,
.js-cp-menu-link.active {
  color: #00bcd4 !important;
  background-color: rgba(0, 188, 212, 0.2) !important;
  border-bottom: 2px solid #00bcd4 !important;
}

.jsst-header-tab-right .js-cp-menu-link {
  color: #00bcd4 !important;
  border: 1px solid #00bcd4 !important;
  border-radius: 4px !important;
  margin-left: 0.5rem !important;
}

.jsst-header-tab-right .js-cp-menu-link:hover {
  background-color: #00bcd4 !important;
  color: #0B1220 !important;
}

/* ─── Breadcrumb / Top Wrapper ──────────────────────────────────── */
#jsst-wrapper-top {
  background-color: #111e30 !important;
  border-bottom: 1px solid #1e3a5f !important;
  color: #c8d8e8 !important;
  padding: 0.5rem 1rem !important;
}

#jsst-wrapper-top a,
#jsst-breadcrunbs a,
#jsst-breadcrunbs li {
  color: #00bcd4 !important;
}

#jsst-breadcrunbs {
  margin: 0 !important;
  padding: 0 !important;
}

#jsst-breadcrunbs ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
}

#jsst-breadcrunbs li {
  color: #c8d8e8 !important;
}

/* ─── Main Container / Dashboard Area ───────────────────────────── */
.js-menu-links-wrp,
.js-ticket-menu-links-row {
  background-color: #0B1220 !important;
}

/* ─── Dashboard Sidebar Menu Cards ──────────────────────────────── */
.js-support-ticket-cont {
  background-color: #111e30 !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.js-section-heading,
.js-support-ticket-title {
  background-color: #1a2840 !important;
  color: #c8d8e8 !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #00bcd4 !important;
  font-weight: 600 !important;
}

.js-ticket-dash-menu {
  background-color: #111e30 !important;
  border-bottom: 1px solid #1e3a5f !important;
}

.js-ticket-dash-menu:hover {
  background-color: #1a2840 !important;
}

.js-ticket-dash-menu a,
.js-ticket-dash-menu-text {
  color: #c8d8e8 !important;
}

.js-ticket-dash-menu:hover a,
.js-ticket-dash-menu:hover .js-ticket-dash-menu-text {
  color: #00bcd4 !important;
}

.js-ticket-dash-menu-icon {
  background-color: #1a2840 !important;
  border-right: 1px solid #1e3a5f !important;
}

/* ─── Dashboard Info Boxes (Support, Knowledge, etc.) ───────────── */
.js-support-ticket-box {
  background-color: #1a2840 !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 6px !important;
  color: #c8d8e8 !important;
}

.js-support-ticket-desc {
  color: #a0b4c8 !important;
  padding: 0.5rem 1rem !important;
}

.js-support-ticket-btn {
  background-color: #00bcd4 !important;
  color: #0B1220 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.5rem 1.2rem !important;
  font-weight: 600 !important;
  display: inline-block !important;
  text-decoration: none !important;
  margin: 0.5rem 1rem 1rem !important;
  transition: background-color 0.2s !important;
}

.js-support-ticket-btn:hover {
  background-color: #00aeef !important;
  color: #0B1220 !important;
  text-decoration: none !important;
}

/* ─── Forms (Submit Ticket, Login) ──────────────────────────────── */
.com_jssupportticket input[type="text"],
.com_jssupportticket input[type="email"],
.com_jssupportticket input[type="password"],
.com_jssupportticket textarea,
.com_jssupportticket select {
  background-color: #0B1220 !important;
  color: #c8d8e8 !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 4px !important;
  padding: 0.5rem 0.75rem !important;
}

.com_jssupportticket input[type="text"]:focus,
.com_jssupportticket input[type="email"]:focus,
.com_jssupportticket input[type="password"]:focus,
.com_jssupportticket textarea:focus,
.com_jssupportticket select:focus {
  border-color: #00bcd4 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2) !important;
}

.com_jssupportticket label {
  color: #c8d8e8 !important;
  font-weight: 500 !important;
}

.com_jssupportticket input[type="submit"],
.com_jssupportticket button[type="submit"],
.com_jssupportticket .btn-primary,
.com_jssupportticket .btn {
  background-color: #00bcd4 !important;
  color: #0B1220 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.6rem 1.5rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.com_jssupportticket input[type="submit"]:hover,
.com_jssupportticket button[type="submit"]:hover,
.com_jssupportticket .btn-primary:hover,
.com_jssupportticket .btn:hover {
  background-color: #00aeef !important;
  color: #0B1220 !important;
}

/* ─── Tables (My Tickets list) ──────────────────────────────────── */
.com_jssupportticket table {
  background-color: #111e30 !important;
  color: #c8d8e8 !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.com_jssupportticket table th {
  background-color: #1a2840 !important;
  color: #00bcd4 !important;
  border: 1px solid #1e3a5f !important;
  padding: 0.6rem 1rem !important;
}

.com_jssupportticket table td {
  background-color: #0d1b2a !important;
  color: #c8d8e8 !important;
  border: 1px solid #1e3a5f !important;
  padding: 0.6rem 1rem !important;
}

.com_jssupportticket table tr:hover td {
  background-color: #1a2840 !important;
}

/* ─── Alert / Notice Boxes ───────────────────────────────────────── */
.com_jssupportticket .alert,
.com_jssupportticket .alert-info,
.com_jssupportticket .note {
  background-color: rgba(0, 188, 212, 0.1) !important;
  border: 1px solid #00bcd4 !important;
  color: #c8d8e8 !important;
  border-radius: 4px !important;
  padding: 0.75rem 1rem !important;
}

/* ─── General text within component ─────────────────────────────── */
.com_jssupportticket,
.view-jssupportticket {
  color: #c8d8e8 !important;
}

.com_jssupportticket a {
  color: #00bcd4 !important;
}

.com_jssupportticket a:hover {
  color: #00aeef !important;
  text-decoration: none !important;
}

.com_jssupportticket h1,
.com_jssupportticket h2,
.com_jssupportticket h3,
.com_jssupportticket h4 {
  color: #ffffff !important;
}

/* ─── Pagination ─────────────────────────────────────────────────── */
.com_jssupportticket .pagination .page-link {
  background-color: #1a2840 !important;
  border-color: #1e3a5f !important;
  color: #c8d8e8 !important;
}

.com_jssupportticket .pagination .page-link:hover {
  background-color: #00bcd4 !important;
  color: #0B1220 !important;
}

.com_jssupportticket .pagination .active .page-link {
  background-color: #00bcd4 !important;
  border-color: #00bcd4 !important;
  color: #0B1220 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SESSION 14 — HOMEPAGE IMPROVEMENTS + STICKY HEADER
   ═══════════════════════════════════════════════════════════════ */

/* ─── 5. STICKY HEADER ──────────────────────────────────────────── */
.container-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* ─── 1. HERO TRUST STRIP ───────────────────────────────────────── */
.tc-hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(200, 216, 232, 0.8);
  letter-spacing: 0.03em;
}

.tc-hero-trust-strip span {
  color: rgba(200, 216, 232, 0.85);
}

/* ─── 2. WHY US — DIFFERENTIATOR LIST ───────────────────────────── */
.tc-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.tc-differentiator-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5rem 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tc-differentiator-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #c8d8e8;
  font-size: 0.95rem;
  line-height: 1.5;
}

.tc-differentiator-list li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #00bcd4;
  margin-top: 2px;
}

.tc-differentiator-list li strong {
  color: #ffffff;
}

/* ─── 2. CERTIFICATIONS GRID ────────────────────────────────────── */
.tc-why-certs {
  background: #111e30;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  padding: 2rem;
}

.tc-why-certs h3 {
  color: #00bcd4;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #1e3a5f;
  padding-bottom: 0.75rem;
}

.tc-cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.tc-cert-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #1a2840;
  border: 1px solid #1e3a5f;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  color: #c8d8e8;
  font-size: 0.82rem;
  font-weight: 500;
}

.tc-cert-badge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #00bcd4;
}

/* ─── 3. TESTIMONIALS ────────────────────────────────────────────── */
.tc-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.tc-testimonial-card {
  background: #111e30;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tc-testimonial-stars {
  color: #00bcd4;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.tc-testimonial-text {
  color: #c8d8e8;
  font-size: 0.95rem;
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}

.tc-testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 1px solid #1e3a5f;
  padding-top: 0.75rem;
}

.tc-testimonial-author strong {
  color: #ffffff;
  font-size: 0.9rem;
}

.tc-testimonial-author span {
  color: #8ba4be;
  font-size: 0.8rem;
}

.tc-testimonial-note {
  text-align: center;
  color: #8ba4be;
  font-size: 0.8rem;
  margin-top: 1.5rem;
  opacity: 0.7;
}

/* ─── 4. SVG SERVICE ICONS ───────────────────────────────────────── */
.tc-service-icon {
  width: 56px;
  height: 56px;
  background: rgba(0, 188, 212, 0.1);
  border: 1px solid rgba(0, 188, 212, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.tc-service-icon svg {
  width: 28px;
  height: 28px;
  color: #00bcd4;
}

/* ─── GENERAL SECTION STYLES (reused across home) ───────────────── */
.tc-section-alt {
  background: #0d1b2a;
  padding: 4rem 2rem;
}

.tc-cta-section {
  background: linear-gradient(135deg, #0B1220 0%, #111e30 50%, #0B1220 100%);
  text-align: center;
  padding: 4rem 2rem;
  border-top: 1px solid #1e3a5f;
}

.tc-cta-section h2 {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.tc-cta-section p {
  color: #c8d8e8;
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}

/* ─── RESPONSIVE — WHY / CERTS / TESTIMONIALS ───────────────────── */
@media (max-width: 900px) {
  .tc-why-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .tc-testimonials-grid {
    grid-template-columns: 1fr;
  }
  .tc-cert-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .tc-hero-trust-strip {
    gap: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  .tc-cert-grid {
    grid-template-columns: 1fr;
  }
  .tc-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── MISSING CLASS ALIASES (Session 14 fix) ────────────────────── */

/* Hero section wrapper */
.tc-hero-section {
  padding: 5rem 2rem 3rem;
  text-align: center;
  background: var(--tc-hero-bg, linear-gradient(135deg, #0B1220 0%, #111e30 60%, #0B1220 100%));
  position: relative;
}

/* Stats band — horizontal row of 4 stats */
.tc-stats-band {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: #111e30;
  border-top: 1px solid #1e3a5f;
  border-bottom: 1px solid #1e3a5f;
}

.tc-stats-band .tc-stat {
  flex: 1 1 200px;
  text-align: center;
  padding: 2rem 1rem;
  border-right: 1px solid #1e3a5f;
}

.tc-stats-band .tc-stat:last-child {
  border-right: none;
}

.tc-stats-band .tc-stat-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: #00bcd4;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.tc-stats-band .tc-stat-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8ba4be;
}

/* Dark section wrapper */
.tc-section-dark {
  background: #0d1b2a;
  padding: 4rem 2rem;
}

/* ─── SECTION INNER CONSTRAINT ─── (consolidated into H2 CYAN ACCENT LINE rule above) */

/* Services grid */
.tc-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Service card */
.tc-service-card {
  background: #111e30 !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 10px !important;
  padding: 1.75rem !important;
  transition: border-color 0.2s, transform 0.2s !important;
}

.tc-service-card:hover {
  border-color: #00bcd4 !important;
  transform: translateY(-3px) !important;
}

.tc-service-card h3 {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  margin-bottom: 0.5rem !important;
}

.tc-service-card p {
  color: #a0b4c8 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Responsive grid for services */
@media (max-width: 900px) {
  .tc-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tc-stats-band .tc-stat {
    flex: 1 1 45%;
    border-bottom: 1px solid #1e3a5f;
  }
}

@media (max-width: 600px) {
  .tc-services-grid {
    grid-template-columns: 1fr !important;
  }
  .tc-stats-band {
    flex-direction: column !important;
  }
  .tc-stats-band .tc-stat {
    border-right: none;
    border-bottom: 1px solid #1e3a5f;
  }
  .tc-stats-band .tc-stat:last-child {
    border-bottom: none;
  }
}

/* ─── SESSION 14: ICON EMOJI APPROACH + LIST FIX ────────────────── */

/* Service icon boxes with emoji */
.tc-service-icon {
  width: 56px !important;
  height: 56px !important;
  background: rgba(0, 188, 212, 0.1) !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1rem !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
}

/* Differentiator list check icons */
.tc-check {
  color: #00bcd4;
  font-size: 1rem;
  flex-shrink: 0;
  font-weight: bold;
  margin-top: 1px;
}

.tc-differentiator-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  list-style: none !important;
  color: #c8d8e8 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tc-differentiator-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5rem 0 !important;
}

/* Cert badge icons */
.tc-cert-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Hero CTA paragraph reset */
.tc-hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
  margin-top: 1.5rem !important;
}

p.tc-hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
}

/* Section CTA paragraph */
.tc-section-cta {
  margin-top: 2rem;
  text-align: center;
}

p.tc-section-cta {
  margin-top: 2rem !important;
  text-align: center !important;
}

/* Hero badge */
p.tc-hero-badge, .tc-hero-badge {
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #00bcd4 !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

/* Hero headline */
.tc-hero-headline {
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 auto 1.2rem !important;
  max-width: 800px !important;
}

/* Section title */
.tc-section-title {
  color: #ffffff !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

/* Secondary button */
.tc-btn-secondary {
  background: transparent !important;
  color: #00bcd4 !important;
  border: 1px solid #00bcd4 !important;
  border-radius: 4px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color 0.2s !important;
}

.tc-btn-secondary:hover {
  background: rgba(0, 188, 212, 0.15) !important;
  color: #00bcd4 !important;
  text-decoration: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .tc-hero-headline {
    font-size: 1.9rem !important;
  }
}

/* ─── SESSION 14: FOOTER PARTNER STRIP + BOTTOM BAR ─────────────── */

.tc-footer-partners {
  border-top: 1px solid #1e3a5f;
  padding: 1.5rem 2rem;
  text-align: center;
}

.tc-footer-partners-label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4a6a8a;
  margin-bottom: 1rem;
}

.tc-partner-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.tc-partner-badge {
  background: #111e30;
  border: 1px solid #1e3a5f;
  border-radius: 20px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  color: #8ba4be;
  white-space: nowrap;
}

.tc-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-top: 1px solid #1e3a5f;
  font-size: 0.8rem;
  color: #4a6a8a;
}

.tc-footer-links a {
  color: #4a6a8a !important;
  text-decoration: none;
}

.tc-footer-links a:hover {
  color: #00bcd4 !important;
}

@media (max-width: 600px) {
  .tc-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .tc-partner-strip {
    gap: 0.5rem;
  }
}

/* ─── SESSION 14: FAQ SECTION ────────────────────────────────────── */

.tc-faq-section h2 {
  color: #ffffff !important;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.tc-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.tc-faq-item {
  background: #111e30;
  border: 1px solid #1e3a5f;
  border-left: 3px solid #00bcd4;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}

.tc-faq-item h3 {
  color: #00bcd4 !important;
  font-size: 1rem !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
}

.tc-faq-item p {
  color: #a0b4c8 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .tc-faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   FOOTER GRID LAYOUT FIX
   ==================================================== */
.tc-footer-inner {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
  gap: 2.5rem !important;
  padding: 3rem 2rem 2rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.tc-footer-brand h3 {
  color: var(--tc-white) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
}

.tc-footer-brand p {
  color: #8ba3bc !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.5rem !important;
}

.tc-footer-brand a {
  color: var(--tc-cyan) !important;
  text-decoration: none !important;
}

.tc-footer-brand a:hover {
  color: var(--tc-white) !important;
  text-decoration: underline !important;
}

.tc-footer-col h4 {
  color: var(--tc-white) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid #1e3a5f !important;
}

.tc-footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tc-footer-col ul li {
  margin-bottom: 0.5rem !important;
}

.tc-footer-col ul li a {
  color: #8ba3bc !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  transition: color 0.2s !important;
}

.tc-footer-col ul li a:hover {
  color: var(--tc-cyan) !important;
}

/* Certifications list in footer (no bullet) */
.tc-footer-col ul li:not(:has(a)) {
  color: #8ba3bc !important;
  font-size: 0.875rem !important;
}

/* Partner strip */
.tc-partner-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 1.5rem 2rem !important;
  border-top: 1px solid #1e3a5f !important;
  border-bottom: 1px solid #1e3a5f !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.tc-partner-badge {
  background: #1a2840 !important;
  color: #8ba3bc !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 20px !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
}

/* Footer bottom bar */
.tc-footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 2rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.tc-footer-bottom p,
.tc-footer-bottom span {
  color: #5a7a96 !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}

.tc-footer-bottom a {
  color: #5a7a96 !important;
  text-decoration: none !important;
}

.tc-footer-bottom a:hover {
  color: var(--tc-cyan) !important;
}

/* Responsive footer */
@media (max-width: 1024px) {
  .tc-footer-inner {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .tc-footer-inner {
    grid-template-columns: 1fr !important;
    padding: 2rem 1rem 1rem !important;
  }
  .tc-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
  }
  .tc-partner-strip {
    padding: 1rem !important;
  }
}

/* ====================================================
   NAV — PREVENT WRAPPING / OVERFLOW
   ==================================================== */
.mod-menu {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.mod-menu > li > a,
.mod-menu > li > span.nav-header {
  font-size: 0.78rem !important;
  padding: 0.5rem 0.65rem !important;
  letter-spacing: 0.03em !important;
}

/* Shrink nav item padding on tablets */
@media (max-width: 1280px) {
  .mod-menu > li > a,
  .mod-menu > li > span.nav-header {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.45rem !important;
  }
}

/* ====================================================
   CONTENT AREA — FULL WIDTH OVERRIDE
   Fix the narrow content container on home page
   ==================================================== */
.site-grid {
  max-width: 100% !important;
}

.grid-child.container-component {
  max-width: 100% !important;
  padding: 0 !important;
}


/* ====================================================
   FOOTER — LEFT-ALIGN TEXT IN COLUMNS
   ==================================================== */
.tc-footer-brand {
  text-align: left !important;
}

.tc-footer-col {
  text-align: left !important;
}

.tc-footer-col ul li {
  text-align: left !important;
}

/* ====================================================
   CONTENT AREA — REMOVE NARROW MAX-WIDTH
   Cassiopeia default: .com-content-article has max-width 1180px
   Override to use full container width for our custom pages
   ==================================================== */
.com-content-article.item-page {
  max-width: 100% !important;
  width: 100% !important;
}

/* Keep standard prose content readable (cap at ~900px) but allow
   full-width layout sections to break out */
.com-content-article__body > p,
.com-content-article__body > h1,
.com-content-article__body > h2,
.com-content-article__body > h3,
.com-content-article__body > ul,
.com-content-article__body > ol,
.com-content-article__body > blockquote {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Full-width sections (our custom components) */
.tc-hero-section,
.tc-stats-band,
.tc-services-section,
.tc-why-section,
.tc-cta-section,
.tc-testimonials-section,
.tc-faq-section,
.tc-section,
.tc-section-dark,
.tc-section-alt {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ====================================================
   FOOTER PARTNER STRIP — LABEL STYLE FIX
   ==================================================== */
.tc-partner-strip > p {
  width: 100% !important;
  text-align: center !important;
  color: #5a7a96 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
}


/* ====================================================
   SITE GRID — EXPAND COMPONENT TO FULL WIDTH
   Cassiopeia uses a named-grid layout. By default the
   component area is "main-start / main-end" (~1320px).
   Expand it to "full-start / full-end" so our custom
   full-width sections use the entire viewport width.
   ==================================================== */
.grid-child.container-component {
  grid-column: full-start / full-end !important;
}

/* Re-add a sensible max-width for inner content so normal
   article text (About, standard pages) doesn't stretch too wide */
.com-content-article__body > p,
.com-content-article__body > ul,
.com-content-article__body > ol {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* But our full-width custom sections should stay full-width */
.tc-hero-section,
.tc-stats-band,
.tc-services-section,
.tc-why-section,
.tc-cta-section,
.tc-testimonials-section,
.tc-faq-section,
.tc-section,
.tc-section-dark,
.tc-section-alt {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100vw !important;
}


/* ====================================================
   PAGE WRAPPERS — REMOVE 1180px MAX-WIDTH CONSTRAINTS
   These were set before full-width layout was added.
   ==================================================== */
.tc-pricing-page {
  max-width: 100% !important;
  padding: 0 !important;
}

.tc-contact-page {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Inner content containers — keep readable max-width */
.tc-pricing-header,
.tc-contact-header {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem 1.5rem 2rem !important;
}

/* Pricing cards grid — use full width */
.tc-pricing-grid,
.tc-plans-grid {
  max-width: 1400px !important;
  width: 100% !important;
  padding: 0 2rem !important;
}


/* ====================================================
   PRICING PAGE — CENTRE-ALIGN PRICING CARDS
   ==================================================== */
.tc-pricing-grid,
.tc-plans-wrapper,
.tc-plans-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  padding: 0 2rem 3rem !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Pricing header centre-align */
.tc-pricing-header {
  text-align: center !important;
}

/* Also centre the add-ons section label and grid */
.tc-addons-section {
  text-align: center !important;
  padding: 2rem !important;
}

.tc-addons-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
}

/* ====================================================
   HAMBURGER / MOBILE MENU — SOLUTIONS DROPDOWN ARROW
   Make Solutions arrow sit inline next to text (same as Get Started)
   ==================================================== */

/* In the custom mobile nav (.tc-nav-open), Solutions parent item:
   <a>Solutions</a> + <button class="mod-menu__toggle-sub"> need to be grouped left */
@media (max-width: 991px) {
  /* Group <a> and toggle button together on the left */
  .tc-nav-open .nav-item.parent,
  .navbar-toggler ~ div .mod-menu .nav-item.parent {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  /* Items inside the parent item should not stretch */
  .tc-nav-open .nav-item.parent > a,
  .tc-nav-open .nav-item.parent > button,
  .navbar-toggler ~ div .mod-menu .nav-item.parent > a,
  .navbar-toggler ~ div .mod-menu .nav-item.parent > button {
    flex: 0 0 auto !important;
  }
  .tc-nav-open .nav-item.parent > a,
  .navbar-toggler ~ div .mod-menu .nav-item.parent > a {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Toggle button sits directly next to link text */
  .tc-nav-open .nav-item.parent > button.mod-menu__toggle-sub,
  .navbar-toggler ~ div .mod-menu .nav-item.parent > button.mod-menu__toggle-sub {
    flex: 0 0 auto !important;
    width: auto !important;
    position: static !important;
    display: inline-flex !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    padding: 0 4px !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* Fix GET STARTED (button-only parent): full width and proper tap target */
  .tc-nav-open .nav-item.parent > button.mod-menu__toggle-sub:first-child,
  .navbar-toggler ~ div .mod-menu .nav-item.parent > button.mod-menu__toggle-sub:first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }

  /* Submenu takes full width row below */
  .tc-nav-open .nav-item.parent > .mod-menu__sub,
  .navbar-toggler ~ div .mod-menu .nav-item.parent > .mod-menu__sub {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}



.tc-testimonial-card {
  background: #1a2840 !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.tc-testimonial-stars {
  color: #f5a623 !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

.tc-testimonial-text {
  color: #c8d8e8 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  flex: 1 !important;
  margin: 0 !important;
}

.tc-testimonial-author strong {
  color: #ffffff !important;
  font-size: 0.875rem !important;
  display: block !important;
}

.tc-testimonial-author span {
  color: #5a7a96 !important;
  font-size: 0.8rem !important;
}


/* ============================================================
   SESSION 17 — Alignment fixes, hamburger Solutions arrow,
   page-header padding
   ============================================================ */

/* Page title header — add consistent padding so page titles
   are not flush against the viewport edge */
.page-header {
  padding: 12px 20px !important;
  max-width: 100% !important;
}
.page-header h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.6em !important;
}

/* Content section alignment — ensure all article body sections
   constrain content to max 1100px centred, matching About Us pattern */
.com-content-article__body > div,
.com-content-article__body > section {
  box-sizing: border-box !important;
}

/* Solutions sub-pages and all content pages — inner content containers
   that don't have explicit max-width get constrained */
.com-content-article__body > div > div:not([style*="grid"]):not([style*="flex"]):not([style*="max-width"]),
.com-content-article__body > section > div:not([style*="grid"]):not([style*="flex"]):not([style*="max-width"]) {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix hamburger mobile Solutions dropdown arrow position
   — move chevron to sit inline right next to the word, matching Get Started */
@media (max-width: 991px) {
  .mod-menu .nav-item.parent > a .mod-menu__child-indicator,
  .mod-menu .nav-item.parent > span .mod-menu__child-indicator,
  .navbar-nav .nav-item.parent > a .mod-menu__child-indicator {
    position: static !important;
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    float: none !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
  .mod-menu .nav-item.parent > a,
  .mod-menu .nav-item.parent > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

/* ---- PORTAL STYLES ---------------------------------------- */

/* === Plan Request - Plan Grid === */
.tc-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.tc-plan-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem;
  background: #111e30;
  border: 2px solid rgba(0,188,212,0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
  position: relative;
}

.tc-plan-option input[type="radio"] {
  margin-bottom: 0.5rem;
  accent-color: #00bcd4;
  width: 18px;
  height: 18px;
}

.tc-plan-option:hover {
  border-color: #00bcd4;
  background: #1a2840;
}

.tc-plan-option.tc-current {
  border-color: rgba(0,188,212,0.4);
  background: #1a2840;
  opacity: 0.7;
}

.tc-plan-option-name {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.35rem;
}

.tc-plan-option-users,
.tc-plan-option-devices {
  font-size: 0.78rem;
  color: #8B9BB4;
  line-height: 1.4;
}

.tc-plan-option-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: #00bcd4;
  margin-top: 0.5rem;
}

/* Highlight selected plan option */
.tc-plan-option:has(input:checked) {
  border-color: #00bcd4;
  background: #1a2840;
  box-shadow: 0 0 12px rgba(0,188,212,0.3);
}

/* === Plan Request - Cancel link fix === */
.tc-form-actions a.tc-btn-outline {
  text-decoration: none;
}

/* ---- END PORTAL STYLES ------------------------------------ */

/* ─── FIX: restore correct dark card styling for inline-styled content cards ───
   (the a[style*="background"] button rule above was also incorrectly matching
   solution/service icon cards that use inline background+border-top styling
   as a card design, not as CTA buttons, making their cyan titles nearly
   invisible against the bright blue background) ─── */
a[style*="display: block"][style*="border-top"] {
  background: #1a2840 !important;
  box-shadow: none !important;
  padding: 28px !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  letter-spacing: normal !important;
}


/* ─── FIX 2: restore correct dark card styling for flex-layout inline cards
   (industry-specific solution cards use display:flex instead of display:block,
   which the earlier fix did not cover) ─── */
a[style*="display: flex"][style*="background: #1a2840"],
a[style*="display: flex"][style*="background:#1a2840"] {
  background: #1a2840 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  letter-spacing: normal !important;
}

/* TC-ALERT-OVERRIDE-START */
#system-message-container joomla-alert {
  background-color: #111e30 !important;
  border: 1px solid rgba(0, 188, 212, 0.35) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  color: #c8d8e8 !important;
}
#system-message-container joomla-alert[type="warning"] {
  --alert-accent-color: #f5a623;
  --alert-heading-text: #f5a623;
  --alert-close-button: #f5a623;
  background-color: #1a2840 !important;
  border-color: rgba(245, 166, 35, 0.4) !important;
}
#system-message-container joomla-alert[type="success"],
#system-message-container joomla-alert[type="message"] {
  --alert-accent-color: #00bcd4;
  --alert-heading-text: #00bcd4;
  --alert-close-button: #00bcd4;
  background-color: #1a2840 !important;
  border-color: rgba(0, 188, 212, 0.4) !important;
}
#system-message-container joomla-alert[type="info"],
#system-message-container joomla-alert[type="notice"] {
  --alert-accent-color: #00bcd4;
  --alert-heading-text: #00bcd4;
  --alert-close-button: #00bcd4;
  background-color: #1a2840 !important;
  border-color: rgba(0, 188, 212, 0.4) !important;
}
#system-message-container joomla-alert[type="error"],
#system-message-container joomla-alert[type="danger"] {
  --alert-accent-color: #e05263;
  --alert-heading-text: #ff8a95;
  --alert-close-button: #ff8a95;
  background-color: #1a2840 !important;
  border-color: rgba(224, 82, 99, 0.4) !important;
}
#system-message-container joomla-alert div,
#system-message-container joomla-alert .alert-message,
#system-message-container joomla-alert .alert-wrapper {
  color: #e8f1f7 !important;
}
#system-message-container joomla-alert .alert-link {
  color: #00bcd4 !important;
}
/* TC-ALERT-OVERRIDE-END */