/* Gateway IT Solutions — theme layer on top of Bootstrap 5.3 */

:root {
  --git-navy: #0b2545;
  --git-navy-2: #13345f;
  --git-teal: #16b1a5;
  --git-teal-dark: #0f8c83;
  --git-amber: #f5a623;
  --git-ink: #16202e;
  --git-surface: #ffffff;
  --git-muted-bg: #f4f7fb;
  --git-border: #e4eaf2;
  --git-text: #24313f;
  --git-text-muted: #5c6b7d;
  --git-radius: 14px;
  --git-shadow: 0 18px 45px -28px rgba(11, 37, 69, .45);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-bs-theme="dark"] {
  --git-navy: #071a33;
  --git-surface: #101a29;
  --git-muted-bg: #0b1420;
  --git-border: #22303f;
  --git-text: #e6edf5;
  --git-text-muted: #9aabbd;
  --git-shadow: 0 18px 45px -30px rgba(0, 0, 0, .8);
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--git-text);
  background: var(--git-muted-bg);
}

[data-bs-theme="dark"] body { background: #08101b; }

h1, h2, h3, h4, .display-4, .navbar-brand {
  font-family: "Poppins", var(--bs-body-font-family);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--git-text);
}

a { text-decoration: none; }
.text-muted-2 { color: var(--git-text-muted) !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; }
.btn-git {
  background: linear-gradient(135deg, var(--git-teal), var(--git-teal-dark));
  color: #fff; border: 0;
}
.btn-git:hover, .btn-git:focus { color: #fff; filter: brightness(1.07); box-shadow: 0 10px 24px -12px rgba(22, 177, 165, .8); }
.btn-navy { background: var(--git-navy); color: #fff; border: 0; }
.btn-navy:hover { background: var(--git-navy-2); color: #fff; }
.btn-outline-git { border: 1.5px solid var(--git-teal); color: var(--git-teal); background: transparent; }
.btn-outline-git:hover { background: var(--git-teal); color: #fff; }
.btn-ghost { border: 1.5px solid var(--git-border); color: var(--git-text); }
.btn-ghost:hover { border-color: var(--git-teal); color: var(--git-teal); }

/* ---------- Navbar ---------- */
.navbar-git {
  background: color-mix(in srgb, var(--git-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--git-border);
}
.navbar-git .nav-link { color: var(--git-text); font-weight: 500; font-size: .95rem; }
.navbar-git .nav-link:hover, .navbar-git .nav-link.active { color: var(--git-teal); }
.navbar-brand img { height: 42px; width: auto; }
.brand-text { font-size: 1.02rem; line-height: 1.05; color: var(--git-navy); }
[data-bs-theme="dark"] .brand-text { color: #eaf2fb; }
.brand-text small { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--git-teal); }

/* ---------- Hero ---------- */
.hero {
  background:
    linear-gradient(115deg, rgba(11, 37, 69, .93) 0%, rgba(11, 37, 69, .72) 48%, rgba(22, 177, 165, .55) 100%),
    url("../img/hero.jpg") center/cover no-repeat;
  color: #fff; position: relative;
}
.hero h1, .hero h2 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .88); }
.hero-stat { border-left: 3px solid var(--git-teal); padding-left: .9rem; }
.hero-stat strong { font-size: 1.7rem; display: block; line-height: 1; }
.hero-stat span { font-size: .8rem; color: rgba(255, 255, 255, .78); }

.page-head {
  background: linear-gradient(120deg, var(--git-navy), var(--git-navy-2) 65%, var(--git-teal-dark));
  color: #fff; padding: 4.5rem 0 3rem;
}
.page-head h1 { color: #fff; }
.page-head p { color: rgba(255, 255, 255, .82); margin-bottom: 0; }
.page-head .breadcrumb a { color: rgba(255, 255, 255, .8); }
.page-head .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }
.page-head .breadcrumb-item.active { color: var(--git-amber); }

/* ---------- Cards & sections ---------- */
section { padding: 4.2rem 0; }
.section-tag {
  text-transform: uppercase; letter-spacing: .18em; font-size: .74rem;
  font-weight: 700; color: var(--git-teal);
}
.card-git {
  background: var(--git-surface); border: 1px solid var(--git-border);
  border-radius: var(--git-radius); box-shadow: var(--git-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.card-git:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -26px rgba(11, 37, 69, .5); }
.icon-badge {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--git-teal) 14%, transparent); color: var(--git-teal);
  font-size: 1.15rem;
}
.chip {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: .25rem .65rem;
  border-radius: 999px; background: color-mix(in srgb, var(--git-navy) 10%, transparent);
  color: var(--git-navy); letter-spacing: .04em;
}
[data-bs-theme="dark"] .chip { background: rgba(255, 255, 255, .08); color: #cfe0f0; }
.bg-surface { background: var(--git-surface) !important; }
.bg-muted-2 { background: var(--git-muted-bg) !important; }
.divider-dot { color: var(--git-teal); }

.accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--git-teal) 12%, transparent); color: var(--git-navy); }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { color: #eaf2fb; }
.accordion-item { border-radius: 12px !important; overflow: hidden; margin-bottom: .6rem; border: 1px solid var(--git-border); }

.gallery-tile { position: relative; overflow: hidden; border-radius: var(--git-radius); }
.gallery-tile img { width: 100%; height: 230px; object-fit: cover; transition: transform .5s ease; }
.gallery-tile:hover img { transform: scale(1.07); }
.gallery-tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(11, 37, 69, .9)); color: #fff; font-size: .88rem;
}

.avatar-init {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--git-navy), var(--git-teal)); color: #fff;
  font-weight: 700; font-size: 1.15rem; flex: 0 0 auto;
}
.star { color: var(--git-amber); }

/* ---------- Floating actions ---------- */
.float-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: grid; gap: 10px; }
.float-btn {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.35rem; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); border: 0;
}
.float-btn:hover { color: #fff; transform: translateY(-3px); }
.wa { background: #25d366; }
.chat { background: var(--git-navy); }
.top { background: var(--git-teal); }

/* ---------- Footer ---------- */
.footer { background: var(--git-navy); color: rgba(255, 255, 255, .75); padding: 3.4rem 0 1.4rem; }
.footer h5, .footer a { color: #fff; }
.footer a { opacity: .8; }
.footer a:hover { opacity: 1; color: var(--git-teal); }
.footer hr { border-color: rgba(255, 255, 255, .14); }

/* ---------- Dashboard shells ---------- */
.side-nav { background: var(--git-surface); border: 1px solid var(--git-border); border-radius: var(--git-radius); padding: .6rem; position: sticky; top: 90px; }
.side-nav a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 10px;
  color: var(--git-text); font-weight: 500; font-size: .94rem;
}
.side-nav a:hover { background: var(--git-muted-bg); }
.side-nav a.active { background: var(--git-navy); color: #fff; }
.stat-tile { border-radius: var(--git-radius); padding: 1.1rem 1.2rem; background: var(--git-surface); border: 1px solid var(--git-border); }
.stat-tile strong { font-size: 1.6rem; display: block; }
.panel { display: none; }
.panel.show { display: block; }
.table > :not(caption) > * > * { background: transparent; }
.cert-doc {
  border: 10px double var(--git-teal); border-radius: 8px; padding: 2.2rem;
  background: var(--git-surface); text-align: center;
}

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.count-up { font-variant-numeric: tabular-nums; }

@media (max-width: 991px) {
  .side-nav { position: static; }
  .hero { text-align: left; }
}