/* Place your CSS styles in this file */

h1 {
    text-align: center;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: normal;
}

/* Live Words */
.live-output{
  min-height: 56px;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: var(--shadow);
  font-size: 1.25rem;
  word-wrap: break-word;
  white-space: pre-wrap; /* keep spaces/newlines visible */
}

:root{
  --brand:#c52222;
  --brand-2:#0f3057;
  --accent:#f2b705;
  --bg:#f7f9fc;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --ring: rgba(24,74,125,0.25);
  --radius:12px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

/* Layout */
.container{width:min(1100px, 92%); margin-inline:auto}
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid #e5e7eb;
}
.nav{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:1rem;
  padding:0.75rem 0;
}
.brand{
  display:flex; 
  align-items:center; 
  gap:.75rem; 
  font-weight:700;
  color:var(--brand-2);
}
.brand .logo{
  width:38px; height:38px; border-radius:50%;
  background:conic-gradient(from 210deg, var(--brand), var(--brand-2));
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:0.9rem;
  box-shadow:0 6px 16px rgba(24,74,125,.25);
}
nav ul{
  list-style:none; display:flex; gap:1rem; margin:0; padding:0;
}
nav a{
  display:inline-block; padding:.5rem .75rem; border-radius:8px; color:var(--text);
}
nav a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:10px; font-weight:600;
  border:1px solid #d1d5db; background:var(--surface); color:var(--text);
  transition:.2s transform ease, .2s box-shadow ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{background:var(--buttoon); color:#ffffff; border-color:transparent}
.btn.accent{background:var(--bg); color:#c52222; border-color:#c52222}
/* Mobile menu */
.menu-toggle{display:none; background:none; border:0; padding:.4rem; border-radius:10px}
.menu-toggle span{display:block; width:26px; height:3px; background:#111; margin:5px 0; border-radius:2px}
@media (max-width: 820px){
  nav ul{display:none; position:absolute; left:0; right:0; top:60px; background:#fff; border-bottom:1px solid #e5e7eb; flex-direction:column; padding:0.5rem}
  nav ul.open{display:flex}
  .menu-toggle{display:block}
}

/* Hero */
.hero{
  background: radial-gradient(1200px 500px at 10% -10%, #FC4D4C 0%, rgba(219,234,254,0) 60%), 
  radial-gradient(800px 400px at 110% 0%, #FC4D4C 0%, rgba(253,230,138,0) 50%);
  padding: clamp(2rem, 4vw + 1.5rem, 5rem) 0 3rem;
  border-bottom:1px solid #e5e7eb;
}
.hero-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center;
}
.hero h1{
  font-family:Merriweather, Georgia, serif;
  font-size:clamp(1.8rem, 1.2rem + 2.5vw, 3rem);
  line-height:1.2; margin:0 0 .5rem;
  color:#0b2540;
}
.hero p{color:#374151; margin:0 0 1.25rem}
.hero .stats{display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:1rem}
.stat{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.8rem 1rem; min-width:130px; text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.stat .value{font-weight:700; font-size:1.25rem; color:var(--brand)}
.illustration{
  background:linear-gradient(145deg, #ffffff, #f3f6fb); border:1px solid #e5e7eb; border-radius:16px; padding:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.06); height:80%;
  aspect-ratio: 4/3; display:grid; place-items:center;grid-column: 1; 
}
.chalkboard{
  width:92%; height:79%; border-radius:12px; background:var(--brand); position:relative; box-shadow:inset 0 0 0 6px #1f2937;
  color:#ffffff; display:grid; place-items:center; text-align:center; padding:1rem;
}
.chalkboard h2{margin:.2rem 0; font-family:Merriweather, Georgia, serif}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .illustration{order:-1}
}

/* Sections */
section{padding:3rem 0}
.section-title{font-size:1.6rem; margin:0 0 1rem; font-family:Merriweather, Georgia, serif}
.muted{color:var(--muted)}

.cards{
  display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 4; background:var(--surface); border:1px solid #e5e7eb; border-radius:12px; padding:1rem; box-shadow:var(--shadow)
}
.card h3{margin:.4rem 0}
.card .icon{
  width:42px; height:42px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:700;
  background:linear-gradient(135deg, #c52222, var(--brand-2)); box-shadow:0 6px 16px rgba(24,74,125,.3);
}
@media (max-width: 900px){
  .card{grid-column: span 6}
}
@media (max-width: 600px){
  .card{grid-column: span 12}
}

            /* News list */
            .list{
            display:grid; gap:1rem;
            grid-template-columns: repeat(12, 1fr);
            }
            .list-item{
            grid-column: span 6; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; display:flex; gap:1rem; align-items:flex-start
            }
            .badge{font-size:.75rem; background:#e5effa; color:var(--brand); padding:.25rem .5rem; border-radius:999px; border:1px solid #cfe0fb}
            .date{color:var(--muted); font-size:.9rem}
            @media (max-width: 800px){
            .list-item{grid-column: span 12}
            }

            /* Gallery */
            .gallery{
            display:grid; gap:.6rem; grid-template-columns:repeat(6, 1fr);
            }
            .tile{
            border-radius:10px; background:linear-gradient(135deg, #c7d2fe, #93c5fd); aspect-ratio:1/1; position:relative; overflow:hidden;
            border:1px solid #e5e7eb;
            }
            .tile:nth-child(3n){background:linear-gradient(135deg, #fde68a, #fca5a5)}
            .tile:nth-child(4n){background:linear-gradient(135deg, #86efac, #a7f3d0)}
            .tile:after{
            content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px)
            }
            @media (max-width: 900px){
            .gallery{grid-template-columns:repeat(3, 1fr)}
            }
            @media (max-width: 520px){
            .gallery{grid-template-columns:repeat(2, 1fr)}
            }

            /* Contact */
            .contact-grid{
            display:grid; gap:1rem; grid-template-columns: 1.2fr 1fr;
            }
            .map{
            border-radius:12px; background:#fff; border:1px solid #e5e7eb; height:320px; display:grid; place-items:center; color:#334155;
            box-shadow:var(--shadow);
            }
            .form{
            background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; box-shadow:var(--shadow);
            }
            label{display:block; font-weight:600; margin:.4rem 0 .25rem}
            input, textarea, select{
            width:100%; padding:.75rem; border-radius:10px; border:1px solid #d1d5db; background:#fff; font:inherit;
            }
            input:focus, textarea:focus, select:focus{outline:none; box-shadow:0 0 0 4px var(--ring); border-color:var(--brand)}
            textarea{min-height:120px; resize:vertical}
            .row{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
            @media (max-width: 800px){
            .contact-grid{grid-template-columns:1fr}
            .row{grid-template-columns:1fr}
            }

            /* Footer */
            footer{
            background:#0b2540; color:#e5eef7; padding:2rem 0; margin-top:2rem
            }
            footer a{color:#cfe7ff}
            .footer-grid{
            display:grid; gap:1rem; grid-template-columns:2fr 1fr 1fr 1fr;
            }
            .copyright{
            border-top:1px solid rgba(255,255,255,.12); margin-top:1rem; padding-top:1rem; font-size:.95rem; color:#c2d3e6
            }
            @media (max-width: 900px){
            .footer-grid{grid-template-columns:1fr 1fr}
            }
            @media (max-width: 560px){
            .footer-grid{grid-template-columns:1fr}
            }


            

* {box-sizing:border-box}



.slideshow-container {
  width: 100%;      
  height: 100%;     
  overflow: hidden;  
  position: relative; 
}

.slideshow-container img {
  width: 100%;       
  height: 100%;     
  object-fit: cover; 
  display: block;   
}