/* GLOBAL RESET – put at the VERY TOP of school.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* kill tiny horizontal scroll and tiny side gaps */
}


:root {
  /* Brand palette (يمكنك تعديل القِيَم قليلاً) */
  --brand-orange: #ff7a00;     /* مثل كارت 30$ */
  --brand-orange-dark: #d85e00;
  --brand-gold: #f4b341;
  --brand-teal-dark: #051922;  /* خلفية مثل furqan.academy */
  --brand-teal-soft: #0d3b46;
  --brand-ink: #10131a;
  --brand-muted: #f4f6fb;

  --text-main: #111827;
  --text-soft: #6b7280;
  --text-on-dark: #f9fafb;

  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow-soft: 0 18px 45px rgba(0,0,0,.25);

  --transition-fast: 180ms ease-out;

  --font-body: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* NEW: special calligraphic font just for Bismillah */
  --font-bismillah: "Amiri Quran", "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}

/* Global reset for page edges */
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-main);
  background: #ffffff;
}


/* Global heading style – clean Poppins look */
h1, h2, h3,
.section-title,
.hero-text h1,
.brand-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Hero main heading – big like “Start Your Journey…” */
.hero-text h1 {
  font-size: clamp(2.4rem, 3.4vw + 0.8rem, 3.8rem);
  line-height: 1.15;
}

/* Section titles (“Online Qur'an & Arabic Programs”, etc.) */
.section-title {
  font-size: clamp(2rem, 2.4vw + 0.4rem, 2.6rem);
  line-height: 1.2;
}

/* Brand title in navbar a bit more compact */
.brand-title {
  font-size: 1.05rem;
  font-weight: 700;
}


/* Layout helpers */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}



/* Top banner */
.top-banner {
  background: linear-gradient(to right, var(--brand-orange-dark), var(--brand-orange));
  color: var(--text-on-dark);
  font-size: .9rem;
}
.top-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 1.25rem;
}
.top-banner-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-banner-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

/* Header & nav */
.main-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(5, 25, 34, 0.96);
  backdrop-filter: blur(18px);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 1.25rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}


.brand-logo-circle {
  width: 72px;          /* was 40px */
  height: 72px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* New background: light so the orange logo is visible */
  background: #ffffff;                  /* pure white circle */
  border: 1px solid var(--brand-orange);/* subtle orange ring */
                 
}




.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-title {
  font-weight: 800;
  letter-spacing: .03em;
  font-size: 1.05rem;
  color: #fff;
}
.brand-subtitle {
  font-size: .75rem;
  color: #cbd5f5;
}

.nav-links {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  font-size: 1rem;  /* better for both desktop & mobile */
}

.nav-links a {
  color: #e5e7eb;
  text-decoration: none;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.3rem;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--brand-orange), var(--brand-gold));
  transition: width var(--transition-fast);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-cta {
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--brand-gold);
  color: #fff;
  background: linear-gradient(to right, var(--brand-orange), var(--brand-gold));
  font-weight: 600;
}

/* Nav right area */
.nav-right {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.icon-btn {
  position: relative;
  border: none;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 1.1rem;
}
/* Ensure logo SVG fits nicely inside the orange circle */
.brand-logo-circle img,
.brand-logo-img {
  width: 100px;      /* you can try 24–30px until it feels right */
  height: 100px;
  display: block;
  object-fit: contain;
}

.icon-btn .badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  border-radius: 999px;
  padding: 0 4px;
}
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(15,23,42,.9);
  color: #e5e7eb;
  text-decoration: none;
}
.user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #f9fafb;
  font-size: 1.3rem;
}
@media (max-width: 900px){
  .nav-links {
    position: absolute;
    inset-inline: 1rem;
    top: 60px;
    flex-direction: column;
    align-items: flex-start;
    padding: .9rem 1rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, .98);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }
  .nav-links.nav-open{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-toggle { display: inline-flex; }
}

/* Hero */
.hero-section {
  position: relative;
  background-image: url("../img/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  color: var(--text-on-dark);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 122, 0, .35), transparent 40%),
    linear-gradient(to bottom, rgba(5, 25, 34, .96), rgba(5, 25, 34, .96));
}

/* pulled a bit closer to the navbar + align both columns */
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  padding: 3rem 1.25rem 3.4rem;  /* was 4.5rem top – now closer */
  align-items: flex-start;        /* Bismillah + LIVE card share same top line */
}

