body{

margin:0;

font-family:Arial,Helvetica,sans-serif;

background:#f7f7f7;

color:#333;

}

header{

background:#111;

color:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

position:sticky;

top:0;

}

nav a{

color:white;

text-decoration:none;

margin-left:20px;

}

.hero{

background:url("images/panel.jpg");

background-size:cover;

background-position:center;

height:600px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:white;

text-shadow:2px 2px 10px black;

}

.hero h1{

font-size:60px;

margin:0;

}

.hero p{

font-size:28px;

}

.button{

background:#ffb400;

padding:15px 35px;

color:black;

font-weight:bold;

text-decoration:none;

border-radius:5px;

margin-top:20px;

}

section{

padding:70px;

max-width:1200px;

margin:auto;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.card{

background:white;

border-radius:10px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.card img{

width:100%;

height:220px;

object-fit:cover;

}

.card h3{

padding:20px 20px 0;

}

.card p{

padding:20px;

}

ul{

line-height:2;

font-size:20px;

}

footer{

background:#111;

color:white;

text-align:center;

padding:25px;

}

@media(max-width:700px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:20px;

}

header{

flex-direction:column;

}

nav{

margin-top:15px;

}

}