card css flip effect

src/app/globals.css

@@ -29,14 +29,15 @@ body {
   }
 }
 
-/* Add card flip animation */
+/* Update the card flip styles */
 .card-container {
-  perspective: 1000px;
+  perspective: 1500px;
 }
 
 .card {
   transition: transform 0.8s;
   transform-style: preserve-3d;
+  cursor: pointer;
 }
 
 .card:hover {
@@ -45,12 +46,32 @@ body {
 
 .card-front,
 .card-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
+              0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 .card-back {
   transform: rotateY(180deg);
+}
+
+/* Add a subtle hover effect */
+.card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0)
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.card:hover::before {
+  opacity: 1;
 }