/* hero text block */
.hero-text {
  margin-top: -0.4rem;   /* gentle lift so Bismillah is closer to the nav */
  padding-bottom: 2rem;
}

/* remove big default top margin on the first <p> (Bismillah) */
.hero-text > p:first-child {
  margin-top: 0;
}

/* keep hero-media aligned with text */
.hero-media {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 0;
}


.hero-kicker {
  margin: 0 0 .4rem;      /* remove default top margin on <p> */
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}

.hero-text h1 {
  font-size: clamp(2rem, 3.2vw + .5rem, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-top: .3rem;
}
.hero-text h1 span {
  color: var(--brand-gold);
}
.hero-sub {
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #e5e7eb;
}
.hero-actions {
  margin-top: 1.4rem;
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}
.btn-primary,
.btn-ghost,
.btn-outline,
.btn-mini {
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .6rem 1.2rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast), color var(--transition-fast);
}
.btn-primary {
  background: linear-gradient(to right, var(--brand-orange), var(--brand-gold));
  color: #111827;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}
.btn-ghost {
  border: 1px solid rgba(249,250,251,.5);
  color: #f9fafb;
  background: transparent;
}
.btn-outline {
  border: 1px solid var(--brand-orange);
  color: var(--brand-orange-dark);
  background: #fff;
}
.btn-mini {
  padding: .35rem .85rem;
  font-size: .8rem;
  background: rgba(15,23,42,.9);
  color: #f9fafb;
}

.hero-badges {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8rem;
}
.hero-badges span{
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(15,23,42,.8);
}


.hero-card {
  background: rgba(15, 23, 42, .92);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-soft);
}
.hero-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.6rem;
}
.pill-live{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  padding:.15rem .65rem;
  border-radius:999px;
  font-size:.75rem;
  background:#fee2e2;
  color:#b91c1c;
}
.pill-live .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ef4444;
}
.hero-card-title{
  font-size:.9rem;
  color:#cbd5f5;
}
.hero-card-body{
  font-size:1.1rem;
  color:#e5e7eb;
}
.hero-card-footer{
  margin-top:.7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.hero-status{
  font-size:.8rem;
  color:#a5b4fc;
}
.hero-stats{
  display:flex;
  gap:1rem;
}
.hero-stats .stat{
  flex:1;
  background:rgba(15,23,42,.85);
  border-radius:18px;
  padding:.7rem .8rem;
  text-align:center;
}
.hero-stats strong{
  display:block;
  font-size:1.2rem;
  color:var(--brand-gold);
}
.hero-stats span{
  font-size:.72rem;
  color:#d1d5db;
}

@media (max-width: 900px){
  .hero-inner{
    grid-template-columns: minmax(0,1fr);
    padding: 2.4rem 1.25rem 2.6rem;  /* tighter on mobile */
    gap: 2rem;
  }

  .hero-text{
    text-align: center;
    padding-bottom: 1.6rem;
    margin-top: 0;
  }

  .hero-actions{
    justify-content: center;
  }

  .hero-badges{
    justify-content: center;
  }

  .hero-media{
    max-width: 420px;
    margin: 0 auto;       /* center LIVE card + stats under text */
  }
}

/* Sections */
.section {
  padding: 3.2rem 0;
}
.section-light {
  background: #ffffff;
}
.section-dark {
  background: var(--brand-teal-dark);
  color: var(--text-on-dark);
}
.section-muted {
  background: var(--brand-muted);
}
.section-cta{
  background: linear-gradient(to right, var(--brand-teal-dark), var(--brand-teal-soft));
  color:#f9fafb;
}
.section-kicker {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 1rem;
  color: var(--brand-orange-dark);
}
.section-dark .section-kicker{
  color: var(--brand-gold);
}
.section-title {
  font-size: 1.8rem;
  margin-top: .3rem;
  margin-bottom: 1.2rem;
}
.text-on-dark{ color:#f9fafb; }
.text-soft{ color:#9ca3af; }

.two-col{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1.2fr);
  gap:2.5rem;
  align-items:center;
}
.image-box img{
  width:100%;
  border-radius:24px;
  object-fit:cover;
}
.check-list{
  list-style:none;
  padding-left:0;
  margin-top:1rem;
}
.check-list li{
  position:relative;
  padding-left:1.6rem;
  margin-bottom:.45rem;
  font-size: 1.2rem;
  color:var(--text-soft);
}
.check-list li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:0;
  color:var(--brand-orange-dark);
}

/* Cards grid */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:1.8rem;
}
.course-card{
  background:#0b2631;
  border-radius:var(--radius-md);
  padding:1.4rem 1.3rem;
  color:#e5e7eb;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.course-card::after{
  content:"";
  position:absolute;
  inset:auto -40%;
  top:-40%;
  height:60%;
  background:radial-gradient(circle at top,
    rgba(255,122,0,.23), transparent 65%);
  opacity:0;
  transition:opacity var(--transition-fast);
}
.course-card:hover::after{ opacity:1; }
.course-icon{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.9);
  color:var(--brand-gold);
  margin-bottom:.9rem;
}
.course-card h3{
  font-size:1.3rem;
  margin-bottom:.4rem;
}
.course-card p{
  font-size: 1.2rem;
  line-height: 1.6;
  color:#cbd5f5;
}
.card-link{
  margin-top:.7rem;
  display:inline-flex;
  font-size:.85rem;
  color:var(--brand-gold);
}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:1.8rem;
  align-items:stretch;
}
.price-card{
  background:#ffffff;
  border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem 1.4rem;
  box-shadow:0 12px 35px rgba(15,23,42,.12);
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.price-header{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.plan-name{
  font-weight:700;
  font-size:1.2rem;
}
.plan-tag{
  font-size:1rem;
  color:var(--text-soft);
}
.price-main{
  display:flex;
  align-items:flex-end;
  gap:.12rem;
}
.price-main .currency{
  font-size:1.2rem;
  color:var(--brand-orange-dark);
}
.price-main .amount{
  font-size:2.3rem;
  font-weight:800;
}
.price-main .period{
  font-size:.85rem;
  color:var(--text-soft);
}
.price-features{
  list-style:none;
  padding-left:0;
  margin:.4rem 0 .8rem;
  font-size:.9rem;
  color:var(--text-soft);
}
.price-features li {
  font-size: 1.2rem;
  line-height: 1.6;
}
.price-card-main{
  position:relative;
  background:linear-gradient(145deg,#ff7a00,#f4b341);
  color:#111827;
  transform:translateY(-10px);
}
.price-card-main .price-header,
.price-card-main .price-features,
.price-card-main .price-subtitle{
  color:#111827;
}
.price-card-main .btn-primary{
  background:#111827;
  color:#f9fafb;
}

/* ====== Pricing ribbon: FULL ACCESS ====== */
.price-card-main{
  position: relative;   /* anchor for the ribbon */
}

.price-card .ribbon{
  position: absolute;
  top: 14px;          /* inside the orange card */
  left: -30px;        /* tucked into the corner */

  width: 130px;
  padding: 0.28rem 0;

  background: transparent;     /* transparent strip */
  color: #351c04;               /* dark ink text */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  font-weight: 700;

  border: 1px solid rgba(15,23,42,0.25);  /* subtle outline so it’s still visible */
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

/* small folded corners */
.price-card .ribbon::before,
.price-card .ribbon::after{
  content: "";
  position: absolute;
  bottom: -9px;
  width: 9px;
  height: 9px;
  background: rgba(15,23,42,0.08);
}
.price-card .ribbon::before{
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.price-card .ribbon::after{
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Optional: tiny tweak on mobile so it stays neat */
@media (max-width: 768px){
  .price-card .ribbon{
    top: 3px;
    left: -26px;
    width: 105px;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
  }
}




/* Blog cards */
.blog-grid{
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.blog-card{
  background:#ffffff;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 12px 30px rgba(15,23,42,.12);
  display:flex;
  flex-direction:column;
}
.blog-thumb img{
  width:100%;
  height:180px;
  object-fit:cover;
}
.blog-body{
  padding:1rem 1.1rem 1.1rem;
}
.blog-body h3{
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:.35rem;
}

/* Testimonial */
.testimonial-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
  gap:2rem;
  align-items:center;
}
.testimonial-card{
  background:rgba(15,23,42,.9);
  border-radius:var(--radius-lg);
  padding:1.8rem 1.7rem;
  box-shadow:var(--shadow-soft);
}
.testimonial-card h2{
  font-size:1.5rem;
  margin-bottom:.7rem;
}
.testimonial-text{
  color:#e5e7eb;
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom:.9rem;
}
.blog-body p {
  font-size: 1.3rem;
  line-height: 1.6;
}
.testimonial-author{
  font-weight:600;
}
.testimonial-image img{
  width:100%;
  border-radius:var(--radius-lg);
}

/* CTA */
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.8rem;
}
.cta-text h2{
  font-size:1.7rem;
  margin-bottom:.4rem;
}
.cta-text p{
  color:#e5e7eb;
}

/* Footer */
.site-footer{
  background:var(--brand-teal-dark);
  color:#e5e7eb;
}
.footer-grid{
  display:grid;
  grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:2rem;
  padding:2.4rem 1.25rem;
}
.footer-brand h3{
  margin-bottom:.3rem;
}
.footer-brand p{
  font-size:.9rem;
  max-width:20rem;
}
.footer-contact-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.4rem;
}
.footer-col h4{
  margin-bottom:.7rem;
}
.footer-col a{
  display:block;
  color:#e5e7eb;
  text-decoration:none;
  font-size:.9rem;
  margin-bottom:.25rem;
}
.footer-col a:hover{
  color:var(--brand-gold);
}
.newsletter-form{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.newsletter-form input{
  border-radius:999px;
  border:none;
  padding:.45rem .9rem;
}
.newsletter-form button{
  border-radius:999px;
  border:none;
  padding:.45rem .9rem;
  font-weight:600;
  background:linear-gradient(to right,var(--brand-orange),var(--brand-gold));
}

.footer-bottom{
  border-top:1px solid rgba(148,163,184,.4);
  padding:.8rem 0;
  font-size:.8rem;
}
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

/* Scroll animations */
[data-animate]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 260ms ease-out, transform 260ms ease-out;
}
.in-view{
  opacity:1 !important;
  transform:translateY(0) !important;
}

p,
li,
a,
span,
small,
button,
input,
textarea {
  font-family: var(--font-body);
  font-size: 1.02rem;
}

/* Slightly softer color for secondary text */
.section-light p,
.section-muted p,
.section-dark p {
  color: var(--text-soft);
}



/* Generic Arabic text (for other sentences) */
.arabic-text {
  font-family: var(--font-arabic);
  font-size: 1.02rem;
  line-height: 1.8;
}

/* Bismillah – more refined Qur'an style */
.bismillah-text {
  font-family: var(--font-bismillah);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #f9fafb;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  display: inline-block;
  line-height: 1.3; 
}


/* Slightly tighter spacing in the hero */
.hero-section .bismillah-text {
  margin-bottom: 1rem;
}



@media (max-width: 900px){
  .two-col,
  .pricing-grid,
  .cards-grid,
  .blog-grid,
  .testimonial-wrap,
  .footer-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .price-card-main{
    transform:none;
  }

  .hero-inner{
    grid-template-columns: minmax(0,1fr);
    padding-top: 2.4rem;     /* closer to navbar on phones */
    padding-bottom: 3rem;
    gap: 2rem;
  }

  .hero-text{
    margin-top: 0;           /* no negative margin on very small screens */
    text-align: center;
  }

  .hero-actions,
  .hero-badges{
    justify-content: center;
  }

  .hero-media{
    max-width: 430px;
    margin: 1.4rem auto 0;   /* LIVE card centered and nicely spaced */
  }

  .cta-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}


@media (max-width: 640px){
  .section{
    padding:2.4rem 0;
  }
  .hero-inner{
    padding-bottom:3rem;
  }
  .footer-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-text h1{
    font-size: 2.2rem;
  }
  .hero-sub{
    font-size: .95rem;
  }
  .bismillah-text{
    font-size: 1.7rem;
  }
  .nav-container{
    padding: .6rem .9rem;
  }
  .nav-links{
    font-size: .95rem;
  }
}


/* FIX: Full-width sections on mobile */
@media (max-width: 768px) {
  .container {
    padding-left: 0.75rem;   /* was 1.25rem */
    padding-right: 0.75rem;
  }

  /* Optional: For super tight full-width hero feel */
  .hero-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* EXTRA: mobile polish for top-banner + navbar + hero */
@media (max-width: 640px) {

  /* a bit less horizontal padding so content fills the phone better */
  .top-banner .container,
  .nav-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.75rem;
  }

  /* logo: slightly smaller circle on phones, SVG still clear */
  .brand-logo-circle {
    width: 60px;   /* was 72px */
    height: 60px;
  }

  .brand-logo-circle img {
    width: 80px;
    height: 80px;
  }

  /* brand text a bit tighter */
  .brand-title {
    font-size: 1rem;
  }

  .brand-subtitle {
    font-size: 0.72rem;
  }

  /* right side (bell + login) more compact */
  .nav-right {
    gap: 0.45rem;
  }

  .icon-btn {
    font-size: 1rem;
  }

  .nav-login {
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  /* hero content a bit closer to the edges, but still with breathing room */
  .hero-inner {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  /* keep hero text nicely centered on phones */
  .hero-text {
    text-align: center;
  }

  .hero-actions,
  .hero-badges {
    justify-content: center;
  }

  .hero-media {
    max-width: 430px;
    margin: 1.4rem auto 0;
  }
}


/* ========================= */
/*  DID YOU KNOW – slider    */
/* ========================= */

.didyou-section {
  background: var(--brand-muted);
}

.didyou-shell {
  position: relative;
  padding: 1.6rem 1.6rem 1.9rem;
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff, #e5edf8);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

/* soft glow behind text */
.didyou-shell::before {
  content: "";
  position: absolute;
  inset: auto -40%;
  top: -45%;
  height: 70%;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 122, 0, 0.28), transparent 65%),
    radial-gradient(circle at 90% 80%, rgba(5, 25, 34, 0.14), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.didyou-pill-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(5, 25, 34, 0.9);
  color: #f9fafb;
  margin-bottom: 0.85rem;
  z-index: 1;
}

.didyou-dot-icon {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--brand-orange), var(--brand-gold));
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.25);
}

/* the rotating lines */
.didyou-slider {
  position: relative;
  min-height: 4.2rem;
  z-index: 1;
}

.didyou-item {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 260ms ease-out,
    transform 260ms ease-out;
  font-size: 1.09rem;
  color: var(--text-main);
  max-width: 40rem;
}

.didyou-item.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* little progress dots */
.didyou-dots {
  position: relative;
  margin-top: 1.1rem;
  display: flex;
  gap: 0.35rem;
  z-index: 1;
}

.didyou-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.25);
  cursor: pointer;
  padding: 0;
}

.didyou-dot.is-active {
  width: 18px;
  background: linear-gradient(to right, var(--brand-orange), var(--brand-gold));
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .didyou-shell {
    padding: 1.3rem 1.2rem 1.6rem;
    border-radius: 20px;
  }
  .didyou-item {
    font-size: 0.98rem;
  }
}


/* ========================= */
/*  Course detail layout     */
/* ========================= */

/* left text column just reuses base typography, so only sidebar needs styling */

.course-sidebar {
  background: rgba(15, 23, 42, 0.96);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-soft);
  color: #e5e7eb;
}

