/* ==========================================================================
   AstraVizion AI Solutions — Shared Stylesheet
   Converted 1:1 from the original Tailwind/React design tokens.
   ========================================================================== */

:root{
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 40px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;

  /* Only white + blue backgrounds, per brand rule */
  --background:#FFFFFF;
  --foreground:#16233D;

  --navy:#003366;
  --brand:#0055A4;
  --brand-bright:#1172d3;
  --softblue:#E6F0FA;

  --card:#FFFFFF;
  --card-foreground:#16233D;

  --primary:var(--brand);
  --primary-foreground:#FFFFFF;
  --secondary:var(--softblue);
  --secondary-foreground:var(--navy);
  --muted:var(--softblue);
  --muted-foreground:#5B6B85;
  --accent:var(--softblue);
  --accent-foreground:var(--navy);

  --border:#DCE6F5;
  --input:#DCE6F5;
  --ring:var(--brand-bright);

  --shadow-soft: 0 10px 30px -12px rgba(0,51,102,0.30);
  --shadow-card: 0 2px 10px -4px rgba(0,51,102,0.20);
  --gradient-hero: linear-gradient(140deg, var(--navy), var(--brand) 55%, var(--brand-bright));

  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background-color:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  letter-spacing:-0.02em;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
ul, ol{ list-style:none; }

:focus-visible{
  outline:3px solid var(--brand-bright);
  outline-offset:2px;
}

.container{ max-width:1152px; margin:0 auto; padding:0 16px; }
.container-sm{ max-width:768px; margin:0 auto; padding:0 16px; }

/* ---------- Reusable surfaces ---------- */
.surface-soft{ background-color:var(--softblue); }
.surface-deep{ background:var(--gradient-hero); color:#FFFFFF; }

.card-soft{
  background-color:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-soft:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
}

/* ---------- Animation ---------- */
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.animate-rise{ animation:rise .6s cubic-bezier(.22,1,.36,1) both; }

/* ==========================================================================
   Header
   ========================================================================== */
header.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  background-color:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
}
.header-inner{
  max-width:1152px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand-link{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-logo{
  height:40px; width:auto; border-radius:var(--radius-xl);
  object-fit:contain; flex-shrink:0;
}
.brand-text{ min-width:0; }
.brand-name{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:16px; color:var(--navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-tagline{
  display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; color:var(--primary);
}

nav.desktop-nav{ display:none; align-items:center; gap:4px; }
.nav-link{
  border-radius:var(--radius-lg); padding:8px 12px; font-size:14px; font-weight:500;
  color:var(--foreground); transition:background-color .2s, color .2s;
}
.nav-link:hover{ background-color:var(--secondary); color:var(--navy); }
.nav-link.active{ background-color:var(--secondary); color:var(--navy); }

.btn-register-nav{
  border-radius:var(--radius-lg); background-color:var(--primary);
  padding:8px 16px; font-size:14px; font-weight:600; color:var(--primary-foreground);
  box-shadow:var(--shadow-card); transition:background-color .2s; white-space:nowrap;
}
.btn-register-nav:hover{ background-color:var(--brand-bright); }

.menu-toggle-btn{
  display:grid; place-items:center; height:40px; width:40px; flex-shrink:0;
  border-radius:var(--radius-lg); border:1px solid var(--border); color:var(--navy);
  background:transparent;
}

.mobile-nav{ display:none; border-top:1px solid var(--border); background:#FFFFFF; padding:16px; }
.mobile-nav.open{ display:block; }
.mobile-nav ul{ display:flex; flex-direction:column; padding:8px 0; }
.mobile-nav li a{
  display:block; border-radius:var(--radius-lg); padding:12px; font-size:14px;
  font-weight:500; color:var(--foreground);
}
.mobile-nav li a:hover, .mobile-nav li a.active{ background-color:var(--secondary); color:var(--navy); }
.btn-register-mobile{
  display:block; border-radius:var(--radius-lg); background-color:var(--primary);
  padding:12px; text-align:center; font-size:14px; font-weight:600;
  color:var(--primary-foreground); transition:background-color .2s; margin-top:4px;
}
.btn-register-mobile:hover{ background-color:var(--brand-bright); }

@media (min-width:1024px){
  nav.desktop-nav{ display:flex; flex:1; justify-content:center; }
  .menu-toggle-btn{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-xl); background-color:var(--primary);
  padding:12px 24px; font-size:14px; font-weight:600; color:var(--primary-foreground);
  box-shadow:var(--shadow-soft); transition:background-color .2s;
}
.btn-primary:hover{ background-color:var(--brand-bright); }

.btn-outline-white{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,.4);
  padding:12px 24px; font-size:14px; font-weight:600; color:#FFFFFF;
  transition:background-color .2s;
}
.btn-outline-white:hover{ background-color:rgba(255,255,255,.1); }

.btn-on-white-wrap{ display:inline-block; border-radius:var(--radius-xl); background:#FFFFFF; padding:2px; }

/* ==========================================================================
   Icons (inline SVG sizing helper)
   ========================================================================== */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.125em; }
.icon-sm{ width:16px; height:16px; }
.icon-md{ width:20px; height:20px; }
.icon-lg{ width:28px; height:28px; }
.icon-xl{ width:40px; height:40px; }

/* ==========================================================================
   Page Hero
   ========================================================================== */
.page-hero{ padding:64px 0; }
@media (min-width:640px){ .page-hero{ padding:80px 0; } }
.page-hero .eyebrow{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.24em; opacity:.9;
}
.page-hero h1{
  margin-top:12px; max-width:768px; font-size:30px; font-weight:800; line-height:1.2;
}
@media (min-width:640px){ .page-hero h1{ font-size:48px; } }
.page-hero p{
  margin-top:16px; max-width:640px; font-size:16px; opacity:.9;
}
@media (min-width:640px){ .page-hero p{ font-size:18px; } }

/* ==========================================================================
   Generic section spacing
   ========================================================================== */
.section{ padding:64px 0; }
.section-tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--primary); }
.section-title{ margin-top:8px; font-size:30px; font-weight:800; color:var(--navy); }
.section-lead{ margin:12px auto 0; max-width:640px; color:var(--muted-foreground); }

/* ==========================================================================
   Home page
   ========================================================================== */
.hero-grid{
  display:grid; gap:40px; padding:80px 0; max-width:1152px; margin:0 auto; padding-left:16px; padding-right:16px;
}
@media (min-width:1024px){
  .hero-grid{ grid-template-columns:1.1fr .9fr; align-items:center; }
}
.hero-badge{
  display:inline-flex; border-radius:9999px; background-color:rgba(255,255,255,.15);
  padding:4px 12px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.2em;
}
.hero-heading{ margin-top:20px; font-size:36px; font-weight:800; line-height:1.1; }
@media (min-width:640px){ .hero-heading{ font-size:60px; } }
.hero-sub{ margin-top:20px; max-width:560px; font-size:18px; opacity:.9; }
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

.hero-card{
  background-color:var(--card); color:var(--card-foreground);
  border-radius:var(--radius-2xl); padding:28px; box-shadow:var(--shadow-soft);
}
.hero-card .tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--primary); }
.hero-card h2{ margin-top:8px; font-size:24px; font-weight:800; color:var(--navy); }
.hero-card ul{ margin-top:16px; display:grid; gap:8px; font-size:14px; color:var(--muted-foreground); }
.hero-card .card-cta{ margin-top:24px; }

.vision-mission-grid{ display:grid; gap:24px; }
@media (min-width:768px){ .vision-mission-grid{ grid-template-columns:1fr 1fr; } }
.vm-card{ padding:28px; }
.vm-card h2{ margin-top:12px; font-size:20px; font-weight:700; color:var(--navy); }
.vm-card p{ margin-top:8px; font-size:14px; color:var(--muted-foreground); }

.projects-current{
  margin-top:32px; border-radius:var(--radius-2xl); padding:32px;
}
@media (min-width:640px){ .projects-current{ padding:48px; } }
.projects-current .pill{
  display:inline-flex; align-items:center; gap:8px; border-radius:9999px;
  background-color:rgba(255,255,255,.15); padding:4px 12px; font-size:12px;
  font-weight:700; text-transform:uppercase; letter-spacing:.2em;
}
.projects-current h3{ margin-top:16px; font-size:30px; font-weight:800; }
@media (min-width:640px){ .projects-current h3{ font-size:36px; } }
.projects-current ul{
  margin-top:20px; display:grid; gap:8px; font-size:14px; opacity:.95;
}
@media (min-width:640px){ .projects-current ul{ grid-template-columns:repeat(3,1fr); } }
.projects-current .card-cta{ margin-top:32px; }

.upcoming-grid{ margin-top:32px; display:grid; gap:24px; }
@media (min-width:768px){ .upcoming-grid{ grid-template-columns:1fr 1fr; } }
.upcoming-card{ padding:28px; }
.upcoming-card .date{
  display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--primary);
}
.upcoming-card h3{ margin-top:8px; font-size:18px; font-weight:700; color:var(--navy); }
.upcoming-card p{ margin-top:8px; font-size:14px; color:var(--muted-foreground); }

