:root{
  --bg:#eaf6ff; --bg2:#f4fbff; --ink:#0b2942; --muted:#1b3b5f;
  --brand:#0ea5e9; --brand2:#22c55e; --card:#ffffffd6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial;
     color:var(--ink);background:linear-gradient(180deg,var(--bg),var(--bg2));}
a{color:inherit;text-decoration:none}
/* Image error handling and fallbacks */
img{
  max-width:100%;
  display:block;
  height:auto;
}

img[src=""], img:not([src]){
  display:none;
}

/* Broken image fallback */
img:not([src]), img[src=""], img[src*="undefined"], img[src*="null"]{
  display:none;
}

/* Activity card images with error handling */
.activity-card img{
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:8px;
  border:1px solid #ffffffaa;
  background:#f8f9fa;
  min-height:120px;
  width:100%;
  height:auto;
  display:block;
}

/* Force image display */
.activity-card img[src]{
  display:block !important;
}

/* Image loading state */
.activity-card img:not([src]){
  display:none;
}

/* Hero image with fallback */
.hero-media img{
  aspect-ratio:16/10;
  object-fit:cover;
  background:#f8f9fa;
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* Slider Styles */
.slider-container {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-item.active {
  opacity: 1;
}

.slider-item .slider-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.slider-item .slider-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 0 20px;
}

.slider-item .slider-content h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  line-height: 1.2;
}

.slider-item .slider-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  line-height: 1.6;
}

.slider-item .slider-content .btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.slider-item .slider-content .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.slider-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  background: white;
  transform: scale(1.2);
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0,0,0,0.3);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.slider-nav:hover {
  background: rgba(0,0,0,0.6);
}

.slider-nav.prev {
  left: 30px;
}

.slider-nav.next {
  right: 30px;
}

/* Hide fallback hero when slider is active */
.slider-container:not(:empty) + .hero-fallback {
  display: none;
}

/* Responsive slider */
@media (max-width: 768px) {
  .slider-item .slider-content h1 {
    font-size: 2.5rem;
  }
  
  .slider-item .slider-content p {
    font-size: 1.1rem;
  }
  
  .slider-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .slider-nav.prev {
    left: 15px;
  }
  
  .slider-nav.next {
    right: 15px;
  }
  
  .slider-controls {
    bottom: 20px;
  }
}

/* SDG images */
.sdg-card img{
  width:64px;
  height:64px;
  object-fit:contain;
  margin-bottom:8px;
  background:#f8f9fa;
}

/* License figure */
.license-figure img{
  width:100%;
  height:auto;
  border-radius:16px;
  background:#f8f9fa;
}
.container{width:min(1180px,92vw);margin-inline:auto}

header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(8px);
       background:#ffffffcc;border-bottom:1px solid #ffffffaa}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:auto}
.brand-name{font-weight:800;letter-spacing:.2px}
.nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0;align-items:center}
.nav a{padding:10px 12px;border-radius:10px;font-weight:600}
.nav a:hover,.nav a.active{background:#ffffff}
.cta-btn{background:var(--brand);color:#fff;padding:10px 14px;border-radius:12px;font-weight:700;box-shadow:0 6px 18px rgba(14,165,233,.25)}
.menu{display:flex;align-items:center;gap:10px}

.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 600px at 10% 20%, rgba(34,197,94,.18), transparent 60%), radial-gradient(1000px 700px at 90% 10%, rgba(14,165,233,.18), transparent 60%);pointer-events:none}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:56px 0}
h1{font-size:clamp(28px,5vw,48px);margin:0 0 10px;line-height:1.1}
.lead{color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #ffffffcc;font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.12);border:1px solid #ffffffaa}
.hero-media img{aspect-ratio:16/10;object-fit:cover}

.section{padding:56px 0}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #ffffffaa;border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.feature{display:flex;gap:12px;align-items:flex-start}
.icon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#e0f2fe,#ccfbf1);border:1px solid #ffffff;box-shadow:0 4px 12px rgba(0,0,0,.05)}

footer{padding:28px 0;color:#234;border-top:1px solid #ffffffaa;background:linear-gradient(180deg,transparent,#ffffffa3)}
.badge-link{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #ffffffcc;font-weight:600}

@media (max-width:960px){ .hero-wrap{grid-template-columns:1fr} }

/* Enhanced Responsive Design */
@media (max-width:960px){ 
  .hero-wrap{grid-template-columns:1fr}
  .desktop-menu{display:none}
  .mobile-menu-btn{display:flex}
}

@media (max-width:768px){
  .desktop-menu{
    display:none;
  }
  
  .mobile-menu-btn{
    display:flex;
  }
  
  .mobile-menu-content{
    width:280px;
  }
  
  .nav{
    padding:12px 0;
  }
  
  .hero-wrap{
    grid-template-columns:1fr;
    gap:24px;
    padding:40px 0;
  }
  
  .hero-media{
    order:-1;
  }
  
  .grid.cols-2{
    grid-template-columns:1fr;
  }
  
  .grid.cols-3{
    grid-template-columns:1fr;
  }
  
  .activities-box{
    grid-template-columns:1fr;
  }
  
  .section{
    padding:40px 0;
  }
  
  .container{
    width:min(100%,92vw);
    padding:0 16px;
  }
  
  form#contact-form{
    grid-template-columns:1fr;
  }
  
  form#contact-form label{
    grid-column:span 1;
  }
  
  form#contact-form textarea{
    grid-column:span 1;
  }
  
  /* Improve touch targets */
  .nav a{
    padding:12px 16px;
  }
  
  .btn{
    padding:14px 20px;
    min-height:48px;
  }
  
  .cta-btn{
    padding:14px 20px;
    min-height:48px;
  }
  
  /* Better spacing for mobile */
  .hero h1{
    font-size:clamp(24px,6vw,36px);
    line-height:1.2;
  }
  
  .lead{
    font-size:1.1rem;
    line-height:1.6;
  }
  
  .feature{
    padding:16px;
  }
  
  .feature .icon{
    width:48px;
    height:48px;
    font-size:1.5rem;
  }
}