.course-sidebar-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-gold);
  margin: 0 0 0.9rem;
}

.course-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  color: #d1d5db;
}

.course-meta li {
  margin-bottom: 0.35rem;
}

.course-meta strong {
  font-weight: 600;
  color: #f9fafb;
}

.course-sidebar-actions .btn-primary,
.course-sidebar-actions .btn-ghost {
  width: 100%;
  justify-content: center;
}

.course-sidebar-actions .btn-primary {
  margin-bottom: 0.55rem;
}

/* On mobile, sidebar drops under main text with breathing room */
@media (max-width: 900px) {
  .course-sidebar {
    margin-top: 1.8rem;
  }
}

/* Mobile behaviour for the “Did you know?” slider */
@media (max-width: 640px) {

  /* Let the card grow naturally with the text */
  .didyou-slider {
    position: relative;
    min-height: 0;              /* no fixed height on phones */
  }

  /* On mobile: items are in normal flow, but only the active one is shown */
  .didyou-item {
    position: static;           /* NOT absolute anymore */
    display: none;              /* hide by default */
    opacity: 0;                 /* no fade needed when hidden */
    transform: none;            /* remove translate/scale */
    max-width: 100%;            /* use full width on phones */
  }

  .didyou-item.is-active {
    display: block;             /* only active one is visible */
    opacity: 1;
  }

  /* Give dots a clean, fixed place under the text */
  .didyou-dots {
    margin-top: 0.9rem;
    justify-content: flex-start;
  }
}

