*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background-image:
linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)),
url("background.png");
background-size:cover;
background-position:center;
background-attachment:fixed;
color:white;
}

/* ---------- HEADER ---------- */

header{
text-align:center;
padding:60px 20px;
background:rgba(0,0,0,0.15);
}

.logo{
width:320px;
margin-bottom:20px;
}

h1{
font-size:40px;
margin-bottom:20px;
}

.intro{
max-width:800px;
margin:auto;
font-size:18px;
line-height:1.6;
}

/* ---------- SERVICES GRID ---------- */

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
padding:60px 40px;
background:rgba(0,0,0,0.25);
}

.service{
text-align:center;
}

/* images + video SAME STYLE */

.service img,
.service video{
width:100%;
max-width:340px;
height:420px;
object-fit:cover;
margin:auto;
margin-bottom:20px;
border-radius:8px;
display:block;
background:black;
}

/* optional nice hover effect */

.service img:hover,
.service video:hover{
transform:scale(1.02);
transition:0.4s;
}

/* ---------- TEXT ---------- */

.service h2{
font-size:26px;
margin-bottom:10px;
}

.about{
padding:60px 40px;
text-align:center;
background:rgba(0,0,0,0.25);
}

.about h2{
font-size:30px;
margin-bottom:20px;
}

.about p{
max-width:900px;
margin:auto;
font-size:18px;
line-height:1.7;
}

.contact{
text-align:center;
padding:60px 40px;
background:rgba(0,0,0,0.25);
}

.contact h2{
margin-bottom:20px;
}

footer{
text-align:center;
padding:30px;
background:black;
font-size:14px;
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

h1{
font-size:28px;
}

.logo{
width:220px;
}

.services{
grid-template-columns:1fr;
padding:40px 20px;
}

.service img,
.service video{
max-width:100%;
height:360px;
}

}