:root{
  --bg:#ffffff;
  --text:#1b1b1f;
  --muted:#61626a;
  --surface:#f6f7fb;
  --card:#ffffff;
  --border:rgba(20,20,30,.12);
  --shadow:0 10px 30px rgba(20,20,30,.10);

  --brand-purple:#6b2cff;
  --brand-pink:#ff2d8d;
  --brand-orange:#ff8a1f;
  --brand-red:#ff3b30;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --container:100%;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Comic Neue", "Comic Sans MS", "Fredoka One", "Baloo 2", "Nunito", "Poppins", system-ui, sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, rgba(107,44,255,.12), transparent 55%),
             radial-gradient(900px 520px at 90% 10%, rgba(255,45,141,.10), transparent 60%),
             radial-gradient(900px 520px at 50% 110%, rgba(255,138,31,.10), transparent 65%),
             var(--bg);
}

/* Ensure no overflow constraints on body */
body{overflow-x:hidden}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container-banner{max-width:var(--container); margin:0 auto}
.container{max-width:var(--container); margin:0 auto; padding:0 18px}
.skip-link{
  position:absolute;
  top:-44px;
  left:12px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--text);
  color:#fff;
  z-index:999;
}
.skip-link:focus{top:12px}

.topbar{
  border-bottom:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg, rgba(107,44,255,.92), rgba(255,45,141,.92), rgba(255,138,31,.92));
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  color:rgba(255,255,255,.96);
  font-size:15px;
  font-weight:650;
}

.topbar-item{color:rgba(255,255,255,.96)}

.topbar-cta{
  color:rgba(27,27,31,.92);
  background:rgba(255,255,255,.92);
  border-radius:999px;
  padding:8px 12px;
  font-weight:850;
  border:1px solid rgba(255,255,255,.45);
}

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
  width:100%;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Add padding to main content to account for fixed header */
main{padding-top:80px}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  width:156px;
  height:auto;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav a{
  font-size:16px;
  font-weight:650;
  padding:10px 12px;
  border-radius:999px;
  color:rgba(27,27,31,.88);
  transition:background .2s ease, color .2s ease;
}

.nav a:hover{background:rgba(107,44,255,.08)}
.nav a.active{
  background:linear-gradient(90deg, rgba(107,44,255,.14), rgba(255,45,141,.12));
  color:rgba(27,27,31,1);
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:rgba(27,27,31,.85);
  position:relative;
}

.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:rgba(27,27,31,.85);
}

.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}

.mobile-nav{
  display:none;
  padding:0 0 14px 0;
}

.mobile-nav a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  margin-top:10px;
  font-weight:650;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.80);
  box-shadow:0 10px 30px rgba(20,20,30,.05);
  font-size:15px;
  color:rgba(27,27,31,.88);
}

.badge .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--brand-purple), var(--brand-pink));
}

.section{padding:42px 0}

.hero-grid{
  display:grid;
  gap:18px;
  align-items:stretch;
}

.hero-grid .card{
  position:relative;
}

.card{
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

.card-inner{padding:18px}

.absolute{
  position: absolute;
  z-index: 99;
}

.card-inner.absolute{
  top:18px;
  left:18px;
  padding:18px;
  width:45%;
}

.card-inner.absolute img{
  width:100%;
  height:auto;
  border-radius:12px;
}

/* Position the second card-inner (with image) on the right side */
.card-inner.absolute:nth-child(3){
  left:auto;
  right:18px;
  width:40%;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  padding:12px;
}

.stats-strip{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  padding:14px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 46px rgba(20,20,30,.10);
}

.stat{
  padding:14px 12px;
  border-radius:16px;
  border:1px solid rgba(20,20,30,.10);
  background:rgba(246,247,251,.75);
  text-align:center;
}

.stat-num{
  font-weight:950;
  font-size:26px;
  letter-spacing:-.02em;
  background:linear-gradient(90deg, var(--brand-purple), var(--brand-pink) 55%, var(--brand-orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.stat-label{
  margin-top:4px;
  color:rgba(27,27,31,.70);
  font-weight:750;
  font-size:15px;
}

.h1{
  font-size:48px;
  line-height:1.06;
  margin:12px 0 12px;
  letter-spacing:-.03em;
  font-weight:950;
  color:rgba(20,20,28,.92);
  text-shadow:0 2px 0 rgba(255,255,255,.70), 0 18px 34px rgba(20,20,30,.18);
  position:relative;
}

.h1::after{
  content:"";
  display:none;
  min-width: 85%;
  height:10px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand-purple), var(--brand-pink) 55%, var(--brand-orange));
  opacity:.9;
  filter:blur(.1px);
}

.lead{
  color:var(--muted);
  line-height:1.6;
  margin:0 0 18px;
}

.btn-row{display:flex; gap:12px; flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:12px 16px;
  font-weight:700;
  font-size:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.88);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover{transform:translateY(-1px)}

.btn.primary{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg, var(--brand-purple), var(--brand-pink) 55%, var(--brand-orange));
  box-shadow:0 14px 30px rgba(107,44,255,.18);
}

.btn.primary:hover{box-shadow:0 18px 40px rgba(107,44,255,.22)}

.hero-carousel{
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  position:relative;
  min-height:550px;
}

/* Reduced banner height for inner pages */
.inner-page .hero-carousel {
  min-height:400px;
}

.inner-page .carousel-slide img {
  height:400px;
}

.carousel-track{display:flex; transition:transform .55s ease}
.carousel-slide{min-width:100%; position:relative}
.carousel-slide img{width:100%; height:550px; object-fit:cover; object-position:center}

.carousel-controls{
  position:absolute;
  inset:auto 14px 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.carousel-dots{display:flex; gap:8px; align-items:center}

.dot-btn{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  cursor:pointer;
}

.dot-btn[aria-current="true"]{
  background:#fff;
  border-color:#fff;
}

.carousel-arrows{display:flex; gap:10px}

.icon-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  cursor:pointer;
  display:grid;
  place-items:center;
  color:rgba(27,27,31,.92);
}

.icon-btn:hover{background:rgba(255,255,255,.55)}

.events{
  height:100%;
  display:flex;
  flex-direction:column;
}

.events-head{
  padding:18px;
  border-bottom:1px solid var(--border);
}

.h2{margin:0 0 6px; font-size:20px}
.sub{margin:0; color:var(--muted); font-size:13px; line-height:1.55}

.events-body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  padding:18px;
  flex:1;
}