.benefits-grid{ margin-top:32px; display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:640px){ .benefits-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .benefits-grid{ grid-template-columns:repeat(4,1fr); } }
.benefit-card{ padding:24px; }
.benefit-card h3{ margin-top:12px; font-weight:700; color:var(--navy); }
.benefit-card p{ margin-top:4px; font-size:14px; color:var(--muted-foreground); }

/* ==========================================================================
   About page
   ========================================================================== */
.about-grid{ display:grid; gap:40px; }
@media (min-width:1024px){ .about-grid{ grid-template-columns:1fr 1fr; } }
.about-grid h2{ font-size:24px; font-weight:800; color:var(--navy); }
.about-grid p{ margin-top:16px; color:var(--muted-foreground); }
.about-grid .card-cta{ margin-top:24px; }

.points-list{ display:grid; gap:12px; }
.points-list li{
  padding:16px 20px; font-size:14px; font-weight:500; color:var(--navy);
}

.goals-head, .objectives-head{ text-align:center; }
.goals-head .icon-xl, .objectives-head .icon-xl{ margin:0 auto; color:var(--primary); }
.goals-head h2, .objectives-head h2{ margin-top:16px; font-size:24px; font-weight:800; color:var(--navy); }
@media (min-width:640px){ .goals-head h2, .objectives-head h2{ font-size:30px; } }
.goals-head p, .objectives-head p{ margin:12px auto 0; max-width:640px; color:var(--muted-foreground); }

