/* tutoring.css */


/* Global adjustments for this page */
.tutoring-container {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: auto;
  color: #ffffff;
}


/* Section Boxes */
.tutoring-section {
  background-color: #1f2937; /* dark gray */
  padding: 2.5rem 2rem;
  margin-bottom: 3rem;
  border-radius: 1rem;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

.tutoring-section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.tutoring-section ul {
  list-style: none;
  padding-left: 0;
}
.tutoring-section li {
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
  font-size: 1.125rem;
}
.tutoring-section li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #34d399; /* Tailwind green-400 */
}

/* Pricing Card */
.tutoring-price-card {
  background-color: #1e40af; /* Tailwind blue-800 */
  color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(30, 64, 175, 0.6);
  max-width: 400px;
  margin: 2rem auto;
  text-align: center;
}
.tutoring-price-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.tutoring-price-card p {
  margin-bottom: 1rem;
}

/* FAQ Styles */
.tutoring-faq strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.tutoring-faq p {
  color: #dddddd;
  margin-bottom: 1.5rem;
}

/* Final CTA */
.tutoring-cta {
  text-align: center;
  margin-top: 3rem;
}
.tutoring-cta p {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.tutoring-cta .highlight {
  color: #60a5fa; /* Tailwind blue-400 */
  font-style: italic;
}

/* Responsive Tweaks */
@media (min-width: 768px) {
  .tutoring-hero h1 {
    font-size: 3rem;
  }
  .tutoring-hero p {
    font-size: 1.375rem;
  }
  .tutoring-section h2 {
    font-size: 2rem;
  }
}

.tutoring-banner {
  width: 100%;
  height: auto;
  aspect-ratio: 2.1 / 1; /* Force wide shape */
  object-fit: cover;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
border-radius: 0 0 1rem 1rem;

}

.tutoring-hero-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 2.1 / 1;
  overflow: hidden;
  border-radius: 0 0 1rem 1rem;
}

.tutoring-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tutoring-hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  /* 🔵 brandy blue overlay instead of grey */
  background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(30,64,175,.95));
  padding: 2rem 2.5rem;
  border-radius: 1rem;
  max-width: 90%;
  box-shadow: 0 0 25px rgba(2,6,23,.35);
}

.tutoring-hero-text p{
  font-size: 1.125rem;
  line-height: 1.6;
  color: #eef2ff; /* a bit brighter on blue */
}


.tutoring-hero-text h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.tutoring-hero-text p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #e5e5e5;
}

/* Section container */
/* ==== How it works – polish (LIGHTER TONES) ==== */