/* ===================== TEACHERS ===================== */

.teachers-intro p {
  max-width: 32rem;
}

.teachers-hero-box {
  background: #0b2631;
  color: #e5e7eb;
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--shadow-soft);
}

.teachers-hero-box h3 {
  margin-top: 0;
  margin-bottom: .7rem;
}

/* use existing cards-grid, but stretch nicely */
.teachers-grid {
  align-items: stretch;
}

.teacher-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 1.4rem 1.3rem 1.2rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.teacher-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.teacher-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #fef3c7, #fee2e2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.teacher-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-avatar-initial {
  font-weight: 700;
  font-size: 1.3rem;
  color: #111827;
}

.teacher-name {
  margin: 0;
  font-size: 1.2rem;
}

.teacher-role {
  margin: 0;
  font-size: .9rem;
  color: var(--text-soft);
}

.teacher-highlight {
  margin-top: .15rem;
  font-size: .85rem;
  color: var(--brand-orange-dark);
}

.teacher-bio {
  font-size: .95rem;
  color: var(--text-soft);
}

.teacher-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
  color: var(--text-soft);
}

.teacher-meta li + li {
  margin-top: .15rem;
}

.teacher-resources {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(148, 163, 184, .4);
}

.teacher-resources-title {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-orange-dark);
  margin-bottom: .25rem;
}

