*{box-sizing:border-box}
body{margin:0;font-family:Arial;background:#f4f6f9;color:#111}

/* HEADER */
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background:#fff;
position:fixed;
width:100%;
top:0;
z-index:10;
}
.logo{height:45px}
nav a{margin:0 12px;text-decoration:none;color:#111;font-weight:600}

/* HERO */
.hero{
height:100vh;
background:url('assets/banner.png') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
position:relative;
margin-top:70px;
}

/* TRANSLUCENT PANEL */
.hero-overlay{
background:rgba(0,0,0,0.55);
padding:40px;
border-radius:15px;
text-align:center;
max-width:700px;
color:#fff;
backdrop-filter: blur(6px);
}

.hero-overlay h1{
font-size:56px;
margin:0;
}

.hero-overlay p{
font-size:18px;
margin:15px 0 25px;
line-height:1.5;
}

.btn{
background:#0aa0d6;
color:#fff;
padding:12px 25px;
border-radius:25px;
text-decoration:none;
display:inline-block;
}

/* SECTIONS */
.section{padding:70px 10%;background:#fff}
.section.dark{background:#0aa0d6;color:#fff}

form input,form textarea{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ddd;
}

button{
background:#111;
color:#fff;
padding:12px 20px;
border:none;
cursor:pointer;
}

/* FOOTER */
footer{text-align:center;padding:20px;background:#111;color:#fff}

/* RESPONSIVE */
@media(max-width:768px){
.hero-overlay h1{font-size:36px}
.hero-overlay{margin:20px;padding:25px}
nav{display:none}
header{justify-content:center}
}