@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;800&display=swap');

:root {
  --green: #16A34A;
  --green-dark: #14532D;
  --bg: #0B0F0C;
  --card: #111315;
  --text: #F9FAFB;
  --subtext: #9CA3AF;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Cairo', sans-serif; }

body { background:var(--bg); color:var(--text); line-height:1.7; }

header {
  display:flex; justify-content:space-between; align-items:center; padding:20px 10%;
  position:sticky; top:0; background:rgba(11,15,12,0.7); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,0.05);
}
.logo { font-size:20px; font-weight:800; color:var(--green); }
nav a { margin:0 12px; color:var(--subtext); text-decoration:none; font-size:14px; transition:.3s; }
nav a:hover { color:var(--text); }

.btn { background:var(--green); padding:10px 18px; border-radius:8px; color:white; text-decoration:none; font-size:14px; transition:.3s; }
.btn:hover { background:var(--green-dark); transform:translateY(-2px); }

section { padding:80px 10%; }
.title { text-align:center; font-size:26px; margin-bottom:40px; }

.hero {
  text-align:center; padding-top:120px;
  background-image:url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1950&q=80');
  background-size:cover; background-position:center; position:relative; border-radius:12px;
}
.hero::before {
  content:""; position:absolute; inset:0; background:rgba(0,0,0,0.5); border-radius:12px;
}
.hero h1, .hero p, .hero .btn { position:relative; color:#fff; z-index:1; }

.hero h1 { font-size:42px; margin-bottom:15px; animation:fadeInUp 1s ease forwards; }
.hero p { color:var(--subtext); margin-bottom:25px; animation:fadeInUp 1s ease 0.3s forwards; }
.hero .btn { animation:fadeInUp 1s ease 0.6s forwards; }

@keyframes fadeInUp {
  0% { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.card { background:var(--card); padding:25px; border-radius:12px; transition:.4s; border:1px solid transparent; overflow:hidden; text-align:center; }
.card:hover { border:1px solid rgba(22,163,74,0.3); transform:translateY(-6px); box-shadow:0 10px 20px rgba(0,255,0,0.1);}
.card img { width:80px; margin-bottom:15px; transition:.4s; }
.card:hover img { transform:scale(1.15); }

.card.highlight { border:1px solid var(--green); }

footer { text-align:center; padding:30px; background:#000; margin-top:50px; color:var(--subtext); }

html { scroll-behavior:smooth; }
.language-switcher {
  display: inline-block;
  margin-left: 15px;
}

.lang-btn {
  text-decoration: none;
  color: #9CA3AF;
  font-size: 14px;
  margin: 0 5px;
  padding: 5px 10px;
  border-radius: 6px;
  transition: 0.3s;
  border: 1px solid transparent;
}

.lang-btn:hover {
  color: #fff;
  border: 1px solid #16A34A;
}

.lang-btn.active {
  color: #fff;
  background: #16A34A;
  border: 1px solid #16A34A;
}