Merge pull request #644 from Son7c/main

Hovering effect added over Itineraries

style.css

@@ -1010,7 +1010,7 @@ body.dark-mode {
   justify-content: space-around;
   gap: 20px;
   color: #003366;
-  margin-top: 20px;
+  margin-top: 60px;
 }
 
 .itinerary {
@@ -1035,6 +1035,8 @@ body.dark-mode {
       padding: 50px;
       background-color: #f4f4f4;
       text-align: center;
+      height: 60vh;
+      padding: 20px;
     }
 
     .itineraries-section h2 {
@@ -1053,14 +1055,20 @@ body.dark-mode {
     }
 
     .itinerary {
-      background: white;
+      background: lightgrey;
       padding: 20px;
       border-radius: 8px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       flex: 1 1 calc(33% - 40px);
       max-width: calc(33% - 40px);
       text-align: center;
-      transition: transform 0.3s, box-shadow 0.3s; /* Added transition */
+      transition: all 0.4s ease, box-shadow 0.3s; /* Added transition */
+      height: 32vh;
+    }
+
+    .itinerary:hover{
+      transform: scale(0.95);
+      background-color: white;
     }
 
     .itinerary h3 {
@@ -1072,7 +1080,7 @@ body.dark-mode {
     .itinerary p {
       font-size: 1.5rem;
       text-align: center;
-      margin-bottom: 15px;
+      margin-bottom: 30px;
       color: #003366;
     }
 
@@ -1091,11 +1099,6 @@ body.dark-mode {
       background-color: #0056b3;
     }
 
-    /* Hover effect for itinerary cards */
-    .itinerary:hover {
-      transform: scale(1.05); /* Scale up the card */
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Increase shadow */
-    }
 
     .cab-booking-section {
       background-color:rgba(0, 0, 0, 0.2); /* Dark translucent background */