*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Inter,Arial,sans-serif;
background:#f5f7f8;
color:#333;
line-height:1.8;
}
.hero{
background:linear-gradient(135deg,#007700,#00a000);
color:white;
padding:80px 20px;
text-align:center;
}
.hero h1{
font-size:48px;
margin-bottom:10px;
}
.hero p{
font-size:20px;
opacity:.95;
}
.wrapper{
max-width:1200px;
margin:40px auto;
padding:0 20px;
display:flex;
gap:30px;
}
.sidebar{
width:280px;
background:white;
padding:24px;
border-radius:16px;
position:sticky;
top:20px;
height:fit-content;
box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.sidebar h3{
margin-bottom:15px;
color:#007700;
}
.sidebar a{
display:block;
padding:10px 0;
text-decoration:none;
color:#444;
}
.sidebar a:hover{
color:#007700;
}
.content{
flex:1;
}
section{
background:white;
padding:30px;
margin-bottom:20px;
border-radius:16px;
box-shadow:0 4px 20px rgba(0,0,0,.05);
}
h2{
color:#007700;
margin-bottom:12px;
}
@media(max-width:900px){
.wrapper{
flex-direction:column;
}
.sidebar{
width:100%;
position:relative;
top:auto;
}
.hero h1{
font-size:36px;
}
}