@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

html,body{height:100%;margin:0;font-family: "Inter", system-ui, sans-serif;background:linear-gradient(#eef2f7,#e6ecf5);}
body{display:flex;flex-direction:column;min-height:100vh;}

/* HEADER */
.topbar{
background:linear-gradient(90deg,#2c6ed5,#3a8dde);
color:white;
display:flex;
justify-content:space-between;
padding:12px 20px;
align-items:center;
}

.logo{font-size:20px;font-weight:600;}

.menu{
font-size:18px;
background:none;
border:none;
color:white;
cursor:pointer;
transition:.2s;
}
.menu:hover{
transform:scale(1.2);
}

.topnav button{
background:rgba(255,255,255,0.2);
border:none;
color:white;
margin-left:10px;
padding:6px 14px;
border-radius:8px;
cursor:pointer;
}
.topnav button.active{background:white;color:#2c6ed5;font-weight:600;}

.layout{flex:1;display:flex;position:relative;}

/* SIDEBAR */
.sidebar{
width:220px;
background:white;
border-right:1px solid #ddd;
transition:.3s;
z-index:20;
}
.sidebar ul{list-style:none;padding:0;margin:0;}
.sidebar li{
padding:14px 18px;
cursor:pointer;
display:flex;
gap:10px;
align-items:center;
border-left:4px solid transparent;
transition:.2s;
}
.sidebar li:hover{
background:#f0f4ff;
}
.sidebar li.active{
background:#eef4ff;
border-left:4px solid #2c6ed5;
}

.sidebar.closed{
transform:translateX(-100%);
position:absolute;
height:100%;
}

#overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.35);
display:none;
z-index:10;
}
#overlay.show{display:block;}

/* CONTENT */
.content{
flex:1;
padding: 0px 40px;
max-width:850px;
margin:0 auto;
}

h3.center{
text-align:center;
margin-top:15px;
margin-bottom:15px;
color:#2c6ed5;
font-size:1.4rem;
font-weight:600;
}

/* Mission & text-heavy sections */
.page p{
text-align:justify;
text-justify:inter-word;
line-height:1.8;
font-size:1.05rem;
color:#444;
}

.center{text-align:center;}
.subtitle{color:#666;max-width:700px;margin:auto;}

.tip{
margin:30px auto;
background:white;
border-left:4px solid #3a8dde;
border-right:4px solid #3a8dde;
padding:15px;
border-radius:10px;
width:320px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.actions button{
margin:10px;
padding:12px 22px;
border:none;
border-radius:8px;
background:#3a8dde;
color:white;
cursor:pointer;
transition:.2s;
}
.actions button:hover{
box-shadow:0 0 12px rgba(58,141,222,0.6);
transform:translateY(-2px);
}



.card{
background:white;
max-width:500px;
margin:25px auto;
padding:5px;
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.card ul{
list-style:none;
padding-left:0;
margin-left:0;
}

.card li{
margin:8px 0;
}

.page{display:none;}
.page.active{display:block;}

/* FOOTER */
.footer{
text-align:center;
padding:12px 0;
background:#f1f3f6;
color:#777;
font-size:.85rem;
border-top:1px solid #e1e4e8;
flex-shrink:0;
}
.footer-content{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.footer-links a{
color:#2c6ed5;
text-decoration:none;
margin:0 6px;
font-weight:500;
}
.footer-links a:hover{
text-decoration:underline;
}



.impact-note{
font-size:.85rem !important;
color:#777 !important;
margin-top:-5px;
margin-bottom:15px;
text-align:center !important;
}

.intro-text {
  margin: 5px 5px;
  font-size: 1.05rem !important;
  color: #555 !important;
  text-align: center !important;
  max-width: 385px;
  line-height: 1.5 !important;
  display: inline-flex;
  border: solid 2px #3a8dde;
  padding: 10px;
  border-radius: 5px;
}

h2::after{
content:"";
display:block;
width:100%;
height:3px;
background:#2c6ed5;
margin:12px auto 0;
border-radius:2px;
}


.section-intro{
    max-width:800px;
    margin:0 auto 30px;
    text-align:center;
    color:var(--muted);
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    margin-top:30px;
}

.gallery-item{
    overflow:hidden;
    border-radius:14px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:transform .3s ease, box-shadow .3s ease;
}

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

.gallery-item:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

@media(max-width:900px){
	.topnav{display:none;}
	.intro-text {max-width: 100%; margin-left: auto; margin-right: auto;}
}