/* ==========================================================================
   TechCA brand layer — the e2mp design language applied to this site.
   --------------------------------------------------------------------------
   Modelled on E2MP/e2mp_portal/assets/css/e2mp-brand.css: the same palette,
   the same Inter/Poppins pairing, the same section rhythm and card treatment.

   This is an overlay, not a replacement. The site's own stylesheet
   (assets/css/style.css) and the Bootstrap/BizPage vendor CSS still load
   first; everything here is scoped to the elements those files already emit,
   so the markup on all 66 pages is untouched and nothing needs rewriting to
   pick up the new look.

   Loaded once from header.php, which every page includes.
   ========================================================================== */

:root{
  --tc-ink:#0E2F33;    /* headings, dark bands            */
  --tc-teal:#1F5D57;   /* primary accent                  */
  --tc-green:#2E7D6B;  /* secondary accent, success       */
  --tc-gold:#CDA15A;   /* highlight, numerals, underlines */
  --tc-cream:#F6F2EA;  /* alternating section background  */
  --tc-tint:#eef4f2;   /* icon chips, subtle fills        */
  --tc-line:#e3ede9;   /* hairlines and card borders      */
  --tc-text:#3c4b49;   /* body copy                       */
  --tc-muted:#6d7d7a;  /* secondary copy                  */
}

/* ---------- Typography ---------------------------------------------------- */
body{
  font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--tc-text);
  font-size:15.5px;
  line-height:1.65;
}
h1,h2,h3,h4,h5,
.section-title h2,
#hero h1,
.card-title{
  font-family:"Poppins","Inter",sans-serif !important;
  color:var(--tc-ink) !important;
  letter-spacing:-.2px;
}
h1{font-size:44px;line-height:1.15;}
h2{font-size:32px;}
h3{font-size:20px;}
p{color:var(--tc-text);}

/* the vendor template paints headings in its own blue - hand them back */
.section-title p,
.section-title h2::after{color:var(--tc-muted);}

/* ---------- Top bar and header ------------------------------------------- */
#topbar{
  background:var(--tc-ink) !important;
  border-bottom:0 !important;
  padding:7px 0 !important;
  font-size:13.5px;
}
#topbar a,#topbar i,#topbar .contact-info a,#topbar span{color:#cfe0dc !important;}
#topbar a:hover{color:var(--tc-gold) !important;}

#header{
  background:#fff !important;
  box-shadow:0 1px 0 var(--tc-line), 0 6px 22px -18px rgba(14,47,51,.5) !important;
  padding:12px 0 !important;
}
#header.header-scrolled{padding:8px 0 !important;}
.nav-menu a,.nav-menu a:focus{
  color:var(--tc-ink) !important;
  font-family:"Inter",sans-serif !important;
  font-weight:500 !important;
  font-size:14.5px !important;
}
.nav-menu a:hover,.nav-menu .active > a,.nav-menu li:hover > a{color:var(--tc-teal) !important;}
.nav-menu .drop-down ul a:hover{color:var(--tc-teal) !important;background:var(--tc-tint);}

/* ---------- Hero ---------------------------------------------------------- */
#hero{
  background:
    radial-gradient(720px 320px at 88% 8%, rgba(205,161,90,.10), transparent 70%),
    linear-gradient(180deg,#fbfdfc 0%, var(--tc-cream) 100%) !important;
  padding:74px 0 78px !important;
  height:auto !important;
  min-height:0 !important;
}
#hero h1{
  font-size:52px !important;
  color:var(--tc-ink) !important;
  margin:20px 0 18px !important;
  letter-spacing:-.5px;
}
#hero h1 span,#hero h1 strong{color:var(--tc-teal) !important;}
#hero h2,#hero p{
  color:var(--tc-muted) !important;
  font-size:18px !important;
  max-width:560px;
  font-family:"Inter",sans-serif !important;
}

