:root {
  --brand:#0b63d6;
  --muted:#6b7280;
  --white:#ffffff;
  --max-width:1100px;
  --radius:12px;
  --shadow: 0 6px 20px rgba(11,99,214,0.12);
}

* { box-sizing:border-box; }
body {
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  color:#111827;
  line-height:1.5;
  margin:0;
  background:#f8fbff;
}
a { color:var(--brand); text-decoration:none; }

/* Contact Pills */
.contact-pill {
  display: inline-flex;               /* aligns icon + text */
  align-items: center;
  gap: 6px;                           /* spacing between icon and text */
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  color: #fff;                        /* default text color */
}

.contact-pill:hover {
  transform: scale(1.05);
  filter: brightness(1.1);            /* subtle highlight on hover */
}

.contact-pill i {
  margin-right: 6px;
  font-size: 14px;
}

/* Top Contact Strip */
.contact-strip {
  background: var(--brand);
  color: #fff;
  padding: 8px 0;
}

.contact-strip-inner {
  max-width: var(--max-width);   /* keeps same width as navbar */
  margin: 0 auto;                /* centers the bar */
  padding: 0 20px;               /* side spacing */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-strip .contact-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Specific colors */
.contact-pill.phone {
  background: #28a745;   /* green for phone */
}

.contact-pill.email {
  background: #007bff;   /* blue for email */
}

.contact-pill.cta-enroll {
  background: #ffc107;   /* yellow for enroll */
  color: #000;           /* black text for contrast */
}

/* Navbar */
/* White navbar card below the strip */
nav.navbar {
  max-width: var(--max-width);
  margin: 12px auto;   /* spacing below strip */
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(11,99,214,0.06);
}

/* Nav links inside white navbar */
nav.navbar .navlinks a {
  color: rgba(0,0,0,0.8);
}
.logo { display:flex; align-items:center; gap:12px; }
.logo-img { width:54px; height:54px; border-radius:8px; object-fit:cover; }
.logo h1 { 
  font-size:20px; 
  margin:0; 
  color: var(--brand);   /* brand blue instead of white */
  font-weight:800; 
}

.sub { 
  font-size:12px; 
  color: var(--muted);   /* muted gray instead of near-white */
}

.navlinks {
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  align-items:center;
}
.navlinks a { color:rgba(0,0,0,0.8); font-weight:600; }
.cta-primary {
  background: var(--brand);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  transition: background 0.3s ease;
}

.cta-primary:hover {
  background: #084aad; /* darker shade of brand blue */
}

/* ✅ Add hamburger CSS right below */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--brand);
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .navlinks {
    position: absolute;
    top: 70px; /* matches your navbar height */
    right: 20px;
    background: #fff;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: none; /* hidden by default */
	z-index: 999;  /* ✅ ensures menu stays above content */
  }

  .navlinks.show {
    display: flex; /* show when toggled */
  }

  .navlinks a {
    color: rgba(0,0,0,0.9);
    font-size: 16px;
  }

  .cta-primary {
    width: 100%;
    text-align: center;
  }
}

/* Hero Section */
.hero-creative, .hero-inner { 
  max-width: var(--max-width, 1100px);
  margin: 28px auto;
  padding: 28px;
  display: block; /* single-column hero */
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
  border-radius: 18px;
}

/* center the slider container */
.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 4px;
  position: relative;
}

/* slider geometry */
.hero-slider {
  width: min(1400px, 98%);
  /* use either a fixed height or aspect-ratio; pick one */
  height: 820px;               /* desktop height — change if you want taller/shorter */
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px rgba(11,103,239,0.06);
  margin: 0 auto;
  padding: 0;                  /* ensure no inner spacing */
  background: transparent;     /* don't show underlying gradient */
}

/* slide wrapper (covers full slider) */
.hero-slider .slide {
  position: absolute;
  inset: 0;                    /* top:0; right:0; bottom:0; left:0; */
  opacity: 0;
  transform: none;             /* avoid additional scale that might crop */
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
  z-index: 0;
  display: block;
  overflow: hidden;            /* clip the image to border-radius of .hero-slider */
}

/* visible slide */
.hero-slider .slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* image fills the slide exactly */
.hero-slider .slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* fill the area; use 'contain' if you want whole image visible */
  object-position: center center;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
}

