diff --git a/css/event.css b/css/event.css
index d7843e3..ce90c93 100644
--- a/css/event.css
+++ b/css/event.css
@@ -93,7 +93,7 @@ h1,
 .h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
-  font-weight: 500;
+  /* font-weight: 500; */
   line-height: 1.2;
 }
 
diff --git a/css/style.css b/css/style.css
index d702021..a40a72f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -41,8 +41,8 @@ h6,
 .h5,
 .h6 {
   font-family: "Begum Sans", sans-serif;
-  color: #1b2733;
-  font-weight: 600;
+  /* color: #1b2733; */
+  /* font-weight: 600; */
 }
 
 p {
@@ -140,10 +140,44 @@ a:hover {
 }
 
 .overview-card {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
   margin-bottom: 30px;
   padding: 25px 30px;
-  border-radius: 5px;
-  border-color: #fb923c;
+  border: 0.75px solid #fb793d;
+}
+
+.overview-card::before {
+  content: "";
+  position: absolute;
+  top: var(--y);
+  left: var(--x);
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: #fb923c;
+  transition: width 0.5s, height 0.5s;
+  z-index: 1;
+}
+
+.overview-card:hover::before {
+  z-index: -1;
+  width: 950px;
+  height: 950px;
+}
+/* 
+.overview-card:hover {
+  filter: invert(6%) sepia(13%) saturate(2513%) hue-rotate(201deg)
+    brightness(93%) contrast(103%);
+} */
+
+.overview-card:hover {
+  z-index: 2;
+  font-weight: bold;
+  color: #fff;
+  border: 2px solid #637282;
 }
 
 @media (min-width: 576px) {
@@ -478,7 +512,6 @@ ul {
 }
 
 .card {
-  border: 0.5px solid #fb793d;
   box-shadow: 1.5px 1.5px 2px #ee5b41c4;
   transition: 0.3s all;
   border-radius: 3px;
@@ -651,7 +684,7 @@ h6 {
   font-family: "Begum Sans", sans-serif;
   margin-top: 0;
   margin-bottom: 0.5rem;
-  font-weight: 500;
+  /* font-weight: 500; */
   line-height: 2.2;
 }
 *,
diff --git a/index.html b/index.html
index bf630f2..723a802 100644
--- a/index.html
+++ b/index.html
@@ -684,6 +684,7 @@ <h4 class="title">Made with ❤️ By</h4>
   <script src="./js/particleJs/particle.min.js"></script>
   <script src="./js/particleJs/app.js"></script>
   <script src="./js/accordian.js"></script>
+  <script src="./js/card.js"></script>
 
 </body>
 
diff --git a/js/card.js b/js/card.js
new file mode 100644
index 0000000..3f8e4ed
--- /dev/null
+++ b/js/card.js
@@ -0,0 +1,13 @@
+// const card = document.querySelectorAll(".overview-card");
+
+// for (let i = 0; i < card.length; i++) {
+
+//     card[i].onmouseover = function (e) {
+
+//         const x = e.pageX - card[i].offsetLeft;
+//         const y = e.pageY - card[i].offsetTop;
+
+//         card[i].style.setProperty("--x", x + "px");
+//         card[i].style.setProperty("--y", y + "px");
+//     };
+// }