/* ========================================
   HDEIT - HDE Info Tech  |  site.css  v2.0
   Design System - Bootstrap 5.3 Extended
   Fonts: Syne (headings) + DM Sans (body)
======================================== */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --clr-dark:       #080d16;
  --clr-dark-2:     #0f1623;
  --clr-dark-3:     #161f30;
  --clr-dark-card:  #131b28;
  --clr-light:      #f2f5fb;
  --clr-light-2:    #ffffff;
  --clr-accent:     #e63329;
  --clr-accent-h:   #ff4f44;
  --clr-accent-rgb: 230, 51, 41;
  --clr-gold:       #f5a623;
  --clr-muted:      #7a8fa6;
  --clr-border-d:   rgba(255,255,255,.07);
  --clr-border-l:   #e2e8f2;
  --ff-head:        'Syne', sans-serif;
  --ff-body:        'DM Sans', sans-serif;
  --radius:         18px;
  --radius-sm:      10px;
  --radius-xs:      6px;
  --shadow-sm:      0 4px 16px rgba(0,0,0,.08);
  --shadow-md:      0 10px 40px rgba(0,0,0,.14);
  --shadow-lg:      0 20px 64px rgba(0,0,0,.22);
  --t:              .28s cubic-bezier(.25,.46,.45,.94);
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--ff-body);
  background: var(--clr-light);
  color: var(--clr-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--ff-head); line-height: 1.1; }
img { max-width: 100%; display: block; }
a  { text-decoration: none; transition: color var(--t); }
.py-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.py-7 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

