body{
margin:0;
font-family:Segoe UI, Arial, sans-serif;
background:#f5f7ff;
color:#333;
}
/* HERO */
.hero{
height:340px;
overflow:hidden;
position:relative;
}
.hero img{
width:100%;
height:340px;
object-fit:cover;
}
/* NAVIGATION */
.nav{
background:#e7fbb0;text-align:center;
box-shadow:0 5px 12px rgba(0,9,0,.06);
}
.nav a{
margin:0 14px;
text-decoration:none;
font-weight:500;
color:#444;
transition:.3s;
}
.nav a:hover{
color:#8ff9fa;
}
/* MAIN */
.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}
h1{
font-size:36px;
margin-bottom:10px;
}
h2{
margin-bottom:20px;
}
/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
}
/* CARD */
.card{
background:white;
padding:28px;
border-radius:14px;
box-shadow:0 6px 22px rgba(0,0,0,.08);
text-decoration:none;
color:#333;
font-weight:600;
transition:transform .5s, box-shadow .5s;
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 28px rgba(0,0,0,.15);
}
/* FORM */
.form{
background:white;
padding:30px;
border-radius:12px;
border:1px solid #eee;
margin-top:40px;
box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.form input,
.form textarea{
width:100%;
padding:12px;
margin-top:6px;
margin-bottom:16px;
border-radius:8px;
border:1px solid #ccc;
font-size:15px;
}
/* BUTTON */
button{
background:#6a4cff;
color:white;
border:none;
padding:13px 22px;
border-radius:8px;
cursor:pointer;
font-weight:600;
transition:.2s;
}
button:hover{
background:#5238d9;
}
/* FOOTER */
footer{
margin-top:80px;
padding:30px;
text-align:center;color:#777;
font-size:14px;
}
.lang-flags{
position:absolute;
top:15px;
right:20px;
display:flex;
gap:10px;
}

.lang-flags img{
width:52px;
height:52px;
border-radius:50%;
border:2px solid white;
object-fit:cover;
cursor:pointer;
transition:.2s;
}

.lang-flags img:hover{
transform:scale(1.1);
}