body{
margin:0;
font-family:Arial;
line-height:1.6;
}

.container{
width:90%;
max-width:1100px;
margin:auto;
}

.header{
background:#111;
color:white;
padding:15px 0;
position:sticky;
top:0;
}

.header nav a{
color:white;
margin-left:20px;
text-decoration:none;
}

.hero{
height:90vh;
background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
url('https://images.unsplash.com/photo-1519389950473-47ba0277781c') center/cover;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero h2{
font-size:42px;
}

.btn{
background:#00bcd4;
color:white;
padding:12px 28px;
text-decoration:none;
display:inline-block;
margin-top:20px;
}

.section{
padding:70px 0;
text-align:center;
}

.alt{
background:#f4f6f8;
}

.cards{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
}

.card{
background:white;
padding:25px;
width:280px;
box-shadow:0 6px 20px rgba(0,0,0,.1);
transition:all .4s;
}

.card:hover{
transform:scale(1.08) rotate(.5deg);
}

.map iframe{
width:100%;
height:350px;
border:0;
}

footer{
background:#111;
color:white;
text-align:center;
padding:20px;
}

/* slide animation */
.slide{
opacity:0;
transform:translateY(40px);
animation:slideUp 1s forwards;
}

.delay{animation-delay:.5s}
.delay2{animation-delay:1s}

@keyframes slideUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* zoom animation */
.zoom{
animation:zoomIn 1.2s ease;
}

@keyframes zoomIn{
from{transform:scale(.7);opacity:0}
to{transform:scale(1);opacity:1}
}

/* mobile */
@media(max-width:768px){

.hero h2{
font-size:28px;
}

.cards{
flex-direction:column;
align-items:center;
}

}