:root{
 --blue:#22b6e3;
 --dark:#1f2a30;
 --light:#f4f7f9;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
 font-family:Arial,Helvetica,sans-serif;
 background:var(--light);
 color:#1f1f1f;
 line-height:1.7;
}

header{
 position:fixed;
 top:0;
 width:100%;
 background:#ffffff;
 box-shadow:0 2px 12px rgba(0,0,0,.08);
 z-index:1000;
}

.navbar{
 max-width:1300px;
 margin:auto;
 padding:18px 24px;
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.logo img{
 height:64px;
}

nav ul{
 list-style:none;
 display:flex;
 gap:22px;
}

nav ul li a{
 font-size:14px;
 text-transform:uppercase;
 letter-spacing:1px;
 color:#1f2a30;
}

nav ul li a:hover{
 color:var(--blue);
}

.hero{
 margin-top:120px;
 padding:120px 20px;
 background:#1f2a30;
 color:#ffffff;
 text-align:center;
}

.hero h1{
 font-size:48px;
 text-transform:uppercase;
 letter-spacing:2px;
}

.hero p{
 margin-top:12px;
 font-size:20px;
 color:var(--blue);
}

.section{
 max-width:1200px;
 margin:auto;
 padding:80px 20px;
}

.section h2{
 color:#1f2a30;
 font-size:34px;
 margin-bottom:18px;
}

.section ul{
 margin-left:20px;
}

.section li{
 margin-bottom:10px;
}

footer{
 background:#1f2a30;
 color:#ffffff;
 text-align:center;
 padding:40px;
}

.contact-form{
 max-width:650px;
}

.contact-form input,
.contact-form textarea{
 width:100%;
 padding:14px;
 margin-bottom:15px;
 border:1px solid #ccc;
}

.contact-form button{
 background:var(--blue);
 border:none;
 padding:14px 40px;
 text-transform:uppercase;
 cursor:pointer;
}