.goals-grid{
  margin-top:40px; display:grid; gap:20px; grid-template-columns:1fr;
}
@media (min-width:640px){ .goals-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .goals-grid{ grid-template-columns:repeat(3,1fr); } }
.goal-card{ display:flex; gap:16px; padding:24px; }
.goal-num{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  height:40px; width:40px; border-radius:9999px; background-color:var(--primary);
  font-size:14px; font-weight:700; color:var(--primary-foreground);
}
.goal-card p{ font-size:14px; font-weight:500; color:var(--navy); }

.objectives-grid{ margin-top:40px; display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .objectives-grid{ grid-template-columns:1fr 1fr; } }
.objective-item{ display:flex; align-items:flex-start; gap:12px; padding:16px 20px; }
.objective-item .icon-md{ margin-top:2px; flex-shrink:0; color:var(--primary); }
.objective-item span{ font-size:14px; font-weight:500; color:var(--navy); }

/* ==========================================================================
   Programs page
   ========================================================================== */
.programs-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:640px){ .programs-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .programs-grid{ grid-template-columns:repeat(3,1fr); } }
.program-card{ padding:28px; }
.program-card h2{ margin-top:12px; font-size:18px; font-weight:700; color:var(--navy); }
.program-card p{ margin-top:8px; font-size:14px; color:var(--muted-foreground); }