.teacher-resources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
}

.teacher-resources li + li {
  margin-top: .25rem;
}

.teacher-resources i {
  margin-right: .35rem;
  font-size: .8rem;
  color: var(--brand-orange-dark);
}

.teacher-resource-desc {
  color: var(--text-soft);
}

/* mobile tweaks */
@media (max-width: 900px) {
  .teachers-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
  }
}


/* Signup form */
.signup-form{
  background:#f9fafb;
  border-radius:var(--radius-lg);
  padding:1.8rem 1.6rem;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  border:1px solid rgba(148,163,184,.25);
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:1rem 1.2rem;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  font-size:1rem;
}

.form-field-full{
  grid-column:1 / -1;
}

.signup-form label{
  font-weight:600;
  font-size:.95rem;
  color:var(--text-soft);
}

.signup-form input,
.signup-form select,
.signup-form textarea{
  border-radius:12px;
  border:1px solid rgba(148,163,184,.6);
  padding:.55rem .8rem;
  outline:none;
  background:#ffffff;
}

.signup-form input:focus,
.signup-form select:focus,
.signup-form textarea:focus{
  border-color:var(--brand-orange-dark);
  box-shadow:0 0 0 1px rgba(251,146,60,.35);
}

.signup-form textarea{
  resize:vertical;
  min-height:120px;
}

