diff --git a/faq-website.css b/faq-website.css
index ff45a771..f06f0f80 100644
--- a/faq-website.css
+++ b/faq-website.css
@@ -2,7 +2,7 @@
 
 * {
   box-sizing: border-box;
-  border-radius: 20px;
+  /* border-radius: 20px; */
 }
 
 
diff --git a/index.html b/index.html
index 5a6ae3cf..ee610202 100644
--- a/index.html
+++ b/index.html
@@ -359,6 +359,15 @@
       });
 
     </script>
+
+  <!-- sticky animation  -->
+ <script type="text/javascript">
+  window.addEventListener("scroll", function () {
+    var header = document.querySelector("nav");
+    header.classList.toggle("sticky", window.scrollY > 50)
+  })
+</script>
+
     <div id="pre-loader">
       <h1>TourGuide . . .</h1>
     </div>
@@ -471,11 +480,14 @@ <h1>TourGuide . . .</h1>
     <button id="toggle" data-aos="fade-down">Dark Theme</button>
     <a href="#contact"><button class="btn" id="btn-style">Contact Us</button></a>
   </nav> -->
+
     <div class="nav-container" id="top">
       <nav class="newNav">
+        <div style="display: flex; flex-direction: row; align-items: center;">
         <img src="./img/tour1.png" class="sitelogo">
         
         <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
+      </div>
 
         <ul class="navLinks">
           <li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
@@ -493,7 +505,7 @@ <h1>TourGuide . . .</h1>
               </ul>
           </li>
           <li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
-          <li class="link" data-aos=""><a href="feedback.html">Rate Us</a></li>
+          <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
           <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
       </ul>
 
diff --git a/styles.css b/styles.css
index 1336b1c9..609077cd 100644
--- a/styles.css
+++ b/styles.css
@@ -531,7 +531,8 @@ img {
   display: block;
 }
 .sitelogo{
-  width: 8%;
+  width: 10%;
+  height:10%;
 }
 
 body {
@@ -577,12 +578,12 @@ nav {
 
 link a:hover {
   color: #60a5fa; 
-  background-color:red;
+  background-color: rgb(169, 35, 252);
 }
 
 .navLinks a:hover{
   /* text-decoration: underline; */
-  color: red;
+  color:  rgb(169, 35, 252);
 }
 
 .home {
@@ -2045,6 +2046,7 @@ body {
   position: fixed;
   left: 0;
   z-index: 9999;
+
 }
 
 .newNav {
@@ -2054,7 +2056,23 @@ body {
   gap: 0.5rem;
   height: auto;
   width: 100%;
-  padding: 0rem 2rem;
+  padding: 0.4rem 0.5rem;
+  z-index: 10000;
+  transition: all 0.6s;
+}
+/* navbar sticky css  */
+.sticky{
+  /* margin: 10px 5px; */
+  border-radius: 10px;
+  margin-top: 0.5rem;
+  background: linear-gradient(#002152, #271050);
+  scale:0.99;
+  
+  /* padding: 0rem 1rem;
+  margin-top: 0.5rem;
+  margin-left:0.5rem;
+  margin-right: 0.5rem;
+  width: 99%; */
 }
 
 .navLinks {
@@ -2077,11 +2095,15 @@ body {
   display: block;
   color: white;
   text-align: center;
-  padding: 14px 20px;
+  padding: 12px 20px;
   text-decoration: none;
+  width: 100%;
+  transition: all 0.3s linear;
 }
 .link > a:hover {
-  background-color: #575757;
+  background-color: #f6ddff;
+  border-radius: 10px;
+  box-shadow: rgb(56, 0, 109) 0px 0px 8px 2px inset;
 }
 .dropdown-menu {
   display: none;
@@ -2234,7 +2256,7 @@ body {
     width: 100%;
   } */
 .navLinks:active {
-  color: red;
+  color: rgb(169, 35, 252);
 }
 
 .navLinks.activeHamburger {