body {
margin:0;
font-family:Verdana;
background:#a7d857;
}

.header {
background:#2c3e50;
color:white;
padding:20px;
text-align:center;
}

#search{
padding:10px;
margin-top:10px;
border-radius:6px;
border:none;
}

.layout{
display:flex;
}

.menu{
width:220px;
background:#34495e;
min-height:100vh;
}

.menu a{
display:block;
padding:14px;
color:white;
text-decoration:none;
transition:0.3s;
}

.menu a:hover{
background:#2ecc71;
padding-left:20px;
}

.main{
flex:1;
padding:20px;
}

.card{
background:white;
padding:20px;
margin:15px 0;
border-radius:12px;
box-shadow:0 6px 15px rgba(0,0,0,0.15);
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

.hero{
width:100%;
border-radius:12px;
margin-top:20px;
}

.footer{
background:#2c3e50;
color:white;
text-align:center;
padding:10px;
}

/* Animations */
.fade-in{
animation:fadeIn 1s ease-in;
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

/* Mobile */
@media(max-width:700px){
.layout{
flex-direction:column;
}

@media(max-width:700px){
.page-image {
max-height: 250px;
}
}

.menu{
width:100%;
min-height:auto;
}
}

.page-image {
width: 100%;
height: auto;
max-height: 450px;
object-fit: cover;
border-radius: 12px;
display: block;
margin: 0 auto;
}