.small-soft{
  margin-top:.7rem;
  font-size:.85rem;
  color:var(--text-soft);
}

/* Form – mobile */
@media (max-width: 900px){
  .form-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ============================= */
/* Signup page                   */
/* ============================= */

.signup-layout {
  align-items: flex-start;
}

.signup-copy p {
  font-size: 1.05rem;
}

.signup-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  padding: 1.6rem 1.5rem 1.4rem;
}

.signup-card form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.form-row label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: #4b5563;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 0.55rem 0.9rem;
  font-size: 0.98rem;
  outline: none;
}

.form-row textarea {
  border-radius: 16px;
  resize: vertical;
}

.form-row-inline {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.signup-alert {
  background: #ecfdf3;
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid #bbf7d0;
  font-size: 0.95rem;
}

.signup-alert strong {
  display: block;
  margin-bottom: 0.15rem;
}

/* Mobile tweaks */
@media (max-width: 900px) {
  .signup-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .signup-card {
    margin-top: 1.4rem;
  }
}


/* ============================= */
/* Login / auth pages            */
/* ============================= */

.login-layout {
  align-items: flex-start;
}

.login-copy p {
  font-size: 1.05rem;
}

.login-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  padding: 1.6rem 1.5rem 1.4rem;
}

/* Reuse same form look as signup */
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.form-row label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: #4b5563;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 0.55rem 0.9rem;
  font-size: 0.98rem;
  outline: none;
}

.form-row textarea {
  border-radius: 16px;
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--brand-orange-dark);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.35);
}