.event-list{display:flex; flex-direction:column; gap:12px}

.event-item{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(246,247,251,.75);
}

.event-item h3{margin:0 0 4px; font-size:14px}
.event-item p{margin:0; font-size:13px; color:var(--muted); line-height:1.5}

.event-rotator{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  position:relative;
  background:rgba(246,247,251,.75);
}

.event-rotator img{
  width:100%;
  height:100%;
  min-height:250px;
  object-fit:cover;
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .35s ease;
}

.event-rotator img.active{opacity:1}

.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.section-title h2{margin:0; font-size:24px}
.section-title p{margin:0; color:var(--muted)}

.grid-3{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.program-card{
  padding:16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,255,255,.80);
  box-shadow:0 14px 30px rgba(20,20,30,.08);
  overflow:hidden;
}

.program-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--border);
}

.program-card h3{margin:12px 0 6px}
.program-card p{margin:0; color:var(--muted); line-height:1.6; font-size:14px}
.program-card ul{margin:8px 0 0; padding-left:20px}
.program-card li{margin:4px 0; color:var(--muted); line-height:1.6; font-size:14px}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.panel{
  padding:18px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,255,255,.80);
  box-shadow:0 14px 30px rgba(20,20,30,.06);
}

.panel h3{margin:0 0 8px}
.panel p{margin:0; color:var(--muted); line-height:1.7}

.quote{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(107,44,255,.10), rgba(255,45,141,.08), rgba(255,138,31,.08));
}

.quote p{margin:0; line-height:1.7}
.quote .who{margin-top:10px; font-weight:750}

.testimonials{
  position:relative;
  overflow:hidden;
}

.testimonial-track{display:flex; transition:transform .55s ease}
.testimonial{min-width:100%}

.form{
  display:grid;
  gap:12px;
}

.field{display:grid; gap:6px}
.field label{font-size:13px; font-weight:700}

.input, textarea{
  border-radius:14px;
  border:1px solid var(--border);
  padding:12px 12px;
  background:rgba(255,255,255,.90);
  font-size:16px;
  outline:none;
}

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

.input:focus, textarea:focus{
  border-color:rgba(107,44,255,.45);
  box-shadow:0 0 0 4px rgba(107,44,255,.12);
}

.kv{
  display:grid;
  gap:10px;
}

.kv .row{display:flex; gap:10px; align-items:flex-start}
.kv .key{min-width:90px; color:var(--muted); font-weight:700; font-size:13px}
.kv .val{font-size:14px; line-height:1.55}

.map{
  width:100%;
  height:320px;
  border:0;
  border-radius:var(--radius-lg);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

.gallery-album{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:0 12px 26px rgba(20,20,30,.06);
  transition:transform .15s ease;
}

.gallery-album:hover{transform:translateY(-2px)}

.gallery-album button{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  width:100%;
  position:relative;
}

.gallery-album img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

.album-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
  color:white;
  padding:20px 16px 16px;
  text-align:left;
}

.album-overlay h3{
  margin:0 0 4px 0;
  font-size:18px;
  font-weight:600;
}

