/* 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: #184a7d;
            --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);
            }
            .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(--brand); color:#fff; border-color:transparent}
            .btn.accent{background:var(--accent); color:#1a1a1a; border-color:transparent}

            /* 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%, #dbeafe 0%, rgba(219,234,254,0) 60%), 
                        radial-gradient(800px 400px at 110% 0%, #fde68a 0%, rgba(253,230,138,0) 50%);*/
            background: radial-gradient(1200px 500px at 10% -10%, #FC4D4C 0%, rgba(219,234,254,0) 60%), 
                        radial-gradient(800px 400px at 110% 0%, #E33F40 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);
            aspect-ratio: 4/3; display:grid; place-items:center;
            }
            .chalkboard{
            width:92%; height:78%; border-radius:12px; background:#1f2933; 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}
            .chalkboard .scribble{
            position:absolute; right:8%; top:12%; width:70px; height:70px; border:2px dashed #F7B7B7; border-radius:50%;
            transform:rotate(8deg);
            }
            @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, var(--brand), 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}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  max-height:500px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}