*{
margin:0;
padding:0;
box-sizing:border-box;
}


html{
scroll-behavior:smooth;
}


body{

font-family:
"Segoe UI",
Arial,
Helvetica,
sans-serif;

background:#f5f7f8;

color:#333;

line-height:1.7;

}





/* HEADER */

header{

position:fixed;

top:0;

width:100%;

background:rgba(0,0,0,.85);

z-index:1000;

backdrop-filter:blur(10px);

}


nav{

display:flex;

align-items:center;

justify-content:space-between;

padding:15px 8%;

}




.logo-area{

display:flex;

align-items:center;

gap:15px;

}



.logo-area img{

width:70px;

height:70px;

object-fit:contain;

border-radius:15px;

}



.logo-area h1{

color:white;

font-size:22px;

}





nav ul{

display:flex;

gap:25px;

list-style:none;

}



nav ul a{

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}



nav ul a:hover{

color:#e67e22;

}





.menu-toggle{

display:none;

background:none;

border:none;

color:white;

font-size:30px;

cursor:pointer;

}








/* HERO */


.hero{

height:100vh;

background:

url("images/hero-humanitarian.jpg")

center/cover no-repeat;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}



.overlay{

position:absolute;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

}




.hero-content{

position:relative;

max-width:950px;

color:white;

padding:30px;

}



.hero-badge{

display:inline-block;

padding:10px 25px;

background:rgba(255,255,255,.15);

border-radius:40px;

margin-bottom:25px;

}




.hero-content h2{

font-size:65px;

line-height:1.15;

margin-bottom:25px;

}



.hero-content p{

font-size:22px;

margin-bottom:35px;

}








/* BUTTONS */


.button{

display:inline-block;

padding:15px 35px;

background:#e67e22;

border-radius:50px;

color:white;

text-decoration:none;

font-weight:bold;

margin:10px;

transition:.3s;

}



.button:hover{

transform:translateY(-5px);

}



.button.second{

background:#2c8c99;

}









/* SECTIONS */


section{

padding:100px 8%;

text-align:center;

}



section h2{

font-size:42px;

color:#174a5c;

margin-bottom:30px;

}



section p{

max-width:950px;

margin:auto;

font-size:18px;

}







/* REVEAL ANIMATION */


.reveal{

opacity:0;

transform:translateY(50px);

transition:1s;

}


.reveal.active{

opacity:1;

transform:translateY(0);

}









/* STATS */


.stats{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

background:#174a5c;

color:white;

gap:20px;

}



.stats h3{

font-size:55px;

}



.stats p{

color:white;

font-size:20px;

}










/* CARDS */


.cards{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(270px,1fr));

gap:30px;

margin-top:50px;

}



.card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:

0 15px 35px rgba(0,0,0,.12);

transition:.4s;

}



.card:hover{

transform:translateY(-10px);

}



.card h3{

color:#174a5c;

font-size:25px;

margin-bottom:15px;

}









/* RECOGNITION */


.recognition-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:35px;

margin-top:50px;

}



.recognition-card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:

0 15px 35px rgba(0,0,0,.12);

}



.recognition-card img{

width:100%;

height:320px;

object-fit:cover;

}



.recognition-content{

padding:30px;

}



.recognition-badge{

background:#174a5c;

color:white;

padding:8px 18px;

border-radius:30px;

font-size:13px;

display:inline-block;

margin-bottom:15px;

}





.recognition-content h3{

font-size:25px;

color:#174a5c;

}









/* TIMELINE */


.timeline{

max-width:900px;

margin:auto;

position:relative;

}



.timeline:before{

content:"";

position:absolute;

width:4px;

background:#174a5c;

top:0;

bottom:0;

left:50%;

}



.timeline-item{

background:white;

padding:30px;

border-radius:20px;

width:45%;

margin:40px 0;

box-shadow:

0 10px 25px rgba(0,0,0,.12);

}



.timeline-item:nth-child(odd){

margin-right:auto;

}



.timeline-item:nth-child(even){

margin-left:auto;

}










/* SUPPORT */


.support-section{

background:#eef6f7;

}









/* GALLERY */


.gallery{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}



.gallery img{

width:100%;

height:300px;

object-fit:cover;

border-radius:20px;

transition:.4s;

}



.gallery img:hover{

transform:scale(1.05);

}









/* CONTACT */


#contact{

background:#174a5c;

color:white;

}



#contact h2{

color:white;

}



#contact p{

color:white;

}



.contact-info{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin:40px;

}



.contact-info p{

background:rgba(255,255,255,.1);

padding:25px;

border-radius:20px;

}








/* FOOTER */


footer{

background:#111;

color:white;

padding:50px 8%;

}



.footer-content{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:30px;

}



.copyright{

text-align:center;

margin-top:40px;

}










/* MOBILE NAVIGATION */


@media(max-width:900px){


.menu-toggle{

display:block;

}



nav ul{

position:absolute;

top:100%;

left:0;

width:100%;

background:#111;

display:none;

flex-direction:column;

text-align:center;

padding:30px;

}



nav ul.active{

display:flex;

}




.hero-content h2{

font-size:40px;

}



.timeline:before{

left:20px;

}



.timeline-item{

width:90%;

margin-left:50px!important;

}


}







@media(max-width:600px){


.logo-area img{

width:55px;

height:55px;

}



.logo-area h1{

font-size:16px;

}



section{

padding:70px 5%;

}



.hero-content h2{

font-size:34px;

}


}