.programs-cta{
  margin-top:48px; border-radius:var(--radius-2xl); padding:32px; text-align:center;
}
.programs-cta h2{ font-size:24px; font-weight:800; }
.programs-cta p{ margin-top:8px; font-size:14px; opacity:.9; }
.programs-cta .card-cta{ margin-top:24px; }

/* ==========================================================================
   FAQ page
   ========================================================================== */
.faq-list{ display:grid; gap:16px; }
.faq-item{ overflow:hidden; }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; text-align:left; background:transparent; border:none; font-family:inherit;
}
.faq-question span{ font-weight:700; color:var(--navy); }
.faq-question .chevron{ flex-shrink:0; color:var(--primary); transition:transform .2s; }
.faq-item.open .chevron{ transform:rotate(180deg); }
.faq-answer{ display:none; padding:0 24px 20px; }
.faq-item.open .faq-answer{ display:block; }
.faq-answer p{ font-size:14px; line-height:1.6; color:var(--muted-foreground); }

.faq-cta{ margin-top:48px; border-radius:var(--radius-2xl); padding:32px; text-align:center; }
.faq-cta h2{ font-size:20px; font-weight:700; }
.faq-cta p{ margin:8px auto 0; max-width:420px; font-size:14px; opacity:.9; }
.faq-cta a.underline{ text-decoration:underline; }
.faq-cta .card-cta{ margin-top:24px; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-info h2{ font-size:24px; font-weight:800; color:var(--navy); }
.contact-email-link{
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-size:16px; font-weight:600; color:var(--primary); word-break:break-all;
}
.contact-email-link:hover{ text-decoration:underline; }
.contact-info .lead-text{ margin-top:24px; font-size:14px; color:var(--muted-foreground); }
.contact-info .card-cta{ margin-top:12px; }
.contact-info h3{ margin-top:40px; font-size:14px; font-weight:700; color:var(--navy); }

.contact-form{ padding:28px; }
.contact-form h2{ font-size:20px; font-weight:700; color:var(--navy); }
.form-fields{ margin-top:20px; display:grid; gap:16px; }
.form-fields label{ display:grid; gap:6px; font-size:14px; font-weight:500; color:var(--navy); }
.form-fields input, .form-fields textarea{
  border-radius:var(--radius-lg); border:1px solid var(--input); background-color:var(--background);
  padding:8px 12px; font-size:14px; font-family:inherit; color:var(--foreground);
}
.form-fields input:focus, .form-fields textarea:focus{
  outline:2px solid var(--brand-bright); outline-offset:1px; border-color:transparent;
}
.btn-submit{
  border-radius:var(--radius-xl); background-color:var(--primary); padding:12px 20px;
  font-size:14px; font-weight:600; color:var(--primary-foreground); border:none;
  transition:transform .2s;
}
.btn-submit:hover{ transform:translateY(-2px); }
.form-sent-msg{ font-size:14px; font-weight:500; color:var(--primary); }

/* ==========================================================================
   Social links
   ========================================================================== */
.social-links{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.social-links a{
  display:grid; place-items:center; height:56px; width:56px;
  border-radius:var(--radius-2xl); border:1px solid var(--border);
  background-color:var(--card); box-shadow:var(--shadow-card);
  transition:transform .2s;
}
.social-links a:hover{ transform:translateY(-4px); }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer{
  margin-top:80px; border-top:1px solid var(--border); background-color:var(--softblue);
}
.footer-inner{ max-width:1152px; margin:0 auto; padding:56px 16px; }
.footer-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:repeat(3,1fr); } }
.footer-brand h2{ font-size:18px; font-weight:700; color:var(--navy); }
.footer-brand .tagline{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--primary);
}
.footer-brand .mission{ margin-top:16px; max-width:320px; font-size:14px; color:var(--muted-foreground); }
.footer-brand .footer-email{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--primary); word-break:break-all;
}
.footer-brand .footer-email:hover{ text-decoration:underline; }