/* ─── SECTION BG ─────────────────────────────────────────── */
.bg-dark-1 { background: var(--clr-dark) !important; }
.bg-dark-2 { background: var(--clr-dark-2) !important; }
.bg-dark-3 { background: var(--clr-dark-3) !important; }
.bg-light-1 { background: var(--clr-light) !important; }
.bg-white   { background: #fff !important; }

/* ─── UTILITIES ─────────────────────────────────────────── */
.text-accent  { color: var(--clr-accent) !important; }
.text-muted-d { color: var(--clr-muted) !important; }
.ls-wide      { letter-spacing: .14em; }
.fw-800       { font-weight: 800 !important; }
.z-2          { z-index: 2; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-accent {
  background: var(--clr-accent);
  color: #fff !important;
  border: 2px solid transparent;
  border-radius: 50px;
  font-family: var(--ff-head);
  font-weight: 700;
  padding: .6rem 1.6rem;
  letter-spacing: .02em;
  transition: var(--t);
}
.btn-accent:hover {
  background: var(--clr-accent-h);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(var(--clr-accent-rgb),.45);
  color: #fff !important;
}
.btn-outline-nav {
  background: transparent;
  color: rgba(255,255,255,.85) !important;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 50px;
  font-family: var(--ff-head);
  font-weight: 600;
  padding: .55rem 1.4rem;
  transition: var(--t);
}
.btn-outline-nav:hover { border-color: #fff; color: #fff !important; background: rgba(255,255,255,.08); }
.btn-dark-outline {
  border: 2px solid var(--clr-dark);
  color: var(--clr-dark) !important;
  border-radius: 50px;
  font-family: var(--ff-head);
  font-weight: 700;
  padding: .6rem 1.6rem;
  transition: var(--t);
}
.btn-dark-outline:hover { background: var(--clr-dark); color: #fff !important; }
.btn-light-outline {
  border: 2px solid rgba(255,255,255,.4);
  color: #fff !important;
  border-radius: 50px;
  font-family: var(--ff-head);
  font-weight: 700;
  padding: .6rem 1.6rem;
  transition: var(--t);
}
.btn-light-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ─── NAVBAR ─────────────────────────────────────────────── */
.hdeit-nav {
  background: transparent;
  padding: 1.1rem 0;
  transition: background var(--t), padding var(--t), backdrop-filter var(--t), box-shadow var(--t);
  z-index: 1050;
}
.hdeit-nav.scrolled {
  background: rgba(8,13,22,.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .65rem 0;
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.brand-mark {
  width: 50px; height: 50px;
  background: var(--clr-accent);
  border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  transition: var(--t);
}
.brand-mark--lg { width: 48px; height: 48px; font-size: 1.35rem; border-radius: 13px; }
.brand-mark:hover { transform: rotate(-5deg) scale(1.08); }
.brand-name {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  display: block;
}
.brand-tagline {
  font-size: .62rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-top: 1px;
}
.nav-link {
  color: rgba(255,255,255,.78) !important;
  font-weight: 500;
  padding: .42rem .8rem !important;
  border-radius: 8px;
  transition: var(--t);
  font-size: .92rem;
}
.nav-link:hover, .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.09);
}
/* Dropdown */
.hdeit-dropdown {
  background: var(--clr-dark-2);
  border: 1px solid var(--clr-border-d);
  border-radius: var(--radius-sm);
  padding: .5rem;
  box-shadow: var(--shadow-lg);
}
.hdeit-dropdown .dropdown-item {
  color: rgba(255,255,255,.72);
  border-radius: 8px;
  padding: .55rem 1rem;
  font-size: .88rem;
  transition: var(--t);
}
.hdeit-dropdown .dropdown-item i { color: var(--clr-accent); }
.hdeit-dropdown .dropdown-item:hover { background: rgba(255,255,255,.07); color: #fff; }
/* Hamburger custom */
.nav-hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: var(--t); }

/* ─── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
  position: relative;
  padding: 130px 0 80px;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(8,13,22,.96) 45%, rgba(8,13,22,.7) 100%);
}
.page-hero-content { position: relative; z-index: 2; }
.breadcrumb-hdeit { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: rgba(255,255,255,.45); margin-bottom: 1rem; }
.breadcrumb-hdeit a { color: rgba(255,255,255,.55); }
.breadcrumb-hdeit a:hover { color: var(--clr-accent); }
.breadcrumb-hdeit .sep { color: rgba(255,255,255,.25); }

/* ─── SECTION TYPOGRAPHY ─────────────────────────────────── */
.section-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: .5rem;
  display: block;
}
.section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
  line-height: 1.08;
}
.section-body {
  color: #5c6f85;
  line-height: 1.8;
  font-size: .97rem;
}
.section-body--white { color: rgba(255,255,255,.6); }

/* ─── TICKER ─────────────────────────────────────────────── */
.ticker-strip {
  background: var(--clr-accent);
  overflow: hidden;
  white-space: nowrap;
  padding: .85rem 0;
}
.ticker-track {
  display: inline-flex;
  gap: 2rem;
  animation: tickerScroll 28s linear infinite;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.ticker-sep { color: rgba(255,255,255,.35); font-size: .45rem; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── HERO (home) ────────────────────────────────────────── */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(8,13,22,.96) 55%, rgba(8,13,22,.65) 100%);
}
.hero-content { padding-top: 90px; position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(230,51,41,.12);
  border: 1px solid rgba(230,51,41,.3);
  color: var(--clr-accent);
  border-radius: 50px;
  padding: .32rem 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-badge i { font-size: .8rem; }
.hero-title {
  font-size: clamp(2.8rem, 8vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -.03em;
  margin-bottom: 1.2rem;
}
.hero-title .line-accent { color: var(--clr-accent); }
.hero-desc {
  font-size: 1.08rem;
  color: rgba(255,255,255,.6);
  max-width: 500px;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.8rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.08); }
.stat-item .num { font-family: var(--ff-head); font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-item .lbl { font-size: .72rem; color: var(--clr-muted); text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; }
/* Hero visual panel */
.hero-visual { position: relative; height: 520px; }
.hero-img-main {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 78%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.06);
}
.hero-img-float {
  position: absolute;
  bottom: 20px; left: 0;
  width: 44%;
  height: 230px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 3px solid var(--clr-dark);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.hero-badge-float {
  position: absolute;
  top: 30px; left: 10%;
  background: rgba(8,13,22,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: .8rem 1.2rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.hero-badge-float .icon { width:40px;height:40px;background:var(--clr-accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff; }
.hero-badge-float strong { display:block;color:#fff;font-size:.9rem;font-family:var(--ff-head); }
.hero-badge-float span   { display:block;color:var(--clr-muted);font-size:.72rem; }
/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.3);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  z-index: 3;
}
.scroll-hint-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:scaleY(1);opacity:.4;} 50%{transform:scaleY(.65);opacity:1;} }

/* ─── ABOUT GRID (home) ──────────────────────────────────── */
.about-img-wrap { position: relative; }
.about-img-main { width:100%;height:440px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-md); }
.about-img-sub  { position:absolute;bottom:-24px;right:-24px;width:44%;height:200px;object-fit:cover;border-radius:var(--radius);border:4px solid var(--clr-light);box-shadow:var(--shadow-md); }
.about-badge {
  position:absolute;top:24px;left:-20px;
  background:var(--clr-accent);
  color:#fff;
  border-radius:14px;
  padding:1rem 1.3rem;
  text-align:center;
  box-shadow:0 8px 24px rgba(230,51,41,.4);
  z-index:2;
  font-family:var(--ff-head);
}
.about-badge .num { font-size:2rem;font-weight:800;line-height:1;display:block; }
.about-badge .lbl { font-size:.72rem;opacity:.85;letter-spacing:.08em; }
.check-list { list-style:none;padding:0;margin:0; display:flex;flex-direction:column;gap:.7rem; }
.check-list li { display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:#445; }
.check-list li i { color:var(--clr-accent);font-size:1.1rem;flex-shrink:0; }

/* ─── SERVICE CARDS ──────────────────────────────────────── */
.svc-card {
  background: var(--clr-dark-card);
  border: 1px solid var(--clr-border-d);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
  display: flex; flex-direction: column;
}
.svc-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  border-color: rgba(var(--clr-accent-rgb),.35);
}
.svc-img { height: 196px; overflow: hidden; flex-shrink: 0; }
.svc-img img { width:100%;height:100%;object-fit:cover;transition:transform .55s ease; }
.svc-card:hover .svc-img img { transform: scale(1.07); }
.svc-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.svc-icon {
  width: 46px; height: 46px;
  background: rgba(var(--clr-accent-rgb),.12);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-accent);
  font-size: 1.35rem;
  margin-bottom: .9rem;
}
.svc-body h4 { color:#fff;font-size:1.05rem;font-weight:700;margin-bottom:.5rem; }
.svc-body p  { color:var(--clr-muted);font-size:.86rem;line-height:1.65;flex:1; }
.svc-link {
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--clr-accent);font-size:.84rem;font-weight:700;
  margin-top:1rem;
  transition:gap var(--t), color var(--t);
}
.svc-link:hover { gap:.8rem;color:var(--clr-accent-h); }

/* Full services page: detail card */
.svc-detail-card {
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--clr-border-l);
  height:100%;
  transition:var(--t);
}
.svc-detail-card:hover { box-shadow:var(--shadow-md);transform:translateY(-5px); }
.svc-detail-img { height:220px;overflow:hidden; }
.svc-detail-img img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.svc-detail-card:hover .svc-detail-img img { transform:scale(1.06); }
.svc-detail-body { padding:1.8rem; }
.svc-detail-icon { width:52px;height:52px;background:rgba(var(--clr-accent-rgb),.1);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--clr-accent);font-size:1.5rem;margin-bottom:1rem; }
.svc-detail-body h3 { font-size:1.15rem;font-weight:700;margin-bottom:.6rem; }
.svc-detail-body p  { color:#6b7a8d;font-size:.9rem;line-height:1.7; }
.svc-features { list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-direction:column;gap:.4rem; }
.svc-features li { font-size:.85rem;color:#5a6a80;display:flex;align-items:center;gap:.5rem; }
.svc-features li::before { content:'✓';color:var(--clr-accent);font-weight:800;font-size:.9rem; }

/* ─── PROCESS ────────────────────────────────────────────── */
.process-card {
  background:#fff;
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  border:1px solid var(--clr-border-l);
  box-shadow:var(--shadow-sm);
  position:relative;
  text-align:center;
  transition:var(--t);
  height:100%;
}
.process-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-md); }
.process-num { position:absolute;top:1.2rem;right:1.4rem;font-family:var(--ff-head);font-size:3.5rem;font-weight:800;color:rgba(230,51,41,.06);line-height:1; }
.process-icon { width:62px;height:62px;background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-h));border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff;margin:0 auto 1.1rem;box-shadow:0 6px 20px rgba(var(--clr-accent-rgb),.3); }
.process-card h5 { font-weight:700;font-size:1.05rem;margin-bottom:.5rem; }
.process-card p  { font-size:.86rem;color:#6b7a8d;line-height:1.65; }

/* ─── TESTIMONIAL ────────────────────────────────────────── */
.testi-card {
  background:#fff;
  border:1px solid var(--clr-border-l);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:var(--shadow-sm);
  transition:var(--t);
  height:100%;
  display:flex;flex-direction:column;
}
.testi-card:hover { box-shadow:var(--shadow-md);transform:translateY(-4px); }
.testi-card--dark { background:var(--clr-dark-card);border-color:rgba(var(--clr-accent-rgb),.2); }
.testi-card--dark .testi-quote { color:rgba(255,255,255,.7); }
.testi-card--dark .author-name { color:#fff; }
.testi-card--dark .author-role { color:var(--clr-muted); }
.testi-stars { color:var(--clr-gold);font-size:.85rem;margin-bottom:.9rem; }
.testi-quote { font-style:italic;color:#4a5a6d;line-height:1.75;font-size:.93rem;flex:1;margin-bottom:1.2rem; }
.testi-author { display:flex;align-items:center;gap:.85rem; }
.testi-author img { width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--clr-accent); }
.author-name { font-weight:700;font-size:.9rem;display:block; }
.author-role { font-size:.76rem;color:var(--clr-muted); }

/* ─── PORTFOLIO / GALLERY ────────────────────────────────── */
.portfolio-filters { display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.5rem; }
.filter-btn {
  padding:.4rem 1.1rem;
  border-radius:50px;
  border:1.5px solid var(--clr-border-l);
  background:transparent;
  color:#5a6a80;
  font-size:.84rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--t);
  font-family:var(--ff-body);
}
.filter-btn:hover, .filter-btn.active { background:var(--clr-accent);border-color:var(--clr-accent);color:#fff; }
.portfolio-grid { columns:3;gap:1.2rem; }
@media(max-width:991.98px){ .portfolio-grid{columns:2;} }
@media(max-width:575.98px){ .portfolio-grid{columns:1;} }
.portfolio-item {
  break-inside:avoid;
  margin-bottom:1.2rem;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  border:1px solid var(--clr-border-l);
}
.portfolio-item img { width:100%;display:block;transition:transform .5s ease; }
.portfolio-item:hover img { transform:scale(1.05); }
.portfolio-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,13,22,.9) 40%, transparent 100%);
  opacity:0;
  transition:opacity var(--t);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;
}
.portfolio-item:hover .portfolio-overlay { opacity:1; }
.portfolio-overlay h5 { color:#fff;font-size:.95rem;margin-bottom:.2rem; }
.portfolio-overlay span { color:var(--clr-accent);font-size:.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em; }
.portfolio-overlay .view-btn {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);
  width:44px;height:44px;
  background:var(--clr-accent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.2rem;
  transition:transform var(--t);
}
.portfolio-item:hover .view-btn { transform:translate(-50%,-50%) scale(1); }

/* ─── BLOG CARDS ─────────────────────────────────────────── */
.blog-card {
  background:#fff;
  border:1px solid var(--clr-border-l);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--t);
  height:100%;
}
.blog-card:hover { box-shadow:var(--shadow-md);transform:translateY(-4px); }
.blog-img { height:200px;overflow:hidden;position:relative; }
.blog-img img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.blog-card:hover .blog-img img { transform:scale(1.06); }
.blog-cat { position:absolute;top:12px;left:12px;background:var(--clr-accent);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .75rem;border-radius:50px;letter-spacing:.08em;text-transform:uppercase; }
.blog-body { padding:1.5rem; }
.blog-meta { display:flex;align-items:center;gap:1rem;font-size:.76rem;color:var(--clr-muted);margin-bottom:.8rem; }
.blog-meta i { color:var(--clr-accent); }
.blog-card h4 { font-size:1.05rem;font-weight:700;line-height:1.4;margin-bottom:.6rem; color:var(--clr-dark); }
.blog-card h4:hover { color:var(--clr-accent); }
.blog-card p  { font-size:.86rem;color:#6b7a8d;line-height:1.65; }
.read-more { color:var(--clr-accent);font-size:.84rem;font-weight:700;display:inline-flex;align-items:center;gap:.3rem;margin-top:.8rem;transition:gap var(--t); }
.read-more:hover { gap:.7rem;color:var(--clr-accent-h); }

/* ─── CONTACT ────────────────────────────────────────────── */
.contact-info-card { background:var(--clr-dark-card);border:1px solid var(--clr-border-d);border-radius:var(--radius);padding:2rem;height:100%; }
.contact-icon { width:52px;height:52px;background:rgba(var(--clr-accent-rgb),.12);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--clr-accent);font-size:1.4rem;margin-bottom:1rem; }
.contact-info-card h5 { color:#fff;font-weight:700;font-size:.95rem;margin-bottom:.3rem; }
.contact-info-card p, .contact-info-card a { color:var(--clr-muted);font-size:.88rem; }
.contact-info-card a:hover { color:var(--clr-accent); }
.contact-form-wrap { background:#fff;border-radius:var(--radius);padding:2.5rem;box-shadow:var(--shadow-md);border:1px solid var(--clr-border-l); }
.form-label { font-size:.84rem;font-weight:600;color:#3a4a5d;margin-bottom:.4rem; }
.form-control, .form-select {
  border-radius:var(--radius-sm);
  border:1.5px solid #d8e0eb;
  padding:.7rem 1rem;
  font-size:.9rem;
  transition:var(--t);
  font-family:var(--ff-body);
}
.form-control:focus, .form-select:focus {
  border-color:var(--clr-accent);
  box-shadow:0 0 0 .2rem rgba(var(--clr-accent-rgb),.15);
  outline:none;
}
.map-embed { border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md); }

/* ─── LOGIN PAGE ─────────────────────────────────────────── */
.login-page { min-height:100vh;display:flex;align-items:center;background:var(--clr-dark-2); }
.login-card {
  background:var(--clr-dark-card);
  border:1px solid var(--clr-border-d);
  border-radius:var(--radius);
  padding:2.5rem 2.2rem;
  width:100%;max-width:440px;
  margin:0 auto;
  box-shadow:var(--shadow-lg);
}
.login-card .form-label { color:rgba(255,255,255,.6); }
.login-card .form-control {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  color:#fff;
}
.login-card .form-control:focus { border-color:var(--clr-accent);box-shadow:none; }
.login-card .form-control::placeholder { color:rgba(255,255,255,.25); }

/* ─── TECH STACK ─────────────────────────────────────────── */
.tech-pill {
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border-d);
  border-radius:50px;
  padding:.5rem 1.1rem;
  color:rgba(255,255,255,.72);
  font-size:.84rem;font-weight:500;
  transition:var(--t);
}
.tech-pill i { color:var(--clr-accent);font-size:.95rem; }
.tech-pill:hover { background:rgba(var(--clr-accent-rgb),.12);border-color:rgba(var(--clr-accent-rgb),.3);color:#fff; }

/* ─── CTA BANNER ─────────────────────────────────────────── */
.cta-section { position:relative;overflow:hidden;padding:7rem 0; }
.cta-bg { position:absolute;inset:0;background-size:cover;background-position:center; }
.cta-overlay { position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,13,22,.93) 50%,rgba(230,51,41,.6) 100%); }

