/* =========================================================
   Suresh TechLabs — style.css
   Design tokens, base, layout, components, responsive rules
   ========================================================= */

:root {
  /* Palette — sampled directly from the Suresh TechLabs logo */
  --color-white: #FFFFFF;
  --color-bg: #F8FAFC;
  --color-navy: #0A2A7A;
  --color-navy-2: #0029A3;
  --color-red: #E00000;
  --color-red-dark: #B80000;
  --color-rose: #E11D48;
  --color-blue: #0284C7;
  --color-blue-dark: #026aa3;
  --color-teal: #0D9488;
  --color-teal-dark: #0b7c72;
  --color-border: #E2E8F0;
  --color-muted: #51606F;

  /* Typography */
  --font-base: 'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-h1: clamp(1.9rem, 1.1rem + 3.2vw, 2.85rem);
  --fs-h2: clamp(1.5rem, 1rem + 2vw, 2.1rem);
  --fs-h3: clamp(1.1rem, 0.95rem + 0.7vw, 1.3rem);
  --fs-body: 1rem;

  /* Layout */
  --container-max: 1400px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(15, 41, 66, 0.07);
  --shadow-md: 0 10px 28px rgba(15, 41, 66, 0.12);
  --header-height: 76px;
  --announcement-height: 40px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  overflow-x: clip;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--announcement-height) + 12px); }
