:root{
      /* Hillsdale-ish palette */
      --navy:#0070B9;           /* brand navy */
      --fg:#0070B9;             /* text color */
      --bg:#ffffff;             /* page bg */
      --muted:#61677a;          /* muted text */
      --border:#e6e7eb;         /* light borders */
      --tint:#f6f7fb;           /* light panel */
      --shadow:0 8px 24px rgba(16,16,24,.06),0 2px 8px rgba(16,16,24,.05);
      --radius:5px; --radius-lg:5px; --radius-xl:5px;
      --maxw:1200px;
    }

    /* Smooth Scroll */
    html{scroll-behavior:smooth}

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family: Open Sans, sans-serif;}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{max-width:var(--maxw);margin-inline:auto;padding:0 24px}

    /* Topbar */
    .topbar{position:sticky;top:0;z-index:40;background:rgba(0,0,0,1);backdrop-filter:blur(8px);padding-top:env(safe-area-inset-top);}
    .topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px;flex-wrap:wrap}
    .topbar-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    .util-link{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);opacity:.9}
    .util-link:hover{text-decoration:underline}
    .logo{display:inline-flex;align-items:center;gap:10px}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:5px;font-weight:700;border:1px solid var(--navy);transition:.18s ease; font-family: Open Sans Condensed, sans-serif; font-size: 18px;}
    .btn:hover{box-shadow:var(--shadow)}
    .btn-primary{background:var(--navy);color:#fff}
    .btn-outline{background:#fff;color:var(--navy)}

    /* Hero */
    .hero{position:relative;background:url('../images/hero-bg.jpg');background-size:cover;background-position:center;background-repeat:no-repeat; }
    .hero{color: #fff}
    .hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding:clamp(36px,6vw,56px) 0}
    .eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.22em;color:#acbbc5;font-weight:800;text-transform:uppercase}
    h1{font-size:clamp(32px,6vw,56px);line-height:1.12;margin:0 0 12px; font-family: Open Sans Condensed, sans-serif;}
    .lead{color:#fff;font-size:18px;max-width:60ch}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
    .cta-row .btn{flex:1 1 220px}
    .pill-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px;color:#f4f4f4;font-size:14px}
    .pill-row i{margin-right: 5px;}
    .icon{width:22px;height:22px;stroke:#111;stroke-width:2;fill:none}
    .dark .icon, .cta-row .icon, .icon-lt{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none}
    .card{border:1px solid var(--border);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow)}
    .media{position:relative;aspect-ratio:16/9;background-color:#f2f3f6;border-radius:18px;overflow:hidden}
    .media-wrap{padding:8px}
    .media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
    .card-body{padding:14px 16px;color:var(--muted); font-size: 14px}
    .card-body a{color: var(--navy);}

    /* Single-course dark hero */
    .course-hero{
      display:grid;
      grid-template-columns: 1fr;
      gap: clamp(16px, 3vw, 28px);
      padding: clamp(16px, 3vw, 28px);
      border-radius: 8px;
      background: rgba(255,255,255,.06);           /* sits nicely on .dark bg */
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
    }

    /* media block */
    .course-hero__media { overflow: hidden; border-radius: 14px; }
    .course-hero__img{
      display:block;
      width:100%;
      height:auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 14px;
    }

    /* text */
    .course-hero__body{ display:grid; align-content:center; gap: .75rem; }
    .course-hero__title{
      margin:0;
      font-size: clamp(22px, 3.2vw, 32px);
      line-height: 1.2;
      color: #fff; /* enforce in dark panel */
    }
    .course-hero__desc{ margin: .25rem 0 1.5rem; color:#e7e7e7; }

    /* meta row */
    .course-hero__meta{
      display:flex; gap:18px; align-items:center; flex-wrap:wrap;
      color:#d7d7d7; font-size:14px;
    }
    .course-hero__meta i{ margin-right:6px; }

    /* CTA */
    .course-hero__cta{ margin-top: 4px; }
    .course-hero .btn.btn-primary{
      /* your existing button system; no width forcing so it stays content-width */
    }

    /* responsive: split on md+ */
    @media (min-width: 768px){
      /* image left, content right with comfy max width on image */
      .course-hero{
        grid-template-columns: minmax(0, 560px) 1fr;
        align-items: center;
      }
    }

    /* Social & Study Hall row */
.social-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:14px;
}

.studyhall-text{
  font-weight:700;
  color: var(--navy);
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color: var(--navy);
  text-decoration:none;
}

.social-row i{ font-size:18px; }

/* dark section override */
.dark .social-row .studyhall-text,
.dark .social-row .social-link{
  color:#fff;
}




    /* Social strip */
    .strip{border-block:1px solid var(--border);background:#fafafa}
    .strip-inner{display:flex;gap:28px;flex-wrap:wrap;align-items:center;justify-content:center;padding:14px 0; font-size: 14px}
    .dot{width:4px;height:4px;border-radius:50%;background:#d6d7de}
    .muted{color:#7a7d8c;font-size:18px;text-transform:uppercase;font-family: 'Open Sans Condensed', sans-serif;;
    font-weight: 900;}

    /* Sections */
    section{padding:clamp(36px,6vw,64px) 0}
    h2{font-size:35px;margin:0; font-family: Open Sans Condensed, sans-serif; line-height: 40px;}
    .section-lead{margin-top:10px;color:#61677a}

    #how-it-works i{color:var(--muted); font-size: 20px}

    .grid-4{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
    .info{border:1px solid var(--border);background:#fff;border-radius:var(--radius-xl);padding:20px;transition:.18s}
    .info:hover{box-shadow:var(--shadow)}
    .info h3{margin:10px 0 0;font-size:18px}
    .info p{margin:8px 0 0;color:#616572;font-size:14px}
    .dark .info, .dark .info p , .dark .info-body, .dark .info-body p {color:var(--muted);}

    .two{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-top:24px;}
    .list{list-style:none;padding:0;margin:24px 0 0;color:#3b4050}
    .list li{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:14px}
    .badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .badge{border:1px solid var(--border);background:#fff;border-radius:16px;padding:14px}
    .badge .label{font-size:11px;letter-spacing:.2em;color:#8a8ea0;text-transform:uppercase}
    .badge .value{margin-top:4px;font-weight:800;color:#111827}

    .light{background:#f6f7fb}
    .dark{background:linear-gradient(to bottom,#222,#000)}
    .dark, .dark p, .dark li{color: #fff}
    .dark2{background:linear-gradient(to bottom,#000,#222)}
    .blue{background:var(--navy)}
    .grid-3{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
    blockquote{margin:0;font-size:22px;line-height:1.5}



    /* Final CTA */
    .final{background:linear-gradient(to bottom,#f1f3f8,#fff)}
    .subtle{color:#7a7d8c;font-size:12px;margin-top:10px}

    /* Footer */
    footer{border-top:1px solid var(--border);padding:24px 0;color:#7a7d8c}
    footer .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
     .footer-separator {
      border-top: 1px solid #495d7d;
      margin-top: 40px;
    }
    footer {
      background-color: #0c2752;
      padding: 40px 20px;
      text-align: center;
      color: #bbb;
      font-size: 0.85rem;
      font-family: 'Open Sans', sans-serif;
      letter-spacing: 0.5px;
    }
    footer a {
      color: #bbb;
      text-decoration: none;
    }
    footer a:hover {
      color: #fff;
    }
    .footer-info {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 5px;
    }

    /* Responsive */
    @media (min-width:768px){
      h1{font-size:56px}
      .hero-grid{grid-template-columns:1fr 1fr}
      .two{grid-template-columns:1fr 1fr}
      .grid-4{grid-template-columns:repeat(4,1fr)}
      .grid-3{grid-template-columns:repeat(3,1fr)}
    }
  
/* Mobile-only tweaks */
@media (max-width: 640px){
  /* Add side padding to the hero area */
  .hero .hero-grid{padding-left:16px;padding-right:16px}

  /* Hide the first "Start for FREE..." CTA in the top nav on small screens only */
  .topbar-nav .btn:first-child{display:none !important}
}

/* Tablet / mid screens */
@media (min-width: 640px) and (max-width: 1280px){
  /* Add comfortable side padding to the hero only */
  .hero .container{padding-left:clamp(28px,6vw,56px);padding-right:clamp(28px,6vw,56px)}
}

    
/* Center the text inside hero CTA buttons (including the leading icon) */
.hero .cta-row .btn{
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

/* Fix bottom full-width button: keep it to content width and center it */
.footer .btn, .bottom-cta .btn, .end-cta .btn{
  width:auto;
  max-width:max-content;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}

    
/* Ensure hero CTA button contents are centered perfectly */
.hero .cta-row{justify-content:center}
.hero .cta-row .btn{
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

/* Prevent the final bottom CTA from stretching full width */
.final .cta-row .btn{
  flex:0 0 auto;
  width:auto;
}
.bold{font-weight: bold; margin: 0 -4px;}
    


    
/* Desktop: FAQs should be 2 per row (scoped) */
@media (min-width: 1024px){
  #faq .grid-3{grid-template-columns:repeat(2,1fr)}
}

    
/* Hero background overlay */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  pointer-events:none;
}
.hero > *{position:relative;z-index:1}

    
/* Keep hero CTA button to content width (not full-width) */
.hero .cta-row .btn{
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* Testimonial Slider */
.testimonial-slider {
  position: relative;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  color: #ffffff;
  align-items: center;       /* centers blockquotes vertically */
  justify-content: center;   /* centers them horizontally too */
  text-align: center;
  padding: 0 20px;           /* optional: prevents text from touching edges */
}

.testimonial-slider blockquote {
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  width: 100%;
  max-width: 800px;          /* keeps quotes readable on large screens */
  line-height: 1.6;
  font-size: 20px;
  font-style: italic;
  margin: 0 auto;
}

.testimonial-slider blockquote.active {
  opacity: 1;
  position: relative;
}


    
/* Left-align hero CTAs and keep button to content width */
.hero .cta-row{justify-content:flex-start !important}
.hero .cta-row .btn{flex:0 0 auto !important;width:auto !important;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}

    
/* Explore cards: optional image at top */
.info.has-thumb{padding:0; overflow:hidden}
.info-thumb{width:100%; aspect-ratio:16/9; background: var(--thumb), linear-gradient(180deg,#e8ecf3,#d5ddea); background-size:cover; background-position:center}
.info-thumb.media {
  background-image: var(--thumb);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
}
.info-body{padding:20px 20px 0}
.info.has-thumb p{margin: 0 0 0;}
.info.has-thumb > :not(.info-thumb):not(.info-body){padding:20px}