diff --git a/.github/workflows/label-issues.yaml b/.github/workflows/label-issues.yaml
new file mode 100644
index 00000000..4284f4cb
--- /dev/null
+++ b/.github/workflows/label-issues.yaml
@@ -0,0 +1,30 @@
+name: Label Issues Based on Template
+
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  label-issues:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check if issue needs a label
+        id: check_label
+        run: |
+          echo "Checking labels for issue #${{ github.event.issue.number }}"
+
+          if [[ "${{ github.event.issue.body }}" == *"I'm a GSSOC'24 contributor"* ]]; then
+            echo "::set-output name=label::gssoc"
+          elif [[ "${{ github.event.issue.body }}" == *"I'm a VSOC'24 contributor"* ]]; then
+            echo "::set-output name=label::VSoC'24"
+          else
+            echo "::set-output name=label::"
+          fi
+
+      - name: Apply Label
+        if: steps.check_label.outputs.label != ''
+        uses: actions-ecosystem/action-add-labels@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          labels: ${{ steps.check_label.outputs.label }}
diff --git a/Untitled (1).mp4 b/Untitled (1).mp4
new file mode 100644
index 00000000..a9f4b9dc
Binary files /dev/null and b/Untitled (1).mp4 differ
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/faq-website.css b/faq-website.css
index a0cf1449..ff45a771 100644
--- a/faq-website.css
+++ b/faq-website.css
@@ -232,11 +232,16 @@
     color: white;
     background-color: rgb(40, 87, 241);
   }
-  
-  
-  
-  
-  
+  @media only screen and (max-width:465px){
+    .newNav img{
+      position: relative;
+      right: 14px;
+    }
+    .nav__logo{
+      position: relative;
+      right: 16px;
+    }
+  }
   
   
   
