-
Rate your experience
+
Rate your experience
Read what others have to say about their experiences with various
destinations, hotels, flights, and activities. Share your own reviews
diff --git a/style.css b/style.css
index 8a08cc8e..304a851f 100644
--- a/style.css
+++ b/style.css
@@ -339,7 +339,9 @@ nav {
}
/**** BENEFITS SECTION ****/
-
+#benefits{
+ border: 1px solid #007bff;
+}
.benefits-head {
background: #343c44;
min-height: 30vh;
@@ -363,6 +365,16 @@ nav {
min-height: 70vh;
align-items: center;
flex-wrap: wrap;
+
+}
+.dark-mode .cards{
+ width: 90%;
+ margin: auto;
+ display: flex;
+ min-height: 70vh;
+ align-items: center;
+ flex-wrap: wrap;
+ background-color: #121212;
}
.card {
@@ -372,6 +384,16 @@ nav {
margin: 2rem 5rem;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
+ border-radius: 10px;
+}
+.dark-mode .card{
+ text-align: center;
+ flex: 1 1 25rem;
+ min-height: 45vh;
+ margin: 2rem 5rem;
+ box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1);
+ transition: all 0.2s;
+ background-color: #232222;
}
.card:hover {
@@ -388,11 +410,18 @@ nav {
.card p {
padding: 1rem;
line-height: 2;
+
+}
+
+.dark-mode .card-text{
+ color: rgb(180, 174, 174);
+
}
.card-icon {
background: #2a3c53;
padding: 2rem;
+ border-radius: 10px;
}
/**** CONTACT PAGE ****/
@@ -451,6 +480,7 @@ nav {
min-height: 100vh; /* Minimum height to fill the viewport */
padding: 20px; /* Padding around the section */
background-color: rgba(255, 255, 255, 0.738); /* Translucent background for section */
+ border: 1px solid #0056b3;
}
.booking-container {
@@ -464,6 +494,27 @@ nav {
background-color: rgba(255, 255, 255, 0.8); /* Translucent white background */
}
+/* cab-booking-section in dark-mode */
+.dark-mode .booking-container {
+ width: 100%;
+ max-width: 500px;
+ text-align: center;
+ padding: 20px;
+ border: 2px solid #007bff;
+ border-radius: 10px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ background-color: #232222;
+}
+
+.dark-mode .cab-booking-section {
+ display: flex;
+ justify-content: center; /* Center the content horizontally */
+ align-items: center; /* Center the content vertically */
+ min-height: 100vh; /* Minimum height to fill the viewport */
+ padding: 20px; /* Padding around the section */
+ background-color: #121212; /* Translucent background for section */
+}
+
h2 {
font-size: 2.5em;
font-weight: 700;
@@ -487,6 +538,16 @@ label {
font-size: 1.2em;
color: #333; /* Label color */
}
+.dark-mode label{
+ color: rgb(132, 130, 130);
+}
+.dark-mode input{
+ background-color: rgb(181, 179, 179);
+ color: #535252;
+}
+.dark-mode option{
+ background-color: rgb(181, 179, 179);
+}
input,
select {
@@ -687,17 +748,6 @@ body {
transition: background-color 0.3s ease, color 0.3s ease;
}
-/* Dark mode styles
-body.dark-mode {
- background-color: #121212;
- color: #ffffff;
-}
-
-/* Light mode styles */
-/* body.light-mode {
- background-color: #ffffff;
- color: #000000;
-} */
.light-mode {
background-color: #ffffff; /* Light mode background */
color: black; /* Light mode text color */
@@ -743,6 +793,10 @@ body.dark-mode {
padding: 40px;
background-color: inherit;
text-align: center;
+ border: 1px solid #0056b3;
+}
+.dark-mode .map-section{
+ background-color: #121212;
}
.map-section h2 {
@@ -773,23 +827,41 @@ body.dark-mode {
}
.itinerary-list {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- gap: 20px;
- color: #003366;
- margin-top: 20px;
+ max-width: 90%; /* Increased max-width for better responsiveness */
+ justify-content: center;
+ padding: 40px 0;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+ grid-template-rows: repeat(2, auto); /* Two rows with automatic height */
+ gap: 30px; /* Space between grid items */
}
+
+
.itinerary {
- background: white;
- padding: 20px;
- border-radius: 8px;
+ background-color: #fff;
+ padding: 25px 30px; /* Added padding left and right */
+ border-radius: 10px;
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;
+ color: #090f15;
+ transition: transform 0.4s cubic-bezier(0.30, 0.1, 0.25, 1);
+}
+.itinerary:hover{
+ transform: translateY(-10px);
+ cursor: pointer;
}
+.dark-mode.itinerary {
+ background-color: #232222;
+ padding: 25px 30px;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ color: #090f15;
+ transition: transform 0.4s cubic-bezier(0.30, 0.1, 0.25, 1);
+}
+
.itinerary h3 {
font-size: 2em;
@@ -831,21 +903,29 @@ body.dark-mode {
max-width: 100%;
}
}
-#itineraries {
+.light-mode #itineraries {
background-color: #f9f9f9; /* Light background */
border: 1px solid #007bff; /* Blue border */
}
.dark-mode #itineraries {
- background-color: #1e1e1e; /* Dark background */
+ background-color: #121212; /* Dark background */
border: 1px solid #0056b3; /* Darker blue border */
}
+.dark-mode .itinerary-list{
+ background-color: #121212;
+}
+
+.dark-mode.itinerary{
+ background-color: #232222;
+}
/* user rating */
.reviews-section {
padding: 50px;
background-color: #F0F8FF;
+ border: 1px solid #007bff;
}
.revieww{
@@ -1116,7 +1196,7 @@ justify-content: center;
/* Dark Mode Styles for Review Form */
.dark-mode .review-form {
- background-color: #121212; /* Dark background for the review form */
+ background-color: #232222; /* Dark background for the review form */
color: white; /* White text color */
padding: 20px; /* Padding for inner spacing */
border-radius: 5px; /* Rounded corners */
@@ -1138,7 +1218,7 @@ justify-content: center;
{
width: 100%; /* Full width */
padding: 10px; /* Padding inside fields */
- background-color: #1e1e1e; /* Dark background for inputs */
+ background-color: rgb(132, 130, 130); /* Dark background for inputs */
color: white; /* White text */
border: 1px solid #333; /* Dark border */
border-radius: 4px; /* Slightly rounded corners */
@@ -1313,6 +1393,8 @@ justify-content: center;
background-color: #f8f9fa;
}
+
+
.deals-section h2 {
font-size: 2.2em;
margin-bottom: 20px;
@@ -1346,6 +1428,11 @@ justify-content: center;
transition: transform 0.4s cubic-bezier(0.30, 0.1, 0.25, 1); /* for smooth hover transform animation */
}
+.dark-mode .deal-item{
+ background-color: #232222;
+
+}
+
/* Added hover effect */
.deal-item:hover {
transform: translateY(-10px);
@@ -1393,9 +1480,15 @@ justify-content: center;
}
.dark-mode #deals {
- background-color: #1e1e1e; /* Dark background */
+ background-color: #121212; /* Dark background */
border: 1px solid #0056b3; /* Darker blue border */
}
+.dark-mode .deals-text{
+ color: rgb(180, 174, 174);
+}
+.dark-mode .deals-text-heading{
+ color: white;
+}
/* Responsive Styles */
@media (max-width: 768px) {
@@ -1426,6 +1519,10 @@ justify-content: center;
.recommendations-section {
padding: 50px;
background-color: #f0f8ff; /* Light blue background */
+ border: 1px solid #0056b3;
+}
+.dark-mode .recommendations-section{
+ background-color: #121212;
}
.recommendations-section h2 {
@@ -1441,6 +1538,9 @@ justify-content: center;
margin-bottom: 30px;
color: black; /* Darker gray for text */
}
+.dark-mode .recommendations-section p{
+ color: rgb(180, 174, 174);
+}
.recommendation-list {
display: flex;
@@ -1458,6 +1558,9 @@ justify-content: center;
text-align: center;
/* border: 2px solid #0056b3; Blue border */
}
+.dark-mode .recommendation-item{
+ background-color: #232222;
+}
.recommendation-item h3 {
font-size: 2em;
@@ -1470,6 +1573,9 @@ justify-content: center;
margin-bottom: 20px;
color: black; /* Darker gray for text */
}
+.dark-mode .recommendation-item p{
+ color: rgb(180, 174, 174);
+}
.recommendation-item button {
background-color: #0056b3; /* Dark blue for buttons */
@@ -1610,10 +1716,15 @@ justify-content: center;
}
/* Contact Container */
+#contact{
+ border: 1px solid #007bff;
+}
+
.contact-container {
display: flex;
justify-content: center;
align-items: stretch;
+
}
/* Grid Layout */
@@ -1676,6 +1787,9 @@ justify-content: center;
border-radius: 0.75rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
+.dark-mode{
+ background-color: #232222;
+}
.form-title {
font-size: 1.5rem;
- 
