body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#3f6b5a;
color:#eef7f2;
}

.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

.topbar{
background:#345c4d;
border-bottom:1px solid #5f8f7a;
}

.navwrap{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:110px;
transform:rotate(90deg);
}

nav a{
color:#ecfff5;
margin-left:30px;
text-decoration:none;
font-weight:600;
font-size:17px;
}

nav a:hover{
opacity:0.75;
}

.hero{
background:url('../images/hero.jpg') center/cover no-repeat;
height:420px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero-inner{
background:rgba(0,0,0,0.28);
padding:48px 70px;
border-radius:12px;
}

.hero h1{
font-size:36px;
margin-bottom:12px;
}

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:34px;
margin-top:30px;
}

.card{
background:#4f8471;
padding:30px;
border-radius:12px;
}

footer{
background:#345c4d;
padding:35px;
margin-top:40px;
}

.footergrid{
display:flex;
justify-content:space-between;
}

.dj-button {
    display:inline-block;
    margin-left:15px;
    padding:4px 7px;
    background:#f28c28;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-weight:bold;
    font-size:0.9em;
}

.dj-button:hover {
    background:#ff9f3f;
    transform:scale(1.05);
    transition:0.2s;
}