@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root{--primary:#073b8c;--accent:#c62828;--muted:#666;--bg:#fff}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Roboto, Arial, Helvetica, sans-serif;margin:0;color:#222;background:var(--bg);line-height:1.6}
.container{max-width:1200px;margin:30px auto;padding:0 18px}
header{display:flex;align-items:center;gap:16px;padding:18px 24px;background:linear-gradient(90deg,#f8f9fb,#ffffff);box-shadow:0 3px 12px rgba(10,10,10,0.04)}
header img.logo{height:72px}
nav{margin-left:auto;display:flex;align-items:center;gap:12px}
nav a{color:var(--primary);text-decoration:none;font-weight:700;padding:8px 10px;border-radius:6px}
nav a:hover{background:#f1f6ff}
.lang-switch{font-size:14px;color:#444;opacity:0.9}
.hero{display:flex;gap:24px;align-items:center;padding:22px;background:#fbfcff;border-radius:10px;box-shadow:0 6px 20px rgba(30,40,70,0.03)}
.hero .text{flex:1}
.hero img{width:520px;max-width:48%;border-radius:8px;object-fit:cover;box-shadow:0 10px 30px rgba(20,30,60,0.06)}
h1{color:var(--primary);margin:6px 0;font-size:28px}
h2{color:var(--accent);margin:12px 0;font-size:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.card{padding:18px;border:1px solid #f0f3f8;border-radius:10px;background:#fff}
.photos{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.photos img{width:100%;max-width:32%;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.05)}
form input, form textarea{width:100%;padding:12px;margin:8px 0;border:1px solid #e6e9ef;border-radius:8px}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
footer{padding:20px;text-align:center;background:#fafafa;margin-top:30px;border-top:1px solid #eee}
.rtl{direction:rtl;text-align:right}
@media(max-width:900px){.hero{flex-direction:column}.hero img{max-width:100%}nav{display:none}}