/* =========================================================
   MEHRA EDUCATION — Design tokens
   Brand colors pulled from the logo wordmark (navy + sky blue)
   Wheel colors pulled from the 7 value-segments of the ring logo
   ========================================================= */
:root{
  /* Brand (from wordmark) */
  --brand-navy:      #2E3192;   /* "Education" text */
  --brand-sky:       #29ABE2;   /* "MEHRA" text */
  --brand-ink:       #1B1B2F;
  --brand-paper:     #FBFAF7;

  /* Wheel accent colors (from the 7 ring segments) */
  --wheel-orange:    #F7941D;
  --wheel-magenta:   #EC008C;
  --wheel-red:       #ED1C24;
  --wheel-teal:      #00A99D;
  --wheel-maroon:    #8B1E3F;
  --wheel-green:     #39B54A;
  --wheel-olive:     #4B5320;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-soft: 0 10px 30px rgba(46,49,146,0.10);
  --shadow-pop:  0 16px 40px rgba(46,49,146,0.18);
}

/* =========================================================
   Base / Type
   ========================================================= */
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--brand-ink);
  background: var(--brand-paper);
  overflow-x: hidden;
}
h1,h2,h3,h4, .display-font{
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.eyebrow{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-sky);
}
a{ text-decoration:none; }
.text-navy{ color: var(--brand-navy) !important; }
.text-sky{ color: var(--brand-sky) !important; }
.bg-navy{ background: var(--brand-navy) !important; }
.bg-paper{ background: var(--brand-paper) !important; }

.btn-brand{
  background: linear-gradient(90deg, var(--brand-sky), var(--brand-navy));
  color:#fff;
  border:none;
  border-radius: 50px;
  padding: .75rem 1.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-brand:hover{ color:#fff; transform: translateY(-2px); box-shadow: var(--shadow-pop); }

.btn-outline-brand{
  border: 2px solid var(--brand-navy);
  color: var(--brand-navy);
  border-radius: 50px;
  padding: .7rem 1.8rem;
  font-weight: 600;
  background: transparent;
  transition: all .2s ease;
}
.btn-outline-brand:hover{ background: var(--brand-navy); color:#fff; }

/* =========================================================
   Navbar
   ========================================================= */
.navbar-mehra{
  background: rgba(251,250,247,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(46,49,146,0.06);
}
.navbar-mehra .navbar-brand{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--brand-navy);
  display:flex; align-items:center; gap:.6rem;
}
.navbar-mehra .navbar-brand span{ color: var(--brand-sky); }
.navbar-mehra .nav-link{
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0 .35rem;
  position: relative;
}
.navbar-mehra .nav-link.active,
.navbar-mehra .nav-link:hover{ color: var(--brand-sky); }
.navbar-mehra .nav-link.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--wheel-orange), var(--wheel-magenta));
}

/* =========================================================
   Signature element: the "Value Wheel" ring
   Recreates the logo's circular ring of 7 value-segments,
   reused as a hero visual + as a repeating badge strip.
   ========================================================= */
.value-ring{
  position: relative;
  width: 340px; height: 340px;
  border-radius: 50%;
  margin: 0 auto;
  background: conic-gradient(
    var(--wheel-orange)   0deg   51deg,
    var(--wheel-magenta)  51deg  103deg,
    var(--wheel-red)      103deg 154deg,
    var(--wheel-teal)     154deg 206deg,
    var(--wheel-maroon)   206deg 257deg,
    var(--wheel-green)    257deg 309deg,
    var(--wheel-olive)    309deg 360deg
  );
  box-shadow: var(--shadow-pop);
  animation: spin-slow 40s linear infinite;
}
.value-ring::before{
  content:"";
  position:absolute; inset: 34px;
  border-radius:50%;
  background: var(--brand-paper);
  box-shadow: inset 0 0 0 2px rgba(46,49,146,0.08);
}
.value-ring-core{
  position:absolute; inset:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-direction: column;
  text-align:center;
  z-index:2;
}
.value-ring-core img{ max-width: 70%; }
@keyframes spin-slow{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .value-ring{ animation:none; } }