/* overlay caption centered near bottom */
.image-caption {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.95);
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(11,103,239,0.06);
  max-width: calc(100% - 48px);
  z-index: 10;
  text-align: center;
}
.image-caption .h { display:block; font-weight:800; color:#083e8d; font-size:20px; margin-bottom:6px; }
.image-caption .s { display:block; color:#51607a; font-size:14px; line-height:1.35; }

/* dots top-right of the slider */
.hero-dots {
  position: absolute;
  top: 12px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: 12;
}
.hero-dots button {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5);
  border: 1px solid rgba(11,103,239,0.08); cursor: pointer; padding: 0;
}
.hero-dots button.active { background: var(--accent, #0b63d6); transform: scale(1.15); }

/* responsive sizes */
@media (max-width: 1200px) {
  .hero-slider { height: 380px; }
}
@media (max-width: 980px) {
  .hero-slider { height: 320px; }
  .image-caption .h { font-size: 18px; }
  .image-caption .s { font-size: 13px; }
}
@media (max-width: 520px) {
  .hero-slider { height: 240px; width: 96%; }
  .image-caption { bottom: 12px; padding: 10px 12px; }
  .image-caption .h { font-size: 16px; }
  .image-caption .s { font-size: 12px; }
}

/* accessibility: keyboard focus for dots */
.hero-dots button:focus { outline: 3px solid rgba(11,103,239,0.16); outline-offset: 3px; }

/* Sections */
section {
  max-width:var(--max-width);
  margin:22px auto;
  padding:18px;
}
h3 {
  font-size:22px;
  color:var(--brand);
  margin-bottom:10px;
  font-weight:800;
}

/* ==========================
   Home Tutoring Section
   ========================== */
.tutoring-section {
  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
  padding: 28px 16px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: #0f172a;
}

.tutoring-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: calc(var(--radius) * 1.6);
  padding: 28px;
  box-shadow: 0 14px 40px rgba(11, 99, 214, 0.06);
  border: 1px solid rgba(11, 99, 214, 0.06);
}

/* Section Header */
.tutoring-head { text-align: left; margin-bottom: 22px; }
.tutoring-head h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: #111184;       
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}
.tutoring-head .muted {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Grid Layout */
.tutoring-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

/* City Cards */
.city-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.city-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes features to bottom */
  gap: 18px;
  background: var(--white);
  border-radius: calc(var(--radius) * 1.05);
  padding: 18px;
  min-height: 220px; /* keeps cards even */
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,99,214,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.city-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(11,99,214,0.09);
}

/* Top row inside card: flag + title inline */
.city-card .card-head {
  display: flex;
  gap: 14px;
  align-items: center;
}
.city-flag {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #0a83ff));
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 8px 20px rgba (11,99,214,0.12);
  flex-shrink: 0;
}
.city-card h3 {
  margin: 0;
  color: #0b2545
  font-size: 1.06rem;
  font-weight: 700;
}
.city-card .city-desc {
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
  max-width: 46ch; /* keeps paragraph compact and vertically balanced */
}

/* Features area at bottom — plain vertical lines, NO PILLS */
.city-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  gap: 6px;
}
.city-features li {
  margin: 6px 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0;
}

/* CTA Panel */
.tutoring-cta {
  background: var(--white);
  border-radius: calc(var(--radius) * 1.05);
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,99,214,0.04);
  position: relative;
}
.cta-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.cta-top h3 {
  margin: 0;
  font-size: 1.03rem;
  font-weight: 800;
  color: #111184;
  line-height: 1.1;
}
.cta-top .muted { font-size: 0.95rem; color: var(--muted); }
.highlight-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.highlight-list li {
  background: linear-gradient(180deg, rgba(14,70,160,0.03), rgba(255,255,255,0.6));
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(11,99,214,0.04);
}
.highlight-list li strong {
  display: block;
  color: #0b4aa8; /* slightly darker blue for the small title inside card */
  font-weight: 700;
  margin-bottom: 6px;
}
.highlight-list li span {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Buttons */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
a.btn-primary, button.btn-primary {
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #0a83ff));
  color: var(--white);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  border: none;
  box-shadow: 0 12px 28px rgba(11,99,214,0.12);
}
a.btn-ghost, .btn-ghost {
  background: #f1f7ff;
  color: var(--brand);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(11,99,214,0.08);
}

/* Note */
.small-note {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--muted);
}

