body{
margin:0;
font-family:Arial,sans-serif;
background:#f4f4f2;
color:#23343d;
line-height:1.7;
}
.container{
width:min(1200px,92%);
margin:auto;
}
header{
position:fixed;
top:0;
width:100%;
background:rgba(255,255,255,.97);
padding:14px 0;
z-index:999;
backdrop-filter:blur(10px);
box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
height:58px;
}
.menu-toggle{
display:none;
font-size:30px;
cursor:pointer;
background:none;
border:none;
color:#163F5B;
}
nav{
display:flex;
gap:28px;
}
nav a{
text-decoration:none;
color:#163F5B;
font-weight:bold;
}
.hero{
min-height:100vh;
display:flex;
align-items:center;
padding-top:100px;
background:
linear-gradient(rgba(22,63,91,.65),rgba(13,93,184,.35)),
url('https://images.pexels.com/photos/230477/pexels-photo-230477.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover no-repeat;
color:white;
}
.hero h1{
font-size:72px;
line-height:.95;
max-width:820px;
margin-bottom:25px;
}
.hero p{
font-size:22px;
max-width:700px;
}
.btn{
display:inline-block;
padding:16px 34px;
background:#0D5DB8;
color:white;
text-decoration:none;
border-radius:40px;
margin-top:30px;
}
section{
padding:100px 0;
}
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.about-image{
width:100%;
border-radius:28px;
}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;
}
.card{
background:white;
padding:35px;
border-radius:24px;
}
.values{
background:#163F5B;
color:white;
}
.values .card{
background:rgba(255,255,255,.08);
}
footer{
background:#102636;
color:white;
padding:70px 0;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
}
.footer-logo{
height:54px;
margin-bottom:15px;
}
footer a{
color:white;
text-decoration:none;
display:block;
margin-bottom:10px;
}
.page-wrap{
padding:160px 0 100px;
}

@media(max-width:900px){

.menu-toggle{
display:block;
}

nav{
display:none;
flex-direction:column;
width:100%;
padding-top:15px;
}

nav.active{
display:flex;
}

.nav{
flex-wrap:wrap;
}

.hero h1{
font-size:46px;
}

.hero p{
font-size:18px;
}

.about-grid{
grid-template-columns:1fr;
}

.footer-grid{
grid-template-columns:1fr;
}
}