diff --git a/css/style.css b/css/style.css
index 9a3ad1e..3981297 100644
--- a/css/style.css
+++ b/css/style.css
@@ -669,6 +669,31 @@
 
     /* ===== Hero Section ===== */
     .hero {
+  background: rgb(255, 228, 205);
+  padding: 5rem 1rem 6rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4.5rem;
+  flex-wrap: wrap;
+  height: 90vh;
+  position: relative; /* added */
+  overflow: hidden; /* ensure overlay fits */
+}
+/* dark overlay to enhance text readability */
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+/* ensure hero content appears above overlay */
+.hero-content, .hero-content * {
+  position: relative;
+  z-index: 2;
+  color: #ffffff; /* white text for visibility */
+}
       background: rgb(255, 228, 205);
       padding: 5rem 1rem 6rem;
       display: flex;
@@ -774,13 +799,24 @@
       transform: translateY(-8px);
       box-shadow: 0 15px 35px rgb(0 0 0 / 0.2);
     }
-    .add-btn{
-      background-color: green;
-      padding: 3px 8px;
-      border-radius: 15px;
-      color: white;
-      border: none;
+    /* ----- Dark Mode Overrides ----- */
+    .dark .card {
+      background: #2c2c2c;
+      color: #e0e0e0;
+    }
+    .dark .card h3,
+    .dark .card p.description,
+    .dark .card p.price {
+      color: #e0e0e0;
     }
+.add-btn {
+  background-color: green;
+  padding: 3px 8px;
+  border-radius: 15px;
+  color: white;
+  border: none;
+}
+
     .card img {
       border-radius: 15px;
       width: 250px;
@@ -805,7 +841,7 @@
     }
     .card p.description {
       font-size: 0.9rem;
-      color: #5d4037;
+      color: #3e2723;
       margin-bottom: 1.3rem;
       text-align: center;
       user-select: text;