/* Responsive */
@media (min-width: 640px) {
  .city-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .tutoring-grid {
    grid-template-columns: 1fr 340px;
    gap: 24px;
  }
  .tutoring-head h2 {
    font-size: 2rem;
  }
}
@media (max-width: 480px) {
  .tutoring-head h2 {
    font-size: 1.5rem;       /* smaller on phones */
  }
}

/* ==========================
   Student Psychology Assessment
   ========================== */
.psych-section {
  background: linear-gradient(180deg, #f9fcff, #ffffff);
  padding: 40px 16px;
  font-family: "Inter", system-ui, sans-serif;
  color: #0f172a;
}

.psych-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* ----- Left Content ----- */
.psych-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;          /* bold */
  color: #111184;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
  line-height: 1.25;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.psych-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 18px;
}

.psych-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.psych-benefits li strong {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand);
  margin-bottom: 6px;
}
.psych-benefits li span {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ----- Right CTA Card ----- */
.psych-cta {
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11, 99, 214, 0.04);
}

/* Top part with photo + name */
.cta-top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.dr-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dceaff; /* placeholder background */
  box-shadow: 0 6px 16px rgba(11, 99, 214, 0.12);
}
.cta-info {
  display: flex;
  flex-direction: column;
}
.cta-dr {
  font-size: 0.82rem;
  color: var(--muted);
}
.cta-name {
  font-weight: 700;
  font-size: 1.02rem;
  color: #111184;
}
.cta-qual {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Description */
.cta-desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 8px;
}

