:root{
  /* Brand palette — tweak to match your current site */
  --bg:#0b0d13;
  --panel:#10131a;
  --panel2:#0e1118;
  --text:#f2f3f7;
  --muted:#b8becc;
  --border:rgba(255,255,255,.1);
  --accent:#ffb703;           /* CTA */
  --accent2:#845ef7;          /* Secondary */
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.45);

  /* Replace with your hero image */
  --hero:url(Files/concert.jpg);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1100px 700px at 85% -5%, rgba(132,94,247,.15), transparent 60%),var(--bg);
  color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.nav{position:sticky;top:0;z-index:1000;backdrop-filter:blur(8px);
  background:linear-gradient(to bottom,rgba(10,12,18,.85),rgba(10,12,18,.45));border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.brand .mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#ffd166);color:#171717;font-weight:900;box-shadow:var(--shadow)}
.brand span{font-family:Poppins,sans-serif}

.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{padding:10px 12px;border-radius:12px;color:var(--muted);font-weight:600;transition:.2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.cta{padding:10px 16px;border-radius:12px;font-weight:800;background:linear-gradient(135deg,var(--accent),#ffd166);color:#161616;border:0}
.hamburger{display:none;font-size:1.2rem}
@media (max-width:820px){
  .hamburger{display:block}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;left:0;right:0;top:64px;
    background:linear-gradient(to bottom,rgba(10,12,18,.95),rgba(10,12,18,.75));border-bottom:1px solid var(--border);padding:12px 20px 18px}
  .nav-links.open a{width:100%}
}

.hero{
  min-height:68vh;background-image:linear-gradient(to bottom,rgba(7,8,12,.35),rgba(7,8,12,.78)),var(--hero);
  background-size:cover;background-position:center;display:grid;place-items:center;text-align:center;padding:92px 20px 64px;border-bottom:1px solid var(--border)
}
.hero .inner{max-width:1000px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:999px;color:var(--muted);
  padding:8px 12px;}
h1{font-family:Poppins,sans-serif;font-weight:800;line-height:1.1;margin:18px 0 10px;
  font-size:clamp(2rem,4.4vw,3.6rem)}
.sub{color:var(--muted);max-width:760px;margin:0 auto 24px}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;gap:10px;align-items:center;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:#141924;font-weight:700}
.btn.primary{background:linear-gradient(135deg,var(--accent),#ffd166);color:#171717;border:0}
.btn:hover{transform:translateY(-2px)}

section{padding:74px 20px}
.container{max-width:1200px;margin:0 auto}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:26px}
.section-head h2{font-family:Poppins,sans-serif;font-weight:800;margin:0;font-size:clamp(1.4rem,2.6vw,2rem)}
.section-head p{margin:0;color:var(--muted)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-12{grid-column:span 12}
@media (max-width:980px){.col-4,.col-6{grid-column:span 6}}
@media (max-width:680px){.col-4,.col-6{grid-column:span 12}}

.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid var(--border)}
.card h3{margin:6px 0 8px}
.card p{margin:0 0 12px;color:var(--muted)}

.event{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#0f1218}
.event img{width:100%;height:200;object-fit:cover}
.event .meta{padding:14px 16px}
.event .row{display:flex;gap:14px;color:var(--muted);font-size:.95rem}
/* Base */
.event{
  position: relative;
  overflow: hidden;                  /* you already have this */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.event img{
  transition: transform .35s ease;
}

/* Hover/focus */
.event:hover,
.event:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}
.event:hover img,
.event:focus-within img{
  transform: scale(1.06);
}

/* Keyboard visible focus */
.event:focus-within{
  outline: 2px solid var(--accent, #ffb703);
  outline-offset: 2px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .event, .event img{ transition: none; }
}

.event .btn{
  transition: transform .2s ease, background-color .2s ease;
}
.event:hover .btn,
.event:focus-within .btn{
  transform: translateY(-2px);
}



.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0f131a;color:var(--text);outline:none}
.input:focus{border-color:#ffffff26}
.muted{color:var(--muted)}

.quote{font-size:clamp(1.05rem,2vw,1.25rem);font-weight:600;color:#f3f5fb;background:linear-gradient(135deg,rgba(132,94,247,.15),rgba(255,183,3,.12));border:1px solid var(--border);padding:22px;border-radius:var(--radius)}
.quote small{display:block;margin-top:8px;color:var(--muted)}

footer{padding:40px 20px;border-top:1px solid var(--border);background:#0a0c11;color:var(--muted)}
.foot-row{max-width:1200px;margin:0 auto;display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.foot-col{grid-column:span 4}.foot-col:last-child{grid-column:span 8}
@media (max-width:820px){.foot-col,.foot-col:last-child{grid-column:span 12}}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].visible{opacity:1;transform:none}

#cardd {
  text-align: justify
}

@media (max-width: 680px){
  .event{ min-height: unset; }
  .event img{ height: 220px; } /* shorter on small screens */
}

#ddclogos {
  width: 50px;
  height: auto;
}

#ddclogoss {
  width: 50px;
  height: auto;
}

#ddc_logoss {
  width: 50px;
  height: auto;
}

#cardder {
  text-align: justify;
}

#center_article {
  
}

#ChoirPic {
}