.value-chip-strip{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.value-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1rem;
  border-radius:50px;
  font-weight:600; font-size:.85rem;
  color:#fff;
  box-shadow: var(--shadow-soft);
}
.value-chip .dot{ width:8px; height:8px; border-radius:50%; background:#fff; opacity:.85; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding: 7rem 0 5rem;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-120px; right:-120px;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(41,171,226,.18), transparent 70%);
  z-index:0;
}
.hero .lead{ font-size:1.15rem; color:#4b4b63; }

/* =========================================================
   Cards
   ========================================================= */
.service-card{
  border:none;
  border-radius: var(--radius-lg);
  background:#fff;
  padding: 2rem 1.7rem;
  height:100%;
  box-shadow: var(--shadow-soft);
  border-top: 5px solid var(--brand-sky);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-pop); }
.service-card .icon-wrap{
  width:56px; height:56px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-navy));
  color:#fff; font-size:1.4rem; margin-bottom:1.1rem;
}

.stat-box{
  text-align:center; padding: 1.5rem 1rem;
}
.stat-box .num{
  font-family:'Poppins', sans-serif; font-weight:800; font-size:2.4rem;
  background: linear-gradient(90deg, var(--wheel-orange), var(--wheel-magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.section-title{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.section-pad{ padding: 5rem 0; }

/* =========================================================
   Footer
   ========================================================= */
footer.site-footer{
  background: var(--brand-ink);
  color: #cfd0e6;
}
footer.site-footer a{ color:#cfd0e6; }
footer.site-footer a:hover{ color: var(--brand-sky); }
footer.site-footer h5{ color:#fff; }
.footer-wheel-strip{ height:6px; background: conic-gradient(from 90deg, var(--wheel-orange), var(--wheel-magenta), var(--wheel-red), var(--wheel-teal), var(--wheel-maroon), var(--wheel-green), var(--wheel-olive), var(--wheel-orange)); }

.social-icon{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
  color:#fff; margin-right:.5rem;
  transition: background .2s ease, transform .2s ease;
}
.social-icon:hover{ background: var(--brand-sky); transform: translateY(-3px); color:#fff; }

/* =========================================================
   Contact page
   ========================================================= */
.contact-info-card{
  background:#fff; border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow-soft);
  display:flex; gap:1rem; align-items:flex-start;
}
.contact-info-card .icon-wrap{
  min-width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, var(--wheel-orange), var(--wheel-magenta));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.form-control, .form-select{
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  border: 1.5px solid #e4e4ef;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 .2rem rgba(41,171,226,.15);
}

/* =========================================================
   Admin panel
   ========================================================= */
.admin-sidebar{
  min-height:100vh;
  background: var(--brand-ink);
  color:#cfd0e6;
}
.admin-sidebar a{
  color:#cfd0e6; display:block; padding:.7rem 1.2rem; border-radius:10px; font-weight:600;
}
.admin-sidebar a.active, .admin-sidebar a:hover{ background: rgba(255,255,255,.08); color:#fff; }
.admin-card{
  background:#fff; border-radius: var(--radius-md); padding:1.8rem; box-shadow: var(--shadow-soft);
}

/* Utility */
.rounded-xl{ border-radius: var(--radius-lg) !important; }
.shadow-soft{ box-shadow: var(--shadow-soft) !important; }

/* =========================================================
   SHARED ANIMATION & COMPONENT LIBRARY
   Used across index.php, leadcrm.php, and any future page.
   Previously these lived only inside index.php's own <style>
   block, so any new page using the same classes (reveal, FAQ
   accordion, testimonial cards, ripple, tilt) rendered unstyled.
   Centralizing them here fixes that for every page at once.
   ========================================================= */

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-stagger.in-view .stagger-item{ opacity:1; transform: translateY(0); }
.stagger-item{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.stagger-item:nth-child(1){ transition-delay:.05s; }
.stagger-item:nth-child(2){ transition-delay:.15s; }
.stagger-item:nth-child(3){ transition-delay:.25s; }
.stagger-item:nth-child(4){ transition-delay:.35s; }
.stagger-item:nth-child(5){ transition-delay:.45s; }
.stagger-item:nth-child(6){ transition-delay:.55s; }
.stagger-item:nth-child(7){ transition-delay:.65s; }
.reveal-left{ opacity:0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.in-view{ opacity:1; transform: translateX(0); }
.reveal-right{ opacity:0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right.in-view{ opacity:1; transform: translateX(0); }
.reveal-scale{ opacity:0; transform: scale(.9); transition: opacity .6s ease, transform .6s ease; }
.reveal-scale.in-view{ opacity:1; transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .reveal, .stagger-item, .reveal-left, .reveal-right, .reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- Floating decorative blobs ---- */
.deco-blob{
  position:absolute; border-radius:50%; filter: blur(2px); opacity:.5; pointer-events:none; z-index:0;
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y{ 0%,100%{ transform: translateY(0) translateX(0); } 50%{ transform: translateY(-22px) translateX(10px); } }
@keyframes float-y-rev{ 0%,100%{ transform: translateY(0) translateX(0); } 50%{ transform: translateY(18px) translateX(-14px); } }
@keyframes pulse-soft{ 0%,100%{ transform: scale(1); opacity:.45; } 50%{ transform: scale(1.08); opacity:.7; } }
@keyframes arrow-bounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .deco-blob{ animation:none !important; } }

/* ---- Magnetic buttons + ripple ---- */
.magnetic-btn{ display:inline-block; transition: transform .15s ease-out; }
.btn-brand, .btn-outline-brand, .btn-light{ position:relative; overflow:hidden; }
.ripple-effect{
  position:absolute; border-radius:50%; transform:scale(0);
  background: rgba(255,255,255,.55); pointer-events:none;
  animation: ripple-anim .6s linear;
}
@keyframes ripple-anim{ to{ transform:scale(4); opacity:0; } }

/* ---- 3D tilt cards ---- */
.tilt-card{ transition: transform .2s ease, box-shadow .2s ease; will-change: transform; }

/* ---- CTA banner shimmer ---- */
.cta-shimmer{ position:relative; overflow:hidden; }
.cta-shimmer::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  animation: shimmer-move 3.2s ease-in-out infinite;
}
@keyframes shimmer-move{ 0%{ left:-60%; } 60%,100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){ .cta-shimmer::after{ animation:none; display:none; } }

/* ---- FAQ accordion ---- */
.faq-item{ background:#fff; border-radius: 14px; box-shadow: var(--shadow-soft); margin-bottom:1rem; overflow:hidden; }
.faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  padding:1.1rem 1.4rem; background:transparent; border:none; text-align:left; cursor:pointer;
  font-weight:600; color: var(--brand-navy); font-size:1rem;
}
.faq-question .faq-icon{ transition: transform .3s ease; flex:none; color: var(--wheel-teal, var(--brand-sky)); }
.faq-question[aria-expanded="true"] .faq-icon{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-answer-inner{ padding:0 1.4rem 1.2rem; color:#6b6b6b; font-size:.93rem; line-height:1.6; }
.faq-heading{
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.25; font-weight: 700;
  font-family: 'Poppins', 'Inter', sans-serif; letter-spacing: -0.02em; color: var(--brand-ink);
}

/* ---- Testimonial cards ---- */
.testimonial-card{
  background:#fff; border-radius: 18px; padding:1.75rem; height:100%;
  box-shadow: var(--shadow-soft); position:relative; text-align:center;
}
.testimonial-stars{ color: var(--wheel-red, #F2A93B); letter-spacing:2px; margin-bottom:.75rem; }
.testimonial-quote{ color:#4a4a4a; font-size:.95rem; line-height:1.6; }
.testimonial-person{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:1.25rem; }
.testimonial-avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  background: linear-gradient(135deg, var(--brand-navy), var(--wheel-teal, var(--brand-sky)));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}

/* ---- Consult / info strip ---- */
.consult-strip{
  background:#fff; border-radius: 18px; box-shadow: var(--shadow-soft);
  padding:1.75rem; border-left:5px solid var(--wheel-teal, var(--brand-sky));
}

/* ---- Pricing plan cards ---- */
.plan-card{
  background:#fff; border-radius:18px; padding:2rem 1.75rem; height:100%;
  box-shadow: var(--shadow-soft); border:2px solid transparent; text-align:center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-pop); }
.plan-card.featured{ border-color: var(--wheel-teal, var(--brand-sky)); }
.plan-badge{
  display:inline-block; background: var(--wheel-teal, var(--brand-sky)); color:#fff; font-size:.7rem;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.3rem .8rem; border-radius:50px; margin-bottom:.75rem;
}
.plan-price{ font-family:'Poppins',sans-serif; font-weight:800; font-size:2.2rem; color: var(--brand-navy); }
.plan-price span{ font-size:.9rem; font-weight:500; color:#8a8fa3; }
.plan-features{ list-style:none; padding:0; margin: 1.5rem 0; text-align:left; }
.plan-features li{ padding:.4rem 0; font-size:.88rem; color:#4a4a4a; display:flex; align-items:flex-start; gap:.6rem; }
.plan-features li i{ color: var(--wheel-teal, var(--brand-sky)); margin-top:.2rem; }