body {
  font-family: var(--font-base);
  color: var(--color-navy);
  background: var(--color-white);
  line-height: 1.6;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll {
  overflow: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 800; color: var(--color-navy); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { color: var(--color-muted); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--color-blue);
  color: #fff; padding: 12px 20px; z-index: 10000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: 24px; }

section { padding: 72px 24px; width: 100%; }
.section-header { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-header p { margin-top: 12px; }
.section-text { max-width: 900px; margin: 0 auto; color: var(--color-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 700;
  background: var(--color-red); color: #fff; transition: transform .15s ease, background .2s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--color-red-dark); transform: translateY(-2px); }
.btn.btn-outline { background: transparent; color: var(--color-navy); border: 2px solid var(--color-navy); }
.btn.btn-outline:hover { background: var(--color-navy); color: #fff; }
.btn.btn-teal { background: var(--color-blue); color: #fff; }
.btn.btn-teal:hover { background: var(--color-blue-dark); }
.btn.btn-navy { background: var(--color-navy); }
.btn.btn-navy:hover { background: var(--color-navy-2); }

.btn.btn-blue {
  background: var(--color-blue);
  color: #ffffff !important;
  border: 2px solid var(--color-blue);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  font-weight: 700;
}
.btn.btn-blue:hover {
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2, 106, 163, 0.45);
}

.btn.btn-hero-outline,
.btn.btn-outline-light {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn.btn-hero-outline:hover,
.btn.btn-outline-light:hover {
  background: #ffffff;
  color: var(--color-navy) !important;
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* ---------- Announcement bar ---------- */
.announcement-bar {
  background: var(--color-navy); color: #fff; text-align: center;
  font-size: 0.9rem; padding: 8px 16px; min-height: var(--announcement-height);
  display: flex; align-items: center; justify-content: center;
}
.announcement-bar a { color: #fff; }
.announcement-bar a:hover { text-decoration: underline; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(10, 42, 122, 0.04);
}

.navbar {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 24px;
  gap: 16px;
  position: relative;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 170px;
  z-index: 1002;
}

.logo img {
  height: 42px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

/* .nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
}
.nav-menu a {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-navy);
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
} */

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px; /* Increased gap */
  flex: 1;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
}
.nav-menu a {
  font-size: 0.96rem; /* Increased text size */
  font-weight: 600;
  color: var(--color-navy);
  padding: 8px 4px;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--color-red);
  transition: width 0.2s ease;
  border-radius: 2px;
}

.nav-menu a:hover {
  color: var(--color-red);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 100%;
}

.nav-menu a.active {
  color: var(--color-red);
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 170px;
  flex-shrink: 0;
}

/* .nav-cta {
  background: var(--color-navy) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-navy);
  transition: all 0.2s ease !important;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.nav-cta::after {
  display: none !important;
}

.nav-cta:hover {
  background: var(--color-red) !important;
  border-color: var(--color-red) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(224, 0, 0, 0.2);
} */

.nav-cta {
  background: var(--color-navy) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;     /* Larger font */
  padding: 10px 22px !important;    /* Larger button area */
  border-radius: 8px !important;
  border: 1px solid var(--color-navy);
  transition: all 0.2s ease !important;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.nav-cta::after {
  display: none !important;
}

.nav-cta:hover {
  background: var(--color-red) !important;
  border-color: var(--color-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(224, 0, 0, 0.25);
}

.nav-cta.active {
  background: var(--color-red) !important;
  border-color: var(--color-red) !important;
}

/* Hidden everywhere by default; only ever shown inside the mobile
   drawer media query below, and only while the drawer is open. */
.mobile-menu-close {
  display: none;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;  padding: 8px;
  z-index: 1002;
  width: 40px;
  height: 40px;
}

.menu-toggle .bar {
  width: 24px;
  height: 2.5px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: all 0.25s ease;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ---------- Navbar Dropdowns (Internship & Training / Events / Projects & Research Support) ---------- */
.nav-dropdown {
  position: relative;
}

/* .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-navy);
  background: none;
  border: none;
  padding: 6px 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
} */

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.96rem; /* Matches the updated link size */
  font-weight: 600;
  color: var(--color-navy);
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-dropdown-toggle i {
  font-size: 0.7em;
  transition: transform 0.2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.active-parent .nav-dropdown-toggle {
  color: var(--color-red);
}

.nav-dropdown.open .nav-dropdown-toggle i,
.nav-dropdown:hover .nav-dropdown-toggle i {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1001;
}

/* Invisible bridge so the menu doesn't vanish while the cursor crosses
   the gap between the toggle button and the dropdown panel below it. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-menu li {
  width: 100%;
}

.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu a::after {
  display: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: var(--color-bg);
  color: var(--color-red);
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--color-bg) 0%, #fff 100%);
  text-align: center; padding-top: 96px; padding-bottom: 72px;
}
.hero p { max-width: 680px; margin: 18px auto 0; font-size: 1.1rem; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

.hero-home {
  background:
    linear-gradient(180deg, rgba(10,42,122,0.88) 0%, rgba(10,42,122,0.72) 55%, rgba(248,250,252,0.97) 100%),
    url('../../images/hero-bg.jpg') center/cover no-repeat;
}
.hero-home h1, .hero-home p { color: #fff; }
.hero-home .badge { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
.hero-home p { opacity: 0.95; }

.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: var(--container-max); margin: 56px auto 0; padding-inline: 24px;
}
.stat-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 24px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat-card .stat-number { font-size: 2rem; font-weight: 800; color: var(--color-red); }
.stat-card .stat-label { color: var(--color-muted); font-size: 0.92rem; margin-top: 4px; }

/* ---------- Cards / Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--container-max); margin: 0 auto; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--container-max); margin: 0 auto; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: var(--container-max); margin: 0 auto; }

.card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 28px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #F3C6C6; }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; background: #FDECEC;
  color: var(--color-red); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 16px;
  border: 1px solid #F8D3D3;
}
.card h3 { margin-bottom: 8px; }
.card .card-list { margin-top: 14px; }
.card .card-list li { color: var(--color-muted); padding: 4px 0; padding-left: 22px; position: relative; font-size: 0.94rem; }
.card .card-list li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-blue);
  position: absolute; left: 0; font-size: 0.8rem; top: 6px;
}

.service-card { scroll-margin-top: 140px; }
.service-audience {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border);
  font-size: 0.9rem; color: var(--color-muted);
}

/* ---------- Why choose us ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--container-max); margin: 0 auto; }
.why-card { text-align: center; padding: 20px; }
.why-card i { font-size: 1.8rem; color: var(--color-blue); margin-bottom: 12px; }

/* ---------- Workflow ---------- */
.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--container-max); margin: 0 auto; }
.workflow-card { background: var(--color-bg); border-radius: var(--radius-md); padding: 26px; }
.workflow-card .step {
  display: inline-block; background: var(--color-navy); color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
}
.workflow-card ul { margin-top: 12px; }
.workflow-card li { color: var(--color-muted); padding: 3px 0; font-size: 0.92rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--color-navy), var(--color-navy-2));
  color: #fff; border-radius: var(--radius-lg); padding: 56px 32px; text-align: center;
  max-width: var(--container-max); margin: 0 auto;
}
.cta-band.cta-band-red { background: linear-gradient(120deg, var(--color-red-dark), var(--color-red)); }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band .btn { margin-top: 24px; background: #fff; color: var(--color-navy); }
.cta-band .btn:hover { background: var(--color-bg); }

/* ---------- Forms ---------- */
form .honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 860px; margin: 32px auto 0; }
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.95rem; background: var(--color-white); color: var(--color-navy);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--color-blue); outline-offset: 1px; border-color: var(--color-blue);
}
.form-submit { max-width: 860px; margin: 24px auto 0; text-align: center; }
.form-note { max-width: 860px; margin: 12px auto 0; font-size: 0.85rem; text-align: center; }
.form-panel {
  background: var(--color-bg); border-radius: var(--radius-lg); padding: 48px 24px;
  max-width: var(--container-max); margin: 0 auto;
}
.alert { max-width: 860px; margin: 0 auto 20px; padding: 16px 20px; border-radius: var(--radius-sm); font-weight: 600; }
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; max-width: var(--container-max); margin: 0 auto; align-items: start; }
.contact-info-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.contact-info-card li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); color: var(--color-muted); }
.contact-info-card li:last-child { border-bottom: none; }
.contact-info-card li span, .contact-info-card li a { word-break: break-word; overflow-wrap: anywhere; }
.contact-info-card i { color: var(--color-red); width: 20px; margin-top: 3px; }
.map-embed { border-radius: var(--radius-md); overflow: hidden; margin-top: 20px; border: 1px solid var(--color-border); }
.map-embed iframe { width: 100%; height: 260px; border: 0; display: block; }

/* ---------- Blog / Insights ---------- */
.blog-filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.blog-filters button {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--color-border); font-weight: 600; font-size: 0.88rem;
  background: #fff; color: var(--color-navy);
}
.blog-filters button.active { background: var(--color-red); color: #fff; border-color: var(--color-red); }

.blog-card { padding: 0; overflow: hidden; }
.blog-thumb {
  aspect-ratio: 16 / 9; width: 100%; overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-2));
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-thumb .blog-icon-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9); font-size: 2.2rem;
}
.blog-card .blog-card-body { padding: 20px; }
.blog-card .blog-meta-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.blog-pill {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: #FDECEC; color: var(--color-red-dark); padding: 3px 10px; border-radius: 999px;
  border: 1px solid #F8D3D3;
}
.blog-card .blog-date { font-size: 0.8rem; color: var(--color-muted); }
.blog-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.blog-card p { font-size: 0.94rem; }
.blog-read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; color: var(--color-blue); font-size: 0.9rem; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--color-border); font-weight: 600;
}
.pagination .current { background: var(--color-red); color: #fff; border-color: var(--color-red); }

/* ---------- Disclaimer boxes ---------- */
.disclaimer-box {
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--radius-md);
  padding: 20px 24px; max-width: var(--container-max); margin: 32px auto 0; display: flex; gap: 14px;
}
.disclaimer-box i { color: #B45309; font-size: 1.3rem; margin-top: 2px; }
.disclaimer-box strong { display: block; margin-bottom: 4px; color: #92400E; }
.disclaimer-box p { color: #92400E; font-size: 0.92rem; margin: 0; }

/* ---------- Legal pages ---------- */
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 { margin-top: 32px; margin-bottom: 12px; font-size: 1.3rem; }
.legal-content p, .legal-content li { color: var(--color-muted); margin-bottom: 12px; }
.legal-content ul { padding-left: 20px; list-style: disc; }
.legal-updated { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 32px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: #CBD5E1;
  padding: 36px 24px 0;
  width: 100%;
}

.footer-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 24px;
}

.footer-brand { max-width: 440px; }
.footer-brand img {
  margin-bottom: 12px; height: 38px; width: auto; background: #fff; padding: 4px 8px; border-radius: 6px;
}
.footer-brand p { color: #94A3B8; font-size: 0.86rem; line-height: 1.5; margin-bottom: 16px; }

.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; display: inline-flex;
  align-items: center; justify-content: center; text-decoration: none; transition: all 0.2s ease;
}
.footer-social a:hover {
  background: var(--color-red); border-color: var(--color-red); color: #ffffff; transform: translateY(-2px);
}

.footer-contact-col { max-width: 360px; }
.footer-contact-col h3 { color: #ffffff; font-size: 1rem; margin-bottom: 12px; font-weight: 700; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: #94A3B8; font-size: 0.86rem; padding: 4px 0; }
.footer-contact i { color: var(--color-red); margin-top: 4px; width: 16px; font-size: 0.9rem; flex-shrink: 0; text-align: center; }
.footer-contact a { color: #94A3B8; }
.footer-contact a:hover { color: #ffffff; }

.footer-bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: #94A3B8;
}

.legal-links { display: flex; gap: 16px; }
.legal-links a:hover { color: #ffffff; }

/* ---------- Floating Action Buttons ---------- */
.floating-actions {
  position: fixed; right: 20px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 999;
}
.c-fab {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #ffffff !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); border: 2px solid #ffffff;
}
.c-fab-whatsapp { background-color: #25D366; }
.c-fab-call { background-color: var(--color-blue); }

@media (max-width: 900px) {
  /* Shrink the floating WhatsApp/Call buttons and tuck them into the
     very corner so they stop overlapping form fields (e.g. Subject /
     Message on the Contact page) on narrow screens. */
  .floating-actions {
    right: 12px;
    bottom: 16px;
    gap: 10px;
  }
  .c-fab {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  /* Give any form using .form-panel generous right-hand clearance on
     mobile so its fields never sit under the floating buttons, and
     bottom clearance so the buttons never overlap the last field or the
     footer either. */
  .form-panel {
    padding-right: 76px;
    padding-bottom: 88px;
  }

  /* Belt-and-suspenders: cap the fields' own width directly too, in case
     any wrapper between .form-panel and the fields dilutes the padding
     fix above. This guarantees the visible right edge of every input,
     select and textarea stops short of the floating buttons no matter
     what markup sits in between. */
  .form-grid,
  .form-panel form {
    max-width: calc(100% - 76px) !important;
  }

  /* Any page-end content generally gets a little breathing room at the
     bottom so the floating buttons never sit on top of it either. */
  main > section:last-of-type {
    padding-bottom: 96px;
  }

}


/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.badge {
  display: inline-block; background: #FDECEC; color: var(--color-red-dark);
  font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
  border: 1px solid #F8D3D3;
}

/* =========================================================
   Admin Panel
   ========================================================= */
.admin-body { background: var(--color-bg); min-height: 100vh; }
.admin-topbar {
  background: var(--color-navy); color: #fff; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.admin-topbar .admin-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.admin-topbar img { height: 36px; background: #fff; border-radius: 6px; padding: 3px 6px; }
.admin-topbar a.logout-link { color: #FCA5A5; font-weight: 700; font-size: 0.9rem; }

.admin-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }

.admin-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: 24px;
}
.admin-login-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 40px 32px; max-width: 420px; width: 100%; text-align: center;
}
.admin-login-card img { height: 52px; margin: 0 auto 16px; }
.admin-login-card .field { text-align: left; margin-bottom: 16px; }

.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; }
.stat-card-admin {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.stat-card-admin .num { font-size: 1.8rem; font-weight: 800; color: var(--color-navy); }
.stat-card-admin .label { color: var(--color-muted); font-size: 0.85rem; margin-top: 4px; }
.stat-card-admin.accent-red .num { color: var(--color-red); }
.stat-card-admin.accent-blue .num { color: var(--color-blue); }

.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.admin-tabs a {
  padding: 10px 18px; font-weight: 600; font-size: 0.9rem; color: var(--color-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs a.active { color: var(--color-red); border-color: var(--color-red); }

.admin-table-wrap { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
table.admin-table th, table.admin-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-size: 0.9rem;
}
table.admin-table th { background: var(--color-bg); font-weight: 700; color: var(--color-navy); white-space: nowrap; }
table.admin-table tr:last-child td { border-bottom: none; }
.status-pill { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; }
.status-new { background: #FDECEC; color: var(--color-red-dark); }
.status-replied, .status-confirmed, .status-enrolled { background: #ECFDF5; color: #065F46; }
.status-archived, .status-contacted { background: #F1F5F9; color: var(--color-muted); }
.admin-search { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-search input { flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.table-action-link { color: var(--color-blue); font-weight: 700; font-size: 0.85rem; }
.detail-panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; margin-bottom: 24px; }
.detail-panel dt { font-weight: 700; color: var(--color-navy); font-size: 0.85rem; margin-top: 12px; }
.detail-panel dd { color: var(--color-muted); margin: 2px 0 0; }

/* =========================================================
   Responsive Breakpoints
   ========================================================= */
@media (max-width: 1200px) and (min-width: 901px) {
  .logo, .nav-actions { min-width: auto; }
  .nav-menu { gap: 12px; }
  .nav-menu a { font-size: 0.84rem; }
  .nav-cta { padding: 6px 14px !important; font-size: 0.82rem !important; }
}

@media (max-width: 1024px) {
  .stats-grid, .grid-4, .why-grid, .workflow-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Keep the right-side container visible with both the button and hamburger */
  .nav-actions {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: auto;
    z-index: 1002;
  }

  /* Contact button styling on mobile */
  /* .nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--color-navy) !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-navy);
    font-weight: 700 !important;
  } */

/* Contact button styling on mobile */
  .nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--color-navy) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important; /* Slightly larger on mobile */
    padding: 8px 16px !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-navy);
    font-weight: 700 !important;
  }

  .nav-cta:hover {
    background: var(--color-red) !important;
    border-color: var(--color-red) !important;
  }

  .menu-toggle {
    display: flex;
  }

  /* Full Screen Mobile Drawer — covers the entire viewport (including the
     header/announcement bar) so nothing can ever peek out above/behind it
     regardless of how tall the announcement bar text wraps. */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 84px 24px 40px;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 9999;
  }

  .nav-menu.open {
    transform: translateX(0);
  }

  /* Dedicated close (X) button, fixed to the top-right corner of the
     drawer. Only shown once the drawer is open (body.menu-open). */
  .mobile-menu-close {
    display: none;
    position: fixed;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-navy);
    color: #ffffff;
    border: none;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(10, 42, 122, 0.25);
    cursor: pointer;
  }

  .mobile-menu-close:hover {
    background: var(--color-red);
  }

  body.menu-open .mobile-menu-close {
    display: flex;
  }

  .nav-menu li {
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-menu a {
    display: block;
    padding: 14px 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy);
    width: 100%;
  }

  .nav-menu a::after {
    display: none;
  }

  /* Dropdowns are always expanded (flat, non-collapsible) in the mobile
     drawer — no tap-to-expand. The toggle button becomes a plain,
     non-interactive section label; its links are simply listed beneath it. */
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px 6px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
  }

  .nav-dropdown-toggle i {
    display: none;
  }

  .nav-dropdown {
    flex-shrink: 0;
  }

  .nav-dropdown-menu {
    position: static;
    display: block;
    min-width: 0;
    width: 100%;
    flex-shrink: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 6px 14px;
    margin: 0;
    list-style: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-dropdown-menu li {
    width: 100%;
    border-bottom: none;
  }

  .nav-dropdown-menu a {
    display: block;
    width: 100%;
    padding: 12px 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    background: transparent;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    background: transparent;
    color: var(--color-red);
  }


  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .logo img { height: 38px; }
  .admin-topbar { flex-wrap: wrap; gap: 10px; }
  .footer-grid { flex-direction: column; gap: 24px; }
}

@media (max-width: 640px) {
  .stats-grid, .grid-4, .why-grid, .workflow-grid { grid-template-columns: 1fr; }
  section { padding: 48px 16px; }
  .container { padding-inline: 16px; }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  h1 { word-break: break-word; }
}

@media (max-width: 420px) {
  .hero-buttons .btn, .button-group .btn { width: 100%; justify-content: center; }
  .stat-cards { grid-template-columns: 1fr; }
  .admin-login-card { padding: 28px 20px; }
}
/* =========================================================
   Catalog "View Details" Modal + Careers Wizard
   (Appended — dynamic-content admin CRUD feature)
   ========================================================= */
.catalog-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 42, 122, 0.55); padding: 20px;
}
.catalog-modal.open { display: flex; }
.catalog-modal-dialog {
  background: #fff; border-radius: var(--radius-lg); max-width: 640px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 32px; position: relative; box-shadow: var(--shadow-md);
}
.catalog-modal-dialog .modal-close {
  position: absolute; top: 16px; right: 16px; font-size: 1.3rem; color: var(--color-muted);
  background: var(--color-bg); border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.catalog-modal-body h2 { color: var(--color-navy); margin-bottom: 10px; }
.catalog-modal-body .badge { display: inline-block; margin-bottom: 12px; }
.catalog-modal-body .modal-field { margin: 10px 0; color: var(--color-muted); line-height: 1.6; }
.catalog-modal-body .modal-field strong { color: var(--color-navy); }
.catalog-modal-body .modal-desc { color: var(--color-muted); line-height: 1.7; white-space: pre-line; }
.catalog-modal-body .modal-cta { margin-top: 22px; }

.card.card-clickable { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card.card-clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .card-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--color-red);
  border: 1px solid var(--color-red); border-radius: 999px; padding: 2px 10px; margin-bottom: 10px; }

/* ---------- Careers 4-step wizard ---------- */
.wizard-steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.wizard-steps span {
  flex: 1; min-width: 70px; text-align: center; font-size: 0.78rem; font-weight: 700;
  color: var(--color-muted); padding: 8px 4px; border-radius: var(--radius-sm); background: var(--color-bg);
}
.wizard-steps span.active { background: var(--color-navy); color: #fff; }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-actions { display: flex; justify-content: space-between; margin-top: 20px; gap: 12px; }



/* =========================================================
   Universal Inner Page Hero Component
   ========================================================= */
.site-hero {
  position: relative;
  padding: 60px 0 52px;
  background: linear-gradient(135deg, var(--color-navy) 0%, #061A4D 100%);
  color: #FFFFFF;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Background grid motif */
.site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Background ambient glow */
.site-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: 5%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.site-hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Breadcrumbs */
.site-hero-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #94A3B8;
  margin-bottom: 14px;
}
.site-hero-breadcrumbs a {
  color: #CBD5E1;
  transition: color 0.2s ease;
}
.site-hero-breadcrumbs a:hover {
  color: #FFFFFF;
}
.site-hero-breadcrumbs .sep {
  opacity: 0.45;
}

/* Category Badge with Icon */
.site-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
}

/* Themed accents for badges and glows */
.site-hero.theme-red .site-hero-badge {
  background: rgba(224, 0, 0, 0.15);
  color: #FFA3A3;
  border: 1px solid rgba(224, 0, 0, 0.35);
}
.site-hero.theme-blue .site-hero-badge {
  background: rgba(2, 132, 199, 0.15);
  color: #BAE6FD;
  border: 1px solid rgba(2, 132, 199, 0.35);
}
.site-hero.theme-teal .site-hero-badge {
  background: rgba(13, 148, 136, 0.18);
  color: #99F6E4;
  border: 1px solid rgba(13, 148, 136, 0.35);
}
.site-hero.theme-teal::after {
  background: radial-gradient(circle, rgba(13, 148, 136, 0.25) 0%, transparent 70%);
}

.site-hero h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.site-hero p {
  color: #CBD5E1;
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
}

.site-hero .hero-buttons {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
}