/* Reuse alert + small text styles (also used on signup) */
.signup-alert {
  background: #ecfdf3;
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid #bbf7d0;
  font-size: 0.95rem;
}

.signup-alert p {
  margin: 0;
}

.small-soft {
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* Mobile */
@media (max-width: 900px) {
  .login-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .login-card {
    margin-top: 1.4rem;
  }
}


/* ============================= */
/* Dashboard                     */
/* ============================= */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.dashboard-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

.dashboard-card h2 {
  margin-bottom: 0.5rem;
}

/* Mobile */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================= */
/* Student dashboard layout  */
/* ========================= */

.dashboard-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 2rem;
  margin-top: 1.6rem;
}

.dashboard-card{
  background: #f9fafb;
  border-radius: 24px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 14px 45px rgba(15, 23, 42, 0.06);
}

/* Buttons row inside the card */
.dashboard-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .8rem;
}

/* Override ghost button *only* inside dashboard cards,
   so it is readable on a light background */
.dashboard-card .btn-ghost{
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: #ffffff;
  color: var(--brand-teal-dark);
  font-weight: 600;
}

.dashboard-card .btn-ghost:hover{
  background: #e5e7eb;
}

/* Responsive: stack cards on mobile */
@media (max-width: 900px){
  .dashboard-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Login link in top-right (make it look like a small pill button) */
.nav-login,
.nav-login:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(249, 250, 251, 0.45);
  font-size: 0.9rem;
  font-weight: 600;
  color: #f9fafb;
  text-decoration: none;
  background: transparent;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.nav-login:hover {
  background: linear-gradient(to right, var(--brand-orange), var(--brand-gold));
  border-color: var(--brand-gold);
  color: #111827;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* ================= CONTACT PAGE ================= */

.contact-card{
  background:#ffffff;
  border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem;
  box-shadow:0 18px 40px rgba(15,23,42,.12);
}

.contact-card h2{
  font-size:1.4rem;
  margin-bottom:.4rem;
}

.contact-card .contact-success{
  margin:.4rem 0 .8rem;
  font-size:.95rem;
  color:#16a34a;
  font-weight:500;
}

/* Basic stacked form layout */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin-top:.8rem;
}

/* Individual field wrapper */
.form-field{
  width:100%;
}

/* Labels */
.form-field label{
  display:block;
  font-size:.9rem;
  font-weight:500;
  margin-bottom:.25rem;
  color:var(--text-main);
}

/* Inputs & selects */
.form-field input,
.form-field select{
  width:100%;
  border-radius:999px;
  border:1px solid #e5e7eb;
  padding:.55rem .9rem;
  font-size:.95rem;
  font-family:var(--font-body);
  outline:none;
  transition:border-color 150ms ease-out,
             box-shadow 150ms ease-out,
             background-color 150ms ease-out;
  background:#f9fafb;
}

/* Textarea */
.form-field textarea{
  width:100%;
  border-radius:18px;
  border:1px solid #e5e7eb;
  padding:.7rem .9rem;
  font-size:.95rem;
  font-family:var(--font-body);
  outline:none;
  resize:vertical;
  min-height:120px;
  background:#f9fafb;
}

/* Focus state */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--brand-orange);
  box-shadow:0 0 0 1px rgba(255,122,0,.35);
  background:#ffffff;
}

/* Two-column rows on desktop */
.form-row-inline{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.form-row-inline .form-field{
  flex:1 1 0;
}

/* Stack nicely on mobile */
@media (max-width: 768px){
  .form-row-inline{
    flex-direction:column;
  }
}
/* Make the success message clearly green, even inside section-light */
.section-light .contact-success {
  color: #16a34a;
  font-weight: 600;
}

/* Blog article body */
.rich-text p{
  margin-bottom: .9rem;
  font-size: 1.09rem;
  line-height: 1.7;
  color: #2f1802;
}

.teacher-mini{
  display:flex;
  align-items:center;
  gap:.7rem;
}

.teacher-mini-photo{
  width:42px;
  height:42px;
  border-radius:999px;
  object-fit:cover;
}


/* CTA buttons layout */
.cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;        /* space between the two buttons */
}

/* On mobile, stacked with breathing room */
@media (max-width: 900px){
  .cta-actions{
    flex-direction: row;   /* or column if you want them one per line */
    margin-top: 0.7rem;
  }
}