/*style.css IMI20260315*/
@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 {
  scroll-behavior: smooth;
}

html,body{height:100%;margin:0;font-family: "Inter", system-ui, sans-serif; background-color:#eef2f7;}
body{display:flex;flex-direction:column;min-height:100vh; -webkit-font-smoothing: antialiased;}
a{text-decoration:none; color:#2c6ed5;}

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

	position:sticky;
	top:0;
	z-index:1000;
}

.logo{font-size:1em;font-weight:600;}

.left{display:flex; align-items:center; gap:10px;}

.menu{
	font-size:18px;
	background:rgba(255,255,255,0.15);
	border:1px solid rgba(255,255,255,0.35);
	color:white;
	cursor:pointer;
	padding:6px 10px;
	border-radius:8px;
	transition:all .2s ease;
	display:flex;
	align-items:center;
	justify-content:center;
}
.menu:hover{background:rgba(255,255,255,0.25); transform:scale(1.05);}
.menu:active{transform:scale(0.95);}

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

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

.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 a{color: #000; padding:14px 18px; cursor:pointer; display:flex; gap:10px; align-items:center; border-left:4px solid transparent; transition:.2s; }
.sidebar a:hover{background:#f0f4ff; }
.sidebar a.active{background:#eef4ff; border-left:4px solid #2c6ed5; }

.sidebar.collapsed{ width:0; overflow:hidden; border-right:none; }

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

.content{flex:1; padding: 0px 40px; max-width:900px; margin:0 auto; }


h1{font-size:large;}

h1:not(.main-header)::after{content:""; display:block; width:100%; height:3px; background:#2c6ed5; margin:12px auto 0; border-radius:2px; }

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





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

.mini-strip {
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #2c6ed5 0px,
        #2c6ed5 20px,
        #ffffff 20px,
        #ffffff 40px
    );
    margin: 20px 0;
}

.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;}
.page p{text-align:start; text-justify:inter-word; line-height:1.7; font-size:1.05rem; color:#444; }


.footer{ background:#f7f8fa; border-top:1px solid #e5e7eb; padding:10px 20px 35px; font-size:14px; }
.footer-inner{ max-width:1100px; margin:auto; }
.footer-brand{ font-weight:600; font-size:15px; margin-bottom:0px; color:#333; }
.footer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-bottom:10px; }
.footer-col h4{ font-size:13px; font-weight:600; color:#444; margin-bottom:12px; }
.footer-col a{ display:block; font-size:13px; color:#5f6368; margin-bottom:8px; transition:color .2s ease; }
.footer-col a:hover{ color:#2c6ed5; text-decoration:underline; }
.footer-legal{ border-top:1px solid #e5e7eb; padding-top:12px; margin-top:5px; font-size:12px; color:#777; line-height:1.6; }

.legal{ font-size:11px; color:#777; line-height:1.4; }

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


.vision-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; max-width:100%; margin:auto;}

.intro-text{font-size:1.05rem; color:#555; text-align:center; max-width:380px; line-height:1.6; border:2px solid #3a8dde; padding:18px; border-radius:10px; background:#f8f8f8; flex:1 1 380px; box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.intro-text h3{margin-top:0; margin-bottom:8px; font-size:1.1rem; font-weight:600; color:#2c6ed5; text-align:center;}

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

.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:30px; max-width:700px; margin-left:auto; margin-right:auto; margin-bottom:40px; }
.gallery-item{cursor:pointer; background:white; border-radius:14px; box-shadow:0 10px 25px rgba(0,0,0,0.1); overflow:hidden; margin:0; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.gallery-item figcaption{padding:10px 14px; font-size:13px; color:#555; text-align:center; background:#fafafa; border-top:1px solid #eee; }
.gallery-item img{width:100%; height:220px; object-fit:cover; display:block; }
.gallery-item:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.18); }

.hero{position:relative; border-radius:16px; overflow:hidden; margin-top:20px;}
.hero img{width:100%; display:block; transform:scale(1.05);}
.hero-btn{display:inline-block; margin-top:20px; padding:12px 26px; background:#2c6ed5; color:white; border-radius:8px; font-weight:600;}


.partners-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:700px; margin:30px auto;}
.partner-card{background:white; padding:20px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.08); text-align:center; font-size:14px;}
.partner-card p{font-size:13px; color:#555; margin-top:8px;}

.story-card{background:white; max-width:700px; margin:30px auto; padding:25px; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,0.08); text-align:left;}
.story-text{font-style:italic; color:#444; line-height:1.7; margin-bottom:15px;}

.credibility{background:#f7f8fa; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; padding:35px 20px; margin-top:40px;}
.credibility-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:25px; max-width:1000px; margin:auto; text-align:center;}
.credibility-item{font-size:14px; color:#444;}
.credibility-item p{font-size:13px; color:#666; margin-top:6px;}

.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:900px; margin:30px auto;}
.value-item{text-align:center; padding:20px; background:#ffffff; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.08);}
.value-item p{font-size:13px; color:#555; margin-top:8px;}

.involved-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:700px; margin:30px auto;}
.involved-card{background:white; padding:20px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.08); text-align:center; font-size:14px;}
.involved-card p{font-size:13px; color:#555; margin-top:8px;}

.impact-image{
max-width:500px;
margin:40px auto;
text-align:center;
}

.impact-image img{
width:100%;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.impact-caption{
margin-top:10px;
font-size:13px;
color:#666;
font-style:italic;
}

.donate-btn{text-align: center; background:#ffc439; color:#111; padding:8px 18px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none;
	margin: -5px 10px -5px 0px; border:1px solid #e6b800; transition:all .2s ease; box-shadow:0 3px 8px rgba(0,0,0,0.15);}
.donate-btn:hover{background:#ffb700;}
.donate-btn .heart{display:inline-block; animation:heartBeat 1.6s ease-in-out infinite; transform-origin:center;}
.donate-btn:hover .heart{animation-duration:0.8s;}

@keyframes heartBeat{
	0%{transform:scale(1);}
	15%{transform:scale(1.25);}
	30%{transform:scale(1);}
	45%{transform:scale(1.15);}
	60%{transform:scale(1);}
	100%{transform:scale(1);}
}

.footer-social{margin-top:10px; display:flex; gap:12px; justify-content:flex-end;}
.footer-social a{display:inline-block; opacity:0.85; transition:opacity .2s ease, transform .2s ease; float: right;}
.footer-social a:hover{opacity:1; transform:translateY(-2px);}


.footer-security{margin-top:8px;font-size:12px; color:#777; text-align:right; opacity:0.85; letter-spacing:0.3px;}



.cookie-banner{
position:fixed;
bottom:15px;
left:50%;
transform:translateX(-50%);
background: #222222db;
color:#fff;
padding:14px 16px;
border-radius:10px;
font-size:13px;
display:none;
align-items:center;
gap:12px;
z-index:9999;
box-shadow:0 5px 20px rgba(0,0,0,0.35);
max-width:420px;
width:90%;
flex-wrap:wrap;
line-height:1.4;
}

.cookie-banner a{color:#9cc4ff; text-decoration:underline;}
.cookie-banner button{background:#2c6ed5; border:none; color:white; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px;}
.cookie-actions{display:flex; gap:8px; margin-left:auto;}
.cookie-decline{background:#555;}


@media(max-width:900px){
	.content{flex:1; padding: 0; max-width:95%; margin:0 auto; padding-bottom:60px; }
	
	.topbar .logo{font-size: 14px;}

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

    .topnav{display:none;}
	.menu{margin-left: 0px;}
    .intro-text {max-width: 100%; margin-left: auto; margin-right: auto; }
	
    .footer{padding:35px 20px; }
    .footer-grid{grid-template-columns:1fr; gap:20px; }
    .footer-brand,
    .footer-legal{text-align:center; }
	
	.gallery-grid{	grid-template-columns:1fr; gap:18px; }
	.gallery-item{	height:auto; }
	.gallery-item img{	width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
	
	.partners-grid{grid-template-columns:1fr;}
	.credibility-grid{grid-template-columns:1fr; gap:18px;}
	.values-grid{grid-template-columns:1fr 1fr;}
	.involved-grid{grid-template-columns:1fr;}
	
	.donate-btn{padding: 8px 8px; margin-right: 0px; font-size: 11px;}
	.donate-btn .heart{font-size: 14px;}
	
	.cookie-banner{flex-direction:column; align-items:flex-start; text-align:left; gap:10px; width:80%;}
	.cookie-actions{width:100%; display:flex; justify-content:flex-end;}
	.cookie-banner button{flex:1; max-width:120px;}
	
}


.lightbox{display:none; position:fixed; z-index:9999; inset:0; background:rgba(0,0,0,0.9); justify-content:center; align-items:center; flex-direction:column; padding:20px; }
.lightbox-content{max-width:90%; max-height:80vh; border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,0.6); }
.lightbox-caption{color:white; margin-top:15px; font-size:14px; text-align:center; max-width:600px; }
.lightbox-close{position:absolute; top:20px; right:30px; color:white; font-size:35px; cursor:pointer; }
.lightbox-arrow{position:absolute; color:white; font-size:30px; cursor:pointer; user-select:none; background:rgba(0,0,0,0.4); padding:10px 14px; border-radius:8px; transition:.2s;}
.lightbox-arrow:hover{background:rgba(0,0,0,0.7);}
.lightbox-prev{top:20px; left:50%; transform:translateX(-50%);}
.lightbox-next{bottom:20px; left:50%; transform:translateX(-50%);}