*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,sans-serif;
background:#f4f7fb;
color:#222;
line-height:1.7;
}
.container{
width:92%;
max-width:1200px;
margin:auto;
}
header{
background:#0c2035;
padding:22px 0;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.nav{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}
.logo{
color:white;
font-size:1.6rem;
font-weight:700;
}
nav{
display:flex;
gap:18px;
flex-wrap:wrap;
}
nav a{
color:white;
text-decoration:none;
font-weight:600;
}
.hero,.banner{
display:flex;
align-items:center;
position:relative;
background-size:cover;
background-position:center;
}
.hero{
height:88vh;
background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('https://images.unsplash.com/photo-1585704032915-c3400ca199e7?q=80&w=1600&auto=format&fit=crop');
}
.banner{
height:50vh;
}
.banner::before{
content:'';
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
}
.hero-content,.banner-content{
position:relative;
z-index:2;
color:white;
max-width:760px;
}
.hero h1{
font-size:4rem;
line-height:1.1;
margin-bottom:24px;
}
.banner h1{
font-size:3rem;
margin-bottom:16px;
}
.hero p{
font-size:1.3rem;
margin-bottom:34px;
}
.buttons{
display:flex;
gap:16px;
flex-wrap:wrap;
}
.btn{
padding:16px 30px;
background:#1e8ef5;
color:white;
text-decoration:none;
border-radius:8px;
font-weight:700;
}
.btn.secondary{
background:transparent;
border:2px solid white;
}
.section{
padding:90px 0;
}
.center{text-align:center}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;
}
.card,.review-card,.content-box{
background:white;
padding:35px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.card h3{
margin-bottom:15px;
color:#0c2035;
}
.dark{
background:#10263f;
color:white;
}
.dark ul{
padding-left:22px;
margin-top:25px;
}
.review-section{
background:#eef5fc;
}
.stars{
color:#f5b400;
font-size:1.2rem;
margin-bottom:12px;
}
.quote{
font-style:italic;
margin-bottom:18px;
}
.name{
font-weight:bold;
color:#0c2035;
}
.contact-details p{
margin-bottom:12px;
}
form{
display:flex;
flex-direction:column;
gap:18px;
margin-top:30px;
}
input,textarea{
padding:16px;
border:1px solid #ccc;
border-radius:8px;
font-size:1rem;
}
textarea{min-height:160px}
button{
background:#1e8ef5;
color:white;
padding:16px;
border:none;
border-radius:8px;
font-weight:700;
cursor:pointer;
}
.cta{
background:#1e8ef5;
color:white;
padding:70px 0;
text-align:center;
}
footer{
background:#081521;
color:#d7dce2;
padding:40px 0;
text-align:center;
}
@media(max-width:768px){
.hero h1{font-size:2.5rem}
.banner h1{font-size:2.2rem}
}