/* ---------- Buttons ------------------------------------------------------- */
.btn-get-started,.btn-primary,.btn-success,.get-started-btn,
.btn-services,.btn-learn-more,input[type="submit"],button[type="submit"]{
  background:var(--tc-teal) !important;
  border:1px solid var(--tc-teal) !important;
  color:#fff !important;
  border-radius:10px !important;
  padding:11px 24px !important;
  font-weight:600 !important;
  font-size:14.5px !important;
  letter-spacing:.2px;
  box-shadow:none !important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.btn-get-started:hover,.btn-primary:hover,.btn-success:hover,
.get-started-btn:hover,input[type="submit"]:hover,button[type="submit"]:hover{
  background:var(--tc-green) !important;
  border-color:var(--tc-green) !important;
  transform:translateY(-1px);
}
.btn-outline,.btn-secondary{
  background:#fff !important;
  border:1px solid var(--tc-line) !important;
  color:var(--tc-ink) !important;
  border-radius:10px !important;
  font-weight:600 !important;
}
.btn-outline:hover,.btn-secondary:hover{border-color:var(--tc-teal) !important;color:var(--tc-teal) !important;}

/* ---------- Sections and their headings ----------------------------------- */
section{padding:74px 0 !important;}
.section-title{text-align:center;max-width:640px;margin:0 auto 46px;}
.section-title h2{
  font-size:34px !important;
  margin:14px 0 12px !important;
  padding-bottom:0 !important;
}
/* the template underlines headings with a blue rule - make it the gold keyline */
.section-title h2::after,
.section-title h2::before{
  content:"" !important;
  display:block !important;
  width:52px !important;
  height:3px !important;
  background:var(--tc-gold) !important;
  border-radius:3px;
  margin:14px auto 0 !important;
  position:static !important;
}
.section-title p{color:var(--tc-muted) !important;font-size:16px !important;}

/* alternating tint, the way the e2mp home page alternates */
.services,#clients,.card-container,
section:nth-of-type(even){background:var(--tc-cream) !important;}
#hero,#header,#topbar,#footer{background-image:none;}
#hero{background:
    radial-gradient(720px 320px at 88% 8%, rgba(205,161,90,.10), transparent 70%),
    linear-gradient(180deg,#fbfdfc 0%, var(--tc-cream) 100%) !important;}

/* ---------- Cards --------------------------------------------------------- */
.icon-box,.card,.member,.box,.service-box,.card-container .card{
  background:#fff !important;
  border:1px solid var(--tc-line) !important;
  border-radius:18px !important;
  box-shadow:0 30px 60px -46px rgba(14,47,51,.45) !important;
  padding:28px !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.icon-box:hover,.card:hover,.member:hover,.box:hover{
  transform:translateY(-3px);
  box-shadow:0 34px 64px -40px rgba(14,47,51,.5) !important;
  border-color:#cfe0da !important;
}
.icon-box h4,.icon-box h4 a,.card h4,.card h3{
  color:var(--tc-ink) !important;
  font-size:18px !important;
  font-weight:600 !important;
}
.icon-box h4 a:hover{color:var(--tc-teal) !important;}
.icon-box p,.card p{color:var(--tc-muted) !important;font-size:14.5px !important;}

/* icon chips - the rounded tinted square e2mp uses */
.icon-box .icon,.icon,.card .icon{
  width:52px !important;height:52px !important;
  border-radius:14px !important;
  background:var(--tc-tint) !important;
  display:flex !important;align-items:center;justify-content:center;
  margin-bottom:16px !important;
}
.icon-box .icon i,.icon i{
  color:var(--tc-teal) !important;
  font-size:24px !important;
  line-height:1 !important;
}

/* ---------- Footer -------------------------------------------------------- */
#footer{
  background:linear-gradient(90deg,#0E2F33,#123f3a) !important;
  color:#bcccc7 !important;
  padding:56px 0 0 !important;
}
#footer h3,#footer h4{color:#fff !important;font-family:"Poppins",sans-serif !important;}
#footer p,#footer li,#footer a{color:#bcccc7 !important;font-size:14.5px;}
#footer a:hover{color:var(--tc-gold) !important;}
#footer .footer-top{background:transparent !important;padding-bottom:36px !important;}
#footer .copyright,#footer .credits{
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 0 !important;
  color:#9fb3ae !important;
  font-size:13.5px;
}
#footer .social-links a{
  background:rgba(255,255,255,.08) !important;
  border-radius:50% !important;
  color:#fff !important;
}
#footer .social-links a:hover{background:var(--tc-gold) !important;color:var(--tc-ink) !important;}

/* ---------- Tables and forms (the inner pages lean on these) -------------- */
table thead th{
  background:var(--tc-tint) !important;
  color:var(--tc-ink) !important;
  font-weight:600 !important;
  font-size:13.5px !important;
  border-color:var(--tc-line) !important;
}
table td{border-color:var(--tc-line) !important;font-size:14px;color:var(--tc-text) !important;}
.form-control,input[type="text"],input[type="email"],input[type="tel"],select,textarea{
  border:1px solid var(--tc-line) !important;
  border-radius:10px !important;
  padding:10px 13px !important;
  font-size:14.5px !important;
  color:var(--tc-text) !important;
  box-shadow:none !important;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:#9dc3ba !important;
  box-shadow:0 0 0 3px rgba(31,93,87,.10) !important;
  outline:0 !important;
}

/* ---------- Small responsive corrections ---------------------------------- */
@media (max-width:991px){
  h1,#hero h1{font-size:34px !important;}
  h2,.section-title h2{font-size:26px !important;}
  section{padding:48px 0 !important;}
  #hero{padding:52px 0 56px !important;}
}