/* Lighter, brandy background + soft glows */
.how-it-works-flip{
  /* keep your spacing */
  padding: clamp(20px, 3vw, 36px);
  border-radius: 22px;
  overflow: hidden;                 /* keeps inner shadows inside */
  color: #0b1d3a;                   /* darker text for light background */

  /* on-brand gradient */
  --brand: #1e40af;                 /* fallback if CSS vars absent */
  --accent: #60a5fa;
  background:
    radial-gradient(800px 220px at -10% -40%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 60%),
    radial-gradient(800px 220px at 110% 10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    /* lighter base */
    linear-gradient(180deg, #e9f2ff, #dbeafe);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Keep the grid neatly centered inside the section */
.how-it-works-flip .flip-grid{
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: clamp(10px, 2vw, 18px);  /* gives breathing room from edges */
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: clamp(14px, 2vw, 20px);
}

@media (min-width: 640px){
  .how-it-works-flip .flip-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .how-it-works-flip .flip-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* Card feel: lighter tiles, subtle border + hover lift */
.how-it-works-flip .flip-card{
  perspective: 1000px;
  border-radius: 16px;
  overflow: hidden;                 /* prevents the faces from overflowing */
}

.how-it-works-flip .flip-inner{
  position: relative;
  width: 100%;
  height: 180px;
  transform-style: preserve-3d;
  transition: transform .6s;
  border-radius: 16px;
}

/* tile faces */
.how-it-works-flip .flip-front,
.how-it-works-flip .flip-back{
  position: absolute;
  inset: 0;
  padding: 1.25rem;
  border-radius: 16px;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 8px 16px rgba(15, 23, 42, .10);
  border: 1px solid color-mix(in oklab, var(--brand) 20%, white 80%);
}

/* LIGHTER blues */
.how-it-works-flip .flip-front{
  background: linear-gradient(180deg, #f3f8ff, #e8f2ff);
}
.how-it-works-flip .flip-back{
  background: linear-gradient(180deg, #e1edff, #d7e8ff);
  transform: rotateY(180deg);
}

/* accents */
.how-it-works-flip .flip-front .icon{ font-size: 1.6rem; margin-bottom: .5rem; }
.how-it-works-flip .flip-front h3{ font-size: 1rem; letter-spacing:.3px; color:#0b1d3a; }

.how-it-works-flip .flip-card:hover .flip-inner,
.how-it-works-flip .flip-card:focus-within .flip-inner{
  transform: rotateY(180deg) translateY(-2px);
}

/* Heading spacing & color that matches the new panel */
.how-it-works-flip > h2{
  margin: 0 0 1.6rem;
  color: #0b1d3a;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* center the entire section on the page */
.how-it-works-flip{
  width: min(1400px, 100% - 2rem);   /* keeps nice side gutters */
  margin: clamp(24px, 4vw, 48px) auto; /* centers horizontally */
}

/* center the heading to the grid */
.how-it-works-flip > h2{
  width: min(1200px, 100%);
  margin: 0 auto 1.6rem;  /* centers the block */
  text-align: center;
}
/* ========== How it works – dark mode cleanup ========== */

/* Section stays as-is; just tune heading contrast */
html.dark-mode .how-it-works-flip > h2{
  color:#eef4ff;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Grid rail: no big slab. Subtle outline + tiny glassy lift */
html.dark-mode .how-it-works-flip .flip-grid{
  background: transparent;                 /* kill the dark fill */
  border: 1px solid rgba(255,255,255,.06); /* very light outline */
  border-radius: 16px;
  padding: clamp(12px, 1.6vw, 18px);
  box-shadow:
    0 8px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Tiles: a touch lighter than the section, not white */
html.dark-mode .how-it-works-flip .flip-front{
  background: linear-gradient(180deg, #162b56, #13254c);
  border-color: rgba(96,165,250,.16);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
html.dark-mode .how-it-works-flip .flip-back{
  background: linear-gradient(180deg, #1c3a75, #153364);
  border-color: rgba(96,165,250,.16);
}

/* Keep the nice hover without big jumps */
html.dark-mode .how-it-works-flip .flip-card:hover .flip-inner,
html.dark-mode .how-it-works-flip .flip-card:focus-within .flip-inner{
  transform: rotateY(180deg) translateY(-1px);
}

/* ===== Tutoring Includes — glossy cards ===== */
.tutoring-includes.glam{
  --brand:#1e40af;          /* primary */
  --accent:#60a5fa;         /* light blue accent */
  --panelA:#e9f2ff;         /* light panel */
  --panelB:#dfeafb;
  --ink:#0b1b3f;

  position: relative;
  margin: 3rem auto;
  padding: clamp(20px,3vw,34px);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;

  /* soft blue panel with faint pattern */
  background:
    radial-gradient(16px 16px at 12% 18%, rgba(255,255,255,.12) 20%, transparent 21%) repeat,
    linear-gradient(180deg, var(--panelA), var(--panelB));
  background-size: 22px 22px, auto;
  box-shadow: 0 18px 40px rgba(17,24,39,.14);
}

/* animated border glow */
.tutoring-includes.glam::before{
  content:"";
  position:absolute; inset:0;
  padding:1px; border-radius:22px;
  background: conic-gradient(from 180deg, var(--accent), transparent 30%, var(--brand), transparent 70%, var(--accent));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 8s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform: rotate(1turn); } }

.tutoring-includes.glam h2{
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* grid */
.tutoring-includes .includes-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(12px,2vw,18px);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: .5rem;
  list-style:none;
}
@media (min-width:640px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(4,1fr); } }

/* card */
.include-card{
  display:flex; align-items:center; gap:.85rem;
  padding: 1rem 1rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
  border: 1px solid rgba(96,165,250,.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 22px rgba(30,64,175,.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.include-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(30,64,175,.18);
  border-color: rgba(96,165,250,.6);
}

/* icon chip */
.include-card .ic{
  display:grid; place-items:center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: linear-gradient(180deg, #2563eb, #1e40af);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(37,99,235,.35);
}

/* text */
.include-card .perk-text strong{
  display:block; color:#0b1b3f; font-weight:800;
  letter-spacing:.2px;
}
.include-card .perk-text small{
  display:block; color:#2b4a7a; opacity:.9; margin-top:.15rem;
}

/* ===== Dark mode polish ===== */
/* ==== How it works – DARK MODE override (lighter tones) ==== */
html.dark-mode .how-it-works-flip{
  /* spacing + centering */
  padding: clamp(20px, 3vw, 36px);
  border-radius: 22px;
  overflow: hidden;
  text-align: center;

  /* on-brand, lighter dark blues */
  --brand: #1e40af;
  --accent: #60a5fa;
  background:
    radial-gradient(800px 220px at -10% -40%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(800px 220px at 110% 10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, #152b62, #122457);
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  color: #eaf2ff;
}

html.dark-mode .how-it-works-flip > h2{
  margin: 0 0 1.6rem;
  color: #eaf2ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* keep grid nicely inside the panel */
html.dark-mode .how-it-works-flip .flip-grid{
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: clamp(10px, 2vw, 18px);
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
@media (min-width: 640px){
  html.dark-mode .how-it-works-flip .flip-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  html.dark-mode .how-it-works-flip .flip-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* cards */
html.dark-mode .how-it-works-flip .flip-card{ perspective: 1000px; border-radius: 16px; overflow: hidden; }
html.dark-mode .how-it-works-flip .flip-inner{
  position: relative; width: 100%; height: 180px;
  transform-style: preserve-3d; transition: transform .6s; border-radius: 16px;
}
html.dark-mode .how-it-works-flip .flip-front,
html.dark-mode .how-it-works-flip .flip-back{
  position: absolute; inset: 0; padding: 1.25rem; border-radius: 16px;
  backface-visibility: hidden; display: flex; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  color: #eaf2ff;
}

/* lighter dark tiles */
html.dark-mode .how-it-works-flip .flip-front{
  background: linear-gradient(180deg, #0f1e44, #0d1a3b);
}
html.dark-mode .how-it-works-flip .flip-back{
  background: linear-gradient(180deg, #12306e, #102a60);
  transform: rotateY(180deg);
}

html.dark-mode .how-it-works-flip .flip-front .icon{ font-size: 1.6rem; margin-bottom: .5rem; }
html.dark-mode .how-it-works-flip .flip-front h3{
  font-size: 1rem; letter-spacing: .3px; color: #f2f7ff; text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

html.dark-mode .how-it-works-flip .flip-card:hover .flip-inner,
html.dark-mode .how-it-works-flip .flip-card:focus-within .flip-inner{
  transform: rotateY(180deg) translateY(-2px);
}

/* ===== Tutoring Includes — glossy cards ===== */
.tutoring-includes.glam{
  --brand:#1e40af;          /* primary */
  --accent:#60a5fa;         /* light blue accent */
  --panelA:#e9f2ff;         /* light panel */
  --panelB:#dfeafb;
  --ink:#0b1b3f;

  position: relative;
  margin: 3rem auto;
  padding: clamp(20px,3vw,34px);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;

  /* soft blue panel with faint pattern */
  background:
    radial-gradient(16px 16px at 12% 18%, rgba(255,255,255,.12) 20%, transparent 21%) repeat,
    linear-gradient(180deg, var(--panelA), var(--panelB));
  background-size: 22px 22px, auto;
  box-shadow: 0 18px 40px rgba(17,24,39,.14);
}

/* animated border glow */
.tutoring-includes.glam::before{
  content:"";
  position:absolute; inset:0;
  padding:1px; border-radius:22px;
  background: conic-gradient(from 180deg, var(--accent), transparent 30%, var(--brand), transparent 70%, var(--accent));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 8s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform: rotate(1turn); } }

.tutoring-includes.glam h2{
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* grid */
.tutoring-includes .includes-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(12px,2vw,18px);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: .5rem;
  list-style:none;
}
@media (min-width:640px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(4,1fr); } }

/* card */
.include-card{
  display:flex; align-items:center; gap:.85rem;
  padding: 1rem 1rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
  border: 1px solid rgba(96,165,250,.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 22px rgba(30,64,175,.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.include-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(30,64,175,.18);
  border-color: rgba(96,165,250,.6);
}

/* icon chip */
.include-card .ic{
  display:grid; place-items:center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: linear-gradient(180deg, #2563eb, #1e40af);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(37,99,235,.35);
}

/* text */
.include-card .perk-text strong{
  display:block; color:#0b1b3f; font-weight:800;
  letter-spacing:.2px;
}
.include-card .perk-text small{
  display:block; color:#2b4a7a; opacity:.9; margin-top:.15rem;
}

/* ===== Dark mode polish ===== */
html.dark-mode .tutoring-includes.glam{
  --panelA:#0f1f42; --panelB:#0c1a38; --ink:#eaf2ff;
  background:
    radial-gradient(16px 16px at 12% 18%, rgba(255,255,255,.06) 20%, transparent 21%) repeat,
    linear-gradient(180deg, var(--panelA), var(--panelB));
  box-shadow: 0 22px 44px rgba(0,0,0,.35);
}
html.dark-mode .tutoring-includes.glam h2{ color: var(--ink); }

html.dark-mode .include-card{
  background: linear-gradient(180deg, rgba(17,34,73,.8), rgba(15,30,65,.7));
  border-color: rgba(96,165,250,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
html.dark-mode .include-card .perk-text strong{ color:#eaf2ff; }
html.dark-mode .include-card .perk-text small{ color:#b9d4ff; }



.pricing-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px){
  .pricing-cards{ grid-template-columns: repeat(2,1fr); }
}

/* Softer brand-blue cards */
.pricing-card{
  --brand: #1e40af;                /* your main blue */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 70%, white 30%),
      color-mix(in oklab, var(--brand) 55%, white 45%));
  color:#fff;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 28px rgba(30,64,175,.18);
  text-align:center;
}

.pricing-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.pricing-card .price{ font-size:2rem; font-weight:800; margin:.25rem 0 .25rem; }
.pricing-card .price span{ font-size:1rem; font-weight:600; opacity:.9; }
.pricing-card .price-desc{ color:#eef2ff; margin-bottom:.75rem; }
.pricing-card .price-note{ color:#e5edff; font-size:.9rem; opacity:.95; }

.pricing-card.featured{
  outline: 2px solid color-mix(in oklab, var(--brand) 40%, white 60%);
  box-shadow: 0 22px 32px rgba(30,64,175,.22);
}

/* Dark mode tweak: keep it readable but still blue */
html.dark-mode .pricing-card{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 85%, white 15%),
      color-mix(in oklab, var(--brand) 70%, white 30%));
  border-color: rgba(255,255,255,.18);
}
/* Center the pricing heading + subtitle */
.pricing-section h2,
.pricing-section .pricing-subtitle{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Nice readable width for the subtitle */
.pricing-section .pricing-subtitle{
  max-width: 720px;
  margin-top: .25rem;
  margin-bottom: 1.75rem;
  line-height: 1.55;
}
/* ===== FAQ (Light mode) ===== */

/* ===== FAQ – Base (shared layout, no colors) ===== */
.faq-section{
  padding:4rem 1.5rem;
  border-radius:1rem;
  max-width:900px;
  margin:3rem auto;
  box-shadow:0 0 20px rgba(0,0,0,.12);
}
.faq-section h2{
  font-size:1.75rem;
  font-weight:600;
  text-align:center;
  margin-bottom:2rem;
}
.faq-list{ display:flex; flex-direction:column; gap:1rem; }
.faq-item{
  border-radius:.75rem;
  overflow:hidden;
  box-shadow:0 0 12px rgba(0,0,0,.08);
}
.faq-question{
  background:none;
  font-size:1rem;
  font-weight:500;
  padding:1rem 1.25rem;
  text-align:left;
  width:100%;
  border:none;
  cursor:pointer;
  transition:background .3s ease;
}
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
/* When you open an item, add .open on the .faq-item */
.faq-item.open .faq-answer{ max-height:480px; }

/* ===== Light theme ===== */
html:not(.dark-mode) .faq-section{
  background:#eef5ff;       /* light blue panel */
  color:#0b2447;
}
html:not(.dark-mode) .faq-item{
  background:#ffffff;
  border:1px solid #dbeafe;
  box-shadow:0 6px 16px rgba(12,46,94,.06);
}
html:not(.dark-mode) .faq-question{ color:#0b2447; }
html:not(.dark-mode) .faq-question:hover{ background:#f1f7ff; }
html:not(.dark-mode) .faq-answer{
  background:#f8fbff;
  color:#1f2937;
  border-top:1px solid #e5efff;
  padding:0 1.25rem 1rem;
}

/* ===== Dark theme (your original look) ===== */
html.dark-mode .faq-section{
  background-color:#1f2937;
  color:#ffffff;
  box-shadow:0 0 20px rgba(0,0,0,.25);
}
html.dark-mode .faq-item{
  background-color:#111827;
  box-shadow:0 0 12px rgba(0,0,0,.15);
}
html.dark-mode .faq-question{ color:#ffffff; }
html.dark-mode .faq-question:hover{ background-color:#374151; }
html.dark-mode .faq-answer{
  background:#0f172a;
  color:#e5e7eb;
  border-top:1px solid #334155;
  padding:0 1.25rem 1rem;
}


.final-cta {
  background-color: #1e3a8a;
  color: #ffffff;
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  margin-top: 4rem;
}

.final-cta h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.final-cta p {
  font-size: 1rem;
  color: #dbeafe;
  margin-bottom: 0.75rem;
}

.final-cta .cta-note {
  font-style: italic;
  color: #93c5fd;
  margin-bottom: 1.5rem;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.cta-buttons a {
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s;
}

.cta-buttons a:hover {
  background-color: #1d4ed8;
}

.hero-tutor {
  padding: 4rem 1.5rem;
  text-align: center;
  background-color: #eaf4ff; /* light mode */
  color: #111;
}


/* ===== Landing Page: GCSE Tutor Booking ===== */



.hero-tutor h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-tutor .subtitle {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.cta-button,
.cta-button-large {
  background-color: #ffcc00;
  color: #111827;
  font-weight: bold;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

.cta-button:hover,
.cta-button-large:hover {
  background-color: #e6b800;
}

.cta-button-large {
  font-size: 1.25rem;
  padding: 1rem 2rem;
}

.how-it-works {
  background: #fff;
  padding: 4rem 1.5rem;
  text-align: center;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 2rem auto 0;
}

.step-card {
  background: #f1f5f9;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.about-tutor {
  background: #e0f2fe;
  padding: 4rem 1.5rem;
  text-align: center;
  color: #0f172a;
}

.about-tutor ul {
  max-width: 700px;
  margin: 2rem auto 0;
  text-align: left;
  list-style: none;
  padding: 0;
}

.about-tutor li {
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.testimonials {
  background: #f3f4f6;
  padding: 4rem 1.5rem;
  text-align: center;
}

.testimonials blockquote {
  font-style: italic;
  max-width: 700px;
  margin: 1rem auto;
  color: #374151;
}

.pricing-tutor {
  background: #1f2937;
  color: white;
  padding: 4rem 1.5rem;
  text-align: center;
}

.pricing-tutor p {
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

.cta-final {
  background: #111827;
  color: white;
  padding: 4rem 1.5rem;
  text-align: center;
}

/* ======= A LEVEL & GCSE TUTORING COMMON SECTIONS ======= */


.hero-tutor h1 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  color: #326d88;
}

.hero-tutor .subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta-button {
  background-color: white;
  color: #3f87a6;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #e0f3ff;
}

.cta-button-large {
  background: #3f87a6;
  color: white;
  font-size: 1.1rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-button-large:hover {
  background: #326d88;
}

/* Benefits Grid */
.benefits-tutor {
  background-color: #f9fafb;
  padding: 8rem 1.5rem;
  text-align: center;
}

.benefits-tutor h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: #326d88;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.benefit-card {
  background-color: #e0f2fe; /* Light sky blue */
  color: #0c4a6e; /* Dark blue text for contrast */
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  line-height: 1.4;
  transition: background-color 0.3s, color 0.3s;
}

/* How It Works Section */
.how-it-works {
  padding: 4rem 1.5rem;
  text-align: center;
  background-color: #f9fafb;
}

.how-it-works h1 {
  color: #0c4a6e;
}
/* Grid Layout */
.steps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Step Card Style */
.step-card {
  flex: 1 1 calc(25% - 1.5rem);
  background-color: #e0f2fe;
  color: #0c4a6e;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, background-color 0.3s;
}

.step-card:hover {
  transform: translateY(-5px);
  background-color: #bae6fd;
}
/* About Tutor */
.about-tutor {
  background-color: #f0f8ff;
  padding: 3rem 1rem;
  text-align: center;
}

.about-tutor h2 {
  margin-bottom: 1rem;
  color: #3f87a6;
}

.about-tutor ul {
  list-style: none;
  padding-left: 0;
  max-width: 700px;
  margin: 1.5rem auto 0;
}

.about-tutor ul li {
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

/* Testimonials */
.testimonials {
  background-color: #fff;
  padding: 3rem 1rem;
  text-align: center;
}

.testimonials blockquote {
  font-style: italic;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 1rem auto;
  padding: 1rem;
  border-left: 4px solid #3f87a6;
  background-color: #f6faff;
  border-radius: 8px;
}

/* Pricing Section */
.pricing-tutor {
  background: #eaf4fb;
  text-align: center;
  padding: 3rem 1rem;
}

.pricing-tutor h2 {
  color: #3f87a6;
  margin-bottom: 1rem;
}

.pricing-tutor p {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

/* Final CTA */
.cta-final {
  background: #3f87a6;
  color: white;
  text-align: center;
  padding: 4rem 1rem;
}

.cta-final h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.category-section {
  text-align: center;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Flip Card Base */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 260px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flip-card-front {
  background-color: #e0f7ff;
  color: #111;
}

html.dark-mode .flip-card-front {
  background-color: #2a3b4c;
  color: #eee;
}

.flip-card-back {
  background-color: #1e293b;
  color: #fff;
  transform: rotateY(180deg);
  flex-direction: column;
}

.category-content-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.category-icon-inline {
  width: 48px;
  height: 48px;
}

.category-labels h2 {
  margin: 0;
  font-size: 1.25rem;
}

.subcategory-count {
  font-size: 0.85rem;
  color: #666;
}

.subcategory-preview {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  line-height: 1.4;
}

.button.small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  background-color: #ffd500;
  color: #111;
  border-radius: 0.5rem;
  text-decoration: none;
  margin-top: 1rem;
}