/* ─── TEAM ───────────────────────────────────────────────── */
.team-card { background:#fff;border:1px solid var(--clr-border-l);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--t);text-align:center; }
.team-card:hover { box-shadow:var(--shadow-md);transform:translateY(-5px); }
.team-img { height:240px;overflow:hidden;position:relative; }
.team-img img { width:100%;height:120%;object-fit:cover;transition:transform .5s ease; }
.team-card:hover .team-img img { transform:scale(1.06); }
.team-body { padding:1.4rem 1rem 1.6rem; }
.team-body h5 { font-weight:700;font-size:1rem;margin-bottom:.2rem; }
.team-body small { color:var(--clr-accent);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
.team-social { display:flex;justify-content:center;gap:.5rem;margin-top:.8rem; }
.team-social a { width:32px;height:32px;border:1px solid var(--clr-border-l);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--clr-muted);font-size:.85rem;transition:var(--t); }
.team-social a:hover { background:var(--clr-accent);border-color:var(--clr-accent);color:#fff; }

/* ─── COUNTER ────────────────────────────────────────────── */
.counter-strip { background:var(--clr-dark-3);border-top:1px solid var(--clr-border-d);border-bottom:1px solid var(--clr-border-d); }
.counter-item { text-align:center;padding:2.5rem 1rem; }
.counter-num { font-family:var(--ff-head);font-size:3rem;font-weight:800;color:#fff;line-height:1;display:block; }
.counter-num span { color:var(--clr-accent); }
.counter-lbl { font-size:.78rem;color:var(--clr-muted);text-transform:uppercase;letter-spacing:.12em;margin-top:.4rem;display:block; }

/* ─── SOCIAL LINKS ───────────────────────────────────────── */
.social-row { display:flex;gap:.6rem;flex-wrap:wrap; }
.social-row a {
  width:38px;height:38px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);
  font-size:1rem;
  transition:var(--t);
}
.social-row a:hover { background:var(--clr-accent);border-color:var(--clr-accent);color:#fff;transform:translateY(-2px); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.hdeit-footer { background:var(--clr-dark); }
.footer-top   { border-bottom:1px solid var(--clr-border-d); }
.footer-heading { font-family:var(--ff-head);font-weight:700;color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.2rem; }
.footer-links { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem; }
.footer-links a { color:rgba(255,255,255,.42);font-size:.86rem;transition:var(--t);display:inline-flex;align-items:center;gap:.35rem; }
.footer-links a:hover { color:var(--clr-accent);padding-left:4px; }
.newsletter-wrap { display:flex;border-radius:var(--radius-sm);overflow:hidden;border:1px solid rgba(255,255,255,.1); }
.newsletter-wrap .form-control { background:rgba(255,255,255,.06);border:none;color:#fff;border-radius:0;flex:1; }
.newsletter-wrap .form-control::placeholder { color:rgba(255,255,255,.25); }
.newsletter-wrap .form-control:focus { box-shadow:none;border:none; }
.newsletter-wrap .btn { border-radius:0;padding:.6rem 1rem; }
.footer-contact-list { display:flex;flex-direction:column;gap:.65rem;margin-top:.5rem; }
.footer-contact-list > div { display:flex;align-items:flex-start;gap:.7rem;font-size:.83rem;color:rgba(255,255,255,.42); }
.footer-contact-list i { color:var(--clr-accent);margin-top:2px;flex-shrink:0; }
.footer-contact-list a { color:rgba(255,255,255,.42); }
.footer-contact-list a:hover { color:var(--clr-accent); }
.footer-bottom { border-top:1px solid var(--clr-border-d); }

/* ─── BACK TO TOP ────────────────────────────────────────── */
.btt-btn {
  position:fixed;bottom:2rem;right:2rem;
  width:46px;height:46px;
  background:var(--clr-accent);
  color:#fff;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;transform:translateY(20px);
  transition:var(--t);
  box-shadow:0 4px 18px rgba(var(--clr-accent-rgb),.45);
  z-index:999;
}
.btt-btn.visible { opacity:1;transform:translateY(0); }
.btt-btn:hover { background:var(--clr-accent-h);transform:translateY(-3px); }

/* ─── ALERTS / TOAST ─────────────────────────────────────── */
.toast-success {
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--clr-dark-card);
  color:#fff;
  border:1px solid rgba(var(--clr-accent-rgb),.3);
  border-radius:14px;
  padding:.9rem 1.6rem;
  font-size:.9rem;
  z-index:9999;
  opacity:0;
  transition:all .4s ease;
  display:flex;align-items:center;gap:.7rem;
}
.toast-success.show { opacity:1;transform:translateX(-50%) translateY(0); }
.toast-success i { color:var(--clr-accent);font-size:1.2rem; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:991.98px){
  .hero-visual { display:none; }
  .about-img-sub { right:-10px;bottom:-10px; }
  .about-badge { left:-5px; }
}
@media (max-width:767.98px){
  .about-img-main { height:300px; }
  .about-img-sub  { width:50%;height:150px; }
  .contact-form-wrap { padding:1.5rem; }
  .login-card { padding:2rem 1.4rem; }
}
@media (max-width:575.98px){
  .hero-title { font-size:2.6rem; }
  .hero-stats { gap:1.2rem; }
  .cta-section { padding:5rem 0; }
}
@media (max-width: 768px) {
            [data-aos="fade-left"] {
                transform: translate3d(0px, 0, 0);
            }

            .g-5,
            .gx-5 {
                --bs-gutter-x: 0 !important;
            }

            .g-5,
            .gy-5 {
                --bs-gutter-y: 0 !important;
            }
			
            .togglemenubg{
                background-color:var(--clr-dark-2);
            }
        }