diff --git a/faq-website.js b/faq-website.js
index 760971bb..dc12dac0 100644
--- a/faq-website.js
+++ b/faq-website.js
@@ -1,4 +1,3 @@
-
 const accordions = document.querySelectorAll(".accordion");
 
 accordions.forEach((accordion, index) => {
@@ -19,3 +18,68 @@ accordions.forEach((accordion, index) => {
     });
   });
 });
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Highlight active navbar
+  const navLinks = document.querySelectorAll(".navLinks a");
+
+  function highlightNavLink() {
+    const scrollPosition = window.scrollY;
+
+    navLinks.forEach((link) => {
+      const sectionId = link.getAttribute("href").substring(1);
+      const section = document.getElementById(sectionId);
+
+      // Adjust this value to control when the link should be highlighted
+      const offsetPercentage = 20;
+
+      if (
+        section.offsetTop - window.innerHeight * (offsetPercentage / 100) <=
+          scrollPosition &&
+        section.offsetTop + section.offsetHeight > scrollPosition
+      ) {
+        link.classList.add("active");
+      } else {
+        link.classList.remove("active");
+      }
+    });
+  }
+
+  document.addEventListener("scroll", highlightNavLink);
+  window.addEventListener("resize", highlightNavLink);
+
+  // Initialize AOS library
+  AOS.init();
+
+  // Set animation delays for FAQs
+  const faqs = document.querySelectorAll(".faq");
+  faqs.forEach((faq, index) => {
+    faq.style.animationDelay = `${index * 0.2}s`;
+  });
+});
+
+// Logout Button
+document.addEventListener("DOMContentLoaded", function () {
+  var isLoggedIn = localStorage.getItem("isLoggedIn");
+  var loginButton = document.getElementById("btn-style");
+  var logoutButton = document.getElementById("logout-btn");
+
+  if (isLoggedIn === "true") {
+    loginButton.style.display = "none";
+    logoutButton.style.display = "block";
+    loginButton.disabled = true;
+    logoutButton.disabled = false;
+    logoutButton.style.cursor = "pointer";
+    logoutButton.addEventListener("click", function () {
+      localStorage.setItem("isLoggedIn", "false");
+      window.location.href = "./index.html";
+    });
+  } else {
+    loginButton.style.display = "block";
+    logoutButton.disabled = true;
+  }
+});
+
+function sendEmail() {
+  window.location.href = "mailto:arpanchowdhury003@gmail.com";
+}
diff --git a/faq.css b/faq.css
new file mode 100644
index 00000000..efc4b90e
--- /dev/null
+++ b/faq.css
@@ -0,0 +1,228 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
+
+* {
+  box-sizing: border-box;
+  border-radius: 20px;
+}
+
+:root {
+  --color-primary: #ffd54b;
+  --color-text: #545d7a;
+  --color-white: #fff;
+  --color-title: #242e4c;
+  --color-background: #f7f8fb;
+  --color-border: #dae1f5;
+  --transition: 0.4s ease-in-out;
+  --shadow: 0px 60px 56px -12px rgba(9, 40, 163, 0.05);
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  color: var(--color-text);
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+}
+
+/* .container {
+  width: 100% !important;
+  margin: auto;
+  min-height: 100vh;
+  padding: 2rem;
+  display: grid;
+  place-items: center;
+} */
+
+.faq-container {
+  margin: 0 auto;
+  max-width: 900px !important;
+  width: 80%;
+}
+
+.faq {
+  background-color: rgb(176, 196, 242, 0.3);
+  border: 1px solid #9a9afb;
+  color: black;
+  border-radius: 25px;
+  margin: 20px 0;
+  overflow: hidden;
+  padding: 30px;
+  position: relative;
+  transition: 0.3s ease;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(-100%);
+  animation: slideInFromLeft 2s ease-in-out forwards; /* Animation duration is now 2 seconds */
+}
+
+.faq.active {
+  background: rgb(239, 239, 239);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.faq.active::before,
+.faq.active::after {
+  color: #2ecc71;
+  content: "\f075";
+  font-family: "Poppins", sans-serif;
+  font-size: 7rem;
+  left: 20px;
+  opacity: 0.2;
+  position: absolute;
+  top: 20px;
+  z-index: 0;
+}
+
+.faq.active::before {
+  color: #3498db;
+  left: -30px;
+  top: -10px;
+  transform: rotateY(180deg);
+}
+
+.faq-title {
+  margin: 0 35px 0 0;
+  color: #3685fb;
+  transition: transform 0.3s ease;
+}
+
+.faq-title:hover {
+  transform: scale(1.1);
+}
+
+.faq-text {
+  margin: 30px 0 0;
+  color: black;
+}
+
+.faq-toggle {
+  align-items: center;
+  background: rgb(239, 239, 239);
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  font-size: 1rem;
+  height: 30px;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: 30px;
+  top: 10px; /* Moving toggle button to top to remove overlapping with faq-title  */
+  width: 30px;
+}
+
+.faq-toggle .fa-times,
+.faq.active .faq-toggle .fa-chevron-down {
+  display: none;
+}
+
+.accordion__wrapper {
+  background: url("https://img.freepik.com/free-photo/pouch-map-toy-airplane-blue-background-with-space-writing-text_23-2147958180.jpg")
+    no-repeat center center fixed;
+  background-size: cover;
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  width: 100%;
+  margin-top: 20px;
+  min-height: 100vh;
+  padding: 2rem;
+  display: grid;
+  place-items: center;
+  position: relative; /* Ensure position is relative for z-index to work */
+  z-index: 1; /* Ensure the FAQ wrapper is above the background image */
+}
+
+.accordion__title {
+  font-size: 25px;
+  font-weight: 800;
+  color: var(--color-title);
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.accordion {
+  border-bottom: 0.1rem solid var(--color-border);
+  padding-bottom: 2rem;
+  margin-bottom: 3rem;
+  width: 100%;
+}
+
+.accordion__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+}
+
+.accordion__icon {
+  background-color: var(--color-primary);
+  width: 2.2rem;
+  height: 2.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: var(--color-white);
+  flex-shrink: 0;
+}
+
+.accordion__question {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-title);
+  width: 100%;
+}
+
+.accordion__answer {
+  padding: 2rem 0;
+  font-size: 16px;
+}
+
+.accordion__content {
+  overflow: hidden;
+  height: 0;
+  transition: var(--transition);
+}
+
+@media screen and (min-width: 580px) {
+  .accordion__wrapper {
+    padding: 5rem 8rem;
+  }
+}
+
+.more {
+  padding: 50px;
+  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9dwjbQHiWY1sgKRxCurFvyI4pwTMM9L2AVQ&s")
+    no-repeat center center fixed;
+  background-size: cover;
+  margin: 10px auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.more p {
+  color: grey;
+}
+
+.moreemail {
+  padding: 10px 20px;
+  font-size: 18px;
+  border-radius: 10px;
+  color: white;
+  background-color: rgb(40, 87, 241);
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/faq.html b/faq.html
index f7d4a436..3e179956 100644
--- a/faq.html
+++ b/faq.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./loader.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-    <link rel="stylesheet" href="faq-website.css">
+    <link rel="stylesheet" href="faq.css">
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
       integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
@@ -259,9 +259,9 @@
           </ul>
   
   
-          <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+          <a href="newLogin.html" class="contact-btn"><button class="btn but2" id="btn-style" style="margin: 0;"
               data-aos="fade-down">Login/SignUp</button></a>
-              <a href="mapa.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+              <a href="mapa.html" class="contact-btn"><button class="btn but" id="btn-style" style="margin: 0;"
                 data-aos="fade-down">view <map name=""></map></button></a>
   
           <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn" style="margin: 0; display: none;"
@@ -286,101 +286,85 @@
 
 
   <!-- --FAQ-- -->
-    <div class="container">
-        <div class="accordion__wrapper">
-            <h1 class="accordion__title">Frequently Asked Questions</h1>
-    
-            <!-- Accordion 1  -->
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">How do I book my travel arrangements through your website?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">Booking your travel with us is simple and convenient. 
-                      Start by entering your destination, travel dates, and other relevant details on our homepage. 
-                      Browse through the available options, including flights, hotels, and car rentals. Once you find 
-                      the perfect combination for your trip, follow the easy step-by-step process to confirm your booking. 
-                      If you encounter any issues or have questions during the booking process, our customer support team is
-                       available 24/7 to assist you.</p>
-                </div>
-            </div>
-    
-            <!-- Accordion 2  -->
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">What measures are in place to ensure the safety of my personal information?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer"> We take the security of your personal information seriously. 
-                      Our website employs state-of-the-art encryption technology to safeguard your data during the booking process. 
-                      Additionally, we adhere to strict privacy policies and comply with industry standards to protect your information. 
-                      Rest assured that your details are used solely for the purpose of facilitating your travel arrangements, 
-                      and we do not share your information with third parties without your consent. 
-                      For more details, please refer to our Privacy Policy.</p>
-                </div>
-            </div>
-    
-            <!-- Accordion 3 -->
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">Can I make changes to my booking or cancel it if needed?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">Yes, we understand that plans can change. Depending on the terms and conditions 
-                      of your specific booking, you may be able to make modifications or cancel your reservation. 
-                      Log in to your account on our website, navigate to the "Manage Booking" section, and follow 
-                      the provided instructions. Keep in mind that there may be associated fees or restrictions depending 
-                      on the type of booking and the time of the requested changes. For further assistance, feel free to 
-                      contact our customer support team, and they will guide you through the process.</p>
-                </div>
-            </div>
-
-            <!-- Accordion 4 -->
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">Will I get assistance while on travel?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">Yes, We provide 24X7 support and customer assistance while we are serving you.</p>
-                </div>
-            </div>
-    
-            <!-- Accordion 5 -->
-            <div class="accordion">
-                <div class="accordion__header">
-                    <h2 class="accordion__question">Can I negotiate the prices?</h2>
-                    <span class="accordion__icon">
-                        <i id="accordion-icon" class="ri-add-line"></i>
-                    </span>
-                </div>
-                <div class="accordion__content">
-                    <p class="accordion__answer">Sure! If it's a customized trip, we can negotiate prices based on requirements. However, if on group tours or offers, we cannot negotiate the prices.</p>
-                </div>
-            </div>
+    <div class="accordion__wrapper">
+      <h1 class="accordion__title">Frequently Asked Questions</h1>
+  
+      <!-- Accordion 1 -->
+      <div class="accordion faq">
+        <div class="accordion__header">
+          <h2 class="accordion__question">How do I book my travel arrangements through your website?</h2>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
         </div>
-    </div>
-
-    <div class="more">
-      <div>
+        <div class="accordion__content">
+          <p class="accordion__answer">Booking your travel with us is simple and convenient. Start by entering your destination, travel dates, and other relevant details on our homepage. Browse through the available options, including flights, hotels, and car rentals. Once you find the perfect combination for your trip, follow the easy step-by-step process to confirm your booking. If you encounter any issues or have questions during the booking process, our customer support team is available 24/7 to assist you.</p>
+        </div>
+      </div>
+  
+      <!-- Accordion 2 -->
+      <div class="accordion faq">
+        <div class="accordion__header">
+          <h2 class="accordion__question">What measures are in place to ensure the safety of my personal information?</h2>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
+        </div>
+        <div class="accordion__content">
+          <p class="accordion__answer">We take the security of your personal information seriously. Our website employs state-of-the-art encryption technology to safeguard your data during the booking process. Additionally, we adhere to strict privacy policies and comply with industry standards to protect your information. Rest assured that your details are used solely for the purpose of facilitating your travel arrangements, and we do not share your information with third parties without your consent. For more details, please refer to our Privacy Policy.</p>
+        </div>
+      </div>
+  
+      <!-- Accordion 3 -->
+      <div class="accordion faq">
+        <div class="accordion__header">
+          <h2 class="accordion__question">Can I make changes to my booking or cancel it if needed?</h2>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
+        </div>
+        <div class="accordion__content">
+          <p class="accordion__answer">Yes, we understand that plans can change. Depending on the terms and conditions of your specific booking, you may be able to make modifications or cancel your reservation. Log in to your account on our website, navigate to the "Manage Booking" section, and follow the provided instructions. Keep in mind that there may be associated fees or restrictions depending on the type of booking and the time of the requested changes. For further assistance, feel free to contact our customer support team, and they will guide you through the process.</p>
+        </div>
+      </div>
+  
+      <!-- Accordion 4 -->
+      <div class="accordion faq">
+        <div class="accordion__header">
+          <h2 class="accordion__question">Will I get assistance while on travel?</h2>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
+        </div>
+        <div class="accordion__content">
+          <p class="accordion__answer">Yes, We provide 24X7 support and customer assistance while we are serving you.</p>
+        </div>
+      </div>
+  
+      <!-- Accordion 5 -->
+      <div class="accordion faq">
+        <div class="accordion__header">
+          <h2 class="accordion__question">Can I negotiate the prices?</h2>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
+        </div>
+        <div class="accordion__content">
+          <p class="accordion__answer">Sure! If it's a customized trip, we can negotiate prices based on requirements. However, if on group tours or offers, we cannot negotiate the prices.</p>
+        </div>
+      </div>
+  </div>
+  
+  <div class="more">
+    <div>
       <h2>Have More questions?</h2>
       <p>Feel Free to Email us!</p>
     </div>
     <div>
       <button class="moreemail" onclick="sendEmail()">Send Email</button>
     </div>
-    </div>
+  </div>
+  
 
     <script>
       let hamburger = document.querySelector('.hamburger');
diff --git a/feedback.html b/feedback.html
index 739cffc8..ae15a3aa 100644
--- a/feedback.html
+++ b/feedback.html
@@ -127,7 +127,7 @@
           <li class="link" data-aos="fade-down"><a href="./index.html#trip" target="_blank">Pricing</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#ReviewGallery" target="_blank">Trip Gallery</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#testimonials" target="_blank">Testimonials</a></li>
-          <li class="link" data-aos="fade-down"><a href="./index.htmlfeedback.html" target="_blank">Rate Us?</a></li>
+          <li class="link" data-aos="fade-down"><a href="./feedback.html" target="_blank">Rate Us?</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#cnt-form" target="_blank">Contact Us</a></li>
 
         </ul>
diff --git a/index.html b/index.html
index b26b31ac..884851ad 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,8 @@
     .center-card {
       margin: 0 auto;
       display: block;
+      position: relative;
+      bottom: 18px;
     }
   </style>
   <link rel="stylesheet" href="./loader.css">
@@ -34,7 +36,12 @@
   <link rel="stylesheet" href="explore.css">
   <title>Tourguide</title>
   <!-- adding a fav-icon -->
+
+   <img src="Untitled (1).mp4" alt="">
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
   <link rel="stylesheet" href="tilt.css">
   <script src="tilt.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>
@@ -368,8 +375,9 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
                 <!-- link to the hmtl page with the video -->
                 <a href="story.html" class="btn_video">
                   <span><i class="ri-play-fill"></i></span>
+                </a>
               </div>
-
+               
             </div>
             <span data-aos="fade-in">Watch our story</span>
           </div>
@@ -650,61 +658,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/pricing/style.css b/pricing/style.css
index 35c568c2..80c3d90f 100644
--- a/pricing/style.css
+++ b/pricing/style.css
@@ -337,6 +337,7 @@ header {
   position: absolute;
   top: 3px;
   left: 60px;
+  margin-left: 2rem;
 }
 .price-area .inner-area .price{
   font-size: 45px;
diff --git a/story.html b/story.html
index 64670405..98dc190c 100644
--- a/story.html
+++ b/story.html
@@ -17,6 +17,7 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico"/>
     
     <script src="index.js"></script>
+    <link rel="stylesheet" href="style.css">
 
     <script type="text/javascript"
         src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
@@ -47,8 +48,12 @@
     </nav> -->
     <div class="nav-container">
       <nav class="newNav">
-        <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
-
+        <div class="logo">
+          <video id="logo-video" autoplay loop muted>
+              <source src="Untitled (1).mp4" type="video/mp4">
+              Your browser does not support the video tag.
+          </video>
+          </div>
         <ul class="navLinks">
           <li class="link home" data-aos="fade-down"><a href="index.html">Home</a></li>
           <li class="link" data-aos="fade-down"><a href="index.html#AboutUs">AboutUs</a></li>
@@ -111,7 +116,7 @@ <h4>Address</h4>
             <span>Address:</span> 3/2 Wellington Street, Kolkata , West Bengal , India 
           </p>
           <p><span>Email:</span><a href="mailto:tour@tourguide.com">tour@tourguide.com</a></p>
-          <p><span>Phone:</span><a href="tel:8562145852">+91 8562145852</a></p>
+          <p><span>Phone:</span><a href="tel:8562145852"> +91 8562145852</a></p>
         </div>
         </div>
       </div>
diff --git a/style.css b/style.css
index ca97f2d9..e5dbd7ee 100644
--- a/style.css
+++ b/style.css
@@ -53,13 +53,51 @@ button, input[type="submit"]{
     align-items: center;
     
 }
-.logo a{
-    font-size: 2.4rem;
-    font-weight: bold;
-    color: #fff;
-    text-decoration: none;
+/* 
+ */
+ .logo {
+  display: flex;
+  align-items: center;
+}
+
+.logo video {
+  height: 100px;
+  margin-right: 10px;
+  transition: transform 0.3s;
 }
 
+.logo video:hover {
+  transform: scale(1.1);
+}
+
+.logo h1 {
+  font-size: 24px;
+  color: #0d213f;;
+  margin: 0;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+nav ul li {
+  margin-left: 20px;
+}
+
+nav ul li a {
+  text-decoration: none;
+  color:  #0d213f;;
+  font-size: 16px;
+}
+
+nav ul li a:hover {
+  color: #007bff;
+}
+
+
 main{
     min-height: 80vh;
     display: flex;
diff --git a/styles.css b/styles.css
index 6b769d34..9dbae098 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,6 @@
+
+
+
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Oxygen:wght@300&display=swap");
 
@@ -232,6 +235,30 @@
 }
 */
 
+.footer__link {
+  position: relative;
+  text-decoration: none;
+  color: black;
+  font-size: 18px;
+}
+.footer__link::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: black;
+  transition: all 0.3s ease-in-out;
+}
+.footer__link:hover {
+  color: red;
+}
+.footer__link:hover::after {
+  width: 100%;
+  background-color: red;
+}
+
 /* new bubble end */
 #scrollPath {
   position: fixed;
@@ -357,7 +384,6 @@ body {
   justify-content: space-between;
   gap: 2rem;
   flex-wrap: wrap;
-  margin-bottom: 4rem;
 }
 
 .section__title {
@@ -506,7 +532,7 @@ body {
 }
 
 nav {
-  background-color: #091020;
+  background-color: #123456;
   position: fixed;
   top: 0;
   width: 100%;
@@ -526,30 +552,32 @@ nav {
   color: #3685fb;
   /* Assuming this is your primary color */
 }
-
-/* .nav__links {
-  list-style: none;
+/* 
+.nav__links {
+  /* list-style: none;
   display: flex;
   align-items: center;
   gap: 1rem; /* Increased gap between links */
 /* font-size: 1.2rem; Increased font size for the links   */
 /* } */
-
 .link a {
-  /* padding: 0.5rem 1rem; Adjusted padding for links */
-  color: #ffffff;
-  transition: 0.3s;
-  font-weight: 600;
+  color: #fff; /* Sets text color to white */
+  padding-top: 1.75rem; /* Equivalent to py-7 in Tailwind, adjust according to your base font size */
+  padding-bottom: 1.75rem; /* Equivalent to py-7 in Tailwind */
+  transition: color 0.3s; /* Transition effect for color change */
+  font-weight: 600; /* Sets font weight to 600 */
 }
 
-.link a:hover {
-  color: #ff0000;
+link a:hover {
+  color: #60a5fa; 
+  background-color:red;
 }
 
 .home {
   margin-left: 210px;
 }
 
+
 header {
   background-color: var(--secondary-color);
 }
@@ -1060,7 +1088,7 @@ header {
     gap: 2rem;
   }
 }
-@media screen and (max-width:768px) {
+/* @media screen and (max-width:768px) {
   .hamburger{
     position: relative;
     left: 20px;
@@ -1069,7 +1097,7 @@ header {
     position: relative;
     left: 90px;
   }
-}
+} */
 
 .image__gallary {
   display: grid;
@@ -1204,7 +1232,16 @@ body, html {
 
 .footer {
   width: 100%;
-  background-color: #091020;
+  background-color: rgb(102, 116, 204);
+  padding: 2rem;
+}
+.footer:hover{
+   background-color :#16171c;
+}
+
+.footer__col p {
+  font-size: 0.8rem;
+  font-weight: 100;
 }
 
 .footer__container {
@@ -1224,18 +1261,18 @@ body, html {
   margin-left: 15px;
   flex: 1;
   display: flex;
-  max-width: 200px;
+  max-width: 220px;
   text-align: left;
   flex-direction: column;
 }
 
-.footer__text a {
+/* .footer__text a {
   margin-top: 5px;
   color: white;
 }
 .footer__text a:hover {
   color: red;
-}
+} */
 
 .footer:hover {
   background: linear-gradient(135deg, #654ea3, #eaafc8);
@@ -1251,15 +1288,15 @@ body, html {
   color: var(--primary-color);
 }
 
-.footer__link {
+/* .footer__link {
   color: white;
-  margin-right: 15px; /* Adjust spacing between icons */
-  font-size: 1em; /* Initial font size */
+  margin-right: 15px; 
+  font-size: 1em; 
 }
 
 .footer__link:hover {
-  transform: scale(10); /* Scale up the icon on hover */
-}
+  transform: scale(10);
+} */
 
 .footer__col p span {
   font-weight: 600;
@@ -1276,14 +1313,16 @@ body, html {
   margin: auto;
   padding: 0.5rem;
   text-align: center;
-  font-size: 1rem;
+  font-size: 0.9rem;
   /*   color: var(--secondary-color); */
   color: var(--extra-light);
+  padding-top: 1rem;
+  margin-top: 1rem;
   border-top: 2px solid var(--text-light);
 }
 
 .footer__area {
-  margin-left: 2.3rem;
+  margin-left: 0rem;
 }
 
 .footer__area a {
@@ -2114,7 +2153,7 @@ body {
   padding: 10px 0;
 }
 
-.footer-head::before,
+/* .footer-head::before,
 .footer-head::after {
   content: "";
   position: absolute;
@@ -2122,7 +2161,7 @@ body {
   height: 2px;
   background-color: red;
   transition: width 0.2s ease-in;
-}
+} */
 
 .footer-head::before {
   top: 0;
@@ -2136,20 +2175,20 @@ body {
   transform: translateX(-50%);
 }
 
-.footer-head:hover::before {
-  width: 100%;
-}
-.footer-head:hover::after {
-  width: 100%;
-}
-.navLinks .link a:active {
+  /* .footer-head:hover::before {
+    width: 100%;
+  }
+  .footer-head:hover::after {
+    width: 100%;
+  } */
+.navLinks:active {
   color: red;
 }
 
 .navLinks.activeHamburger {
   width: 100%;
 }
-@media screen and (max-width: 1146px) {
+/* @media screen and (max-width: 1146px) {
   .toggle-container {
     position: relative;
     right: 148px;
@@ -2158,8 +2197,16 @@ body {
     position: relative;
     right: 150px;
   }
-}
-@media screen and (max-width: 846px) {
+} */
+/* @media only screen and (max-width:957px){
+  .toggle-container{
+    left: 30px;
+  }
+  .hamburger{
+    left: 30px;
+  }
+} */
+/* @media screen and (max-width: 846px) {
   .toggle-container {
     position: relative;
     right: 200px;
@@ -2173,7 +2220,7 @@ body {
     right: 57px;
     top: 1px;
   }
-}
+} */
 @media screen and (max-width: 652px) {
   .toggle {
     width: 5vw;
@@ -2181,35 +2228,50 @@ body {
   .line {
     width: 5vw;
   }
-  .newNav {
-    height: 130px;
-  }
   .newNav img {
     position: relative;
-    bottom: 35px;
-    left: 130px;
+    bottom: 23px;
+    left: 109px;
   }
   .nav__logo {
     position: relative;
     left: 85px;
-    bottom: 35px;
+    bottom: 20px;
   }
   .btn {
     position: relative;
     top: 30px;
     left: -147px;
   }
-  .toggle-container {
+}
+@media only screen and (max-width:577px){
+  .but{
     position: relative;
-    top: 30px;
-    right: 377px;
+    top: -37px;
+    left: 85px;
   }
-  .hamburger {
+}
+@media only screen and (max-width: 465.5px){
+  .newNav img{
+    position: relative;
+    left: -58px;
+  }
+  .nav__logo{
     position: relative;
-    right: 388px;
+    left: -82px;
+  }
+  .but{
+    position: relative;
+    left:17px;
+    top: -4px;
+  }
+  .but2{
+    position: relative;
+    left: 30px;
+    top: -2px;
   }
 }
-@media screen and (max-width: 430px) {
+/* @media screen and (max-width: 430px) {
   .toggle-container {
     right: 374px;
   }
@@ -2219,7 +2281,7 @@ body {
   .nav__logo {
     left: 36px;
   }
-}
+} */
 /* New NAvbar CSS Ends Here*/
 /* #canvas {
   background: #232323;
@@ -2442,6 +2504,7 @@ body {
   background-color: #91b4ffe7;
   overflow: hidden;
   margin-bottom: 50px;
+  top: 45px;
 }
 
 .swiper-slide {
@@ -2725,3 +2788,51 @@ button:hover {
     font-size: small;
   }
 }
+
+a {
+  position: relative;
+  text-decoration: none;
+  color: black;
+  font-size: 18px;
+}
+a::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: black;
+  transition: all 0.3s ease-in-out;
+}
+a:hover {
+  color: red;
+}
+a:hover::after {
+  width: 100%;
+  background-color: red;
+}
+/* Footer specific styles */
+.footer__link {
+  position: relative;
+  text-decoration: none;
+  color: black;
+  font-size: 18px;
+}
+.footer__link::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: black;
+  transition: all 0.3s ease-in-out;
+}
+.footer__link:hover {
+  color: red;
+}
+.footer__link:hover::after {
+  width: 100%;
+  background-color: red;
+}
\ No newline at end of file
diff --git a/thankyou.css b/thankyou.css
index b3e05128..25077d09 100644
--- a/thankyou.css
+++ b/thankyou.css
@@ -4,11 +4,11 @@ body {
   align-items: center;
   height: 100vh;
   margin: 0;
-  background: linear-gradient(to right, #8e2de2, #4a00e0);
+  background-image: linear-gradient(to right, rgb(91, 57, 165) , rgb(108, 144, 185));
   font-family: 'Roboto', sans-serif;
 }
 
-.container {
+/* .container {
   text-align: center;
   padding: 20px;
   background-color: #fff;
@@ -16,8 +16,23 @@ body {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   max-width: 400px;
   width: 90%;
+} */
+
+.container {
+  text-align: center;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px,
+              rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
+              rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+  max-width: 400px;
+  text-shadow: 2px 2px 5px rgb(121, 113, 113);
+  width: 90%;
 }
 
+
+
 .container:hover {
   transform: scale(1.05);
   transition: transform 0.3s ease;
diff --git a/trending.css b/trending.css
index bf3d4c55..247de9eb 100644
--- a/trending.css
+++ b/trending.css
@@ -50,7 +50,7 @@ div.niha{
 
 #button1 {
     color: black;
-    margin: 18px 18px 50px 680px;
+    margin: 18px 18px 50px 540px;
     transition: 1s;
     border: none;
     background-color:#C07F00;
@@ -63,6 +63,8 @@ div.niha{
     font-weight: bold;
     border-radius: 20px ;
     cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
    
 }
 
@@ -89,15 +91,19 @@ a {
 
 #container2 {
     text-align: center;
-    width: 1360px;
+    /* width:  1360px; */
+    width: 1159px;
     height: 500px;
     display: flex;
     flex-direction: row;
-    margin-left: 75px;
-    margin-right: 100px;
+    margin-left: 40px;
+    margin-right: 40px;
     margin-top:5px;
     margin-bottom: 110px;
+    box-sizing:border-box;
     border: 10 solid rgb(255, 130, 130);
+    /* align-items:center; */
+    justify-content:space-between;
 }
 
 #box5 {
@@ -109,6 +115,8 @@ a {
     margin-right: 10px;
     position: relative;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
 }
 
 #box5:hover {
@@ -116,6 +124,7 @@ a {
     border: 3px solid rgb(206, 9, 6);
     transition: 0.9s;
     box-shadow: rgb(206, 9, 6);
+   
 }
 
 #box6 {
@@ -129,6 +138,8 @@ a {
     position: relative;
     top: 45px;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
 
 }
 
@@ -136,6 +147,7 @@ a {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
+   
 }
 
 #box7 {
@@ -150,6 +162,8 @@ a {
     top: 80px;
     text-align: center;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
 
 
 
@@ -159,6 +173,7 @@ a {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
+   
 }
 
 #box8 {
@@ -172,6 +187,9 @@ a {
     position: relative;
     top: 45px;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
+  
     
 }
 
@@ -180,7 +198,6 @@ a {
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
 }
-
 #box9 {
     background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPF21UstFZ23Hy_Kfnad_8zlAcnMohJLuoBg&s");
     background-size: cover;
@@ -191,13 +208,16 @@ a {
     margin-left: 10px;
     position: relative;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
 
+   
 }
 
 #box9:hover {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
+  
 }
 #text1{
     color: #c84d4d;