/* CTA buttons */
.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.btn-primary,
.btn-ghost {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-primary {
  background: var(--brand);
  color: var(--white);
  border: none;
  box-shadow: 0 10px 20px rgba(11, 99, 214, 0.15);
}
.btn-primary:hover {
  background: #094fb3;
}
.btn-ghost {
  background: #f1f7ff;
  color: var(--brand);
  border: 1px solid rgba(11, 99, 214, 0.1);
}
.btn-ghost:hover {
  background: #e1efff;
}

/* Note */
.cta-note {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ==========================
   Responsive
   ========================== */
@media (min-width: 768px) {
  .psych-inner {
    grid-template-columns: 1fr 340px;
    gap: 32px;
  }
  .psych-title {
    font-size: 2rem;
  }
}
@media (max-width: 640px) {
  .psych-title {
    font-size: 1.5rem;
  }
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  background: #fff;        /* unified background */
  padding: 28px;
  border-radius: 12px;
  box-shadow: var(--shadow, 0 6px 20px rgba(11,99,214,0.12));
}

.about-card {
  background: transparent; /* remove card background */
  box-shadow: none;        /* remove individual shadows */
  padding: 0;              /* rely on parent padding */
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;  /* <-- Change font here for all inside */
}

.image-caption h2 { display:block; font-weight:800; color:#083e8d; font-size:20px; margin-bottom:6px; }
.image-caption p  { display:block; color:#51607a; font-size:14px; line-height:1.35; margin:0; }

.signature {
  margin-top: 20px;
  font-family: 'Great Vibes', cursive;  /* Handwritten Google Font */
  font-size: 26px;                      /* Bigger for signature look */
  color: #2c3e50;                       /* Dark professional color */
  text-align: right;                    /* Aligns to the right */
}

.about-img {
  width: 100%;
  max-width: 300px;  /* smaller than before */
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: block;
  margin: 0 auto;
}

/* Key Strengths section wrapper */
.strengths-section {
  width: 100%;
  display: block;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* Cloud container */
.strengths-content {
  background: linear-gradient(180deg, rgba(238,246,255,0.96), rgba(248,251,255,0.99));
  padding: 28px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(20,40,60,0.08);
  border: 1px solid rgba(30,120,220,0.06);
  max-width: 980px;
  margin: 0 auto;   /* centers the cloud */
  text-align: center;
}

/* heading */
.highlighting-heading {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 25px;
  background: var(--brand);  /* blue pill */
  color: #fff;               /* white text so it's visible */
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}

/* Circular bubbles layout */
.bubble-list.circular {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;  /* align circles in center */
}

/* Each bubble */
.bubble-list.circular li {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(15,43,70,0.08);
  border: 1px solid rgba(15,43,70,0.05);
  font-size: 14px;
  font-weight: 600;
  color: #0f2b46;
  line-height: 1.2;
  transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}

.bubble-list.circular li:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-4px);
}

/* Responsive */
@media (max-width: 720px) {
  .bubble-list.circular li {
    width: 90px;
    height: 90px;
    font-size: 12px;
    padding: 8px;
  }
}

/* ---------------- Why Choose Us: text + image card ---------------- */
.choose-row {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0;
  flex-wrap: wrap;
}

.choose-content {
  flex: 1 1 55%;
  min-width: 280px;
  padding-right: 12px;
}

.choose-content h5 { margin-bottom: 12px; }
.choose-content .choose-list {
  margin: 0;
  padding-left: 1rem;
  color: #123;
  font-size: 15px;
  line-height: 1.7;
}

/* image area */
.info-media {
  flex: 0 0 38%;
  min-width: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* small card around the image */
.image-card {
  background: #fff;
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15,43,70,0.06);
  border: 1px solid rgba(15,43,70,0.04);
  max-width: 360px;
  width: 100%;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* responsive stack: on small screens stack the blocks */
@media (max-width: 900px) {
  .choose-row {
    flex-direction: column;
    align-items: stretch;
  }
  .info-media { order: 2; margin-top: 12px; }
  .choose-content { order: 1; }
}
/* Forms */
form {
  background:#fff;
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow);
  max-width:700px;
}
label { display:block; font-weight:700; margin:10px 0 6px; }
input, select, textarea {
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #e6e9ee;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.actions { margin-top:12px; display:flex; gap:12px; align-items:center; }
.muted { color:var(--muted); }
.small { font-size:13px; }

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Courses */
/* Generic alternating two-column rows used for Courses, Info, Gallery, Testimonials */
.courses-list,
.info-list {
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:12px;
}

/* each row: two columns (media + content) */
.course-row,
.info-row {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  align-items:center;
  background:#fff;
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* reverse class flips the visual order: image on right */
.course-row.reverse .course-media { order: 2; }
.course-row.reverse .course-content { order: 1; }

.info-row.reverse .info-media { order: 2; }
.info-row.reverse .info-content { order: 1; }
	

/* media (image) styling */
.course-media img,
.info-media img {
  width: 100%;
  height: auto;            /* allow natural height */
  max-height: 280px;       /* limit height so cards stay balanced */
  object-fit: cover;       /* fill the box if image is larger */
  border-radius: 14px;
  display: block;
}

/* content styling */
.course-content .course-title,
.info-content .info-title {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
}
.course-content p.muted,
.info-content p.muted {
  margin-bottom:12px;
  color:var(--muted);
}

/* testimonial smaller images */
.info-media img.small {
  height:120px;
  width:120px;
  border-radius:50%;
  object-fit:cover;
}

/* responsive: stack vertically on small screens and reset reverse */
@media (max-width:900px) {
  .course-row, .info-row {
    grid-template-columns: 1fr;
  }
  .course-row.reverse, .info-row.reverse {
    direction: ltr;
  }
  .course-media img, .info-media img {
    height:200px;
  }
}

/* Boards Section */
.boards-section {
  width: 100%;
  padding: 34px 20px;
  box-sizing: border-box;
}

.boards-content {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 12px 20px;
}

/* heading */
.boards-content .section-heading {
  display: inline-block;
  font-weight: 700;
  font-size: 20px;
  color: var(--brand);
  margin-bottom: 18px;
}

/* grid of circular boards */
.board-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center; /* center the circles */
  align-items: flex-start;
}

/* item */
.board-item {
  width: 140px;      /* card width (circle + label) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* circular image container */
.board-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(15,43,70,0.06);
  border: 1px solid rgba(15,43,70,0.04);
}

/* image fits inside circle */
.board-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover preserves the image aspect */
  display: block;
}

/* label below circle */
.board-label {
  font-size: 14px;
  color: #123;
  font-weight: 600;
  text-align: center;
}

/* hover effect */
.board-item:hover .board-circle {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(15,43,70,0.12);
}

/* responsive */
@media (max-width: 900px) {
  .board-item { width: 120px; }
  .board-circle { width: 90px; height: 90px; }
  .board-label { font-size: 13px; }
}

@media (max-width: 480px) {
  .board-list { gap: 14px; }
  .board-item { width: 100px; }
  .board-circle { width: 72px; height: 72px; }
  .board-label { font-size: 12px; }
}

/* ---------- Subjects circular tiles ---------- */
/* Base: center tiles and give stable widths */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on wide screens */
  gap: 24px;
  justify-items: center;   /* center each tile horizontally inside its cell */
  align-items: start;
  width: 100%;
  padding: 8px 0;
  margin: 0;
}

/* Tile sizing + visual styles */
.subject-card {
  width: 140px;            /* controls tile width */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent; /* keep background clean */
  border: none;            /* remove any unintended borders */
  padding: 6px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Circle image appearance */
.subject-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 22px rgba(11,99,214,0.08);
  border: 6px solid #fff; /* subtle white ring — adjust or remove if undesired */
  display: block;
  overflow: hidden;
}

/* Label under tile */
.subject-label {
  font-weight: 700;
  color: var(--brand);
  font-size: 13px;
  text-align: center;
  max-width: 140px;
}

/* Remove debug outline if present */
.subjects-grid[style], .subject-card[style] {
  outline: none !important;
}

/* Hover/focus lift */
.subject-card:focus,
.subject-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11,99,214,0.10);
}

