/* Add custom CSS styles below */ 
:root{
  --primary:#2f6b4f;
  --primary-hover:#285a43;
  --bg:#f6f7f4;
  --soft:#eef3ee;
  --border:#e6efe6;
  --text:#111827;
}

body{
  background:var(--bg);
  font-family:"Cairo","Tajawal",sans-serif;
  color:var(--text);
}

/* Navbar */
header{
  background:#fff;
  border-bottom:1px solid var(--border);
}

/* Buttons */
button, .btn{
  background:var(--primary);
  color:#fff;
  border-radius:14px;
  padding:10px 18px;
  border:none;
}
button:hover{
  background:var(--primary-hover);
}

/* Cards */
.product-card, .card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:15px;
  box-shadow:0 10px 20px rgba(0,0,0,0.05);
  transition:0.2s;
}
.product-card:hover{
  transform:translateY(-3px);
}

/* Sections */
.section{
  padding:60px 20px;
}

.soft{
  background:var(--soft);
}

/* Hero */
.hero{
  text-align:center;
  padding:80px 20px;
}

.hero h1{
  font-size:36px;
  margin-bottom:10px;
}

.hero p{
  color:#666;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

/* Footer */
footer{
  border-top:1px solid var(--border);
  padding:30px;
  text-align:center;
  background:#fff;
}