.footer-explore h3{ font-size:14px; font-weight:700; color:var(--navy); }
.footer-explore ul{
  margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:14px;
}
.footer-explore ul a{ color:var(--muted-foreground); }
.footer-explore ul a:hover{ color:var(--primary); }
.footer-explore .btn-register-footer{
  margin-top:20px; display:inline-block; border-radius:var(--radius-lg);
  background-color:var(--primary); padding:8px 16px; font-size:14px; font-weight:600;
  color:var(--primary-foreground);
}

.footer-connect{ text-align:center; }
@media (min-width:768px){ .footer-connect{ text-align:left; } }
.footer-connect h3{ font-size:14px; font-weight:700; color:var(--navy); }
.footer-connect .social-links{ margin-top:16px; justify-content:center; }
@media (min-width:768px){ .footer-connect .social-links{ justify-content:flex-start; } }

.footer-bottom{
  margin-top:48px; display:flex; flex-direction:column; gap:4px;
  border-top:1px solid var(--border); padding-top:24px; font-size:12px; color:var(--muted-foreground);
}
@media (min-width:640px){
  .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ============================== PROJECT DETAILS MODAL ============================== */
.projects-current, .upcoming-card{ cursor:pointer; transition:transform .15s, box-shadow .2s; }
.upcoming-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.projects-current:hover{ box-shadow:0 14px 34px -10px rgba(0,51,102,0.45); }

.modal-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(9,20,40,0.55); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }

.modal-box{
  position:relative; width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:var(--radius-2xl); box-shadow:var(--shadow-soft);
  padding:32px; animation:modalPop .18s ease-out;
}
@keyframes modalPop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--secondary); color:var(--navy); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background:var(--border); }

.modal-badge{
  display:inline-block; border-radius:var(--radius-lg); padding:6px 14px; font-size:12px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.modal-badge.is-free{ background:var(--secondary); color:var(--brand); }
.modal-badge.is-fee{ background:#FFF2CC; color:#8A6100; }

.modal-box h3{
  margin-top:16px; font-size:24px; font-weight:800; color:var(--navy); font-family:var(--font-display);
}
.modal-date{ margin-top:6px; font-size:13px; font-weight:600; color:var(--muted-foreground); }

.modal-box ul{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.modal-box ul li{
  font-size:14px; color:var(--foreground); padding-left:22px; position:relative;
}
.modal-box ul li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:700;
}

.modal-cta{ margin-top:28px; }
.modal-cta .btn-primary{ display:inline-block; padding:12px 24px; }
.modal-note{ margin-top:28px; font-size:13px; color:var(--muted-foreground); }

.btn-outline-navy{
  display:inline-block; border-radius:var(--radius-xl); border:1.5px solid var(--brand);
  color:var(--brand); font-weight:600; font-size:14px; padding:11px 22px; background:transparent;
  transition:background-color .2s, color .2s;
}
.btn-outline-navy:hover{ background-color:var(--secondary); }

/* ============================== HEADER RIGHT GROUP (Register + UDYAM, inline in header row) ============================== */
.header-right{ display:none; }
@media (min-width:1024px){
  .header-right{
    display:flex; flex-direction:row; align-items:center; gap:50px; flex-shrink:0;margin-left:auto;
  }
}
.header-udyam{
  font-size:10.5px; color:var(--muted-foreground); white-space:nowrap;
}

.mobile-udyam{ text-align:center; font-size:11px; color:var(--muted-foreground); margin-top:14px; }

.header-udyam strong{ color:var(--navy); font-weight:700; }

.modal-tagline{ margin-top:4px; font-size:14px; font-weight:600; color:var(--brand); }

.card-hint{ margin-top:10px; font-size:12.5px; font-style:italic; color:var(--muted-foreground); }
.projects-current .card-hint{ color:rgba(255,255,255,0.75); }