/* ===== ResNet Systems — brand overrides on top of Bootstrap ===== */
:root {
  --brand:#1e5ed6;
  --brand-dark:#1e3c8f;
  --muted:#666;
  --blue-1:#0a66ff;
  --blue-2:#257aff;
  --blue-3:#0b6eed;
  --blue-4:#388cff;
  --blue-5:#66a6ff;
  --max-width:1100px;
}

body { font-family: 'Ubuntu', Segoe UI, Arial, sans-serif; color: #111; }

/* ---- Navbar ---- */
.site-header {
  background: linear-gradient(180deg, rgba(11,110,237,.92), rgba(11,110,237,.78));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-header .navbar-brand img { width:38px; height:38px; border-radius:8px; object-fit:cover; }
.site-header .navbar-brand span { font-weight:700; color:#fff; font-size:17px; }
.site-header .nav-link { color:rgba(255,255,255,.9) !important; font-weight:500; }
.site-header .nav-link:hover { color:#fff !important; }
.site-header .nav-link i { margin-right:5px; }
.site-header .navbar-toggler { border-color:rgba(255,255,255,.4); }
.site-header .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='rgba%28255%2c255%2c255%2c0.9%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Active page indicator */
.site-header .nav-link.active-page { color:#fff !important; text-decoration:underline; text-underline-offset:4px; }

/* ---- Hero ---- */
.hero-section {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, hsla(215,80%,45%,.95) 0%, hsla(215,70%,60%,.3) 60%, rgba(255,255,255,0) 100%);
  color: var(--brand-dark);
}
.hero-section h1 { font-size: clamp(28px,5vw,52px); font-weight:800; }
.hero-section .tagline { font-size: clamp(24px,4vw,44px); font-weight:800; opacity:.9; }
.hero-section p { opacity:.92; }

/* ---- Buttons ---- */
.btn-brand { background: linear-gradient(90deg,var(--blue-2),var(--blue-3)); color:#fff; border:0; }
.btn-brand:hover { color:#fff; opacity:.9; }
.btn-outline-brand { border:2px solid #fff; color:#fff; background:transparent; }
.btn-outline-brand:hover { background:#fff; color:var(--brand-dark); }

/* ---- Cards ---- */
.rs-card {
  border-radius:12px;
  border:1px solid rgba(10,20,40,.06);
  box-shadow:0 6px 20px rgba(10,20,40,.05);
  transition: transform .18s ease, box-shadow .18s ease;
  background:#fff;
}
.rs-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(10,20,40,.1); }
.rs-card .card-accent { width:6px; border-radius:6px 0 0 6px; background:linear-gradient(180deg,var(--blue-2),var(--blue-3)); }

/* ---- Quick-link cards ---- */
.quick-card { text-decoration:none; color:inherit; display:flex; gap:14px; align-items:center; }
.quick-card .q-icon { width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; }
.quick-card h5 { margin:0; color:var(--brand-dark); }
.quick-card p { margin:4px 0 0; color:var(--muted); font-size:14px; }

/* ---- Footer ---- */
.site-footer {
  background: linear-gradient(135deg, var(--blue-3), var(--brand-dark));
  color:#fff;
}
.site-footer h5 { color:#fff; }
.site-footer a { color:rgba(255,255,255,.85); text-decoration:none; }
.site-footer a:hover { color:#fff; }
.site-footer .footer-bottom { border-top:1px solid rgba(255,255,255,.1); }

/* ---- Project cards ---- */
.project-card { position:relative; overflow:hidden; border-radius:10px; }
.project-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.project-card .overlay {
  position:absolute; inset:auto 0 0; padding:14px;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);
  color:#fff; opacity:0; transform:translateY(8px);
  transition:all .22s ease;
}
.project-card:hover .overlay { opacity:1; transform:none; }

/* ---- Testimonials carousel ---- */
.testimonial-slide { display:none; }
.testimonial-slide.active { display:block; }
.avatar img { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.rating { color:var(--blue-2); letter-spacing:1px; }

/* ---- Misc ---- */
main { padding-top: 72px; }
.page-intro { max-width:700px; margin:0 auto 24px; text-align:center; }
.badge-course { background:var(--brand); color:#fff; padding:4px 10px; border-radius:20px; font-size:13px; }
.details-panel { max-height:0; overflow:hidden; transition:max-height .34s ease, opacity .28s ease; opacity:0; }
.course.open .details-panel { max-height:400px; opacity:1; }
.course.open .chev i { transform:rotate(180deg); }
.chev i { transition:transform .28s ease; display:inline-block; }
.details-toggle { background:transparent; border:0; color:var(--brand); cursor:pointer; font-weight:600; padding:0; }

@keyframes floatUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.float-in { animation: floatUp .5s ease both; }