.album-overlay span{
  font-size:14px;
  opacity:0.9;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(10,10,14,.70);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s ease, visibility 0.2s ease;
  backdrop-filter:blur(0px);
  transition:backdrop-filter 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.lightbox.open{
  display:flex;
  opacity:1;
  visibility:visible;
  backdrop-filter:blur(20px);
}

.lightbox-inner{
  max-width:min(980px, 96vw);
  width:100%;
  background:rgba(255,255,255,.92);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(20px);
  padding:24px;
  transform:scale(0.95);
  opacity:0;
  transition:transform 0.2s ease, opacity 0.2s ease;
}

.lightbox.open .lightbox-inner{
  transform:scale(1);
  opacity:1;
}

.lightbox-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:16px 0;
}

.lightbox-media img{
  max-width:100%;
  max-height:45vh;
  object-fit:contain;
  border-radius:12px;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius:50%;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:bold;
  color:var(--text);
  cursor:pointer;
  transition:all .2s ease;
  z-index:2;
}

.lightbox-nav:hover{
  background:var(--bg);
  transform:translateY(-50%) scale(1.1);
}

.lightbox-prev{left:12px;}
.lightbox-next{right:12px;}

.lightbox-thumbnails{
  margin-top:16px;
  border-top:1px solid var(--border);
  padding-top:16px;
}

.thumbnails-track{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px;
  scroll-behavior:smooth;
}

.thumbnails-track::-webkit-scrollbar{
  height:6px;
}

.thumbnails-track::-webkit-scrollbar-track{
  background:var(--surface);
  border-radius:3px;
}

.thumbnails-track::-webkit-scrollbar-thumb{
  background:var(--muted);
  border-radius:3px;
}

.thumbnail{
  flex-shrink:0;
  width:80px;
  height:60px;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
  overflow:hidden;
}

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

.thumbnail.active{
  border-color:var(--brand-purple);
  transform:scale(1.05);
}

.thumbnail:hover{
  border-color:var(--muted);
}

.lightbox-top{
  position:relative;
  display:flex;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}

.lightbox-top strong{font-size:14px}

.lightbox-close{
  position:absolute;
  top:12px;
  right:14px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  font-size:24px;
  font-weight:bold;
  color:var(--text);
  cursor:pointer;
  border-radius:50%;
  transition:all .2s ease;
  line-height:1;
}

.lightbox-close:hover{
  background:rgba(0,0,0,.1);
  transform:scale(1.1);
}

.lightbox-media{padding:14px}
.lightbox-media img{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--border);
  opacity:0;
  transform:scale(0.98);
  transition:opacity 0.2s ease, transform 0.2s ease;
}

.lightbox.open .lightbox-media img{
  opacity:1;
  transform:scale(1);
}

.faq{
  display:grid;
  gap:12px;
}

.faq-item{
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.82);
  overflow:hidden;
}

.faq-q{
  width:100%;
  text-align:left;
  padding:14px 14px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:800;
  font-size:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.faq-a{
  padding:0 14px 14px 14px;
  color:var(--muted);
  line-height:1.7;
  font-size:16px;
  display:none;
}

.faq-item.open .faq-a{display:block}

.footer{
  padding:28px 0;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.65);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:flex-start;
}

.small{font-size:13px; color:var(--muted); line-height:1.6}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .events-body{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2, 1fr)}
  .split{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2, 1fr)}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-nav.open{display:block}
  .carousel-slide img{height:100vh; object-fit:cover; object-position:center}
  .hero-carousel{min-height:100vh}
  .topbar-inner{flex-wrap:wrap; justify-content:flex-start}
  .stats-strip{grid-template-columns:repeat(2, 1fr)}
  
  /* Mobile carousel layout - overlay elements vertically within banner */
  .card-inner.absolute{
    position:absolute !important;
    top:70% !important;
    left:50% !important;
    right:auto !important;
    transform:translate(-50%, -50%) !important;
    width:90% !important;
    padding:18px;
    text-align:center;
  }
  
  /* Inner pages mobile - move banner text up but keep buttons visible */
  .inner-page .card-inner.absolute {
    top: 55% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .card-inner.absolute:nth-child(3){
    position:absolute !important;
    top:35% !important;
    left:50% !important;
    right:auto !important;
    transform:translate(-50%, -50%) !important;
    width:80% !important;
    padding:12px;
    background:rgba(255,255,255,.74) !important;
    border:1px solid rgba(255,255,255,.55) !important;
    box-shadow:0 18px 50px rgba(20,20,30,.18) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    border-radius:18px !important;
  }
  
  .carousel-slide{
    position:relative !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .carousel-track, .testimonial-track{transition:none}
  .event-rotator img{transition:none}
  .btn:hover{transform:none}
  .gallery-grid img:hover{transform:none}
}