@media (max-width:480px){
  .mobile-menu-content{
    width:100%;
  }
  
  .hero h1{
    font-size:24px;
  }
  
  .card{
    padding:16px;
    margin:12px 0;
  }
  
  .feature{
    flex-direction:column;
    text-align:center;
  }
  
  .feature .icon{
    margin:0 auto 12px;
  }
  
  .hero-cta{
    flex-direction:column;
    gap:12px;
  }
  
  .badge-link{
    text-align:center;
    padding:12px 16px;
  }
  
  /* Smaller text for very small screens */
  .hero .lead{
    font-size:1rem;
  }
  
  .section{
    padding:32px 0;
  }
  
  .container{
    padding:0 12px;
  }
  
  /* Stack footer content */
  footer .container{
    flex-direction:column;
    text-align:center;
    gap:16px;
  }
  
  /* Improve form layout */
  form#contact-form{
    gap:16px;
  }
  
  form#contact-form input,
  form#contact-form textarea{
    padding:14px 16px;
    font-size:16px; /* Prevents zoom on iOS */
  }
  
  /* Better button sizing */
  .btn{
    width:100%;
    justify-content:center;
  }
  
  .cta-btn{
    width:100%;
    justify-content:center;
  }
}

/* Landscape orientation adjustments */
@media (max-height:500px) and (orientation:landscape){
  .hero{
    padding:20px 0;
  }
  
  .hero-wrap{
    padding:20px 0;
  }
  
  .section{
    padding:20px 0;
  }
  
  .mobile-menu-content{
    height:100vh;
    overflow-y:auto;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .hero-media img,
  .activity-card img,
  .gallery img{
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  
  .mobile-menu-content{
    transition:none;
  }
  
  .mobile-menu-overlay{
    transition:none;
  }
}
/* Hide brand name next to logo */
.brand-name{display:none}

/* Mobile Menu Styles */
.mobile-menu-btn{
  display:none;
  flex-direction:column;
  justify-content:space-around;
  width:30px;
  height:30px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  z-index:1001;
}

.mobile-menu-btn span{
  width:100%;
  height:3px;
  background:var(--text-primary);
  border-radius:2px;
  transition:all 0.3s ease;
  transform-origin:center;
}

.mobile-menu-btn.active span:nth-child(1){
  transform:rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.active span:nth-child(2){
  opacity:0;
}

.mobile-menu-btn.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px, -6px);
}

.mobile-menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
}

.mobile-menu-overlay.active{
  opacity:1;
  visibility:visible;
}

.mobile-menu-content{
  position:absolute;
  top:0;
  right:0;
  width:320px;
  height:100%;
  background:var(--card);
  box-shadow:-10px 0 30px rgba(0,0,0,0.1);
  transform:translateX(100%);
  transition:transform 0.3s ease;
  overflow-y:auto;
}

