diff --git a/index.css b/index.css
index a097e474..0230ee39 100644
--- a/index.css
+++ b/index.css
@@ -36,7 +36,7 @@
   display: flex;
   align-items: center;
   padding: 0.5rem 1rem;
-
+}
 /* .page-header {
   margin-bottom: 1rem;
 } */
diff --git a/index.html b/index.html
index b51d4390..3adfa669 100644
--- a/index.html
+++ b/index.html
@@ -267,8 +267,29 @@
     opacity: 0.8;
 }
 
+.card1:hover .card-inner {
+        transform: rotateY(180deg);
+    }
 
+    .card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        transform-style: preserve-3d;
+        transition: transform 0.8s;
+    }
+
+    .card-front, .card-back {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        backface-visibility: hidden;
+    }
 
+    .card-back {
+        transform: rotateY(180deg);
+    }
   </style>
   <!-- Swiper CSS -->
 <link rel="stylesheet" href="swiper-bundle.min.css">
@@ -459,30 +480,43 @@ <h4 class="card-title">
 <section id="products" class="products">
   <h2 class="title">Products</h2>
   <div class="container" style="display: flex; flex-wrap: wrap; ">
-      <div class="card text-center card1" style="flex: 1 1 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px;">
-          <img src="assets/img/spinach.jpg" class="card-img-top" alt="Spinach" style="width: 100%; height: 70%; object-fit: cover;">
-          <div class="card-body" style="height: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
-              <h5 class="card-title" style="padding-top: 50px;">Spinach</h5>
-              <p class="card-text">Healthy and fresh spinach leaves.</p>
-              <a href="#" class="btn btn-primary" id="toast-btn"style="margin-bottom: 50px;">Add to Cart</a>
-          </div>
-      </div>
-      <div class="card text-center card1" style="flex: 1 1 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px;">
-          <img src="assets/img/tomato.jpg" class="card-img-top" alt="Tomato" style="width: 100%; height: 70%; object-fit: cover;">
-          <div class="card-body" style="height: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
-              <h5 class="card-title" style="padding-top: 67px;">Tomato</h5>
-              <p class="card-text">Fresh organic tomatoes directly from our farms.</p>
-              <a href="#" class="btn btn-primary" id="toast-btn"style="margin-bottom: 50px;">Add to Cart</a>
-          </div>
-      </div>
-      <div class="card text-center card1" style=" max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px;">
-          <img src="https://t3.ftcdn.net/jpg/04/68/10/86/360_F_468108626_wpL1hcDkE4g12mPPnbVxx8rCnWpHYKmV.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 70%; object-fit: cover;">
-          <div class="card-body" style="height: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
-              <h5 class="card-title" style="padding-top: 50px;">Broccoli</h5>
-              <p class="card-text">Green and fresh broccoli heads.</p>
-              <a href="#" class="btn btn-primary" id="toast-btn" style="margin-bottom: 50px;">Add to Cart</a>
-          </div>
-      </div>
+      
+      <div class="card text-center card1" style="max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
+        <div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
+            <div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
+                <img src="assets/img/spinach.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover;">
+            </div>
+            <div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
+                <h5 class="card-title">Spinach</h5>
+                <p class="card-text">Healthy and fresh spinach leaves.</p>
+                <a href="#" class="btn btn-primary" id="toast-btn">Add to Cart</a>
+            </div>
+        </div>
+    </div>
+      <div class="card text-center card1" style="max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
+        <div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
+            <div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
+                <img src="assets/img/tomato.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover;">
+            </div>
+            <div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
+                <h5 class="card-title">Tomato</h5>
+                <p class="card-text">Fresh organic tomatoes directly from our farms.</p>
+                <a href="#" class="btn btn-primary" id="toast-btn">Add to Cart</a>
+            </div>
+        </div>
+    </div>
+      <div class="card text-center card1" style="max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
+        <div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
+            <div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
+                <img src="https://t3.ftcdn.net/jpg/04/68/10/86/360_F_468108626_wpL1hcDkE4g12mPPnbVxx8rCnWpHYKmV.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover;">
+            </div>
+            <div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
+                <h5 class="card-title">Broccoli</h5>
+                <p class="card-text">Green and fresh broccoli heads.</p>
+                <a href="#" class="btn btn-primary" id="toast-btn">Add to Cart</a>
+            </div>
+        </div>
+    </div>
   </div>
 </section>