diff --git a/explore.css b/explore.css
index e97aeafd..646224f1 100644
--- a/explore.css
+++ b/explore.css
@@ -1,119 +1,123 @@
 * {
-    box-sizing: border-box;
-    /* ADDED BORDER RADIUS IN IMAGE SECTION */
-    border-radius: 20px;
-  }
-  
-  .outer-box {
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    overflow: hidden;
-    margin: 0;
-    
-  }
+  box-sizing: border-box;
+  /* ADDED BORDER RADIUS IN IMAGE SECTION */
+  border-radius: 20px;
+}
+
+.outer-box {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+.containers {
+  display: flex;
+  width: 90vw;
   
+}
+
+.card {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 70vh;
+  border-radius: 35px 35px;
+  /* border-radius: 20px; */
+  color: #fff;
+  cursor: pointer;
+  flex: 0.5;
+  margin: 10px;
+  position: relative;
+  transition: flex 0.7s ease-in;
+  display: flex;
+  flex-direction: column; 
+}
+
+/* .card:hover {
+    flex: 3;
+}
+
+.card:hover h3, .card:hover p {
+    opacity: 1;
+    transition: opacity 0.5s ease-in 0.8s;
+}
+
+.card:hover .info {
+    visibility: visible;
+} */
+
+.info {
+  position: absolute;
+  bottom: 20px;
+  left: 25%;
+  visibility: hidden;
+  background: rgba(221, 206, 216, 0.462);
+  backdrop-filter:blur(0px);
+  width: 500px;
+  border-radius: 15px 15px;
+}
+
+.card h3 {
+  font-size: 24px;
+  opacity: 0;
+  color: black !important;
+  font-family:Georgia, 'Times New Roman', Times, serif ;
+  font-weight: bolder;
+  -webkit-text-stroke:1px navy;
+}
+
+.card p {
+  font-size: 16px;
+  opacity: 0;
+  color:black !important;
+  margin-top: 10px;
+  font-weight: 500;
+  /* -webkit-text-stroke:0.5px beige; */
+}
+
+.card.active {
+  flex: 3;
+}
+
+.card.active h3, .card.active p {
+  opacity: 1;
+  transition: opacity 0.5s ease-in 0.8s;
+}
+
+.card.active .info {
+  visibility: visible;
+}
+
+@media (max-width: 1300px) {
   .containers {
-    display: flex;
-    width: 90vw;
-    
-  }
-  
-  .card {
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 70vh;
-    border-radius: 35px 35px;
-    /* border-radius: 20px; */
-    color: #fff;
-    cursor: pointer;
-    flex: 0.5;
-    margin: 10px;
-    position: relative;
-    transition: flex 0.7s ease-in;
     display: flex;
     flex-direction: column;
+    height: 100vh;
   }
-  
-  .info {
-    position: absolute;
-    bottom: 20px;
-    left: 25%;
-    visibility: hidden;
-    background: rgba(221, 206, 216, 0.462);
-    backdrop-filter:blur(0px);
-    width: 500px;
-    border-radius: 15px 15px;
+  .info{
+    left: 10%;
   }
-  
   .card h3 {
-    font-size: 24px;
-    opacity: 0;
-    color: black !important;
-    font-family:Georgia, 'Times New Roman', Times, serif ;
-    font-weight: bolder;
-    -webkit-text-stroke:1px navy;
-  }
-  
-  .card p {
     font-size: 16px;
-    opacity: 0;
-    color:black !important;
-    margin-top: 10px;
-    font-weight: 500;
-    /* -webkit-text-stroke:0.5px beige; */
   }
-  
-  .card.active {
-    flex: 3;
-  }
-  
-  .card.active h3 {
-    opacity: 1;
-    transition: opacity 0.5s ease-in 0.8s;
-  }
-  
-  .card.active p {
-    opacity: 1;
-    transition: opacity 0.5s ease-in 0.8s;
-  }
-  
-  .card.active .info {
-    visibility: visible;
-  }
-  .hedd{
-    font-size: 25px;
-  }
-  @media (max-width: 1300px) {
-    .containers {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-    }
-    .info{
-      left: 10%;
-    }
-    .card h3 {
-      font-size: 16px;
-    }
-  
-    .card p {
-      font-size: 12px;
-    }
+
+  .card p {
+    font-size: 12px;
   }
-  @media (max-width: 620px){
-    .info{
-      width: 200px;
-      left: 20px;
-    }
+}
+@media (max-width: 620px){
+  .info{
+    width: 200px;
+    left: 20px;
   }
-  @media (max-width: 280px){
-    .info{
-      width: 100px;
-      left: 0px;
-    }
+}
+@media (max-width: 280px){
+  .info{
+    width: 100px;
+    left: 0px;
   }
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/explore.js b/explore.js
index 09512a4c..97a2d9db 100644
--- a/explore.js
+++ b/explore.js
@@ -1,14 +1,28 @@
+let lastClickedCard = document.querySelector(".active");
+
+// Function to handle click events
+function handleClick(card) {
+  // Remove active classes from all cards
+  const panels = document.querySelectorAll(".card");
+  panels.forEach(panel => panel.classList.remove("active"));
+
+  // Add active class to the clicked card
+  card.classList.add("active");
+  lastClickedCard = card; // Update the reference to the last clicked card
+}
+
+// Attach click event listener to all cards
 const panels = document.querySelectorAll(".card");
+panels.forEach(panel => panel.addEventListener("click", () => handleClick(panel)));
 
-panels.forEach((card) => {
-  card.addEventListener("click", () => {
-    removeActiveClasses(); // Add fuctions to remove active class first
-    card.classList.add("active");
+// Adjust the mouseover event listener
+panels.forEach(panel => {
+  panel.addEventListener('mouseover', () => {
+      lastClickedCard.classList.remove("active");
+      panel.classList.add('active');
   });
+  panel.addEventListener('mouseout', () => {
+    panel.classList.remove('active');
+    lastClickedCard.classList.add("active");
+});
 });
-
-function removeActiveClasses() {
-  panels.forEach((card) => {
-    card.classList.remove("active");
-  });
-}
diff --git a/index.html b/index.html
index 32a27ab9..bd2135fa 100644
--- a/index.html
+++ b/index.html
@@ -657,61 +657,59 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
           <span></span>
         </div>
       </div> -->
+
       <div class="outer-box">
         <div class="containers">
-
-
-          <div class="card" style="
-        background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-          url('./img/paris.jpg')
+              
+            <div class="card active" style="
+              background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+                url('./img/paris.jpg')
             ">
             <div class="info">
-
+  
               <p>
                 ||Eiffel Tower||
               </p>
               <h3>PARIS</h3>
             </div>
           </div>
-
-          <div class="card" style="
-      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-        url('./img/london.jpg')
-    ">
-
-            <div class="info">
-
-              <p>||Giant Wheel||</p>
-              <h3>LONDON</h3>
-            </div>
-          </div>
-
-
-          <div class="card" style="
+  
+      <div class="card" style="
+        background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+          url('./img/london.jpg')
+      ">
+        <div class="info">
+          
+          <p>||Giant Wheel||</p>
+          <h3>LONDON</h3>
+        </div>
+      </div>
+  
+      <div class="card" style="
         background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
           url('./img/goa.jpg')
       ">
-            <div class="info">
-
-              <p>||Goa Beach||</p>
-              <h3>GOA</h3>
-            </div>
-          </div>
-
-          <div class="card" style="
+        <div class="info">
+          
+          <p>||Goa Beach||</p>
+          <h3>GOA</h3>
+        </div>
+      </div>
+  
+      <div class="card" style="
         background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
           url('./img/maldives.jpg')
       ">
-            <div class="info">
-              <p>||Male Beach||</p>
-              <h3>MALDIVES</h3>
-            </div>
-          </div>
-
+        <div class="info">
+         
+          <p>||Male Beach||</p>
+          <h3>MALDIVES</h3>
         </div>
       </div>
-
-
+  
+    </div>
+  </div>
+  
       <script src="explore.js"></script>
     </section>
 
diff --git a/styles.css b/styles.css
index ff951a85..d34ca62c 100644
--- a/styles.css
+++ b/styles.css
@@ -357,7 +357,6 @@ body {
   justify-content: space-between;
   gap: 2rem;
   flex-wrap: wrap;
-  margin-bottom: 4rem;
 }
 
 .section__title {