.mobile-menu-overlay.active .mobile-menu-content{
  transform:translateX(0);
}

.mobile-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px;
  border-bottom:1px solid var(--line);
}

.mobile-logo{
  height:40px;
  width:auto;
}

.mobile-menu-close{
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  font-size:24px;
  color:var(--text);
  cursor:pointer;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease;
}

.mobile-menu-close:hover{
  background:#f0f0f0;
}

.mobile-nav{
  padding:20px;
}

.mobile-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}

.mobile-nav li{
  margin-bottom:8px;
}

.mobile-nav a{
  display:block;
  padding:16px 20px;
  border-radius:12px;
  font-weight:600;
  color:var(--text);
  transition:all 0.2s ease;
  border:2px solid transparent;
}

.mobile-nav a:hover{
  background:var(--brand);
  color:#fff;
  transform:translateX(4px);
}

.mobile-menu-footer{
  padding:20px;
  border-top:1px solid var(--line);
  margin-top:20px;
}

.mobile-lang-selector{
  margin-bottom:20px;
}

.mobile-lang-selector label{
  display:block;
  font-weight:600;
  margin-bottom:8px;
  color:var(--text);
}

.mobile-lang-selector select{
  width:100%;
  padding:12px 16px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--card);
  font-size:1rem;
}

.mobile-cta-btn{
  display:block;
  width:100%;
  padding:16px 20px;
  background:var(--brand);
  color:#fff;
  text-align:center;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  transition:all 0.2s ease;
}

.mobile-cta-btn:hover{
  background:#0d94d1;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(14,165,233,0.3);
}

/* Responsive Design */
@media (max-width:768px){
  .desktop-menu{
    display:none;
  }
  
  .mobile-menu-btn{
    display:flex;
  }
  
  .mobile-menu-content{
    width:280px;
  }
  
  .nav{
    padding:12px 0;
  }
  
  .hero-wrap{
    grid-template-columns:1fr;
    gap:24px;
    padding:40px 0;
  }
  
  .hero-media{
    order:-1;
  }
  
  .grid.cols-2{
    grid-template-columns:1fr;
  }
  
  .grid.cols-3{
    grid-template-columns:1fr;
  }
  
  .activities-box{
    grid-template-columns:1fr;
  }
  
  .section{
    padding:40px 0;
  }
  
  .container{
    width:min(100%,92vw);
    padding:0 16px;
  }
  
  form#contact-form{
    grid-template-columns:1fr;
  }
  
  form#contact-form label{
    grid-column:span 1;
  }
  
  form#contact-form textarea{
    grid-column:span 1;
  }
}

@media (max-width:480px){
  .mobile-menu-content{
    width:100%;
  }
  
  .hero h1{
    font-size:24px;
  }
  
  .card{
    padding:16px;
  }
  
  .feature{
    flex-direction:column;
    text-align:center;
  }
  
  .feature .icon{
    margin:0 auto 12px;
  }
}

/* Form layout fixes */
form#contact-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
form#contact-form label{grid-column:span 2;font-weight:600}
form#contact-form input, form#contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #d8ebff;background:#fff}
form#contact-form textarea{min-height:110px;resize:vertical;grid-column:span 2}
form#contact-form button{justify-self:start}
address a{font-weight:600}

/* Larger license figure */
.license-figure{grid-column:1 / -1}
.license-figure img{width:100%;height:auto;border-radius:16px}

/* Activity cards with images - removed duplicate */

/* Activities layout */
.activities-box{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.equal{display:flex;flex-direction:column}
.equal .btn{margin-top:auto}

/* SDG icon images unified look */
.sdg-card img{width:64px;height:64px;object-fit:contain;margin-bottom:8px}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid #d7ecff;background:#fff;font-weight:700}
.btn:hover{background:#f8fcff}

/* Filter bar for announcements */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
.filterbar input,.filterbar select{padding:8px 10px;border-radius:10px;border:1px solid #d8ebff;background:#fff}
.tag{display:inline-block;padding:4px 8px;border:1px solid #cfe9ff;border-radius:999px;background:#fff;margin:2px;font-size:.9rem}

/* Pretty language select */
#lang{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:8px 32px 8px 12px;border-radius:12px;border:1px solid #d7ecff;background:#fff;
  position:relative;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10"><path d="M1 1l6 6 6-6" stroke="%230b2942" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:right 10px center; background-size:14px 10px;
  font-weight:700;letter-spacing:.3px;
}

/* Make announcement cards a bit denser */
#news-list .card{padding:12px}