/* styles.css (see previous cell content trimmed for brevity in this runtime) */
body { font-family: 'Roboto', sans-serif; margin:0; padding:0; line-height:1.6; background:#f0f4f8; color:#2c3e50; }
header { background: linear-gradient(135deg, #1e3c72, #2ecc71); color:#fff; padding:25px; box-shadow:0 6px 15px rgba(0,0,0,.2); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
header .logo { display:flex; align-items:center; gap:20px;}
header img { border-radius:50%; border:3px solid #fff; }
.nav-menu { list-style:none; display:flex; gap:20px; margin:0; padding:0;}
.nav-menu a { color:#fff; text-decoration:none; font-weight:bold; transition:color .3s;}
.nav-menu a:hover { color:#ecf0f1;}
.language-switcher { display:flex; gap:10px;}
.language-switcher .flag { width:35px; height:25px; cursor:pointer; border:2px solid #fff; border-radius:5px; transition:border-color .3s;}
.language-switcher .flag:hover { border-color:#27ae60;}
.hero { color:#fff; text-align:center; padding:80px 20px; margin-bottom:30px; position:relative; background-size:cover; background-position:center;}
.hero::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:1;}
.hero * { position:relative; z-index:2;}
.hero h2 { font-size:3em; margin-bottom:15px; text-shadow:2px 2px 4px rgba(0,0,0,.3);}
.hero p { font-size:1.2em; margin-bottom:20px;}
.cta-button { display:inline-block; padding:15px 30px; background:#2ecc71; color:#fff; text-decoration:none; border-radius:8px; font-weight:bold; font-size:1.1em; transition:background-color .3s;}
.cta-button:hover { background:#27ae60;}
.mission, .issues, .about, .evidence-panel, .blog, .community, .contact { max-width:1100px; margin:40px auto; padding:30px; background:#fff; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.1);}
h3, h4 { color:#1e3c72;}
.issues ul { list-style:disc; padding-left:40px;}
.blog-posts article { margin-bottom:20px; border-bottom:1px solid #ddd; padding-bottom:20px;}
.blog-posts a { color:#1e3c72; text-decoration:none;}
.blog-posts a:hover { text-decoration:underline;}
.evidence-panel li { display:flex; justify-content:space-between; align-items:center; padding:10px; background:#f9f9f9; margin-bottom:10px; border-radius:5px;}
.form-group { margin-bottom:20px;}
label { display:block; font-weight:bold; margin-bottom:5px;}
input, textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:5px; box-sizing:border-box;}
button { padding:10px 20px; background:#1e3c72; color:#fff; border:none; border-radius:5px; cursor:pointer; transition:background-color .3s;}
button:hover { background:#162c54;}
.community-options { display:flex; gap:20px; flex-wrap:wrap;}
.option { flex:1; min-width:300px;}
footer { text-align:center; padding:20px; background: linear-gradient(135deg, #1e3c72, #2ecc71); color:#fff; margin-top:40px;}
footer a { color:#fff; margin:0 10px;}
.social-icons { margin-top:10px;}
.social-icons a { color:#fff; margin:0 10px; font-size:1.5em; transition:color .3s;}
.social-icons a:hover { color:#ecf0f1;}
@media (max-width:768px){ header{flex-direction:column;} .nav-menu{flex-direction:column; gap:10px; margin-top:20px;} .community-options{flex-direction:column;}}