/* ---------- Responsive breakpoints ---------- */
/* Large desktop (keeps 4 columns) */
@media (min-width: 1200px) {
  .subjects-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

/* Desktop / tablet landscape -> 3 columns */
@media (max-width: 1199px) and (min-width: 820px) {
  .subjects-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .subject-card { width: 132px; }
  .subject-image { width: 112px; height: 112px; }
}

/* Tablet / large mobile -> 2 columns */
@media (max-width: 819px) and (min-width: 480px) {
  .subjects-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .subject-card { width: 140px; }
  .subject-image { width: 120px; height: 120px; }
}

/* Small mobile -> 1 column */
@media (max-width: 479px) {
  .subjects-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 12px; }
  .subject-card { width: 120px; margin: 0 auto; }
  .subject-image { width: 100px; height: 100px; }
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .subject-image {
    width: 100px;
    height: 100px;
  }
  .subject-label {
    font-size: 13px;
    max-width: 120px;
  }
}


/* Gallery */
.gallery { position:relative; border-radius:12px; overflow:hidden; }
.gallery img { width:100%; height:360px; object-fit:cover; display:block; }
.prev, .next {
  position:absolute;
  top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.4);
  color:#fff;
  padding:8px;
  border-radius:50%;
  border:none;
  cursor:pointer;
}
.prev { left:12px; }
.next { right:12px; }

/* Testimonials */
/* ---------- Testimonials (cards, optional circular image) ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 12px;
  align-items: start;
}

/* Card */
.testimonial {
  background: #fff;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 140px;      /* gives balanced vertical space */
  transition: transform .18s ease, box-shadow .18s ease;
}

/* If you don't include an image, make .testimonial stack vertically */
.testimonial:has(.t-media) {
  /* when there is media, keep default flex row */
}
.testimonial:not(:has(.t-media)) {
  flex-direction: column;
  min-height: auto;
}

/* Optional circular image container (add this HTML if you want images) */
.t-media {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-media img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(11,99,214,0.10);
  border: 4px solid #fff;
}

/* Content area */
.t-content {
  flex: 1 1 auto;
  min-width: 0; /* allow text to truncate/wrap correctly */
}
.t-content strong {
  display: block;
  font-size: 16px;
  color: var(--brand);
  margin-bottom: 8px;
  font-weight: 800;
}
.t-content p.muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  word-break: break-word; /* prevent overflow on long words */
  white-space: normal;
}

/* Hover / focus lift */
.testimonial:hover,
.testimonial:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11,99,214,0.10);
}

/* Smaller screens */
@media (max-width: 780px) {
  .t-media img { width: 120px; height: 120px; }
}
@media (max-width: 520px) {
  .testimonials { grid-template-columns: 1fr; }
  .t-media img { width: 96px; height: 96px; }
  .testimonial { gap: 10px; padding: 14px; }
}
/* Alternate colors */
.testimonial:nth-child(even) {
  background: #eaf3ff;   /* light blue background */
}

