/* Basic Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
body { background-color: #e8f5e9; color: #166122; line-height: 1.6; }

/* Hero */
.hero {
  background: url('images/hero.jpg') center/cover no-repeat;
  height: 80vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;
  position:relative;
}
.hero::after {
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background-color: rgba(22,97,34,0.5);
}
.hero-text { position: relative; z-index: 1; }
.hero h1 { font-size: 3rem; margin-bottom: 10px; }
.hero p { font-size: 1.2rem; margin-bottom: 20px; }
.hero .btn {
  background-color: #0353f5; color:white; padding: 10px 20px; text-decoration:none;
  border-radius:10px;
  transition:0.3s;
}
.hero .btn:hover { background-color:#023ea5; }

/* Product Grid */
.product-section { padding:50px 20px; text-align:center; }
.product-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:20px;
  margin-top:30px;
}
.product-card {
  background:white; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.1);
  padding:20px; transition:transform 0.3s;
}
.product-card:hover { transform: translateY(-5px); }
.product-card img { max-width:100%; border-radius:10px; }
.product-card h3 { margin-top:10px; }

/* About Section */
.about { padding:50px 20px; text-align:center; background:#f1f8f1; }
.about h2 { margin-bottom:20px; font-size:2rem; }

/* Newsletter */
.newsletter { padding:50px 20px; text-align:center; }
.newsletter form { margin-top:20px; }
.newsletter input[type="email"] {
  padding:10px; width:250px; border-radius:5px; border:1px solid #166122; margin-right:10px;
}
.newsletter button {
  padding:10px 20px; border:none; background:#0353f5; color:white; border-radius:5px;
  cursor:pointer; transition:0.3s;
}
.newsletter button:hover { background:#023ea5; }

/* Footer */
footer { background:#166122; color:white; padding:30px 20px; text-align:center; }
footer .footer-links a { color:white; margin:0 10px; text-decoration:none; }
footer .footer-links a:hover { text-decoration:underline; }
footer .social-icons a { color:white; margin:0 5px; text-decoration:none; }