*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}


body{
background:white;
color:#333;
}


/* TOP */

.topbar{

background:#087f3d;
color:white;

padding:12px 50px;

display:flex;
justify-content:space-between;

font-size:14px;

}



/* HEADER */


.header{

height:100px;

padding:0 50px;

display:flex;

align-items:center;

justify-content:space-between;

background:white;

border-bottom:4px solid #e5c300;

}





.brand{

display:flex;

align-items:center;

gap:15px;

}



.brand img{

width:65px!important;

height:65px!important;

object-fit:contain!important;

}



.brand h1{

font-size:30px;

color:#087f3d;

}



.brand p{

color:#555;

}





nav a{

margin-left:25px;

text-decoration:none;

font-weight:bold;

color:#087f3d;

}






/* HERO */


.hero{

margin:30px 50px;

height:420px;

position:relative;

overflow:hidden;

border-radius:15px;

}



.hero img{

width:100%;

height:100%;

object-fit:cover;

}



.hero-cover{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:50px;

color:white;

background:linear-gradient(
transparent,
rgba(0,80,40,.85)
);

}



.hero-cover h2{

font-size:45px;

color:#ffd900;

}



.hero-cover p{

font-size:20px;

margin:15px 0;

}



button{

background:#087f3d;

color:white;

border:none;

padding:12px 25px;

border-radius:25px;

}






/* CARD */


.cards{

display:flex;

gap:25px;

padding:40px 50px;

}



.cards div{

flex:1;

background:#f3f8f3;

padding:25px;

border-radius:15px;

}



.cards h3{

color:#087f3d;

margin-bottom:10px;

}





/* SECTION */


.section{

padding:50px;

text-align:center;

}



.section h2{

color:#087f3d;

margin-bottom:20px;

}



.section img{

width:600px;

max-width:100%;

border-radius:15px;

}




/* ACTIVITY */


.activity{

display:flex;

gap:20px;

}



.activity div{

flex:1;

background:#087f3d;

color:white;

padding:25px;

border-radius:15px;

}






/* FOOTER */


footer{

background:#00552d;

color:white;

text-align:center;

padding:40px;

}


footer h2{

color:#ffd900;

}