/* Hover effect for interactivity */
.testimonial:hover,
.testimonial:focus-within {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 18px 40px rgba(11,99,214,0.10);
}

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 420px; gap:14px; }
.center-info {
  background:#fff;
  padding:16px;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.map {
  width:100%; height:200px;
  background:#eef6ff;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}

/* Footer */
footer { 
  padding:18px; 
  border-top:6px solid var(--brand); 
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;              
  gap: 12px;
  padding: 20px;
  background: var(--brand);     
  color: #fff;
}

.footer-left p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.footer-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-links { 
  display:flex; 
  gap:12px; 
}

/* === Fixes & Accessibility Tweaks === */

/* Fix heading class mismatch (if HTML uses highlighting-heading) */
.highlighting-heading { /* OR rename HTML to highlight-heading */
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  border-radius: 25px;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Nav toggle (if your JS uses .open, not .show) */
.navlinks.open { display: flex; }

/* Gallery crossfade */
.gallery { position: relative; border-radius:12px; overflow: hidden; min-height:360px; }
.gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 360px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  backface-visibility: hidden;
}
.gallery img.visible { opacity: 1; z-index: 2; }
.prev, .next { z-index: 5; }

.visually-hidden {
  position: absolute !important;
  width: 1px; 
  height: 1px;
  padding: 0; 
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); 
  white-space: nowrap; 
  border: 0;
}

/* Focus-visible for accessibility */
a:focus, button:focus, .subject-card:focus {
  outline: 3px solid rgba(11,99,214,0.18);
  outline-offset: 3px;
  box-shadow: 0 6px 18px rgba(11,99,214,0.08);
}

/* Skip link visible on focus */
.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 9999;
  border-radius: 6px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .gallery img { transition: none; }
}

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  width: 55px;
  height: 55px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background: #1ebd57;
}

/* WhatsApp icon */
.whatsapp-float i {
  line-height: 1;
  z-index: 2;
}

/* Tooltip bubble (green, always visible on desktop) */
.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  bottom: 50%;
  transform: translateY(50%);
  background: #25D366;   /* WhatsApp green */
  color: #fff;           
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1;
  font-weight: 600;
}

/* Tooltip arrow */
.whatsapp-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #25D366;
}

/* Hide tooltip on small screens */
@media (max-width: 768px) {
  .whatsapp-tooltip {
    display: none;
  }
}

/* ---------- About (responsive, mobile-friendly) ---------- */
/* Uses existing root vars like --radius and --shadow if available */

/* Wrapper and overall heading */
#about {
  padding: 20px;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #183047;
}
#about > h2 {
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
  font-weight: 800;
  color: #083e8d;
  margin: 0 0 14px 0;
  letter-spacing: -0.2px;
}

/* Grid container: desktop 2-col, mobile stacked */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  background: #fff;
  padding: 28px;
  border-radius: 12px;
  box-shadow: var(--shadow, 0 6px 20px rgba(11,99,214,0.12));
}

/* Card base (no internal padding; parent handles it) */
.about-card {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
}

/* Text column */
.about-text h3,
.image-caption h2 {
  display: block;
  font-weight: 700;
  color: #083e8d;
  font-size: 1.05rem;
  margin: 0 0 8px 0;
}
.about-text p {
  margin: 0 0 12px 0;
  color: #51607a;
  font-size: clamp(0.95rem, 2.3vw, 1rem);
  line-height: 1.6;
}

/* Signature */
.signature {
  margin-top: 14px;
  font-family: 'Great Vibes', cursive;
  font-size: 22px;
  color: #2c3e50;
  text-align: right;
  margin-bottom: 0;
}

/* Media column / image */
.about-media {
  display: flex;
  justify-content: center; /* center image column */
  align-items: center;
}
.about-img {
  width: 100%;
  max-width: 320px;    /* desktop image size */
  border-radius: 12px;
  box-shadow: var(--shadow, 0 6px 20px rgba(11,99,214,0.12));
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 880px) {
  .about-grid {
    gap: 22px;
    padding: 22px;
  }
  .about-img { max-width: 280px; }
}

@media (max-width: 640px) {
  /* Stack into single column for narrow screens */
  .about-grid {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 16px;
  }

  /* Place image first (if you prefer text-first, remove order) */
  .about-media { order: 1; }   /* image after text */
  .about-text  { order: 2; }   /* text first (user-friendly) */

  /* Increase readability */
  #about > h2 { font-size: 1.35rem; margin-bottom: 12px; }
  .about-text p { font-size: 1rem; line-height: 1.6; }
  .about-img {
    max-width: 220px;    /* keep image a comfortable size */
    width: 60%;
  }

  .signature {
    font-size: 20px;
    text-align: left;
    margin-top: 8px;
  }
}