diff --git a/.vscode/settings.json b/.vscode/settings.json
index f673a71..a7d0a6e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,7 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5502,
+    "files.associations": {
+        "*.embeddedhtml": "html",
+        "N_QUEEN.C": "cpp"
+    }
 }
\ No newline at end of file
diff --git a/10 TravelHub_AbhaTewari.mp4 b/10 TravelHub_AbhaTewari.mp4
new file mode 100644
index 0000000..53e3683
Binary files /dev/null and b/10 TravelHub_AbhaTewari.mp4 differ
diff --git a/Bollywood/aurangabadpin.html b/Bollywood/aurangabadpin.html
new file mode 100644
index 0000000..e09e4a5
--- /dev/null
+++ b/Bollywood/aurangabadpin.html
@@ -0,0 +1,477 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Bollywood ki boli ft.Aurangabad</title>
+  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+  <style>
+   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
+
+* {
+    margin: 0;
+    margin-bottom: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
+
+html::-webkit-scrollbar {
+    width: 1rem;
+}
+html::-webkit-scrollbar-track{
+    background-color:var(--white);
+}
+html::-webkit-scrollbar-thumb{
+    background-color:var(--light-black);
+}
+
+section{
+    padding: 5rem 10%;
+}
+
+@keyframes fadeIn {
+    0% { transform: scale(0);
+        opacity: 0;
+    }
+}
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header .logo img
+{
+    height: 45px;
+    padding: 0;
+}
+.header .navbar{
+    margin-left:auto;
+}
+.header .navbar a{
+    font-size: 1rem;
+    margin-left: 2rem;
+    color: var(--black);
+    text-decoration: none;
+}
+.header .navbar a:hover{
+  text-decoration: underline;
+}
+/* media queires*/
+@media (max-width:1200px){
+    section{
+        padding: 3rem 5%;
+}
+}
+
+@media (max-width:991px){
+
+    html{
+        font-size: 55%;
+    }
+    section{
+        padding: 3rem 2rem;
+}
+}
+
+@media (max-width: 760px) {
+    .header .navbar {
+      position: absolute;
+      top: 99%;
+      left: 0;
+      right: 0;
+      background-color: var(--white);
+      border-top: var(--border);
+      padding: 2rem;
+      z-index: 1001;
+      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+    }
+  
+    .header .navbar.active {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    }
+  
+    .header .navbar a {
+      display: block;
+      margin: 2rem;
+      text-align: center;
+    }
+  }
+@media (max-width:450px){
+
+    html{
+        font-size: 50%;
+    }
+
+}
+.footer {
+    /* background: url(footer.jpg) no-repeat; */
+    background-size: auto;
+    background-color: #333;
+    background-position: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 3rem;
+    z-index: 999; /* Set a lower z-index value */
+}
+
+.footer .box-container {
+    display: grid;
+    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+    gap: 3rem;
+    padding: 2rem;
+    padding-top: 2rem;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.footer .box-container .box h3 {
+    color: white;
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+}
+
+.footer .box-container .box a {
+    color: var(--light-white);
+    font-size: 1rem;
+    padding-bottom: 1rem;
+    display: block;
+    text-decoration: none;
+}
+
+.footer .box-container .box a i {
+    color: var(--main-color);
+    padding-right: .5rem;
+    transition: .2s linear;
+}
+
+.footer .box-container .box a:hover i {
+    padding-right: 2rem;
+}
+.footer .credit{
+    text-align: center;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: .1rem solid var(--light-white);
+    font-size: 1rem;
+    color: var(--light-white);
+}
+.footer .credit span{
+    color: var(--main-color);
+}
+
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+.profile-circle {
+    margin-top: 0.2rem;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 10px;
+    position: relative;
+    display: inline;
+    top:3px;
+}
+
+.profile-circle img {
+    width: 19px;
+    height: 19px;
+    object-fit: contain;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 120px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {
+    background-color: #f1f1f1;
+}
+
+.user-greeting {
+    vertical-align: middle;
+}
+    #content-container {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+
+    #about {
+      width: 50%;
+      text-align: center; /* Center align text */
+      padding: 40px;
+      background-color: white;
+      border-radius: 10px;
+      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+      margin: 20px;
+      max-width: 400px;
+    }
+
+    #about h2 {
+      color: var(--primary-color);
+      margin-bottom: 20px;
+    }
+
+    #about p {
+      color: var(--text-color);
+    }
+
+    #slideshow-container {
+      width: 50%;
+      margin: 20px;
+      overflow: hidden;
+    }
+
+    .slideshow-image {
+      display: none;
+      width: 100%;
+      height: auto;
+    }
+
+    /* Meme styling */
+    .meme-container {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    .meme-image {
+      width: 100%; /* Adjust the width as needed */
+      max-width: 300px; /* Limit the maximum width */
+      display: block;
+      margin: 0 auto; /* Center align image */
+    }
+
+    .meme-text {
+      font-size: 24px; /* Adjust the font size as needed */
+      margin-top: 20px;
+      margin-bottom: 20px;
+      font: 1.5em sans-serif;
+    }
+
+    /* Typing animation styles */
+    .typing-animation {
+      text-align: center;
+      padding: 20px 0; /* Adjust the padding as needed */
+    }
+
+    .typing-animation h2 {
+      font-size: 46px; 
+      font-weight: bold;
+      font-family: fantasy;
+      color: #333; /* Adjust the color as needed */
+    }
+
+    @keyframes typing {
+      0% {
+        width: 0;
+      }
+      50% {
+        width: 50%;
+      }
+      100% {
+        width: 100%;
+      }
+    }
+
+  </style>
+</head>
+<body>
+  <section class="header" >
+    <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+
+    <nav class="navbar">
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="user-profile">
+            <div  id="userProfileLink">
+                <div class="profile-circle">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile">
+                </div>
+                <span class="user-greeting">Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+
+            </div>
+            <div class="dropdown-content" id="dropdownContent">
+                <a href="/user/profile.html">Dashboard</a>
+            </div>
+        </div>
+    </nav>
+    
+</section>
+ 
+  <section class="typing-animation" style="font-size: 40px;margin-right: 20px;margin-left: 20px;">
+    <p id="typing-text"></p>
+  </section>
+
+  <div id="content-container">
+    <div id="about">
+      <h2>About</h2>
+      <p>Aurangabad of Maharashtra has now become a shooting hub. Aurangabad is becoming the choice of both directors and actors for shooting.Aurangabad district has become a shooting hub for Hindi Marathi films, serials, web series and advertisements. Not only Jawan but many Hindi and Marathi film web series like "Ray", Aashiqana, Laadla, Dispatch, Gulkand and Mukkam Post Kolshewadi have been shot in Aurangabad.</p>
+    </div>
+
+    <div id="slideshow-container">
+      <img class="slideshow-image" src="https://pbs.twimg.com/media/C_8cCwXU0AAYwKZ.jpg" alt="Slideshow Image 1">
+      <img class="slideshow-image" src="https://www.91-cdn.com/hub/wp-content/uploads/2023/10/Jawan.png">
+      <img class="slideshow-image" src="https://upperstall.com/wp-content/uploads/2021/06/Ray-header.jpg" alt="Slideshow Image 3">
+      <img class="slideshow-image" src="https://assets.gadgets360cdn.com/pricee/assets/product/202204/gulkanda_tales_story_1651234461.jpeg?downsize=680:*" alt="Slideshow Image 4">
+    </div>
+  </div>
+
+  <div class="meme-container">
+    <h2 class="meme-text">Aurangabad ka page banakar movie na honaa bol dena:</h2>
+    <img class="meme-image" src="https://d33wubrfki0l68.cloudfront.net/345156dd10fee0460c12319b9629f43b70b2987d/72ef2/img/templates/welcome-seh-lenge-thoda.jpg" alt="Meme Image">
+  </div>
+
+  <section class="footer">
+    <div class="box-container">
+        <div class="box">
+            <h3>Quick Links</h3>
+            <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+        </div>
+
+        <div class="box">
+            <h3>Extra Links</h3>
+            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+            <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+            <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+            <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+        </div>
+
+        <div class="box">
+            <h3>Contact info</h3>
+            <a href="#"><i class="fa fa-phone"></i>428416212</a>
+            <a href="#"><i class="fa fa-phone"></i>483481292</a>
+            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+        </div>
+
+        <div class="box">
+            <h3>Follow Us</h3>
+            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+            <a href="#"><i class="fa fa-twitter"></i>X</a>
+            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+        </div>
+    </div>
+
+    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+</section>
+
+  <script>
+    // JavaScript code for slideshow
+    let slideIndex = 0;
+    showSlides();
+
+    function showSlides() {
+      let i;
+      const slides = document.getElementsByClassName("slideshow-image");
+      for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";
+      }
+      slideIndex++;
+      if (slideIndex > slides.length) {
+        slideIndex = 1;
+      }
+      slides[slideIndex - 1].style.display = "block";
+      setTimeout(showSlides, 2000); // Change image every 2 seconds
+    }
+
+    // JavaScript code for typing animation
+    const text = "Yeh He Aurangabad!"; // Text to display
+    let index = 0;
+
+    function typeWriter() {
+      if (index < text.length) {
+        document.getElementById("typing-text").innerHTML += text.charAt(index);
+        index++;
+        setTimeout(typeWriter, 100); // Speed of typing animation (milliseconds)
+      }
+    }
+
+    typeWriter();
+  </script>
+
+</body>
+</html>
diff --git a/bollywood.css b/Bollywood/bollywood.css
similarity index 88%
rename from bollywood.css
rename to Bollywood/bollywood.css
index 6604451..11539d5 100644
--- a/bollywood.css
+++ b/Bollywood/bollywood.css
@@ -70,7 +70,7 @@ section{
 .header .navbar a{
     font-size: 1rem;
     margin-left: 2rem;
-    color: var(--white);
+    color: var(--black);
     text-decoration: none;
 }
 .header .navbar a:hover{
@@ -186,4 +186,36 @@ section{
     max-width: 700px; /* Set a maximum width if needed */
     margin-left: 300px;
     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4)
+}
+
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+
+.user-greeting {
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/Bollywood/bollywood.html b/Bollywood/bollywood.html
new file mode 100644
index 0000000..be7028f
--- /dev/null
+++ b/Bollywood/bollywood.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/Bollywood/bollywood.css">
+    <link rel="stylesheet" href="/headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <title>TravelHub | Bollywood Page</title>
+</head>
+<body>
+
+    <section class="header" >
+        <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+
+        <nav class="navbar">
+            <a href="/Homepage/index.html">Home</a>
+            <a href="/aboutUS/aboutUs.html">About</a>
+            <a href="/packages/city_package/packages.html">Packages</a>
+            <a href="/gallery/gallery.html">Gallery</a>
+            <a href="/Other/contactUs.html">Contact</a>
+            <div class="dropdown">
+                <a href="#" id="profile-button">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                    <span>Hi User</span>
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+                <ul class="dropdown-content">
+                    <li><a href="/user/profile.html">Dashboard</a></li>
+                </ul>
+            </div>
+        </nav>
+        
+    </section>
+
+<br><br><br> <br>
+<img src="/Bollywood/experience.png" class="experience-image">
+
+<h1 style="text-align: center;"> Experience the Magic of Bollywood Dreams with Us!</h1>
+<h5 style= "text-align: center; font-weight: normal;"> (Click on any of the 4 cities and see the magic ! ) </h5>
+<br>
+<div class="image">
+<img src="/Bollywood/map.png" usemap="#image_map" style="margin-left: 270px; padding: 20px; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);">
+<map name="image_map">
+    <area alt="" title="" href="/Bollywood/mumbaipin.html" coords="132,128,201,189" shape="rect">
+    <area alt="aurangabad" title="aurangabad" href="/Bollywood/aurangabadpin.html" coords="256,98,339,144" shape="rect">
+    <area alt="nagpur" title="nagpur" href="/Bollywood/nagpurpin.html" coords="452,22,526,79" shape="rect">
+    <area alt="pune" title="pune" href="/Bollywood/punepin.html" coords="199,184,261,232" shape="rect">
+  </map>
+
+</div>
+<br>
+
+<section class="footer">
+    <div class="box-container">
+        <div class="box">
+            <h3>Quick Links</h3>
+            <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+        </div>
+
+        <div class="box">
+            <h3>Extra Links</h3>
+            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+            <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+            <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+            <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+        </div>
+
+        <div class="box">
+            <h3>Contact info</h3>
+            <a href="#"><i class="fa fa-phone"></i>428416212</a>
+            <a href="#"><i class="fa fa-phone"></i>483481292</a>
+            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+        </div>
+
+        <div class="box">
+            <h3>Follow Us</h3>
+            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+            <a href="#"><i class="fa fa-twitter"></i>X</a>
+            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+        </div>
+    </div>
+
+    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/experience.png b/Bollywood/experience.png
similarity index 100%
rename from experience.png
rename to Bollywood/experience.png
diff --git a/map.png b/Bollywood/map.png
similarity index 100%
rename from map.png
rename to Bollywood/map.png
diff --git a/mumbaipin.html b/Bollywood/mumbaipin.html
similarity index 50%
rename from mumbaipin.html
rename to Bollywood/mumbaipin.html
index 9b56a9e..83d2fa5 100644
--- a/mumbaipin.html
+++ b/Bollywood/mumbaipin.html
@@ -3,90 +3,197 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-m0ymAf8Ok+5d67ClBVCK4fK2DXmKDb4XszFDS78WnC2jw5IVJLQHyorD5ZbhJfJp" crossorigin="anonymous">
 
+  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="headfoot.css">
   <title>Bollywood ki boli ft. Mumbai</title>
   <style>
-    /* Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
-
-    /* Colors */
-    :root {
-      --primary-color: rgb(66, 66, 255);
-      --background-color: #f2f2f2;
-      --text-color: #333333;
-      --conversation-bg: #f0f0f0;
-      --conversation-border: #ddd;
-      --main-color: white; /* Added main-color variable */
-      --light-white: rgba(255, 255, 255, 0.7); /* Added light-white variable */
-    }
-
-    /* Reset CSS */
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
 
-    body {
-      font-family: 'Montserrat', sans-serif;
-      background-color: var(--background-color);
-      color: var(--text-color);
-      line-height: 1.6;
-    }
-
-    .header {
-      position: fixed;
-      top: 0;
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
+
+* {
+    margin: 0;
+    margin-bottom: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
+
+html::-webkit-scrollbar {
+    width: 1rem;
+}
+html::-webkit-scrollbar-track{
+    background-color:var(--white);
+}
+html::-webkit-scrollbar-thumb{
+    background-color:var(--light-black);
+}
+
+section{
+    padding: 5rem 10%;
+}
+
+@keyframes fadeIn {
+    0% { transform: scale(0);
+        opacity: 0;
+    }
+}
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header .logo img
+{
+    height: 45px;
+    padding: 0;
+}
+.header .navbar{
+    margin-left:auto;
+}
+.header .navbar a{
+    font-size: 1rem;
+    margin-left: 2rem;
+    color: var(--black);
+    text-decoration: none;
+}
+.header .navbar a:hover{
+  text-decoration: underline;
+}
+/* media queires*/
+@media (max-width:1200px){
+    section{
+        padding: 3rem 5%;
+}
+}
+
+@media (max-width:991px){
+
+    html{
+        font-size: 55%;
+    }
+    section{
+        padding: 3rem 2rem;
+}
+}
+
+@media (max-width: 760px) {
+    .header .navbar {
+      position: absolute;
+      top: 99%;
       left: 0;
       right: 0;
+      background-color: var(--white);
+      border-top: var(--border);
+      padding: 2rem;
       z-index: 1001;
-      background-color: white;
-      display: flex;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-      box-shadow: var(--box-shadow);
-      padding-left: 10px;
-      align-items: center;
-      justify-content: space-between;
+      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     }
-
-    .header .logo img {
-      height: 45px;
-      padding: 0;
+  
+    .header .navbar.active {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     }
-
-    .header .navbar {
-      margin-left: auto;
-    }
-
+  
     .header .navbar a {
-      font-size: 1rem;
-      margin-left: 2rem;
-      color: black;
-      text-decoration: none;
-    }
-
-    .header .navbar a:hover {
-      text-decoration: underline;
-    }
-
-    nav {
-      background-color: var(--w);
+      display: block;
+      margin: 2rem;
       text-align: center;
-      padding: 10px 0;
-    }
-
-    nav a {
-      color: white;
-      text-decoration: none;
-      padding: 10px 20px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: rgba(255, 255, 255, 0.1);
     }
+  }
+@media (max-width:450px){
+
+    html{
+        font-size: 50%;
+    }
+
+}
+.footer {
+    /* background: url(footer.jpg) no-repeat; */
+    background-size: auto;
+    background-color: #333;
+    background-position: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 3rem;
+    z-index: 999; /* Set a lower z-index value */
+}
+
+.footer .box-container {
+    display: grid;
+    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+    gap: 3rem;
+    padding: 2rem;
+    padding-top: 2rem;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.footer .box-container .box h3 {
+    color: white;
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+}
+
+.footer .box-container .box a {
+    color: var(--light-white);
+    font-size: 1rem;
+    padding-bottom: 1rem;
+    display: block;
+    text-decoration: none;
+}
+
+.footer .box-container .box a i {
+    color: var(--main-color);
+    padding-right: .5rem;
+    transition: .2s linear;
+}
+
+.footer .box-container .box a:hover i {
+    padding-right: 2rem;
+}
+.footer .credit{
+    text-align: center;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: .1rem solid var(--light-white);
+    font-size: 1rem;
+    color: var(--light-white);
+}
+.footer .credit span{
+    color: var(--main-color);
+}
 
     .timeline {
       display: flex;
@@ -205,78 +312,101 @@
       }
     }
 
-    .footer {
-      background-size: auto;
-      background-color: #333;
-      background-position: center;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 3rem;
-      z-index: 999; /* Set a lower z-index value */
-      color: white;
-    }
-
-    .footer .box-container {
-      display: grid;
-      grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
-      gap: 3rem;
-      padding: 2rem;
-      padding-top: 2rem;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-
-    .footer .box-container .box h3 {
-      color: white;
-      font-size: 1.5rem;
-      padding-bottom: 1rem;
-    }
-
-    .footer .box-container .box a {
-      color: white;
-      font-size: 1rem;
-      padding-bottom: 1rem;
-      display: block;
-      text-decoration: none;
-    }
-
-    .footer .box-container .box a i {
-      color: var(--primary-color)!important;
-      padding-right: .5rem;
-      transition: .2s linear;
-    }
-
-    .footer .box-container .box a:hover i {
-      padding-right: 2rem;
-    }
-
-    .footer .credit {
-      text-align: center;
-      padding-top: 1rem;
-      margin-top: 1rem;
-      padding-bottom: 1rem;
-      border-top: .1rem solid var(--light-white);
-      font-size: 1rem;
-      color: var(--light-white);
-    }
-
-    .footer .credit span {
-      color: var(--main-color);
-    }
+    #LOGIN{
+   
+   font-weight: 500;
+   color: white;
+   background-color: black;
+   text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+   background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+   position: relative;
+   display: inline-block;
+   margin-left: 2rem;
+}
+#userProfileLink{
+   border-radius: 2rem;
+   padding: 10px;
+   background-color: #eaeaea;
+}
+#userProfileLink:hover{
+  
+   background-color: #e3e3e367;
+}
+
+.profile-circle {
+   margin-top: 0.2rem;
+   width: 100%;
+   height: 100%;
+   border-radius: 50%;
+   overflow: hidden;
+   margin-right: 10px;
+   position: relative;
+   display: inline;
+   top:3px;
+}
+
+.profile-circle img {
+   width: 19px;
+   height: 19px;
+   object-fit: contain;
+}
+
+.dropdown-content {
+   display: none;
+   position: absolute;
+   background-color: #f9f9f9;
+   min-width: 120px;
+   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+   z-index: 1;
+}
+
+.dropdown-content a {
+   color: black;
+   padding: 12px 16px;
+   text-decoration: none;
+   display: block;
+}
+
+.dropdown-content a:hover {
+   background-color: #f1f1f1;
+}
+
+.user-greeting {
+   vertical-align: middle;
+}
   </style>
 </head>
 <body>
-  <section class="header">
-    <a href="homepg.html" class="logo"><img src="logo.png"></a>
+  <section class="header" >
+    <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
     <nav class="navbar">
-        <a href="index.html">Home</a>
-        <a href="aboutUs.html">About</a>
-        <a href="packages.html">Packages</a>
-        <a href="gallery.html">Gallery</a>
-        <a href="contactUs.html"> Contact</a>
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="user-profile">
+            <div  id="userProfileLink">
+                <div class="profile-circle">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile">
+                </div>
+                <span class="user-greeting">Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+
+            </div>
+            <div class="dropdown-content" id="dropdownContent">
+                <a href="/user/profile.html">Dashboard</a>
+            </div>
+        </div>
     </nav>
-    <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
+    
 </section>
   <header>
     <h1>Bollywood ki boli ft. Mumbai</h1>
@@ -325,6 +455,7 @@ <h2>About</h2>
     </div>
 
     <div id="slideshow-container">
+
       <img class="slideshow-image" src="mumbolly1.png" alt="Slideshow Image 1">
       <img class="slideshow-image" src="mumbolly2.png" alt="Slideshow Image 2">
       <img class="slideshow-image" src="mumbolly3.png" alt="Slideshow Image 3">
@@ -335,36 +466,39 @@ <h2>About</h2>
   <section class="footer">
     <div class="box-container">
         <div class="box">
-            <h3>Quick Links</h3>
-            <a href="index.html"><i class="fas fa-angle-right"></i>Home</a>
-            <a href="aboutUs.html"><i class="fas fa-angle-right"></i>About</a>
-            <a href="packages.html"><i class="fas fa-angle-right"></i>Packages</a>
-            <a href="gallery.html"><i class="fas fa-angle-right"></i>Gallery</a>
-            <a href="contactUs.html"><i class="fas fa-angle-right"></i>Contact</a>
+          <h3>Quick Links</h3>
+          <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+          <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+          <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+          <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+          <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
         </div>
 
         <div class="box">
-            <h3>Extra Links</h3>
-            <a href="#"><i class="fas fa-angle-right"></i>ask questions</a>
-            <a href="faq.html"><i class="fas fa-angle-right"></i>faq</a>
-            <a href="#"><i class="fas fa-angle-right"></i>privacy policy</a>
-            <a href="t&c.html"><i class="fas fa-angle-right"></i>terms of use</a>
+          <h3>Extra Links</h3>
+          <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+          <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+          <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+          <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+
         </div>
 
         <div class="box">
             <h3>Contact info</h3>
-            <a href="#"><i class="fas fa-phone"></i>428416212</a>
-            <a href="#"><i class="fas fa-phone"></i>483481292</a>
-            <a href="#"><i class="fas fa-envelope"></i>travelhub@ves.ac.in</a>
-            <a href="#"><i class="fas fa-map"></i>mumbai,India - 400094</a>
+
+            <a href="#"><i class="fa fa-phone"></i>428416212</a>
+            <a href="#"><i class="fa fa-phone"></i>483481292</a>
+            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+
         </div>
 
         <div class="box">
             <h3>Follow Us</h3>
-            <a href="#"><i class="fab fa-facebook-f"></i>facebook</a>
-            <a href="#"><i class="fab fa-twitter"></i>twitter</a>
-            <a href="#"><i class="fab fa-instagram"></i>instagram</a>
-            <a href="#"><i class="fab fa-linkedin"></i>linkedin</a>
+            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+            <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
         </div>
     </div>
 
diff --git a/Bollywood/mumbolly1.jpg b/Bollywood/mumbolly1.jpg
new file mode 100644
index 0000000..baec0a3
Binary files /dev/null and b/Bollywood/mumbolly1.jpg differ
diff --git a/mumbolly1.png b/Bollywood/mumbolly1.png
similarity index 100%
rename from mumbolly1.png
rename to Bollywood/mumbolly1.png
diff --git a/Bollywood/mumbolly2.jpg b/Bollywood/mumbolly2.jpg
new file mode 100644
index 0000000..b9a9894
Binary files /dev/null and b/Bollywood/mumbolly2.jpg differ
diff --git a/mumbolly2.png b/Bollywood/mumbolly2.png
similarity index 100%
rename from mumbolly2.png
rename to Bollywood/mumbolly2.png
diff --git a/Bollywood/mumbolly3.jpg b/Bollywood/mumbolly3.jpg
new file mode 100644
index 0000000..f6b67bb
Binary files /dev/null and b/Bollywood/mumbolly3.jpg differ
diff --git a/mumbolly3.png b/Bollywood/mumbolly3.png
similarity index 100%
rename from mumbolly3.png
rename to Bollywood/mumbolly3.png
diff --git a/Bollywood/mumbolly4.jpg b/Bollywood/mumbolly4.jpg
new file mode 100644
index 0000000..6196924
Binary files /dev/null and b/Bollywood/mumbolly4.jpg differ
diff --git a/mumbolly4.png b/Bollywood/mumbolly4.png
similarity index 100%
rename from mumbolly4.png
rename to Bollywood/mumbolly4.png
diff --git a/Bollywood/nagpurpin.html b/Bollywood/nagpurpin.html
new file mode 100644
index 0000000..0ab17b8
--- /dev/null
+++ b/Bollywood/nagpurpin.html
@@ -0,0 +1,551 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="headfoot.css">
+  <title>Bollywood ki boli ft.Nagpur</title>
+  <style>
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
+
+* {
+    margin: 0;
+    margin-bottom: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
+
+html::-webkit-scrollbar {
+    width: 1rem;
+}
+html::-webkit-scrollbar-track{
+    background-color:var(--white);
+}
+html::-webkit-scrollbar-thumb{
+    background-color:var(--light-black);
+}
+
+section{
+    padding: 5rem 10%;
+}
+
+@keyframes fadeIn {
+    0% { transform: scale(0);
+        opacity: 0;
+    }
+}
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header .logo img
+{
+    height: 45px;
+    padding: 0;
+}
+.header .navbar{
+    margin-left:auto;
+}
+.header .navbar a{
+    font-size: 1rem;
+    margin-left: 2rem;
+    color: var(--black);
+    text-decoration: none;
+}
+.header .navbar a:hover{
+  text-decoration: underline;
+}
+/* media queires*/
+@media (max-width:1200px){
+    section{
+        padding: 3rem 5%;
+}
+}
+
+@media (max-width:991px){
+
+    html{
+        font-size: 55%;
+    }
+    section{
+        padding: 3rem 2rem;
+}
+}
+
+@media (max-width: 760px) {
+    .header .navbar {
+      position: absolute;
+      top: 99%;
+      left: 0;
+      right: 0;
+      background-color: var(--white);
+      border-top: var(--border);
+      padding: 2rem;
+      z-index: 1001;
+      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+    }
+  
+    .header .navbar.active {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    }
+  
+    .header .navbar a {
+      display: block;
+      margin: 2rem;
+      text-align: center;
+    }
+  }
+@media (max-width:450px){
+
+    html{
+        font-size: 50%;
+    }
+
+}
+.footer {
+    /* background: url(footer.jpg) no-repeat; */
+    background-size: auto;
+    background-color: #333;
+    background-position: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 3rem;
+    z-index: 999; /* Set a lower z-index value */
+}
+
+.footer .box-container {
+    display: grid;
+    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+    gap: 3rem;
+    padding: 2rem;
+    padding-top: 2rem;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.footer .box-container .box h3 {
+    color: white;
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+}
+
+.footer .box-container .box a {
+    color: var(--light-white);
+    font-size: 1rem;
+    padding-bottom: 1rem;
+    display: block;
+    text-decoration: none;
+}
+
+.footer .box-container .box a i {
+    color: var(--main-color);
+    padding-right: .5rem;
+    transition: .2s linear;
+}
+
+.footer .box-container .box a:hover i {
+    padding-right: 2rem;
+}
+.footer .credit{
+    text-align: center;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: .1rem solid var(--light-white);
+    font-size: 1rem;
+    color: var(--light-white);
+}
+.footer .credit span{
+    color: var(--main-color);
+}
+    .timeline {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .location {
+      opacity: 0;
+      transition: opacity 0.5s ease;
+      padding: 40px;
+      margin-bottom: 80px; /* Increased space between text box and image */
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      max-width: 800px;
+    }
+
+    .location:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+
+    .location.show {
+      opacity: 1;
+    }
+
+    .location img {
+      max-width: 400px;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+
+    .location .textbox {
+      background-color: var(--conversation-bg);
+      border-radius: 10px;
+      padding: 20px;
+      max-width: calc(100% - 350px); /* Adjusted width of the text box */
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      border: 1px solid var(--conversation-border);
+    }
+
+    .location .textbox h3 {
+      color: var(--primary-color);
+      margin-top: 0;
+      margin-bottom: 10px;
+    }
+
+    .location .textbox p {
+      color: var(--text-color);
+    }
+
+
+    #content-container {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+
+    #about {
+      width: 50%;
+
+      text-align: center; /* Center align text */
+
+      padding: 40px;
+      background-color: white;
+      border-radius: 10px;
+      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+      margin: 20px;
+      max-width: 400px;
+    }
+
+    #about h2 {
+      color: var(--primary-color);
+      margin-bottom: 20px;
+    }
+
+    #about p {
+      color: var(--text-color);
+    }
+
+    #slideshow-container {
+      width: 50%;
+      margin: 20px;
+      overflow: hidden;
+    }
+
+    .slideshow-image {
+      display: none;
+      width: 100%;
+      height: auto;
+    }
+
+    /* Meme styling */
+    .meme-container {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    .meme-image {
+      width: 100%; /* Adjust the width as needed */
+      max-width: 300px; /* Limit the maximum width */
+      display: block;
+      margin: 0 auto; /* Center align image */
+    }
+
+    .meme-text {
+      font-size: 24px; /* Adjust the font size as needed */
+      margin-top: 20px;
+      margin-bottom: 20px;
+      font: 1.5em sans-serif;
+    }
+
+    /* Typing animation styles */
+    .typing-animation {
+      text-align: center;
+      padding: 20px 0; /* Adjust the padding as needed */
+    }
+
+    .typing-animation h2 {
+      font-size: 46px; 
+      font-weight: bold;
+      font-family: fantasy;
+      color: #333; /* Adjust the color as needed */
+    }
+
+    @keyframes typing {
+      0% {
+        width: 0;
+      }
+      50% {
+        width: 50%;
+      }
+      100% {
+        width: 100%;
+      }
+    }
+
+    #LOGIN{
+   
+   font-weight: 500;
+   color: white;
+   background-color: black;
+   text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+   background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+   position: relative;
+   display: inline-block;
+   margin-left: 2rem;
+}
+#userProfileLink{
+   border-radius: 2rem;
+   padding: 10px;
+   background-color: #eaeaea;
+}
+#userProfileLink:hover{
+  
+   background-color: #e3e3e367;
+}
+
+.profile-circle {
+   margin-top: 0.2rem;
+   width: 100%;
+   height: 100%;
+   border-radius: 50%;
+   overflow: hidden;
+   margin-right: 10px;
+   position: relative;
+   display: inline;
+   top:3px;
+}
+
+.profile-circle img {
+   width: 19px;
+   height: 19px;
+   object-fit: contain;
+}
+
+.dropdown-content {
+   display: none;
+   position: absolute;
+   background-color: #f9f9f9;
+   min-width: 120px;
+   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+   z-index: 1;
+}
+
+.dropdown-content a {
+   color: black;
+   padding: 12px 16px;
+   text-decoration: none;
+   display: block;
+}
+
+.dropdown-content a:hover {
+   background-color: #f1f1f1;
+}
+
+.user-greeting {
+   vertical-align: middle;
+}
+  
+  </style>
+</head>
+<body>
+  <section class="header" >
+    <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+
+    <nav class="navbar">
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="user-profile">
+            <div  id="userProfileLink">
+                <div class="profile-circle">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile">
+                </div>
+                <span class="user-greeting">Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+
+            </div>
+            <div class="dropdown-content" id="dropdownContent">
+                <a href="/user/profile.html">Dashboard</a>
+            </div>
+        </div>
+    </nav>
+    
+</section>
+
+  <section class="typing-animation" style="font-size: 40px;margin-right: 20px;margin-left: 20px;">
+    <p id="typing-text"></p>
+  </section>
+
+
+  <div id="content-container">
+    <div id="about">
+      <h2>About</h2>
+      <p>Oops! We didn't find many Bollywood movies finding their inspiration in Nagpur, but we did find some other movies which were shot here.</p>
+    </div>
+
+    <div id="slideshow-container">
+      <img class="slideshow-image" src="https://english.cdn.zeenews.com/sites/default/files/2022/03/05/1019950-jhund.jpg" alt="Slideshow Image 1">
+      <img class="slideshow-image" src="https://assets-in.bmscdn.com/discovery-catalog/events/et00366904-vbtrrvqhtk-landscape.jpg">
+      <img class="slideshow-image" src="https://www.nagpurtoday.in/wp-content/uploads/2019/09/NF-SM1-600x338.jpg" alt="Slideshow Image 3">
+      <img class="slideshow-image" src="https://assets-in.bmscdn.com/discovery-catalog/events/et00363708-yzrcaxptvn-landscape.jpg" alt="Slideshow Image 4">
+    </div>
+  </div>
+
+  <div class="meme-container">
+    <h2 class="meme-text">Nagpur ka page banakar movie na honaa:</h2>
+    <img class="meme-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVZwmcV6vPoqykXqdQCb1qI-WsZS_apaqwjg&usqp=CAU" alt="Meme Image">
+  </div>
+
+  <section class="footer">
+    <div class="box-container">
+        <div class="box">
+            <h3>Quick Links</h3>
+            <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+        </div>
+
+        <div class="box">
+            <h3>Extra Links</h3>
+            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+            <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+            <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+            <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+        </div>
+
+        <div class="box">
+            <h3>Contact info</h3>
+            <a href="#"><i class="fa fa-phone"></i>428416212</a>
+            <a href="#"><i class="fa fa-phone"></i>483481292</a>
+            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+        </div>
+
+        <div class="box">
+            <h3>Follow Us</h3>
+            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+            <a href="#"><i class="fa fa-twitter"></i>X</a>
+            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+        </div>
+    </div>
+
+    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+</section>
+
+<script>
+  window.addEventListener('scroll', function() {
+    let locations = document.querySelectorAll('.location');
+    locations.forEach(location => {
+      if (isElementInViewport(location)) {
+        location.classList.add('show');
+      }
+    });
+  });
+
+  function isElementInViewport(el) {
+    var rect = el.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  // Typing animation
+  const text = "Yeh He Bombay Meri Jaan"; // Text to display
+  let index = 0;
+
+  function typeWriter() {
+    if (index < text.length) {
+      document.getElementById("typing-text").innerHTML += text.charAt(index);
+      index++;
+      setTimeout(typeWriter, 100); // Speed of typing animation (milliseconds)
+    }
+  }
+
+  typeWriter();
+
+  // Slideshow
+  let slideIndex = 0;
+  showSlides();
+
+  function showSlides() {
+    let i;
+    const slides = document.getElementsByClassName("slideshow-image");
+    for (i = 0; i < slides.length; i++) {
+      slides[i].style.display = "none";
+    }
+    slideIndex++;
+    if (slideIndex > slides.length) {
+      slideIndex = 1;
+    }
+    slides[slideIndex - 1].style.display = "block";
+    setTimeout(showSlides, 2000); // Change image every 2 seconds
+  }
+</script>
+</body>
+</html>
diff --git a/pune.webp b/Bollywood/pune.webp
similarity index 100%
rename from pune.webp
rename to Bollywood/pune.webp
diff --git a/pune1.jpg b/Bollywood/pune1.jpg
similarity index 100%
rename from pune1.jpg
rename to Bollywood/pune1.jpg
diff --git a/punepin.html b/Bollywood/punepin.html
similarity index 65%
rename from punepin.html
rename to Bollywood/punepin.html
index d3c8393..4a90293 100644
--- a/punepin.html
+++ b/Bollywood/punepin.html
@@ -3,42 +3,67 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="headfoot.css">
   <title>Bollywood ki boli ft. Pune</title>
   <style>
-    /* Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
 
-    /* Colors */
-    :root {
-      --primary-color: #474747;
-  
-      --background-color: #f2f2f2;
-      --text-color: #333333;
-      --conversation-bg: #f0f0f0;
-      --conversation-border: #ddd;
-    }
+* {
+    margin: 0;
+    margin-bottom: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
 
-    /* Reset CSS */
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
 
-    body {
-      font-family: 'Montserrat', sans-serif;
-      background-color: var(--background-color);
-      color: var(--text-color);
-      line-height: 1.6;
-    }
+html::-webkit-scrollbar {
+    width: 1rem;
+}
+html::-webkit-scrollbar-track{
+    background-color:var(--white);
+}
+html::-webkit-scrollbar-thumb{
+    background-color:var(--light-black);
+}
 
-    .header {
+section{
+    padding: 5rem 10%;
+}
+
+@keyframes fadeIn {
+    0% { transform: scale(0);
+        opacity: 0;
+    }
+}
+.header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1001;
-    background-color: white;
+    background-color: var(--white);
     display: flex;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -59,29 +84,115 @@
 .header .navbar a{
     font-size: 1rem;
     margin-left: 2rem;
-    color:black;
+    color: var(--black);
     text-decoration: none;
 }
 .header .navbar a:hover{
   text-decoration: underline;
 }
-    nav {
-      background-color: var(--w);
-      text-align: center;
-      padding: 10px 0;
+/* media queires*/
+@media (max-width:1200px){
+    section{
+        padding: 3rem 5%;
+}
+}
+
+@media (max-width:991px){
+
+    html{
+        font-size: 55%;
     }
+    section{
+        padding: 3rem 2rem;
+}
+}
 
-    nav a {
-      color: white;
-      text-decoration: none;
-      padding: 10px 20px;
-      transition: background-color 0.3s ease;
+@media (max-width: 760px) {
+    .header .navbar {
+      position: absolute;
+      top: 99%;
+      left: 0;
+      right: 0;
+      background-color: var(--white);
+      border-top: var(--border);
+      padding: 2rem;
+      z-index: 1001;
+      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+    }
+  
+    .header .navbar.active {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     }
+  
+    .header .navbar a {
+      display: block;
+      margin: 2rem;
+      text-align: center;
+    }
+  }
+@media (max-width:450px){
 
-    nav a:hover {
-      background-color: rgba(255, 255, 255, 0.1);
+    html{
+        font-size: 50%;
     }
 
+}
+.footer {
+    /* background: url(footer.jpg) no-repeat; */
+    background-size: auto;
+    background-color: #333;
+    background-position: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 3rem;
+    z-index: 999; /* Set a lower z-index value */
+}
+
+.footer .box-container {
+    display: grid;
+    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+    gap: 3rem;
+    padding: 2rem;
+    padding-top: 2rem;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.footer .box-container .box h3 {
+    color: white;
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+}
+
+.footer .box-container .box a {
+    color: var(--light-white);
+    font-size: 1rem;
+    padding-bottom: 1rem;
+    display: block;
+    text-decoration: none;
+}
+
+.footer .box-container .box a i {
+    color: var(--main-color);
+    padding-right: .5rem;
+    transition: .2s linear;
+}
+
+.footer .box-container .box a:hover i {
+    padding-right: 2rem;
+}
+.footer .credit{
+    text-align: center;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: .1rem solid var(--light-white);
+    font-size: 1rem;
+    color: var(--light-white);
+}
+.footer .credit span{
+    color: var(--main-color);
+}
     .timeline {
       display: flex;
       flex-direction: column;
@@ -198,77 +309,103 @@
         width: 100%;
       }
     }
-
-    .footer {
-    /* background: url(footer.jpg) no-repeat; */
-    background-size: auto;
-    background-color: #333;
-    background-position: center;
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-top: 3rem;
-    z-index: 999; /* Set a lower z-index value */
+    #LOGIN{
+   
+   font-weight: 500;
+   color: white;
+   background-color: black;
+   text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
 }
-
-.footer .box-container {
-    display: grid;
-    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
-    gap: 3rem;
-    padding: 2rem;
-    padding-top: 2rem;
-    margin-bottom: 0;
-    padding-bottom: 0;
+#LOGIN :hover{
+   background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+   position: relative;
+   display: inline-block;
+   margin-left: 2rem;
+}
+#userProfileLink{
+   border-radius: 2rem;
+   padding: 10px;
+   background-color: #eaeaea;
+}
+#userProfileLink:hover{
+  
+   background-color: #e3e3e367;
 }
 
-.footer .box-container .box h3 {
-    color: white;
-    font-size: 1.5rem;
-    padding-bottom: 1rem;
+.profile-circle {
+   margin-top: 0.2rem;
+   width: 100%;
+   height: 100%;
+   border-radius: 50%;
+   overflow: hidden;
+   margin-right: 10px;
+   position: relative;
+   display: inline;
+   top:3px;
 }
 
-.footer .box-container .box a {
-    color: var(--light-white);
-    font-size: 1rem;
-    padding-bottom: 1rem;
-    display: block;
-    text-decoration: none;
+.profile-circle img {
+   width: 19px;
+   height: 19px;
+   object-fit: contain;
 }
 
-.footer .box-container .box a i {
-    color: var(--main-color);
-    padding-right: .5rem;
-    transition: .2s linear;
+.dropdown-content {
+   display: none;
+   position: absolute;
+   background-color: #f9f9f9;
+   min-width: 120px;
+   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+   z-index: 1;
 }
 
-.footer .box-container .box a:hover i {
-    padding-right: 2rem;
+.dropdown-content a {
+   color: black;
+   padding: 12px 16px;
+   text-decoration: none;
+   display: block;
 }
-.footer .credit{
-    text-align: center;
-    padding-top: 1rem;
-    margin-top: 1rem;
-    padding-bottom: 1rem;
-    border-top: .1rem solid var(--light-white);
-    font-size: 1rem;
-    color: var(--light-white);
+
+.dropdown-content a:hover {
+   background-color: #f1f1f1;
 }
-.footer .credit span{
-    color: var(--main-color);
+
+.user-greeting {
+   vertical-align: middle;
 }
+
+   
   </style>
 </head>
 <body>
-  <section class="header">
-    <a href="homepg.html" class="logo"><img src="logo.png"></a>
+  <section class="header" >
+    <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
     <nav class="navbar">
-        <a href="index.html">Home</a>
-        <a href="aboutUs.html">About</a>
-        <a href="packages.html">Packages</a>
-        <a href="gallery.html">Gallery</a>
-        <a href="contactUs.html"> Contact</a>
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="user-profile">
+            <div  id="userProfileLink">
+                <div class="profile-circle">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile">
+                </div>
+                <span class="user-greeting">Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+
+            </div>
+            <div class="dropdown-content" id="dropdownContent">
+                <a href="/user/profile.html">Dashboard</a>
+            </div>
+        </div>
     </nav>
-    <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
+    
 </section>
   <header>
     <h1>Bollywood ki boli ft. Pune</h1>
@@ -328,19 +465,19 @@ <h2>About</h2>
     <div class="box-container">
         <div class="box">
             <h3>Quick Links</h3>
-            <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-            <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-            <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-            <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+            <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
         </div>
 
         <div class="box">
-            <h3>Extra Links</h3>
-            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-            <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+          <h3>Extra Links</h3>
+          <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+          <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+          <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+          <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
         </div>
 
         <div class="box">
@@ -412,8 +549,10 @@ <h3>Follow Us</h3>
         slideIndex = 1;
       }
       slides[slideIndex - 1].style.display = "block";
+
       setTimeout(showSlides, 2000); // Change image every 2 seconds
+
     }
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/FAQhome.jpg b/Homepage/FAQhome.jpg
similarity index 100%
rename from FAQhome.jpg
rename to Homepage/FAQhome.jpg
diff --git a/adventure.png b/Homepage/adventure.png
similarity index 100%
rename from adventure.png
rename to Homepage/adventure.png
diff --git a/binoculars.png b/Homepage/binoculars.png
similarity index 100%
rename from binoculars.png
rename to Homepage/binoculars.png
diff --git a/Homepage/blogs.png b/Homepage/blogs.png
new file mode 100644
index 0000000..08a9711
Binary files /dev/null and b/Homepage/blogs.png differ
diff --git a/bollyhome.png b/Homepage/bollyhome.png
similarity index 100%
rename from bollyhome.png
rename to Homepage/bollyhome.png
diff --git a/booking.png b/Homepage/booking.png
similarity index 100%
rename from booking.png
rename to Homepage/booking.png
diff --git a/Homepage/currency.png b/Homepage/currency.png
new file mode 100644
index 0000000..a0e279d
Binary files /dev/null and b/Homepage/currency.png differ
diff --git a/Homepage/googlemap.png b/Homepage/googlemap.png
new file mode 100644
index 0000000..0df6b6b
Binary files /dev/null and b/Homepage/googlemap.png differ
diff --git a/index.css b/Homepage/index.css
similarity index 69%
rename from index.css
rename to Homepage/index.css
index 7282e34..8f044dc 100644
--- a/index.css
+++ b/Homepage/index.css
@@ -42,6 +42,7 @@ section{
         opacity: 0;
     }
 }
+
 .header {
     position: fixed;
     top: 0;
@@ -75,6 +76,225 @@ section{
 .header .navbar a:hover{
   text-decoration: underline;
 }
+
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+ .profile-circle {
+    margin-top: 0.2rem;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 10px;
+    position: relative;
+    display: inline;
+    top:3px;
+    width: 19px;
+    height: 19px;
+    object-fit: contain;
+}
+.navbar a {
+    display: inline-block;
+    position: relative;
+    list-style: none;
+    text-decoration: none;
+}
+#profile-button{
+    min-width: 120px;
+    padding: 10px 15px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    /* border-radius: 30%; */
+}
+.navbar .dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.navbar .dropdown-content {
+    display: none;
+    position: absolute;
+    width: auto;
+    z-index: 999;
+}
+
+.navbar .dropdown-content li {
+    background-color: rgba(255, 255, 255, 0.831);
+    position: relative;
+    left: 33px;
+    padding: 9px;
+    display: block;
+    
+}
+
+.navbar .dropdown-content li a {
+    display: block;
+    padding: 10px 15px;
+    color: black;
+    margin-left: 0;
+    text-align: center;
+    
+    
+    
+}
+.dropdown-content a{
+    
+}
+.navbar .dropdown-content li a:hover {
+    /* background-color: rgba(255, 255, 255, 0.687); */
+    text-decoration: none;
+}
+
+.navbar .dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.user-greeting {
+    vertical-align: middle;
+}
+
+.contenttag {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 50px;
+}
+
+.left-section, .right-section {
+    flex: 1;
+}
+
+.left-section {
+    text-align: center; /* Center text horizontally */
+}
+
+.left-section h1 {
+    font-size: 48px;
+    font-weight: bold;
+    position: relative;
+    display: inline-block;
+}
+.right-section img{
+    width: 30rem;
+}
+.strike {
+    /* background-image: url('suffer.png'); Replace 'path/to/your/image.jpg' with the path to your background image */
+    background-size: cover;
+    position: relative;
+}
+
+.strike::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 4px;
+    background-color: black;
+    transform-origin: bottom left;
+    transform: translateY(-50%) scaleX(0);
+    animation: strikethroughAnimation 1s forwards;
+}
+
+@keyframes strikethroughAnimation {
+    0% {
+        transform: translateY(-50%) scaleX(0);
+    }
+    100% {
+        transform: translateY(-50%) scaleX(1);
+    }
+}
+
+
+
+.popup-overlay 
+    {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5); /* Transparent black background */
+        z-index: 9999;
+  }
+  .popup-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff; /* Popup background color */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Box shadow for the popup */
+    max-width: 80%; /* Maximum width of the popup */
+  }
+  .close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 20px;
+    color: #555; /* Close button color */
+  }
+  .contenttag {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .typing-animation {
+    text-align: center;
+  }
+/* Arrow animation styles */
+.arrow {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.arrow-down {
+    width: 0;
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-top: 30px solid black;
+    position: relative;
+    margin: auto;
+    animation: arrowAnimation 1s infinite;
+}
+
+@keyframes arrowAnimation {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
 #menu-btn{
     font-size: 2.5rem;
     cursor: pointer;
@@ -89,7 +309,7 @@ section{
 
 .services {
     margin-bottom:0;
-    padding-bottom: 30px; /* Adjust the margin as needed */
+    padding-bottom: 0px; /* Adjust the margin as needed */
 }
 .services .box-container{
     display: grid;
@@ -158,6 +378,11 @@ section{
     }
 
 }
+#maha{
+    color: rgba(255, 255, 255, 0.669);
+    font-size: 8rem;
+    text-transform: capitalize ;
+}
 
 
 .footer {
@@ -310,7 +535,7 @@ animation: fadeIn .3s linear backwards .4s;
 
 /* Bolly text */
 .bolly
-{
+{ 
     width: 100%;
     padding: 78px 0px;
 }
@@ -321,6 +546,7 @@ animation: fadeIn .3s linear backwards .4s;
 }
 .bolly-text
 {
+    text-align: justify;
     width: 550px;
 }
 .main
@@ -527,6 +753,7 @@ justify-content: flex-end;
 }
 .about-text
 {
+    text-align: justify;
     width: 550px;
 }
 .main
@@ -622,3 +849,31 @@ justify-content: flex-end;
     border-radius: 50%;
     margin-top: 1rem;
 }
+.featureBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0px; /* Adjust margin as needed */
+}
+
+.boxf {
+    width: 150px; /* Adjust width as needed */
+    height: 150px; /* Adjust height as needed */
+    background-color: #ffffff; /* Adjust background color as needed */
+    margin-right: 10px; /* Adjust margin as needed */
+    border-radius: 10px; /* Adjust border radius as needed */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: box-shadow 0.3s ease; /* Adding transition for smooth effect */
+}
+
+.boxf:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adding box shadow on hover */
+}
+
+.boxf img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
diff --git a/index.html b/Homepage/index.html
similarity index 52%
rename from index.html
rename to Homepage/index.html
index 768a94c..660802e 100644
--- a/index.html
+++ b/Homepage/index.html
@@ -4,12 +4,14 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>home</title>
+
+    <title>TravelHub | Homepage</title>
+
     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="/Homepage/index.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 </head>
 
@@ -20,60 +22,73 @@
 <br>
 <header>
     <section class="header" >
-        <a href="homepg.html" class="logo"><img src="logoabout.png"></a>
+        <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
         <nav class="navbar">
-            <a href="index.html">Home</a>
-            <a href="aboutUs.html">About</a>
-            <a href="packages/city_package/packages.html">Packages</a>
-            <a href="gallery.html">Gallery</a>
-            <a href="contactUs.html"> Contact</a>
+            <a href="/Homepage/index.html">Home</a>
+            <a href="/aboutUS/aboutUs.html">About</a>
+            <a href="/packages/city_package/packages.html">Packages</a>
+            <a href="/gallery/gallery.html">Gallery</a>
+            <a href="/Other/contactUs.html">Contact</a>
+            <div class="dropdown">
+                <a href="#" id="profile-button">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                    <span>Hi User</span>
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+                <ul class="dropdown-content">
+                    <li><a href="/user/profile.html">Dashboard</a></li>
+                </ul>
+            </div>
         </nav>
+        
         <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
     </section>
 </header>
+
 <!-- slider section  -->
+
 <section class="home">
     <div class="swiper home-slider">
         <div class="swiper-wrapper">
 
             <!-- Slide 1 -->
-            <div class="swiper-slide slide" style="background: url(maha3.jpg) no-repeat; background-size: cover;">
+            <div class="swiper-slide slide" style="background: url(/Homepage/maha1.jpg) no-repeat; background-size: cover;">
                 <div class="content">
                     <span>explore, discover, travel </span>
-                    <h2>Maharashtra </h2>
+                    <h2 id="maha">MAHARASHTRA</h2>
                     <span>like never before</span>
-                    <a href="packages/city_package/packages.html" class="btn" style="text-decoration: none;">Explore now</a>
+                    <a href="/packages/city_package/packages.html" class="btn" style="text-decoration: none;">Explore now</a>
                 </div>
             </div>
 
             <!-- Slide 2 -->
-            <div class="swiper-slide slide" style="background: url(maha2.jpg) no-repeat; background-size: cover;">
+            <div class="swiper-slide slide" style="background: url(/Homepage/maha2.jpg) no-repeat; background-size: cover;">
                 <div class="content">
                     <span>explore, discover, travel </span>
-                    <h2>Maharashtra </h2>
+                    <h2 id="maha">MAHARASHTRA</h2>
                     <span>like never before</span>
-                    <a href="packages/city_package/packages.html" class="btn"style="text-decoration: none;">Explore now</a>
+                    <a href="/packages/city_package/packages.html" class="btn"style="text-decoration: none;">Explore now</a>
                 </div>
             </div>
 
             <!-- Slide 3 -->
-            <div class="swiper-slide slide" style="background: url(maha1.jpg) no-repeat; background-size: cover;">
+            <div class="swiper-slide slide" style="background: url(/Homepage/maha3.jpg) no-repeat; background-size: cover;">
                 <div class="content">
                     <span>explore, discover, travel </span>
-                    <h2>Maharashtra </h2>
+                    <h2 id="maha">MAHARASHTRA</h2>
                     <span>like never before</span>
-                    <a href="packages/city_package/packages.html" class="btn" style="text-decoration: none;">Explore now</a>
+                    <a href="/packages/city_package/packages.html" class="btn" style="text-decoration: none;">Explore now</a>
                 </div>
             </div>
 
             <!-- Slide 4 -->
-            <div class="swiper-slide slide" style="background: url(maha4.jpg) no-repeat; background-size: cover;">
+            <div class="swiper-slide slide" style="background: url(/Homepage/maha4.jpg) no-repeat; background-size: cover;">
                 <div class="content">
                     <span>explore, discover, travel </span>
-                    <h2>Maharashtra </h2>
+                    <h2 id="maha">MAHARASHTRA</h2>
                     <span>like never before</span>
-                    <a href="packages/city_package/packages.html" class="btn" style="text-decoration: none;">Explore now</a>
+                    <a href="/packages/city_package/packages.html" class="btn" style="text-decoration: none;">Explore now</a>
                 </div>
             </div>
         </div>
@@ -81,6 +96,12 @@ <h2>Maharashtra </h2>
         <div class="swiper-button-prev"></div>
     </div>
 </section>
+
+<br>
+<div class="arrow">
+    <div class="arrow-down"></div>
+</div>
+
 <!--Why Maharashtra ?-->
 <br>
 <section class="mission">
@@ -90,74 +111,60 @@ <h1 style="line-height: 60px;"> Discover Maharashtra: Your Next Travel Bliss!</h
             <p>
                 Discover the enchanting allure of Maharashtra's capital, Mumbai, a city that never sleeps and pulses with the energy of dreams. From the iconic Gateway of India to the glitz of Bollywood, Mumbai is a kaleidoscope of experiences, promising both glamour and authenticity. </p>
 
-<p> As you venture beyond the urban sprawl, Maharashtra unfolds its natural wonders. The Western Ghats cradle mist-kissed hill stations like Mahabaleshwar and Matheran, offering a sanctuary for those seeking respite from the hustle of everyday life. Picture-perfect landscapes, verdant valleys, and meandering rivers create a canvas that captures the essence of tranquility.</p>
+<p> As you venture beyond the urban sprawl, Maharashtra unfolds its natural wonders. The Western Ghats cradle mist-kissed hill stations like Mahabaleshwar and Matheran, offering a sanctuary for those seeking respite from the hustle of everyday life.</p>
             </p>
         </div>
-        <img src="mahadesc.png" class="mission-img" style="margin-bottom: 90px;">
+        <img src="/Homepage/mahadesc.png" class="mission-img" style="margin-bottom: 90px;">
     </div>
 </section>
 
-<section class="about" style="margin-top: 0; padding-top: 0;margin-bottom: 0; padding-bottom: 0;">
-    <div class="main">
-        <img src="food.png">
-        <div class="about-text">
-            <h1 style="line-height: 60px;">Tantalizing Tastes of Maharashtra</h1>
-            <h5 style="align-items: center;">"A Culinary Journey Through Mumbai's Streets and Maharashtrian Delicacies"</h5>
-            <p>
-                For the food connoisseur, Maharashtra is a gastronomic delight. Indulge in the eclectic flavors of Mumbai street food, savor the delectable Maharashtrian cuisine, and relish the authenticity of local specialties like vada pav, pav bhaji, and puran poli.
-            </p>
-        
+<hr style="margin-bottom: 10px;">
+<!-- serivces section -->
+<section class="services" style="margin-top: 0; padding-top: 0;">
+    <h1 class="heading-title" style="margin-left: 410px; margin-top: 30px;font-size: 2rem; margin-bottom: 8px;"> Our Services</h1>
+    <div class="box-container" style="padding-left: 200px;">
+
+        <div class="box">
+            <img src="/Homepage/binoculars.png" style="height: 100px; width: 100px; margin: 0;padding: 0;">
+            <h3>adventures</h3>
         </div>
-    </div>
-</section>
 
-<img src="text.png " style="margin-left: 150px; margin-top: 0; padding-top: 0;">
+        <div class="box" style="padding-left: 25px;">
+            <img src="/Homepage/itinerary.png" style="height: 100px; width: 100px;">
+            <h3 style="width: 150px;">Curated itinerary</h3>
+        </div>
 
- 
-<hr>
-    <!-- services sections -->
-    <section class="services" style="margin-top: 0; padding-top: 0;">
-        <h1 class="heading-title" style="margin-left: 410px; margin-top: 30px;font-size: 2rem; margin-bottom: 8px;"> Our Services</h1>
-        <div class="box-container" style="padding-left: 200px;">
-
-            <div class="box">
-                <img src="binoculars.png" style="height: 100px; width: 100px; margin: 0;padding: 0;">
-                <h3>adventures</h3>
-            </div>
+        <div class="box">
+            <img src="/Homepage/opinions.png" style="height: 100px; width: 100px;">
+            <h3 style="width: 150px;">Expert suggestions</h3>
+        </div>
 
-            <div class="box" style="padding-left: 25px;">
-                <img src="itineraries.png" style="height: 100px; width: 100px;">
-                <h3 style="width: 150px;">Curated itinerary</h3>
-            </div>
+        <div class="box">
+            <img src="/Homepage/money.png" style="height: 100px; width: 100px;">
+            <h3 style="width: 150px;">Cost efficient solutions</h3>
+        </div>
 
-            <div class="box">
-                <img src="opinions.png" style="height: 100px; width: 100px;">
-                <h3 style="width: 150px;">Expert suggestions</h3>
-            </div>
+        <div class="box">
+            <img src="/Homepage/partners.png" style="height: 100px; width: 100px;">
+            <h3 style="width: 150px;"> exclusive communtiy</h3>
+        </div>
 
-            <div class="box">
-                <img src="money.png" style="height: 100px; width: 100px;">
-                <h3 style="width: 150px;">Cost efficient solutions</h3>
-            </div>
+    
+    </div>
+</section>
 
-            <div class="box">
-                <img src="partners.png" style="height: 100px; width: 100px;">
-                <h3 style="width: 150px;"> exclusive communtiy</h3>
-            </div>
 
-        
-        </div>
-    </section>
-    <hr>
+ 
+<hr style="margin-top: 20px; margin-bottom: 10px;">
 <!--bollywood references-->
 <section class="bolly">
     <div class="main">
-        <img src="bollyhome.png">
+        <img src="/Homepage/bollyhome.png">
       
         <div class="bolly-text">
             <h1>Bollywood Buff?</h1>
             <h5>Get to live your favourite bollyood dreams with us!</h5>
-            <button type="button"><a href="bollywood.html" style="color: white; text-decoration: none;">Explore now</a></button>
+            <button type="button"><a href="/Bollywood/bollywood.html" style="color: white; text-decoration: none;">Explore now</a></button>
         </div>
         
     </div>
@@ -172,9 +179,9 @@ <h1 style=" font-size: 40px; margin-left: 350px;padding: 0;margin-top: 0;"> Wait
            
             <p>Welcome to TravelHub, your ultimate destination for seamless travel planning! At TravelHub, we believe in transforming your travel dreams into unforgettable experiences. Our user-friendly platform empowers you to create personalized itineraries, ensuring every journey is tailored to your unique preferences and interests.</p>
                 <p>Explore the world with confidence, guided by TravelHub's intuitive tools and curated recommendations. Join us as we redefine the way you plan and embark on your next adventure.</p>
-            <button type="button" style="margin-left: 400px;"><a href="aboutUs.html" style="color: white; text-decoration: none;">Learn More</a></button>
+            <button type="button" style="margin-left: 400px;"><a href="/aboutUS/aboutUs.html" style="color: white; text-decoration: none;">Learn More</a></button>
         </div>
-        <img src="logoabout.png" class="logo-img" style="margin-bottom: 90px; height: 200px; width:300px;">
+        <img src="/Homepage/logoabout.png" class="logo-img" style="margin-bottom: 90px; height: 200px; width:420px;">
     </div>
 </section>
 
@@ -182,7 +189,7 @@ <h1 style=" font-size: 40px; margin-left: 350px;padding: 0;margin-top: 0;"> Wait
 
 <!-- WHY CHOOSE US?-->
 <hr>
-<h1 style=" font-size: 40px; margin-left: 370px; margin-bottom:0; padding-bottom: 0;"> Why Choose Us You say?</h1>
+<h1 style=" font-size: 40px; margin-left: 370px; margin-bottom:0; padding-bottom: 2rem;padding-top:1rem;"> Why Choose Us You say?</h1>
 <h5 class="heading-title" style="margin-left: 230px; margin-top:0 ;font-size: 2rem; margin-bottom: 20px;"> We have plenty of reasons for you to choose us!</h5>
 
 
@@ -190,7 +197,7 @@ <h5 class="heading-title" style="margin-left: 230px; margin-top:0 ;font-size: 2r
     <div class="card-deck" style="flex-wrap: wrap; margin: 0;">
 
         <div class="card">
-            <img src="adventure.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
+            <img src="/Homepage/adventure.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
             <div class="card-body">
                 <h5 class="card-title" style="font-size: 20px;">Unmatched Adventures</h5>
                 <p class="card-text" style="font-size: 14px;">
@@ -200,7 +207,7 @@ <h5 class="card-title" style="font-size: 20px;">Unmatched Adventures</h5>
         </div>
 
         <div class="card">
-            <img src="itinerary.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
+            <img src="/Homepage/itinerary.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
             <div class="card-body">
                 <h5 class="card-title" style="font-size: 20px;">Personalized Itineraries</h5>
                 <p class="card-text" style="font-size: 14px;">
@@ -210,7 +217,7 @@ <h5 class="card-title" style="font-size: 20px;">Personalized Itineraries</h5>
         </div>
 
         <div class="card">
-            <img src="satisfaction.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
+            <img src="/Homepage/satisfaction.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
             <div class="card-body">
                 <h5 class="card-title" style="font-size: 20px;">Customer Satisfaction</h5>
                 <p class="card-text" style="font-size: 14px;">
@@ -220,7 +227,7 @@ <h5 class="card-title" style="font-size: 20px;">Customer Satisfaction</h5>
         </div>
 
         <div class="card">
-            <img src="social-media.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
+            <img src="/Homepage/social-media.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
             <div class="card-body">
                 <h5 class="card-title" style="font-size: 20px;">Social Media Presence</h5>
                 <p class="card-text" style="font-size: 14px;">
@@ -230,7 +237,7 @@ <h5 class="card-title" style="font-size: 20px;">Social Media Presence</h5>
         </div>
 
         <div class="card">
-            <img src="booking.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
+            <img src="/Homepage/booking.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
             <div class="card-body">
                 <h5 class="card-title" style="font-size: 20px;">Easy Booking & Transparent Pricing</h5>
                 <p class="card-text" style="font-size: 14px;">
@@ -240,14 +247,15 @@ <h5 class="card-title" style="font-size: 20px;">Easy Booking & Transparent Prici
         </div>
 
         <div class="card">
-            <img src="booking.png" class="card-img-top" alt="Card image cap" style="height: 120px;">
+            <img src="/Homepage/partners.png" class="card-img-top" alt="Card image cap" style="height: 120px; width: auto;">
             <div class="card-body">
-                <h5 class="card-title" style="font-size: 20px;">Easy Booking & Transparent Pricing</h5>
+                <h5 class="card-title" style="font-size: 20px;">Exclusive Community</h5>
                 <p class="card-text" style="font-size: 14px;">
-                    Booking your dream adventure is simple and transparent with TravelHub. We offer hassle-free online booking and ensure that our pricing is clear and inclusive, so you can focus on the excitement of your upcoming journey.
+                    Join our exclusive community of travelers and adventurers. Connect with like-minded individuals, share experiences, and discover hidden gems together. Explore the world with a community that shares your passion for travel.
                 </p>
             </div>
         </div>
+        
 
     </div>
 </section>
@@ -260,25 +268,11 @@ <h5 class="card-title" style="font-size: 20px;">Easy Booking & Transparent Prici
 <hr>
 
 
-<!--Review section starts-->
-<h1 style=" font-size: 40px; margin-left: 250px;padding: 0;margin-top: 0;"> Get to hear, from our past customers!</h1>
-<section class="reviews" >
+<!-- Review section starts -->
+<h1 style="font-size: 40px; margin-left: 250px; padding: 0; margin-top: 0;">Get to hear from our past customers!</h1>
+<section class="reviews">
     <div class="swiper review-slider">
-        <div class="swiper-wrapper"style="margin-top: 0; margin-bottom: 40px;" > 
-            <div class=" swiper-slide card">
-                <div class="stars">
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Mr John</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
-            </div>
-
+        <div class="swiper-wrapper" style="margin-top: 0; margin-bottom: 40px;">
             <div class="swiper-slide card">
                 <div class="stars">
                     <i class="fa fa-star"></i>
@@ -287,10 +281,10 @@ <h3>Mr John</h3>
                     <i class="fa fa-star"></i>
                     <i class="fa fa-star"></i>
                 </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Mr kenny</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
+                <p>This tour exceeded my expectations! The guides were knowledgeable, the accommodations were comfortable, and the overall experience was unforgettable. I highly recommend TravelHub to anyone looking for an adventure.</p>
+                <h3>Ms. Sarah</h3>
+                <span>Traveler</span>
+                <img src="/Homepage/profiletemp.png" alt="">
             </div>
 
             <div class="swiper-slide card">
@@ -301,10 +295,10 @@ <h3>Mr kenny</h3>
                     <i class="fa fa-star"></i>
                     <i class="fa fa-star"></i>
                 </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Ms alice</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
+                <p>I had an amazing time exploring Maharashtra with TravelHub. The itinerary was well-planned, and the activities were diverse and exciting. The guides were friendly and knowledgeable, making the trip truly enjoyable.</p>
+                <h3>Mr. Kevin</h3>
+                <span>Adventurer</span>
+                <img src="/Homepage/profiletemp.png" alt="">
             </div>
 
             <div class="swiper-slide card">
@@ -315,12 +309,13 @@ <h3>Ms alice</h3>
                     <i class="fa fa-star"></i>
                     <i class="fa fa-star"></i>
                 </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Mr joe</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
+                <p>TravelHub made my trip to Maharashtra unforgettable! From the moment I arrived, everything was taken care of, allowing me to relax and enjoy the experience. I can't wait to book my next adventure with TravelHub.</p>
+                <h3>Ms. Emily</h3>
+                <span>Explorer</span>
+                <img src="/Homepage/profiletemp.png" alt="">
             </div>
 
+            <!-- Add more swiper-slide cards with different content -->
             <div class="swiper-slide card">
                 <div class="stars">
                     <i class="fa fa-star"></i>
@@ -329,24 +324,10 @@ <h3>Mr joe</h3>
                     <i class="fa fa-star"></i>
                     <i class="fa fa-star"></i>
                 </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Ms Jenny</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
-            </div>
-
-            <div class="swiper-slide card">
-                <div class="stars">
-                    <i class="fa fa-star" ></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Mr Jake</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
+                <p>I absolutely loved my travel experience with TravelHub. The team was professional, and the itinerary was well-crafted to suit my interests. I'll cherish the memories of this trip forever.</p>
+                <h3>Mr. Alex</h3>
+                <span>Travel Enthusiast</span>
+                <img src="/Homepage/profiletemp.png" alt="">
             </div>
 
             <div class="swiper-slide card">
@@ -357,10 +338,10 @@ <h3>Mr Jake</h3>
                     <i class="fa fa-star"></i>
                     <i class="fa fa-star"></i>
                 </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Mr kenny</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
+                <p>TravelHub provided me with an unforgettable adventure. The itinerary was flexible, allowing me to explore at my own pace, and the guides were friendly and knowledgeable. I highly recommend TravelHub for your next trip.</p>
+                <h3>Ms. Jessica</h3>
+                <span>Adventure Seeker</span>
+                <img src="/Homepage/profiletemp.png" alt="">
             </div>
 
             <div class="swiper-slide card">
@@ -371,24 +352,10 @@ <h3>Mr kenny</h3>
                     <i class="fa fa-star"></i>
                     <i class="fa fa-star"></i>
                 </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Mr kenny</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
-            </div>
-
-            <div class="swiper-slide card">
-                <div class="stars">
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                    <i class="fa fa-star"></i>
-                </div>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum pariatur laborum cum, eos tenetur similique sint nostrum iusto, voluptas facilis quidem, suscipit soluta accusantium debitis. Dolores nemo consectetur eaque nam!</p>
-            <h3>Mr kenny</h3>
-            <span>traveller</span>
-            <img src="profiletemp.png" alt="">
+                <p>My experience with TravelHub was fantastic. The guides were experienced, the accommodations were comfortable, and the activities were thrilling. I can't wait to embark on another journey with TravelHub.</p>
+                <h3>Mr. Michael</h3>
+                <span>Adventurous Traveler</span>
+                <img src="/Homepage/profiletemp.png" alt="">
             </div>
         </div>
         <div class="swiper-button-next"></div>
@@ -396,50 +363,91 @@ <h3>Mr kenny</h3>
     </div>
 </section>
 
+
 <br>
 <br>
 <br>
 <br>
 
 <!--Review section ends-->
+<!-- features sections -->
+<section class="services" style="margin-top: 0; padding-top: 0;">
+    <h1 class="heading-title" style="text-align: center;font-size: 2rem;"> Try out now!</h1>
+    <p style="text-align: center;">Experience the Full Spectrum of Adventure with these Exciting Features</p>
+    <div class="box-container" style="padding-left: 100px;">
+
+        <section id="bottomContents">
+            <div class="featureBox">
+                
+                <a href="/features/googlemap.html">
+                <div class="boxf">
+                    <img src="/Homepage/googlemap.png" alt="">
+                </div>
+            </a>
+    
+                <a href="/features/currencyconv.html">
+                <div class="boxf">
+                    <img src="/Homepage/currency.png" alt="">
+                </div>
+            </a>
+    
+            <a href="/features/lens.html">
+                <div class="boxf">
+                    <img src="/Homepage/lens.png" alt="">
+                </div>
+            </a>
+            <a href="/features/wheel.html">
+                <div class="boxf">
+                    <img src="/features/wheel.png" alt="">
+                </div>
+            </a>
+            <a href="/features/blog.html">
+                <div class="boxf">
+                    <img src="/Homepage/blogs.png" alt="">
+                </div>
+            </a>
+            </div>
+        </section>
+
+    
+    </div>
+</section>
 <hr>
-<img src="discount.png" style=" margin-left: 250px; margin-top: 20px; margin-bottom: 20px;">
+
+
+  
 <!-- FAQ section-->
 <hr style="margin-bottom: 0;padding-bottom: 0;">
 <section class="bolly">
     <div class="main">
-        <img src="FAQhome.jpg">
+        <img src="/Homepage/FAQhome.jpg">
       
         <div class="bolly-text">
             <h1>Got Questions?</h1>
             <p>We've Got Answers!Explore Our Comprehensive FAQ Section for a Smooth <p>
-            <button type="button"><a href="faq.html" style="color: white; text-decoration: none;">Check now</a></button>
+            <button type="button"><a href="/Other/faq.html" style="color: white; text-decoration: none;">Check now</a></button>
         </div>
         
     </div>
 </section>
 
-
-
-
-
 <section class="footer">
     <div class="box-container">
         <div class="box">
             <h3>Quick Links</h3>
-            <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-            <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-            <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-            <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+            <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
         </div>
 
         <div class="box">
             <h3>Extra Links</h3>
-            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-            <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
         </div>
 
         <div class="box">
@@ -453,7 +461,7 @@ <h3>Contact info</h3>
         <div class="box">
             <h3>Follow Us</h3>
             <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
-            <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+            <a href="#"><i class="fa fa-twitter"></i>X</a>
             <a href="#"><i class="fa fa-instagram"></i>instagram</a>
             <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
         </div>
@@ -464,9 +472,12 @@ <h3>Follow Us</h3>
 
     <!-- Include Swiper JS -->
 
-
+    <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
+    <script src="https://mediafiles.botpress.cloud/f40abf85-346f-4b1a-9e81-4a92509d4e0c/webchat/config.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
-    <script src="script.js"></script>
+    <script src="/Homepage/script.js"></script>
+    <script src="/user/login.js" defer type="module"></script>
+    <script src="/user/update.js"></script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/itinerary.png b/Homepage/itinerary.png
similarity index 100%
rename from itinerary.png
rename to Homepage/itinerary.png
diff --git a/Homepage/lens.png b/Homepage/lens.png
new file mode 100644
index 0000000..80e0600
Binary files /dev/null and b/Homepage/lens.png differ
diff --git a/logo.png b/Homepage/logo.png
similarity index 100%
rename from logo.png
rename to Homepage/logo.png
diff --git a/logoabout.png b/Homepage/logoabout.png
similarity index 100%
rename from logoabout.png
rename to Homepage/logoabout.png
diff --git a/logohome.png b/Homepage/logohome.png
similarity index 100%
rename from logohome.png
rename to Homepage/logohome.png
diff --git a/maha1.jpg b/Homepage/maha1.jpg
similarity index 100%
rename from maha1.jpg
rename to Homepage/maha1.jpg
diff --git a/maha2.jpg b/Homepage/maha2.jpg
similarity index 100%
rename from maha2.jpg
rename to Homepage/maha2.jpg
diff --git a/maha3.jpg b/Homepage/maha3.jpg
similarity index 100%
rename from maha3.jpg
rename to Homepage/maha3.jpg
diff --git a/maha4.jpg b/Homepage/maha4.jpg
similarity index 100%
rename from maha4.jpg
rename to Homepage/maha4.jpg
diff --git a/maha_txt.png b/Homepage/maha_txt.png
similarity index 100%
rename from maha_txt.png
rename to Homepage/maha_txt.png
diff --git a/mahadesc.png b/Homepage/mahadesc.png
similarity index 100%
rename from mahadesc.png
rename to Homepage/mahadesc.png
diff --git a/money.png b/Homepage/money.png
similarity index 100%
rename from money.png
rename to Homepage/money.png
diff --git a/opinions.png b/Homepage/opinions.png
similarity index 100%
rename from opinions.png
rename to Homepage/opinions.png
diff --git a/partners.png b/Homepage/partners.png
similarity index 100%
rename from partners.png
rename to Homepage/partners.png
diff --git a/profiletemp.png b/Homepage/profiletemp.png
similarity index 100%
rename from profiletemp.png
rename to Homepage/profiletemp.png
diff --git a/satisfaction.png b/Homepage/satisfaction.png
similarity index 100%
rename from satisfaction.png
rename to Homepage/satisfaction.png
diff --git a/script.js b/Homepage/script.js
similarity index 57%
rename from script.js
rename to Homepage/script.js
index 1898f1c..6a8a3bf 100644
--- a/script.js
+++ b/Homepage/script.js
@@ -50,4 +50,27 @@ var reviewSlider = new Swiper(".review-slider", {
       },
     },
   });
-  
\ No newline at end of file
+
+  // Typing animation
+const text = "Embark on an unforgettable journey through Maharashtra with our handpicked travel itineraries."; // Text to display
+let index = 0;
+
+function typeWriter() {
+    if (index < text.length) {
+        document.getElementById("typing-text").innerHTML += text.charAt(index);
+        index++;
+        setTimeout(typeWriter, 100); // Speed of typing animation (milliseconds)
+    }
+}
+
+typeWriter();
+//profile dropdown logic 
+document.addEventListener('DOMContentLoaded', function() {
+  const userProfileLink = document.getElementById('userProfileLink');
+  const dropdownContent = document.getElementById('dropdownContent');
+
+  userProfileLink.addEventListener('click', function(e) {
+      e.preventDefault();
+      dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
+  });
+});
diff --git a/social-media.png b/Homepage/social-media.png
similarity index 100%
rename from social-media.png
rename to Homepage/social-media.png
diff --git a/song.png b/Homepage/song.png
similarity index 100%
rename from song.png
rename to Homepage/song.png
diff --git a/travelhome1.png b/Homepage/travelhome1.png
similarity index 100%
rename from travelhome1.png
rename to Homepage/travelhome1.png
diff --git a/Logbook_TravelHub.docx.pdf b/Logbook_TravelHub.docx.pdf
new file mode 100644
index 0000000..8ec9698
Binary files /dev/null and b/Logbook_TravelHub.docx.pdf differ
diff --git a/Mumbai3.jpg b/Mumbai3.jpg
deleted file mode 100644
index 5b2e562..0000000
Binary files a/Mumbai3.jpg and /dev/null differ
diff --git a/Nashik2.jpg b/Nashik2.jpg
deleted file mode 100644
index bdc81a7..0000000
Binary files a/Nashik2.jpg and /dev/null differ
diff --git a/bg.png b/Other/bg.png
similarity index 100%
rename from bg.png
rename to Other/bg.png
diff --git a/contact.css b/Other/contact.css
similarity index 93%
rename from contact.css
rename to Other/contact.css
index a3e2b1f..21d64f6 100644
--- a/contact.css
+++ b/Other/contact.css
@@ -356,4 +356,35 @@ hr {
 }
 .footer .credit span{
     color: var(--main-color);
+}
+
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+.user-greeting {
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/Other/contactUs.html b/Other/contactUs.html
new file mode 100644
index 0000000..bb67671
--- /dev/null
+++ b/Other/contactUs.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="/Other/contact.css">
+    <link rel="stylesheet" href="../headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+v
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const menuButton = document.querySelector('.open-menu');
+            const closeButton = document.querySelector('.close-menu');
+            const menu = document.querySelector('.menu');
+
+            menuButton.addEventListener('click', function () {
+                menu.style.display = 'flex';
+            });
+
+            closeButton.addEventListener('click', function () {
+                menu.style.display = 'none';
+            });
+        });
+    </script>
+</head>
+<body>
+    <header>
+        <section class="header" >
+            <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+    
+            <nav class="navbar">
+                <a href="/Homepage/index.html">Home</a>
+                <a href="/aboutUS/aboutUs.html">About</a>
+                <a href="/packages/city_package/packages.html">Packages</a>
+                <a href="/gallery/gallery.html">Gallery</a>
+                <a href="/Other/contactUs.html">Contact</a>
+                <div class="dropdown">
+                    <a href="#" id="profile-button">
+                        <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                        <span>Hi User</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </a>
+                    <ul class="dropdown-content">
+                        <li><a href="/user/profile.html">Dashboard</a></li>
+                    </ul>
+                </div>
+            </nav>
+            
+        </section>
+    </header>
+    <hr>
+<br>
+<br>
+    <!--main body-->
+    <section class="contact">
+        <div class="content">
+            <h2>Leave us a Message</h2>
+            <p>Feel free to reach out to us. Your inquiries are important to us, and we're here to assist you on your journey</p>
+        </div>
+        <div class="container">
+            <div class="contactInfo">
+                <div class="box">
+                    <div class="icon"><a href="https://www.google.com/maps/place/Vivekanand+Education+Society's+Institute+Of+Technology+(VESIT)/@19.0451164,72.8864056,17z/data=!4m6!3m5!1s0x3be7c8add9569a29:0xb7ad04bf9a389df7!8m2!3d19.0451113!4d72.8889805!16zL20vMDV6MXM0?entry=ttu"><i class="fa fa-map-marker" style="color: black;"></i></a></div>
+                    <div class="text">
+                        <h3>Address</h3>
+                        <p>VESIT<br> Collector's Colony<br> Chembur</p>
+                    </div>
+                </div>
+
+                <div class="box">
+                    <div class="icon"><a href="mailto:travelhubvesit@gmail.com"><i class="fa fa-envelope" style="color: black;"></i></a></div>
+                    <div class="text">
+                        <h3>Email</h3>
+                        <p>travelhubvesit@gmail.com</p>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="icon"><i class="fa fa-phone"></i></div>
+                    <div class="text">
+                        <h3>Phone</h3>
+                        <p>32749184618</p>
+                    </div>
+                </div>
+            </div>
+            <div class="contactForm">
+                <form action="/Other/contactUs.php" method="post">
+                    <h2>Connect with us</h2>
+                    <div class="inputBox">
+                        <input type="text" name="uname" required="required">
+                        <span>Full Name</span>
+                    </div>
+                    <div class="inputBox">
+                        <input type="text" name="uemail" required="required">
+                        <span>Email</span>
+                    </div>
+                    <div class="inputBox">
+                        <input type="tel"  name="uphone" required="required">
+                        <span>phone number</span>
+                    </div>
+                    <div class="inputBox">
+                        <textarea required="required" name="umessage"></textarea>
+                        <span>Type your message here</span>
+                    </div>
+                    <div class="inputBox">
+                        <input type="submit" value="Send">
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+
+
+<section class="footer">
+    <div class="box-container">
+        <div class="box">
+            <h3>Quick Links</h3>
+            <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+        </div>
+
+        <div class="box">
+            <h3>Extra Links</h3>
+            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+            <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+            <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+            <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+        </div>
+
+        <div class="box">
+            <h3>Contact info</h3>
+            <a href="#"><i class="fa fa-phone"></i>428416212</a>
+            <a href="#"><i class="fa fa-phone"></i>483481292</a>
+            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+        </div>
+
+        <div class="box">
+            <h3>Follow Us</h3>
+            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+            <a href="#"><i class="fa fa-twitter"></i>X</a>
+            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+        </div>
+    </div>
+
+    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+</section>
+</body>
+</html>
diff --git a/Other/contactUs.php b/Other/contactUs.php
new file mode 100644
index 0000000..5ced0bc
--- /dev/null
+++ b/Other/contactUs.php
@@ -0,0 +1,28 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "contact_us";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_name = $_POST["uname"];
+    $user_email = $_POST["uemail"];
+    $user_number = $_POST["uphone"];
+    $user_message = $_POST["umessage"];
+
+    $sql = "INSERT INTO contact (name, email, mobile_number, message) VALUES ('$user_name', '$user_email', '$user_number', '$user_message')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/faq.css b/Other/faq.css
similarity index 91%
rename from faq.css
rename to Other/faq.css
index b544e6f..20a3291 100644
--- a/faq.css
+++ b/Other/faq.css
@@ -279,4 +279,34 @@ background-color: #cac8c8;
 
 .faq .active{
     border: none;
+}
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+.user-greeting {
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/faq.html b/Other/faq.html
similarity index 85%
rename from faq.html
rename to Other/faq.html
index 17c8376..2549e33 100644
--- a/faq.html
+++ b/Other/faq.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="faq.css">
+    <link rel="stylesheet" href="../headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha384-o4/JFADzlWHA7EBC1euevfIA4Les0xCZvQbz58F4Gf8y1SssjZ6Ln5u6tU4CC/iY" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
     <title>faq</title>
@@ -12,17 +15,26 @@
 
 <!-- header section -->
 
-<section class="header">
-    <a href="homepg.html" class="logo"><img src="logoabout.png"></a>
+<section class="header" >
+    <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
     <nav class="navbar">
-        <a href="index.html">Home</a>
-        <a href="aboutUs.html">About</a>
-        <a href="packages/city_package/packages.html">Packages</a>
-        <a href="gallery.html">Gallery</a>
-        <a href="contactUs.html"> Contact</a>
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="dropdown">
+            <a href="#" id="profile-button">
+                <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                <span>Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+            </a>
+            <ul class="dropdown-content">
+                <li><a href="/user/profile.html">Dashboard</a></li>
+            </ul>
+        </div>
     </nav>
-    <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
 </section>
 
 
@@ -101,7 +113,7 @@ <h1 style="margin-left: 250px;"> Frequently Asked Questions</h1>
                 <h3>Quick Links</h3>
                 <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
                 <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
                 <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
                 <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
diff --git a/faq.png b/Other/faq.png
similarity index 100%
rename from faq.png
rename to Other/faq.png
diff --git a/t&c.css b/Other/t&c.css
similarity index 100%
rename from t&c.css
rename to Other/t&c.css
diff --git a/t&c.html b/Other/t&c.html
similarity index 82%
rename from t&c.html
rename to Other/t&c.html
index 6c150f2..7ee5c00 100644
--- a/t&c.html
+++ b/Other/t&c.html
@@ -4,13 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="t&c.css">
+    <link rel="stylesheet" href="../headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 
-
     <title>t&c</title>
 </head>
 <body>
@@ -18,14 +19,24 @@
 <!-- header section -->
 
 <section class="header">
-    <a href="homepg.html" class="logo"><img src="logoabout.png"></a>
+    <a href="homepg.html" class="logo"><img src="../Homepage/logoabout.png"></a>
 
     <nav class="navbar">
-        <a href="index.html">Home</a>
-        <a href="aboutUs.html">About</a>
-        <a href="packages.html">Packages</a>
-        <a href="gallery.html">Gallery</a>
-        <a href="contactUs.html"> Contact</a>
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="dropdown">
+            <a href="#" id="profile-button">
+                <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                <span>Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+            </a>
+            <ul class="dropdown-content">
+                <li><a href="/user/profile.html">Dashboard</a></li>
+            </ul>
+        </div>
     </nav>
     <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
 </section>
@@ -91,7 +102,7 @@ <h3>8. Contact Information</h3>
             <h3>Quick Links</h3>
             <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
             <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
             <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
             <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
         </div>
@@ -99,8 +110,8 @@ <h3>Quick Links</h3>
         <div class="box">
             <h3>Extra Links</h3>
             <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-            <a href="#"><i class="fa fa-angle-right"></i>faq</a>
-            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
+            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
+            <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
             <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
         </div>
 
diff --git a/terms.png b/Other/terms.png
similarity index 100%
rename from terms.png
rename to Other/terms.png
diff --git a/Raigad.jpg b/Raigad.jpg
deleted file mode 100644
index a66bb56..0000000
Binary files a/Raigad.jpg and /dev/null differ
diff --git a/Report_TravelHub.pdf b/Report_TravelHub.pdf
new file mode 100644
index 0000000..809cdc3
Binary files /dev/null and b/Report_TravelHub.pdf differ
diff --git a/Satara2.jpg b/Satara2.jpg
deleted file mode 100644
index b94d2f7..0000000
Binary files a/Satara2.jpg and /dev/null differ
diff --git a/aboutUs.css b/aboutUS/aboutUs.css
similarity index 92%
rename from aboutUs.css
rename to aboutUS/aboutUs.css
index ce7d161..8adce7f 100644
--- a/aboutUs.css
+++ b/aboutUS/aboutUs.css
@@ -6,7 +6,10 @@
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif ;
 }
+body{
+    text-align: justify;
 
+}
 :root{
 
         --main-color:rgb(66, 66, 255);;
@@ -376,4 +379,35 @@ hr{
     height: 4px;
     padding-bottom: 20 px;
     border-width: 8px;
+}
+
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+.user-greeting {
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/aboutUs.html b/aboutUS/aboutUs.html
similarity index 77%
rename from aboutUs.html
rename to aboutUS/aboutUs.html
index 6c30136..6aa3575 100644
--- a/aboutUs.html
+++ b/aboutUS/aboutUs.html
@@ -6,6 +6,8 @@
     <title>Document</title>
     <link rel="stylesheet" href="aboutUs.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha384-o4/JFADzlWHA7EBC1euevfIA4Les0xCZvQbz58F4Gf8y1SssjZ6Ln5u6tU4CC/iY" crossorigin="anonymous">
+    <link rel="stylesheet" href="/headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 </head>
@@ -13,15 +15,26 @@
     <!-- header section -->
 
     <section class="header" >
-        <a href="homepg.html" class="logo"><img src="logoabout.png"></a>
+        <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
         <nav class="navbar">
-            <a href="index.html">Home</a>
-            <a href="aboutUs.html">About</a>
-            <a href="packages/city_package/packages.html">Packages</a>
-            <a href="gallery.html">Gallery</a>
-            <a href="contactUs.html"> Contact</a>
+            <a href="/Homepage/index.html">Home</a>
+            <a href="/aboutUS/aboutUs.html">About</a>
+            <a href="/packages/city_package/packages.html">Packages</a>
+            <a href="/gallery/gallery.html">Gallery</a>
+            <a href="/Other/contactUs.html">Contact</a>
+            <div class="dropdown">
+                <a href="#" id="profile-button">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                    <span>Hi User</span>
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+                <ul class="dropdown-content">
+                    <li><a href="/user/profile.html">Dashboard</a></li>
+                </ul>
+            </div>
         </nav>
+        
         <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
     </section>
         <!-- About Us Section -->
@@ -100,19 +113,19 @@ <h1> Our Values🎯</h1>
         <div class="box-container">
             <div class="box">
                 <h3 style="color: white;">Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
 
             <div class="box">
                 <h3 style="color: white;">Extra Links</h3>
                 <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="#"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
 
             <div class="box">
diff --git a/aboutUs.png b/aboutUS/aboutUs.png
similarity index 100%
rename from aboutUs.png
rename to aboutUS/aboutUs.png
diff --git a/aboutUS/anisha.png b/aboutUS/anisha.png
new file mode 100644
index 0000000..edbd083
Binary files /dev/null and b/aboutUS/anisha.png differ
diff --git a/group.png b/aboutUS/group.png
similarity index 100%
rename from group.png
rename to aboutUS/group.png
diff --git a/aboutUS/himaja.jpeg b/aboutUS/himaja.jpeg
new file mode 100644
index 0000000..3723eb8
Binary files /dev/null and b/aboutUS/himaja.jpeg differ
diff --git a/meet.css b/aboutUS/meet.css
similarity index 85%
rename from meet.css
rename to aboutUS/meet.css
index 8197451..b3f2dd7 100644
--- a/meet.css
+++ b/aboutUS/meet.css
@@ -42,6 +42,7 @@ section{
         opacity: 0;
     }
 }
+
 .header {
     position: fixed;
     top: 0;
@@ -64,77 +65,18 @@ section{
     padding: 0;
 }
 .header .navbar{
-    margin-left:475px;
+    margin-left:auto;
 }
 .header .navbar a{
     font-size: 1rem;
     margin-left: 2rem;
-    color: var(--white);
+    color:black;
     text-decoration: none;
 }
 .header .navbar a:hover{
   text-decoration: underline;
 }
-#menu-btn{
-    font-size: 2.5rem;
-    cursor: pointer;
-    color: var(--black);
-    display: inline-block;
-    transition: transform 0.5s ease;
-}
-
-#menu-btn.fa-times{
-    transform: rotate(180deg);
-}
-
-/* media queires*/
-@media (max-width:1200px){
-    section{
-        padding: 3rem 5%;
-}
-}
-
-@media (max-width:991px){
 
-    html{
-        font-size: 55%;
-    }
-    section{
-        padding: 3rem 2rem;
-}
-}
-
-@media (max-width: 760px) {
-    .header .navbar {
-      margin: 300px;
-      position:fixed;
-      top: 99%;
-      left: 0;
-      right: 0;
-      background-color: var(--white);
-      border-top: var(--border);
-      padding: 2rem;
-      z-index: 1001;
-      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-    }
-  
-    .header .navbar.active {
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-    }
-  
-    .header .navbar a {
-      display: block;
-      margin: 2rem;
-      text-align: center;
-    }
-  }
-@media (max-width:450px){
-
-    html{
-        font-size: 50%;
-    }
-
-}
 
 .footer {
     /* background: url(footer.jpg) no-repeat; */
@@ -343,19 +285,6 @@ section{
     }
 }
 
-.navbar {
-    width: 100%;
-    background: #333;}
-
-.navbar a {
-    color: white;
-    text-decoration: none;
-}
-
-.navbar a:hover {
-    text-decoration: underline;
-    color: white;
-}
 
 .meet-text h1
 {   font-size: 36px;
@@ -400,3 +329,35 @@ section{
     height: auto;
     border-radius: 5px; /* Add border-radius for rounded corners */
 }
+
+
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+.user-greeting {
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/meet.html b/aboutUS/meet.html
similarity index 67%
rename from meet.html
rename to aboutUS/meet.html
index 2e0cf86..cc73c74 100644
--- a/meet.html
+++ b/aboutUS/meet.html
@@ -5,21 +5,35 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Meet the team</title>
     <link rel="stylesheet" href="meet.css">
+    <link rel="stylesheet" href="../headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
 </head>
 <body>
 <!--navbar-->
-<section class="header" style="background-color:#302f2f;">
-    <a href="homepg.html" class="logo"><img src="logo.png"></a>
+<section class="header" >
+    <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
     <nav class="navbar">
-        <a href="index.html">Home</a>
-        <a href="aboutUs.html">About</a>
-        <a href="packages.html">Packages</a>
-        <a href="gallery.html">Gallery</a>
-        <a href="contactUs.html"> Contact</a>
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="dropdown">
+            <a href="#" id="profile-button">
+                <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                <span>Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+            </a>
+            <ul class="dropdown-content">
+                <li><a href="/user/profile.html">Dashboard</a></li>
+            </ul>
+        </div>
     </nav>
+    
     <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
 </section>
 <hr>
@@ -40,7 +54,7 @@ <h1>Meet Our Team 🔥</h1>
 <!--Group-photo-->
 <div class="image-container">
     <span class="image">
-        <img src="group.png">
+        <img src="/aboutUS/group.png">
     </span>
 </div>
 
@@ -51,11 +65,11 @@ <h1>Team Members:</h1></div>
         <div class="card">
             <div class="content">
                 <div class="imgBx">
-                    <img src="profiletemp.png" alt="">
+                    <img src="anisha.png" alt="">
                 </div>
                 <div class="contentBx">
-                    <h4>Abc</h4>
-                    <h5>abc </h5>
+                    <h4>Anisha Shankar</h4>
+                    <h5>D7B-06</h5>
                 </div>
                 <div class="sci">
                     <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
@@ -67,11 +81,11 @@ <h5>abc </h5>
         <div class="card">
             <div class="content">
                 <div class="imgBx">
-                    <img src="profiletemp.png" alt="">
+                    <img src="samruddhi.jpeg" alt="">
                 </div>
                 <div class="contentBx">
-                    <h4>abc</h4>
-                    <h5>abc</h5>
+                    <h4>Samruddhi Jatkar</h4>
+                    <h5>D7B-20</h5>
                 </div>
                 <div class="sci">
                     <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
@@ -83,11 +97,11 @@ <h5>abc</h5>
         <div class="card">
             <div class="content">
                 <div class="imgBx">
-                    <img src="profiletemp.png" alt="">
+                    <img src="himaja.jpeg" alt="">
                 </div>
                 <div class="contentBx">
-                    <h4>abc</h4>
-                    <h5>abc</h5>
+                    <h4>Himaja Pannati</h4>
+                    <h5>D7B-40</h5>
                 </div>
                 <div class="sci">
                     <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
@@ -100,11 +114,12 @@ <h5>abc</h5>
         <div class="card">
             <div class="content">
                 <div class="imgBx">
-                    <img src="profiletemp.png" alt="">
+                    <img src="wafiya.jpeg" alt="">
                 </div>
                 <div class="contentBx">
-                    <h4>abc</h4>
-                    <h5>abc </h5>
+                    <h4>Wafiya Shaikh</h4>
+                    <h5>D7B-48</h5>
+
                 </div>
                 <div class="sci">
                     <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
@@ -116,11 +131,11 @@ <h5>abc </h5>
         <div class="card">
             <div class="content">
                 <div class="imgBx">
-                    <img src="profiletemp.png" alt="">
+                    <img src="santosh.jpeg" alt="">
                 </div>
                 <div class="contentBx">
-                    <h4>abc</h4>
-                    <h5>abc </h5>
+                    <h4>Santosh Hinduja</h4>
+                    <h5>D7C</h5>
                 </div>
                 <div class="sci">
                     <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
@@ -141,19 +156,19 @@ <h5>abc </h5>
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
                 <h3>Extra Links</h3>
                 <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -167,7 +182,7 @@ <h3>Contact info</h3>
             <div class="box">
                 <h3>Follow Us</h3>
                 <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
-                <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+                <a href="#"><i class="fa fa-twitter"></i>X</a>
                 <a href="#"><i class="fa fa-instagram"></i>instagram</a>
                 <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
             </div>
@@ -175,6 +190,7 @@ <h3>Follow Us</h3>
     
         <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
     </section>
+    
 </section>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/mission.png b/aboutUS/mission.png
similarity index 100%
rename from mission.png
rename to aboutUS/mission.png
diff --git a/aboutUS/samruddhi.jpeg b/aboutUS/samruddhi.jpeg
new file mode 100644
index 0000000..9c1edb7
Binary files /dev/null and b/aboutUS/samruddhi.jpeg differ
diff --git a/aboutUS/santosh.jpeg b/aboutUS/santosh.jpeg
new file mode 100644
index 0000000..787084a
Binary files /dev/null and b/aboutUS/santosh.jpeg differ
diff --git a/values.png b/aboutUS/values.png
similarity index 100%
rename from values.png
rename to aboutUS/values.png
diff --git a/vision.png b/aboutUS/vision.png
similarity index 100%
rename from vision.png
rename to aboutUS/vision.png
diff --git a/aboutUS/wafiya.jpeg b/aboutUS/wafiya.jpeg
new file mode 100644
index 0000000..d6a3172
Binary files /dev/null and b/aboutUS/wafiya.jpeg differ
diff --git a/aurangabadpin.html b/aurangabadpin.html
deleted file mode 100644
index ca36928..0000000
--- a/aurangabadpin.html
+++ /dev/null
@@ -1,347 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Bollywood ki boli ft. Mumbai</title>
-  <style>
-    /* CSS Styles */
-    /* Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
-
-    /* Colors */
-    :root {
-      --primary-color: rgb(66, 66, 255);
-      --background-color: #f2f2f2;
-      --text-color: #333333;
-      --conversation-bg: #f0f0f0;
-      --conversation-border: #ddd;
-    }
-
-    /* Reset CSS */
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: 'Montserrat', sans-serif;
-      background-color: var(--background-color);
-      color: var(--text-color);
-      line-height: 1.6;
-    }
-
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1001;
-      background-color: white;
-      display: flex;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-      box-shadow: var(--box-shadow);
-      padding-left: 10px;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .header .logo img {
-      height: 45px;
-      padding: 0;
-    }
-
-    .header .navbar {
-      margin-left: auto;
-    }
-
-    .header .navbar a {
-      font-size: 1rem;
-      margin-left: 2rem;
-      color: black;
-      text-decoration: none;
-    }
-
-    .header .navbar a:hover {
-      text-decoration: underline;
-    }
-
-    nav {
-      background-color: var(--w);
-      text-align: center;
-      padding: 10px 0;
-    }
-
-    nav a {
-      color: white;
-      text-decoration: none;
-      padding: 10px 20px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    #content-container {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-
-    #about {
-      width: 50%;
-      text-align: center; /* Center align text */
-      padding: 40px;
-      background-color: white;
-      border-radius: 10px;
-      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-      margin: 20px;
-      max-width: 400px;
-    }
-
-    #about h2 {
-      color: var(--primary-color);
-      margin-bottom: 20px;
-    }
-
-    #about p {
-      color: var(--text-color);
-    }
-
-    #slideshow-container {
-      width: 50%;
-      margin: 20px;
-      overflow: hidden;
-    }
-
-    .slideshow-image {
-      display: none;
-      width: 100%;
-      height: auto;
-    }
-
-    /* Meme styling */
-    .meme-container {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    .meme-image {
-      width: 100%; /* Adjust the width as needed */
-      max-width: 300px; /* Limit the maximum width */
-      display: block;
-      margin: 0 auto; /* Center align image */
-    }
-
-    .meme-text {
-      font-size: 24px; /* Adjust the font size as needed */
-      margin-top: 20px;
-      margin-bottom: 20px;
-      font: 1.5em sans-serif;
-    }
-
-    /* Typing animation styles */
-    .typing-animation {
-      text-align: center;
-      padding: 20px 0; /* Adjust the padding as needed */
-    }
-
-    .typing-animation h2 {
-      font-size: 46px; 
-      font-weight: bold;
-      font-family: fantasy;
-      color: #333; /* Adjust the color as needed */
-    }
-
-    @keyframes typing {
-      0% {
-        width: 0;
-      }
-      50% {
-        width: 50%;
-      }
-      100% {
-        width: 100%;
-      }
-    }
-
-    /* Footer Styles */
-    .footer {
-      background-size: auto;
-      background-color: #333;
-      background-position: center;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 3rem;
-      z-index: 999; /* Set a lower z-index value */
-      color: white;
-    }
-
-    .footer .box-container {
-      display: grid;
-      grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
-      gap: 3rem;
-      padding: 2rem;
-      padding-top: 2rem;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-
-    .footer .box-container .box h3 {
-      color: white;
-      font-size: 1.5rem;
-      padding-bottom: 1rem;
-    }
-
-    .footer .box-container .box a {
-      color: white;
-      font-size: 1rem;
-      padding-bottom: 1rem;
-      display: block;
-      text-decoration: none;
-    }
-
-    .footer .box-container .box a i {
-      color: var(--primary-color);
-      padding-right: .5rem;
-      transition: .2s linear;
-    }
-
-    .footer .box-container .box a:hover i {
-      padding-right: 2rem;
-    }
-
-    .footer .credit {
-      text-align: center;
-      padding-top: 1rem;
-      margin-top: 1rem;
-      padding-bottom: 1rem;
-      border-top: .1rem solid white;
-      font-size: 1rem;
-    }
-
-    .footer .credit span {
-      color: var(--primary-color);
-    }
-  </style>
-</head>
-<body>
-  <section class="header">
-    <a href="homepg.html" class="logo"><img src="logoabout.png"></a>
-
-    <nav class="navbar">
-      <a href="index.html">Home</a>
-      <a href="aboutUs.html">About</a>
-      <a href="packages.html">Packages</a>
-      <a href="gallery.html">Gallery</a>
-      <a href="contactUs.html">Contact</a>
-    </nav>
-  </section>
-  <header>
-    <h1>Bollywood ki boli ft. Mumbai</h1>
-  </header>
-
-  <section class="typing-animation" style="font-size: 40px;margin-right: 20px;margin-left: 20px;">
-    <p id="typing-text"></p>
-  </section>
-
-  <div id="content-container">
-    <div id="about">
-      <h2>About</h2>
-      <p>Aurangabad of Maharashtra has now become a shooting hub. Aurangabad is becoming the choice of both directors and actors for shooting.Aurangabad district has become a shooting hub for Hindi Marathi films, serials, web series and advertisements. Not only Jawan but many Hindi and Marathi film web series like "Ray", Aashiqana, Laadla, Dispatch, Gulkand and Mukkam Post Kolshewadi have been shot in Aurangabad.</p>
-    </div>
-
-    <div id="slideshow-container">
-      <img class="slideshow-image" src="https://pbs.twimg.com/media/C_8cCwXU0AAYwKZ.jpg" alt="Slideshow Image 1">
-      <img class="slideshow-image" src="https://www.91-cdn.com/hub/wp-content/uploads/2023/10/Jawan.png">
-      <img class="slideshow-image" src="https://upperstall.com/wp-content/uploads/2021/06/Ray-header.jpg" alt="Slideshow Image 3">
-      <img class="slideshow-image" src="https://assets.gadgets360cdn.com/pricee/assets/product/202204/gulkanda_tales_story_1651234461.jpeg?downsize=680:*" alt="Slideshow Image 4">
-    </div>
-  </div>
-
-  <div class="meme-container">
-    <h2 class="meme-text">Aurangabad ka page banakar movie na honaa bol dena:</h2>
-    <img class="meme-image" src="https://d33wubrfki0l68.cloudfront.net/345156dd10fee0460c12319b9629f43b70b2987d/72ef2/img/templates/welcome-seh-lenge-thoda.jpg" alt="Meme Image">
-  </div>
-
-  <section class="footer">
-    <div class="box-container">
-      <div class="box">
-        <h3>Quick Links</h3>
-        <a href="index.html"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>Home</a>
-        <a href="aboutUs.html"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>About</a>
-        <a href="packages.html"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>Packages</a>
-        <a href="gallery.html"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>Gallery</a>
-        <a href="contactUs.html"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>Contact</a>
-      </div>
-
-      <div class="box">
-        <h3>Extra Links</h3>
-        <a href="#"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>Ask Questions</a>
-        <a href="faq.html"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>FAQ</a>
-        <a href="#"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>Privacy Policy</a>
-        <a href="t&c.html"><i class="fa fa-angle-right" style="color: var(--primary-color);"></i>Terms of Use</a>
-      </div>
-
-      <div class="box">
-        <h3>Contact Info</h3>
-        <a href="#"><i class="fa fa-phone" style="color: var(--primary-color);"></i>428416212</a>
-        <a href="#"><i class="fa fa-phone" style="color: var(--primary-color);"></i>483481292</a>
-        <a href="#"><i class="fa fa-envelope" style="color: var(--primary-color);"></i>travelhub@ves.ac.in</a>
-        <a href="#"><i class="fa fa-map" style="color: var(--primary-color);"></i>Mumbai, India - 400094</a>
-      </div>
-
-      <div class="box">
-        <h3>Follow Us</h3>
-        <a href="#"><i class="fa fa-facebook-f" style="color: var(--primary-color);"></i>Facebook</a>
-        <a href="#"><i class="fa fa-twitter" style="color: var(--primary-color);"></i>Twitter</a>
-        <a href="#"><i class="fa fa-instagram" style="color: var(--primary-color);"></i>Instagram</a>
-        <a href="#"><i class="fa fa-linkedin" style="color: var(--primary-color);"></i>LinkedIn</a>
-      </div>
-    </div>
-
-    <div class="credit">Created by <span>Team TravelHub</span> | All rights reserved</div>
-  </section>
-
-  <script>
-    // JavaScript code for slideshow
-    let slideIndex = 0;
-    showSlides();
-
-    function showSlides() {
-      let i;
-      const slides = document.getElementsByClassName("slideshow-image");
-      for (i = 0; i < slides.length; i++) {
-        slides[i].style.display = "none";
-      }
-      slideIndex++;
-      if (slideIndex > slides.length) {
-        slideIndex = 1;
-      }
-      slides[slideIndex - 1].style.display = "block";
-      setTimeout(showSlides, 2000); // Change image every 2 seconds
-    }
-
-    // JavaScript code for typing animation
-    const text = "Yeh He Aurangabad!"; // Text to display
-    let index = 0;
-
-    function typeWriter() {
-      if (index < text.length) {
-        document.getElementById("typing-text").innerHTML += text.charAt(index);
-        index++;
-        setTimeout(typeWriter, 100); // Speed of typing animation (milliseconds)
-      }
-    }
-
-    typeWriter();
-  </script>
-</body>
-</html>
diff --git a/bollywood.html b/bollywood.html
deleted file mode 100644
index 61993a7..0000000
--- a/bollywood.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="bollywood.css">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
-    <title>Document</title>
-</head>
-<body>
-
-    <section class="header" style="background-color:#302f2f;">
-        <a href="homepg.html" class="logo"><img src="logo.png"></a>
-
-        <nav class="navbar">
-            <a href="index.html">Home</a>
-            <a href="aboutUs.html">About</a>
-            <a href="packages/city_package/packages.html">Packages</a>
-            <a href="gallery.html">Gallery</a>
-            <a href="contactUs.html"> Contact</a>
-        </nav>
-        <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
-    </section>
-
-<br><br><br> <br>
-<img src="experience.png" class="experience-image">
-
-<h1 style="text-align: center;"> Experience the Magic of Bollywood Dreams with Us!</h1>
-<h5 style= "text-align: center; font-weight: normal;"> (Click on any of the 4 cities and see the magic ! ) </h5>
-<br>
-<div class="image">
-<img src="map.png" usemap="#image_map" style="margin-left: 270px; padding: 20px; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);">
-<map name="image_map">
-    <area alt="" title="" href="mumbaipin.html" coords="132,128,201,189" shape="rect">
-    <area alt="aurangabad" title="aurangabad" href="aurangabadpin.html" coords="256,98,339,144" shape="rect">
-    <area alt="nagpur" title="nagpur" href="nagpurpin.html" coords="452,22,526,79" shape="rect">
-    <area alt="pune" title="pune" href="punepin.html" coords="199,184,261,232" shape="rect">
-  </map>
-
-</div>
-<br>
-
-
-
-
-
-
-
-
-
-
-
-
-<section class="footer" style="margin-bottom: 0; padding-bottom: 0;">
-    <div class="box-container">
-        <div class="box">
-            <h3>Quick Links</h3>
-            <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-            <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-            <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-            <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
-        </div>
-
-        <div class="box">
-            <h3>Extra Links</h3>
-            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-            <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
-        </div>
-
-        <div class="box">
-            <h3>Contact info</h3>
-            <a href="#"><i class="fa fa-phone"></i>428416212</a>
-            <a href="#"><i class="fa fa-phone"></i>483481292</a>
-            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
-            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
-        </div>
-
-        <div class="box">
-            <h3>Follow Us</h3>
-            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
-            <a href="#"><i class="fa fa-twitter"></i>twitter</a>
-            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
-            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
-        </div>
-    </div>
-
-    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
-</section>
-</body>
-</html>
\ No newline at end of file
diff --git a/bollywood.png b/bollywood.png
deleted file mode 100644
index 14519fb..0000000
Binary files a/bollywood.png and /dev/null differ
diff --git a/contactUs.html b/contactUs.html
deleted file mode 100644
index 2c2d238..0000000
--- a/contactUs.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="contact.css">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            const menuButton = document.querySelector('.open-menu');
-            const closeButton = document.querySelector('.close-menu');
-            const menu = document.querySelector('.menu');
-
-            menuButton.addEventListener('click', function () {
-                menu.style.display = 'flex';
-            });
-
-            closeButton.addEventListener('click', function () {
-                menu.style.display = 'none';
-            });
-        });
-    </script>
-</head>
-<body>
-    <section class="header" >
-        <a href="homepg.html" class="logo"><img src="logoabout.png"></a>
-
-        <nav class="navbar">
-            <a href="index.html">Home</a>
-            <a href="aboutUs.html">About</a>
-            <a href="packages/city_package/packages.html">Packages</a>
-            <a href="gallery.html">Gallery</a>
-            <a href="contactUs.html"> Contact</a>
-        </nav>
-        <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
-    </section>
-    <hr>
-<br>
-<br>
-    <!--main body-->
-    <section class="contact">
-        <div class="content">
-            <h2>Leave us a Message</h2>
-            <p>Feel free to reach out to us. Your inquiries are important to us, and we're here to assist you on your journey</p>
-        </div>
-        <div class="container">
-            <div class="contactInfo">
-                <div class="box">
-                    <div class="icon"><a href="https://www.google.com/maps/place/Vivekanand+Education+Society's+Institute+Of+Technology+(VESIT)/@19.0451164,72.8864056,17z/data=!4m6!3m5!1s0x3be7c8add9569a29:0xb7ad04bf9a389df7!8m2!3d19.0451113!4d72.8889805!16zL20vMDV6MXM0?entry=ttu"><i class="fa fa-map-marker" style="color: black;"></i></a></div>
-                    <div class="text">
-                        <h3>Address</h3>
-                        <p>VESIT<br> Collector's Colony<br> Chembur</p>
-                    </div>
-                </div>
-
-                <div class="box">
-                    <div class="icon"><a href="mailto:travelhubvesit@gmail.com"><i class="fa fa-envelope" style="color: black;"></i></a></div>
-                    <div class="text">
-                        <h3>Email</h3>
-                        <p>travelhubvesit@gmail.com</p>
-                    </div>
-                </div>
-                <div class="box">
-                    <div class="icon"><i class="fa fa-phone"></i></div>
-                    <div class="text">
-                        <h3>Phone</h3>
-                        <p>32749184618</p>
-                    </div>
-                </div>
-            </div>
-            <div class="contactForm">
-                <form action="">
-                    <h2>Connect with us</h2>
-                    <div class="inputBox">
-                        <input type="text" name="" required="required">
-                        <span>Full Name</span>
-                    </div>
-                    <div class="inputBox">
-                        <input type="text" name="" required="required">
-                        <span>Email</span>
-                    </div>
-                    <div class="inputBox">
-                        <input type="tel"  name="" required="required">
-                        <span>phone number</span>
-                    </div>
-                    <div class="inputBox">
-                        <textarea required="required"></textarea>
-                        <span>Type your message here</span>
-                    </div>
-                    <div class="inputBox">
-                        <input type="submit" name="" value="Send">
-                    </div>
-                </form>
-            </div>
-        </div>
-    </section>
-
-   
-    <!-- footer section -->
-    <section class="footer">
-        <div class="box-container">
-            <div class="box">
-                <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
-            </div>
-
-            <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="#"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
-            </div>
-
-            <div class="box">
-                <h3>Contact info</h3>
-                <a href="#"><i class="fa fa-phone"></i>428416212</a>
-                <a href="#"><i class="fa fa-phone"></i>483481292</a>
-                <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
-                <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
-            </div>
-
-            <div class="box">
-                <h3>Follow Us</h3>
-                <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
-                <a href="#"><i class="fa fa-twitter"></i>twitter</a>
-                <a href="#"><i class="fa fa-instagram"></i>instagram</a>
-                <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
-            </div>
-        </div>
-
-        <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
-    </section>
-
-</body>
-</html>
diff --git a/discount.png b/discount.png
deleted file mode 100644
index 6e2ad32..0000000
Binary files a/discount.png and /dev/null differ
diff --git a/features/blog.css b/features/blog.css
new file mode 100644
index 0000000..75b2511
--- /dev/null
+++ b/features/blog.css
@@ -0,0 +1,257 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header .logo img
+{
+    height: 45px;
+    padding: 0;
+}
+.header .navbar{
+    margin-left:auto;
+}
+.header .navbar a{
+    font-size: 1rem;
+    margin-left: 2rem;
+    color:black;
+    text-decoration: none;
+}
+.header .navbar a:hover{
+  text-decoration: underline;
+}
+    body {
+      font-family: Arial, sans-serif;
+      margin-top: 90px;
+      padding: 0;
+      background-color: #f3f4f6;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 20px auto;
+      padding: 0 20px;
+    }
+
+    .blog-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+
+    .blog-card {
+      background-color: #fff;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      width: calc(33.33% - 10px); /* 3 cards per row with some space between */
+      margin-bottom: 20px;
+    }
+
+    .blog-card img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+    }
+
+    .blog-card .content {
+      padding: 20px;
+    }
+
+    .blog-card h2 {
+      margin-top: 0;
+      margin-bottom: 10px;
+      font-size: 20px;
+    }
+
+    .blog-card p {
+      margin: 0;
+      color: #666;
+      font-size: 14px;
+      line-height: 1.4;
+    }
+
+    .blog-card a {
+      display: block;
+      text-align: right;
+      color: #007bff;
+      text-decoration: none;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .blog-card a:hover {
+      text-decoration: underline;
+    }
+
+    .add-blog-btn {
+        display: block;
+        margin: 20px auto; /* Center-align the button horizontally */
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: bold;
+        text-decoration: none;
+      }
+      
+    .add-blog-form-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 1000;
+    }
+
+    .add-blog-form {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 80%;
+      max-width: 500px;
+      padding: 20px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      background-color: #fff;
+      z-index: 1001;
+    }
+
+    .add-blog-form h2 {
+      margin-top: 0;
+      margin-bottom: 20px;
+      font-size: 24px;
+      text-align: center;
+    }
+
+    .add-blog-form input[type="text"],
+    .add-blog-form input[type="email"],
+    .add-blog-form textarea {
+      width: calc(100% - 40px);
+      margin-bottom: 20px;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+    }
+
+    .add-blog-form input[type="file"] {
+      margin-bottom: 20px;
+    }
+
+    .add-blog-form textarea {
+      height: 150px;
+    }
+
+    .add-blog-form button {
+      width: 100%;
+      padding: 10px 20px;
+      background-color: #007bff;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: bold;
+      text-decoration: none;
+    }
+
+    .footer {
+      /* background: url(footer.jpg) no-repeat; */
+      background-size: auto;
+      background-color: #333;
+      background-position: center;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 3rem;
+      z-index: 999; /* Set a lower z-index value */
+  }
+  
+  .footer .box-container {
+      display: grid;
+      grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+      gap: 3rem;
+      padding: 2rem;
+      padding-top: 2rem;
+      margin-bottom: 0;
+      padding-bottom: 0;
+  }
+  
+  .footer .box-container .box h3 {
+      color: white;
+      font-size: 1.5rem;
+      padding-bottom: 1rem;
+  }
+  
+  .footer .box-container .box a {
+      color: var(--light-white);
+      font-size: 1rem;
+      padding-bottom: 1rem;
+      display: block;
+      text-decoration: none;
+  }
+  
+  .footer .box-container .box a i {
+      color: var(--main-color);
+      padding-right: .5rem;
+      transition: .2s linear;
+  }
+  
+  .footer .box-container .box a:hover i {
+      padding-right: 2rem;
+  }
+  .footer .credit{
+      text-align: center;
+      padding-top: 1rem;
+      margin-top: 1rem;
+      padding-bottom: 1rem;
+      border-top: .1rem solid var(--light-white);
+      font-size: 1rem;
+      color: var(--light-white);
+  }
+  .footer .credit span{
+      color: var(--main-color);
+  }
\ No newline at end of file
diff --git a/features/blog.html b/features/blog.html
new file mode 100644
index 0000000..bb0a256
--- /dev/null
+++ b/features/blog.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Travel Blogs</title>
+  <link rel="stylesheet" href="blog.css">
+  <link rel="stylesheet" href="/headfoot.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+
+  <style>
+    .popup {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: white;
+      padding: 20px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+      z-index: 9999;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      cursor: pointer;
+    }
+
+    .popup h2 {
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+<header>
+    <section class="header">
+      <a href="homepg.html" class="logo"><img src="../Homepage/logoabout.png"></a>
+
+
+      <nav class="navbar">
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="dropdown">
+            <a href="#" id="profile-button">
+                <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                <span>Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+            </a>
+            <ul class="dropdown-content">
+                <li><a href="/user/profile.html">Dashboard</a></li>
+            </ul>
+        </div>
+    </nav>
+    </section>
+</header>
+
+<h1 style="text-align: center;">Tales from the Trails</h1>
+<h3 style="text-align: center;font-weight: normal;">Discover Travel Tales from Your Fellow Travel Buddies</h3>
+<div class="container">
+  <div class="blog-row" id="blogsContainer">
+    <!-- Blog cards will be dynamically inserted here -->
+  </div>
+</div>
+
+<button class="add-blog-btn" onclick="toggleAddBlogForm()">  <a href="https://forms.gle/bc1YFiHFnxhHDUF18" style=" text-decoration: none; color: white;">Add Blog</a> </button>
+
+<div class="add-blog-form-overlay" id="addBlogFormOverlay" onclick="toggleAddBlogForm()"></div>
+
+
+<div id="popupContainer" class="popup">
+  <div class="close-btn" onclick="closePopup()">X</div>
+  <div id="popupContent"></div>
+</div>
+
+<script>
+  function toggleAddBlogForm() {
+    const addBlogForm = document.getElementById("addBlogForm");
+    const addBlogFormOverlay = document.getElementById("addBlogFormOverlay");
+    addBlogForm.style.display = addBlogForm.style.display === "none" ? "block" : "none";
+    addBlogFormOverlay.style.display = addBlogFormOverlay.style.display === "none" ? "block" : "none";
+  }
+
+  function readBlog(blogId) {
+    const blog = getBlogById(blogId);
+    const popupContent = document.getElementById("popupContent");
+
+    // Customize the body content for each popup based on the blog ID
+    let customizedBodyContent = "";
+    let imageUrl = ""; // Variable to hold the image URL
+    switch (blogId) {
+      case 1:
+        customizedBodyContent = "Experience the breathtaking view of the sunset from the beaches of Mumbai. Enjoy the stunning hues of orange and pink as the sun dips below the horizon, casting a golden glow over the Arabian Sea. Whether you're strolling along the iconic Marine Drive or relaxing on the sandy shores of Juhu Beach, the mesmerizing beauty of Mumbai's sunset is a sight to behold.";
+        imageUrl = "https://im.whatshot.in/img/2020/Nov/istock-1161401635-cropped-1605867819.jpg"; // Custom image URL for blog 1
+        break;
+      case 2:
+        customizedBodyContent = "Embark on an adventurous trekking journey through the lush greenery of the Western Ghats. Feel the crisp mountain air as you traverse scenic trails, encountering diverse flora and fauna along the way. From the towering peaks of Matheran to the serene valleys of Lonavala, the Western Ghats offer a trekking experience like no other.";
+        imageUrl = "https://images.livemint.com/rf/Image-621x414/LiveMint/Period2/2018/07/21/Photos/Processed/matheran-kTYH--621x414@LiveMint.jpg"; // Custom image URL for blog 2
+        break;
+      case 3:
+        customizedBodyContent = "Delve into the rich history of Maharashtra by exploring its ancient forts. From the imposing walls of Raigad Fort to the majestic architecture of Shivneri Fort, each stronghold tells a tale of valor and conquest. Wander through the crumbling ruins and marvel at the ingenuity of ancient engineering.";
+        imageUrl = "https://www.tripnight.com/public/thumbs/monuments/7715/WIqBJxFOZG43_468_738.jpg"; // Custom image URL for blog 3
+        break;
+      case 4:
+        customizedBodyContent = "Immerse yourself in the vibrant cultural festivals celebrated across Maharashtra. From the joyous festivities of Ganesh Chaturthi to the colorful processions of Gudi Padwa, each festival is a celebration of tradition and community. Join in the revelry and experience the spirit of Maharashtra.";
+        imageUrl = "https://tourdefarm.in/wp-content/uploads/2021/01/Ganeshotsav-In-Maharashtra.jpg"; // Custom image URL for blog 4
+        break;
+      case 5:
+        customizedBodyContent = "Indulge in the authentic flavors of Maharashtrian cuisine with its diverse range of dishes. From the spicy vada pav to the savory pav bhaji, each bite is a culinary delight. Explore the bustling street food stalls or dine in elegant restaurants to savor the true essence of Maharashtra.";
+        imageUrl = "https://img.veenaworld.com/wp-content/uploads/2019/09/10-Delicious-Maharashtrian-Dishes-that-You-Must-Try.jpg"; // Custom image URL for blog 5
+        break;
+      case 6:
+        customizedBodyContent = "Witness the majestic wildlife of Maharashtra with an exhilarating safari in Tadoba National Park. Traverse the rugged terrain in search of Bengal tigers, leopards, and sloth bears. As the sun sets over the dense forests, listen to the chorus of nocturnal creatures and feel a deep connection with nature.";
+        imageUrl = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrTLs8mVwgK3WbtvQ1wsOGMC1sPf3IK8rYTkRoNH3JbA&s"; // Custom image URL for blog 6
+        break;
+      default:
+        customizedBodyContent = "Default custom body content.";
+        imageUrl = "default_placeholder_image.jpg"; // Default placeholder image URL
+        break;
+    }
+
+    popupContent.innerHTML = `
+      <h2>${blog.title}</h2>
+      <img src="${imageUrl}" alt="Blog Image" style="width: 100%; height: auto;">
+      <p>${customizedBodyContent}</p>
+    `;
+    const popup = document.getElementById("popupContainer");
+    popup.style.display = "block";
+  }
+
+
+  function getBlogById(blogId) {
+    const blogsData = [
+      { id: 1, title: "Beautiful Sunset in Mumbai", body: "Experience the breathtaking view of the sunset from the beaches of Mumbai.", image: "https://im.whatshot.in/img/2020/Nov/istock-1161401635-cropped-1605867819.jpg" },
+      { id: 2, title: "Trekking in the Western Ghats", body: "Embark on an adventurous trekking journey through the lush greenery of the Western Ghats.", image: "https://images.livemint.com/rf/Image-621x414/LiveMint/Period2/2018/07/21/Photos/Processed/matheran-kTYH--621x414@LiveMint.jpg" },
+      { id: 3, title: "Exploring Historical Forts", body: "Discover the rich history of Maharashtra by visiting its ancient forts.", image: "https://www.tripnight.com/public/thumbs/monuments/7715/WIqBJxFOZG43_468_738.jpg" },
+      { id: 4, title: "Cultural Festivals of Maharashtra", body: "Immerse yourself in the vibrant cultural festivals celebrated across Maharashtra.", image: "https://tourdefarm.in/wp-content/uploads/2021/01/Ganeshotsav-In-Maharashtra.jpg" },
+      { id: 5, title: "Savoring Maharashtrian Cuisine", body: "Indulge in the authentic flavors of Maharashtrian cuisine with its diverse range of dishes.", image: "https://img.veenaworld.com/wp-content/uploads/2019/09/10-Delicious-Maharashtrian-Dishes-that-You-Must-Try.jpg" },
+      { id: 6, title: "Wildlife Safari in Tadoba National Park", body: "Witness the majestic wildlife of Maharashtra with an exhilarating safari in Tadoba National Park.", image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrTLs8mVwgK3WbtvQ1wsOGMC1sPf3IK8rYTkRoNH3JbA&s" }
+    ];
+    return blogsData.find(blog => blog.id === blogId);
+  }
+
+  function closePopup() {
+    const popup = document.getElementById("popupContainer");
+    popup.style.display = "none";
+  }
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    const blogsContainer = document.getElementById("blogsContainer");
+
+    // Function to fetch blogs data from the mock API
+    const fetchBlogs = async () => {
+      try {
+        // Simulate fetching data from a mock API
+        const blogsData = [
+          { id: 1, title: "Beautiful Sunset in Mumbai", body: "Experience the breathtaking view of the sunset from the beaches of Mumbai.", image: "https://im.whatshot.in/img/2020/Nov/istock-1161401635-cropped-1605867819.jpg" },
+          { id: 2, title: "Trekking in the Western Ghats", body: "Embark on an adventurous trekking journey through the lush greenery of the Western Ghats.", image: "https://images.livemint.com/rf/Image-621x414/LiveMint/Period2/2018/07/21/Photos/Processed/matheran-kTYH--621x414@LiveMint.jpg" },
+          { id: 3, title: "Exploring Historical Forts", body: "Discover the rich history of Maharashtra by visiting its ancient forts.", image: "https://www.tripnight.com/public/thumbs/monuments/7715/WIqBJxFOZG43_468_738.jpg" },
+          { id: 4, title: "Cultural Festivals of Maharashtra", body: "Immerse yourself in the vibrant cultural festivals celebrated across Maharashtra.", image: "https://tourdefarm.in/wp-content/uploads/2021/01/Ganeshotsav-In-Maharashtra.jpg" },
+          { id: 5, title: "Savoring Maharashtrian Cuisine", body: "Indulge in the authentic flavors of Maharashtrian cuisine with its diverse range of dishes.", image: "https://img.veenaworld.com/wp-content/uploads/2019/09/10-Delicious-Maharashtrian-Dishes-that-You-Must-Try.jpg" },
+          { id: 6, title: "Wildlife Safari in Tadoba National Park", body: "Witness the majestic wildlife of Maharashtra with an exhilarating safari in Tadoba National Park.", image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrTLs8mVwgK3WbtvQ1wsOGMC1sPf3IK8rYTkRoNH3JbA&s" }
+        ];
+
+        blogsData.forEach((blog) => {
+          // Create HTML for the blog card
+          const blogCardHtml = `
+            <div class="blog-card">
+              <img src="${blog.image}" alt="${blog.title}">
+              <div class="content">
+                <h2>${blog.title}</h2>
+                <p>${blog.body}</p>
+                <a href="#" onclick="readBlog(${blog.id});">Read more</a>
+              </div>
+            </div>
+          `;
+          blogsContainer.innerHTML += blogCardHtml;
+        });
+      } catch (error) {
+        console.error("Error fetching blogs:", error);
+      }
+    };
+
+    // Fetch blogs data and render blog cards
+    fetchBlogs();
+
+    // Form submission logic
+    const blogForm = document.getElementById("blogForm");
+    blogForm.addEventListener("submit", function(event) {
+      event.preventDefault();
+      const formData = new FormData(blogForm);
+      const authorName = formData.get("authorName");
+      const blogTitle = formData.get("blogTitle");
+      const email = formData.get("email");
+      const photo = formData.get("photo");
+      const blogBody = formData.get("blogBody");
+
+      // Add your logic to submit the form data
+      console.log("Form data:", authorName, blogTitle, email, photo, blogBody);
+
+      // Reset form after submission
+      blogForm.reset();
+      // Hide the form after submission
+      toggleAddBlogForm();
+    });
+  });
+</script>
+
+<footer>
+  <section class="footer">
+      <div class="box-container">
+          <div class="box">
+              <h3>Quick Links</h3>
+              <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
+              <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+              <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+              <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+              <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+          </div>
+
+          <div class="box">
+              <h3>Extra Links</h3>
+              <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+              <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
+              <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+              <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+
+          </div>
+
+          <div class="box">
+              <h3>Contact info</h3>
+              <a href="#"><i class="fa fa-phone"></i>428416212</a>
+              <a href="#"><i class="fa fa-phone"></i>483481292</a>
+              <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+              <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+          </div>
+
+          <div class="box">
+              <h3>Follow Us</h3>
+              <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+              <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+              <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+              <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+          </div>
+      </div>
+
+      <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+  </section>
+</footer>
+</body>
+</html>
diff --git a/features/currency.css b/features/currency.css
new file mode 100644
index 0000000..461beea
--- /dev/null
+++ b/features/currency.css
@@ -0,0 +1,91 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.header .logo img
+{
+    height: 45px;
+    padding: 0;
+}
+.header .navbar{
+    margin-left:auto;
+}
+.header .navbar a{
+    font-size: 1rem;
+    margin-left: 2rem;
+    color:black;
+    text-decoration: none;
+}
+.header .navbar a:hover{
+  text-decoration: underline;
+}
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end; /* Align items at the start */
+    max-width: 100%; /* Adjust container width as needed */
+}
+
+.left-container {
+    flex: 2;
+
+}
+
+.left-container img {
+    max-width: 100%;/* Ensure image does not exceed container width */
+    height: auto; /* Maintain aspect ratio */
+    display: flex; /* Prevent image from being inline */
+    border-radius: 10px; /* Add border-radius for rounded corners */
+   
+}
+
+.right-container {
+    flex: 4; /* Take up remaining space */
+}
+
+.heading {
+    margin-top: 75px; /* Remove default margin */
+    margin-bottom: 20px; /* Add space below heading */
+}
+#profile-button img{
+vertical-align:baseline !important
+}
+/* Your conversion field styles here */
diff --git a/features/currency.js b/features/currency.js
new file mode 100644
index 0000000..f294dda
--- /dev/null
+++ b/features/currency.js
@@ -0,0 +1,58 @@
+console.log("Main.js working")
+
+// Include api for currency change
+const api = "https://api.exchangerate-api.com/v4/latest/USD";
+
+// For selecting different controls
+let search = document.querySelector(".searchBox");
+let convert = document.querySelector(".convert");
+let fromCurrecy = document.querySelector(".from");
+let toCurrecy = document.querySelector(".to");
+let finalValue = document.querySelector(".finalValue");
+let finalAmount = document.getElementById("finalAmount");
+let resultFrom;
+let resultTo;
+let searchValue;
+
+// Event when currency is changed
+fromCurrecy.addEventListener('change', (event) => {
+	resultFrom = `${event.target.value}`;
+});
+
+// Event when currency is changed
+toCurrecy.addEventListener('change', (event) => {
+	resultTo = `${event.target.value}`;
+});
+
+search.addEventListener('input', updateValue);
+
+// Function for updating value
+function updateValue(e) {
+	searchValue = e.target.value;
+}
+
+// When user clicks, it calls function getresults 
+convert.addEventListener("click", getResults);
+
+// Function getresults
+function getResults() {
+	fetch(`${api}`)
+		.then(currency => {
+			return currency.json();
+		}).then(displayResults);
+}
+
+// Display results after conversion
+function displayResults(currency) {
+	let fromRate = currency.rates[resultFrom];
+	let toRate = currency.rates[resultTo];
+	finalValue.innerHTML =
+		((toRate / fromRate) * searchValue).toFixed(2);
+	finalAmount.style.display = "block";
+}
+
+// When user click on reset button
+function clearVal() {
+	window.location.reload();
+	document.getElementsByClassName("finalValue").innerHTML = "";
+};
diff --git a/features/currencyconv.html b/features/currencyconv.html
new file mode 100644
index 0000000..a7f9728
--- /dev/null
+++ b/features/currencyconv.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Currency Converter</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="/headfoot.css">
+    <link href="https://fonts.googleapis.com/css2?family=Amiri&family=Lobster&family=Pacifico&display=swap" rel="stylesheet">
+    <!-- linking style.css file-->
+    <link rel="stylesheet" href="currency.css">
+    <style>
+        .main-box {
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <section class="header">
+            <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+    
+            <nav class="navbar">
+                <a href="/Homepage/index.html">Home</a>
+                <a href="/aboutUS/aboutUs.html">About</a>
+                <a href="/packages/city_package/packages.html">Packages</a>
+                <a href="/gallery/gallery.html">Gallery</a>
+                <a href="/Other/contactUs.html">Contact</a>
+                <div class="dropdown">
+                    <a href="#" id="profile-button">
+                        <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                        <span>Hi User</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </a>
+                    <ul class="dropdown-content">
+                        <li><a href="/user/profile.html">Dashboard</a></li>
+                    </ul>
+                </div>
+            </nav>
+        </section>
+    </header>
+
+    <!-- Currency Converter -->
+    <h1 class="heading text-center display-2" style="font-size: 50px;">Currency Converter</h1>
+    <hr>
+    <div class="container">
+    <div class="left-container">
+<img src="currency.png" alt="">
+    </div>
+    <div class="right-container">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="main-box">
+                    <div class="form-group">
+                        <label for="oamount">Amount to Convert :</label>
+                        <input type="text" class="form-control searchBox" placeholder="0.00" id="oamount">
+                    </div>
+                    <div class="form-group">
+                        <label for="sel1">From:</label>
+                        <select class="form-control from" id="sel1">
+                            <option value="">Select One …</option>
+                            <option value="USD">USD</option>
+                            <option value="AED">AED</option>
+                            <option value="ARS">ARS</option>
+                            <option value="AUD">AUD</option>
+                            <option value="BGN">BGN</option>
+                            <option value="BRL">BRL</option>
+                            <option value="BSD">BSD</option>
+                            <option value="CAD">CAD</option>
+                            <option value="CHF">CHF</option>
+                            <option value="CLP">CLP</option>
+                            <option value="CNY">CNY</option>
+                            <option value="COP">COP</option>
+                            <option value="CZK">CZK</option>
+                            <option value="DKK">DKK</option>
+                            <option value="DOP">DOP</option>
+                            <option value="EGP">EGP</option>
+                            <option value="EUR">EUR</option>
+                            <option value="FJD">FJD</option>
+                            <option value="GBP">GBP</option>
+                            <option value="GTQ">GTQ</option>
+                            <option value="HKD">HKD</option>
+                            <option value="HRK">HRK</option>
+                            <option value="HUF">HUF</option>
+                            <option value="IDR">IDR</option>
+                            <option value="ILS">ILS</option>
+                            <option value="INR">INR</option>
+                            <option value="ISK">ISK</option>
+                            <option value="JPY">JPY</option>
+                            <option value="KRW">KRW</option>
+                            <option value="KZT">KZT</option>
+                            <option value="MVR">MVR</option>
+                            <option value="MXN">MXN</option>
+                            <option value="MYR">MYR</option>
+                            <option value="NOK">NOK</option>
+                            <option value="NZD">NZD</option>
+                            <option value="PAB">PAB</option>
+                            <option value="PEN">PEN</option>
+                            <option value="PHP">PHP</option>
+                            <option value="PKR">PKR</option>
+                            <option value="PLN">PLN</option>
+                            <option value="PYG">PYG</option>
+                            <option value="RON">RON</option>
+                            <option value="RUB">RUB</option>
+                            <option value="SAR">SAR</option>
+                            <option value="SEK">SEK</option>
+                            <option value="SGD">SGD</option>
+                            <option value="THB">THB</option>
+                            <option value="TRY">TRY</option>
+                            <option value="TWD">TWD</option>
+                            <option value="UAH">UAH</option>
+                            <option value="UYU">UYU</option>
+                            <option value="ZAR">ZAR</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="sel2">To:</label>
+                        <select class="form-control to" id="sel2">
+                            <option value="">Select One …</option>
+                            <option value="USD">USD</option>
+                            <option value="AED">AED</option>
+                            <option value="ARS">ARS</option>
+                            <option value="AUD">AUD</option>
+                            <option value="BGN">BGN</option>
+                            <option value="BRL">BRL</option>
+                            <option value="BSD">BSD</option>
+                            <option value="CAD">CAD</option>
+                            <option value="CHF">CHF</option>
+                            <option value="CLP">CLP</option>
+                            <option value="CNY">CNY</option>
+                            <option value="COP">COP</option>
+                            <option value="CZK">CZK</option>
+                            <option value="DKK">DKK</option>
+                            <option value="DOP">DOP</option>
+                            <option value="EGP">EGP</option>
+                            <option value="EUR">EUR</option>
+                            <option value="FJD">FJD</option>
+                            <option value="GBP">GBP</option>
+                            <option value="GTQ">GTQ</option>
+                            <option value="HKD">HKD</option>
+                            <option value="HRK">HRK</option>
+                            <option value="HUF">HUF</option>
+                            <option value="IDR">IDR</option>
+                            <option value="ILS">ILS</option>
+                            <option value="INR">INR</option>
+                            <option value="ISK">ISK</option>
+                            <option value="JPY">JPY</option>
+                            <option value="KRW">KRW</option>
+                            <option value="KZT">KZT</option>
+                            <option value="MVR">MVR</option>
+                            <option value="MXN">MXN</option>
+                            <option value="MYR">MYR</option>
+                            <option value="NOK">NOK</option>
+                            <option value="NZD">NZD</option>
+                            <option value="PAB">PAB</option>
+                            <option value="PEN">PEN</option>
+                            <option value="PHP">PHP</option>
+                            <option value="PKR">PKR</option>
+                            <option value="PLN">PLN</option>
+                            <option value="PYG">PYG</option>
+                            <option value="RON">RON</option>
+                            <option value="RUB">RUB</option>
+                            <option value="SAR">SAR</option>
+                            <option value="SEK">SEK</option>
+                            <option value="SGD">SGD</option>
+                            <option value="THB">THB</option>
+                            <option value="TRY">TRY</option>
+                            <option value="TWD">TWD</option>
+                            <option value="UAH">UAH</option>
+                            <option value="UYU">UYU</option>
+                            <option value="ZAR">ZAR</option>
+                        </select>
+                    </div>
+                    <div class="text-center">
+                        <!-- Convert button -->
+                        <button class="btn btn-primary convert m-2" type="submit">Convert</button>
+                        <!-- Reset button -->
+                        <button class="btn btn-primary m-2" onclick="clearVal()">Reset</button>
+                    </div>
+                    <!-- Display the converted amount -->
+                    <div id="finalAmount" class="text-center">
+                        <h2>Converted Amount : <span class="finalValue" style="color:green;"></span></h2>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+    <!-- linking script.js file -->
+    <script src="currency.js"></script>
+</body>
+</html>
diff --git a/features/googlemap.html b/features/googlemap.html
new file mode 100644
index 0000000..c638606
--- /dev/null
+++ b/features/googlemap.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Maharashtra Map</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
+    <style>
+        #map {
+            height: 100vh;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const map = L.map('map').setView([19.7515, 75.7139], 7);
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+
+            const maharashtraLocations = [
+                { name: "Gateway of India, Mumbai", lat: 18.9217, lon: 72.8347 },
+                { name: "Marine Drive, Mumbai", lat: 18.9443, lon: 72.8236 },
+                { name: "Elephanta Caves, Mumbai", lat: 18.9647, lon: 72.9315 },
+                { name: "Shaniwar Wada, Pune", lat: 18.5196, lon: 73.8553 },
+                { name: "Sinhagad Fort, Pune", lat: 18.3655, lon: 73.7538 },
+                { name: "Ajanta Caves, Aurangabad", lat: 20.5513, lon: 75.7037 },
+                { name: "Ellora Caves, Aurangabad", lat: 20.0224, lon: 75.6823 },
+                { name: "Bibi Ka Maqbara, Aurangabad", lat: 19.8776, lon: 75.3580 },
+                { name: "Chhatrapati Shivaji Maharaj Vastu Sangrahalaya, Mumbai", lat: 18.9300, lon: 72.8337 },
+                { name: "Sanjay Gandhi National Park, Mumbai", lat: 19.2148, lon: 72.9106 },
+                { name: "Daulatabad Fort, Aurangabad", lat: 19.9440, lon: 75.2537 },
+                { name: "Panchakki, Aurangabad", lat: 19.8806, lon: 75.3289 },
+                { name: "Pataleshwar Cave Temple, Pune", lat: 18.5189, lon: 73.8469 },
+                { name: "Haji Ali Dargah, Mumbai", lat: 18.9824, lon: 72.8051 },
+                { name: "Siddhivinayak Temple, Mumbai", lat: 19.0169, lon: 72.8304 },
+                { name: "Kanheri Caves, Mumbai", lat: 19.2163, lon: 72.9147 },
+                { name: "Mumbai Film City, Mumbai", lat: 19.1551, lon: 72.9024 },
+                { name: "Shreemant Dagdusheth Halwai Ganpati Temple, Pune", lat: 18.5162, lon: 73.8567 },
+                { name: "Raja Dinkar Kelkar Museum, Pune", lat: 18.5142, lon: 73.8412 },
+                { name: "Worli Sea Face, Mumbai", lat: 19.0083, lon: 72.8156 },
+            ];
+
+            const customMarkerIcon = L.icon({
+                iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+                iconSize: [25, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34]
+            });
+
+            maharashtraLocations.forEach(location => {
+                const marker = L.marker([location.lat, location.lon], { icon: customMarkerIcon }).addTo(map);
+                marker.bindPopup(`<b>${location.name}</b><br/><a href="https://en.wikipedia.org/wiki/${encodeURIComponent(location.name.split(',')[0])}" target="_blank">Know More</a>`);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/features/lens.css b/features/lens.css
new file mode 100644
index 0000000..b3a171e
--- /dev/null
+++ b/features/lens.css
@@ -0,0 +1,82 @@
+/* styles.css */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    border: 2px solid #ccc;
+    border-radius: 8px;
+}
+
+.title {
+    text-align: center;
+    font-size: 28px;
+    color: #333;
+}
+
+.input-section {
+    margin-bottom: 20px;
+}
+
+.input-label {
+    display: block;
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.input-field {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.analyze-button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    margin-top: 10px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 18px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.results-section,
+.wikipedia-info {
+    margin-top: 20px;
+}
+
+.results-title,
+.info-title {
+    font-size: 20px;
+    color: #333;
+}
+
+.concepts-list {
+    list-style: none;
+    padding: 0;
+}
+
+.concepts-list li {
+    margin-bottom: 10px;
+}
+
+.info-content {
+    margin-top: 10px;
+}
+
+.loading {
+    text-align: center;
+    font-size: 18px;
+    color: #333;
+    display: none;
+}
diff --git a/features/lens.html b/features/lens.html
new file mode 100644
index 0000000..12014e8
--- /dev/null
+++ b/features/lens.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Google Lens Image Analyzer</title>
+    <link rel="stylesheet" href="lens.css">
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">Image Analyzer</h1>
+        <div class="input-section">
+            <label for="imageUrl" class="input-label">Image URL:</label>
+            <input type="text" id="imageUrl" class="input-field">
+            <button id="analyzeBtn" class="analyze-button">Analyze Image</button>
+        </div>
+        <div id="analysisResults" class="results-section hidden">
+            <h3 class="results-title">Analysis Results:</h3>
+            <ul id="conceptsList" class="concepts-list"></ul>
+        </div>
+        <div id="wikipediaInfo" class="wikipedia-info hidden">
+            <h3 class="info-title">Information:</h3>
+            <div id="infoContent" class="info-content"></div>
+        </div>
+        <div id="loading" class="loading hidden">Analyzing image...</div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
+    <script src="lens.js"></script>
+</body>
+</html>
diff --git a/features/lens.js b/features/lens.js
new file mode 100644
index 0000000..b3ee846
--- /dev/null
+++ b/features/lens.js
@@ -0,0 +1,66 @@
+// script.js
+$(document).ready(function () {
+    $('#analyzeBtn').on('click', function () {
+        const imageUrl = $('#imageUrl').val().trim();
+        if (imageUrl !== '') {
+            $('#loading').show();
+            $.ajax({
+                type: 'POST',
+                url: 'https://api.clarifai.com/v2/models/general-image-recognition/versions/aa7f35c01e0642fda5cf400f543e7c40/outputs',
+                headers: {
+                    'Authorization': 'Key bbc22af225694f13ab678711c67f3c1f',
+                    'Content-Type': 'application/json'
+                },
+                data: JSON.stringify({
+                    "inputs": [
+                        {
+                            "data": {
+                                "image": {
+                                    "url": imageUrl
+                                }
+                            }
+                        }
+                    ]
+                }),
+                success: function (response) {
+                    $('#loading').hide();
+                    $('#analysisResults').removeClass('hidden');
+                    $('#conceptsList').empty();
+                    const concepts = response.outputs[0].data.concepts;
+                    concepts.slice(0, 1).forEach(function (concept) {
+                        $('#conceptsList').append('<li>' + concept.name + '<button class="know-more-btn">Know More</button></li>');
+                    });
+                },
+                error: function (xhr, status, error) {
+                    $('#loading').hide();
+                    alert('Error analyzing image: ' + error);
+                }
+            });
+        } else {
+            alert('Please enter an image URL.');
+        }
+    });
+
+    $(document).on('click', '.know-more-btn', function () {
+        const conceptName = $(this).parent().text().trim();
+        fetchWikipediaInfo(conceptName);
+    });
+
+    function fetchWikipediaInfo(conceptName) {
+        $.ajax({
+            type: 'GET',
+            url: 'https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro=true&titles=' + conceptName,
+            dataType: 'jsonp',
+            success: function (data) {
+                const pages = data.query.pages;
+                const firstPageId = Object.keys(pages)[0];
+                const extract = pages[firstPageId].extract;
+                $('#wikipediaInfo').removeClass('hidden');
+                $('#infoContent').html(DOMPurify.sanitize(extract));
+            },
+            error: function (xhr, status, error) {
+                alert('Error fetching Wikipedia information: ' + error);
+            }
+        });
+    }
+});
diff --git a/features/mumbai sunset.jpg b/features/mumbai sunset.jpg
new file mode 100644
index 0000000..15ba6fe
Binary files /dev/null and b/features/mumbai sunset.jpg differ
diff --git a/features/wheel.html b/features/wheel.html
new file mode 100644
index 0000000..b65122a
--- /dev/null
+++ b/features/wheel.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+       <head>
+              <title>spin the wheel game</title>
+              <style>
+              .container {
+                     display: flex;
+                     align-items: flex-start; /* Align items to the top */
+                     justify-content: center;
+                     padding: 20px;
+              }
+              .wheel{
+                     position:relative;
+                     height: 500px;
+                     width: 500px;
+              }
+              .spin{
+                     position:relative;
+                     height: 100%;
+                     width: 100%; 
+                     border-radius: 50%;
+                     border: 10px solid rgb(3, 49, 7);
+                     overflow: hidden;
+                     transition: all ease 5s;
+              }
+              body{
+                     display: flex;
+                     align-items: center;
+                     justify-content: center;
+                   
+              }
+              span{
+                     height: 50%;
+                     width:  50%;
+                     display: inline-block;
+                     position: absolute;
+              }
+              .spopt{
+                     clip-path: polygon( 0% 92% , 100% 50%, 0% 8%);
+                     background-color: orangered;
+                     top: 120px;
+                     left: 0;
+              }
+              .spopt1{
+                     clip-path: polygon(100% 92%, 0 50%, 100% 8%);
+                     background-color: yellow;
+                     top: 120px;
+                     right: 0;
+              }
+              .spopt2{
+                     clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
+                     background-color:  red;
+                     left: 120px;
+                     bottom: 0;
+              }
+              .spopt3{
+                     clip-path: polygon(50% 100%, 92% 0%, 8% 0%);                          
+                     background-color:  blue;
+                     left: 120px;
+                     top: 0px;
+              }
+              .opt2{
+                     height: 100%;
+                     width: 100%;
+                     transform: rotate(-136deg);
+              }
+              .spopt4{
+                     clip-path: polygon( 0% 92%, 100% 50%, 0% 8%);
+                     background-color: green;
+                     top: 120px;
+                     left: 0;
+              }
+              .spopt5{
+                     clip-path: polygon(100% 92%, 0 50%, 100% 8%);
+                     background-color: orange ;
+                     top: 120px;
+                     right: 0;
+              }
+              .spopt6{
+                     clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
+                     background-color:  purple;
+                     left: 120px;
+                     bottom: 0;
+              }
+              .spopt7{
+                     clip-path: polygon(50% 100%, 92% 0%, 8% 0%);  
+                     background-color:  rgb(231, 149, 163);
+                     left: 120px;
+                     top: 0px;
+              }
+              span strong{
+                     height: 65px;
+                     width: 65px;
+                     line-height: 27px;
+                     border-radius: 50%;
+                     font-size: 18px;
+                     text-align: center;
+                     /* background-color: rgb(112, 245, 35); */
+                     position: absolute;
+                     top:50%;
+                     left:50%;
+                     transform: translate(-50%,-50%);
+              }
+              .rotate{
+                     position: absolute;
+                     top:50%;
+                     left:50%;
+                     transform: translate(-50%,-50%);
+                     width: 80px;
+                     height: 80px;
+                     border-radius: 50%;
+                     border: 4px solid rgb(115, 255, 0);
+                     background-color: rgb(0, 180, 165);
+                     color: black;
+                     font-weight: bold;
+                     cursor: pointer;
+              }
+              .rotate:active{
+                     height: 95px;
+                     width:95px;
+                     font-size: 25px;
+              }
+              .list-box {
+                     width: 300px;
+                     padding: 20px;
+                     background-color: #fff;
+                     border-radius: 10px;
+                     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Neat box shadow */
+                     margin-left: 50px; /* Adjust margin */
+              }
+              #head{ 
+                     color: White;
+              }
+              </style>
+              <script>
+              function wheel_spin(){
+                     var a = 1234567890;
+                     var b = 1234567890;
+                     var m = Math.floor(Math.random()*(a-b))+b;
+                     document.getElementById("spin").style.transform="rotate("+m+"deg)";
+              }
+              </script>
+              <link rel="shortcut icon" type="image/png" href="pictures/logo.png">
+              <script src="https://kit.fontawesome.com/b8ac024939.js" crossorigin="anonymous"></script>
+       </head>
+       <body>
+              
+              <div class="container">
+                     <div class="wheel">
+                            <div class="spin" id="spin">
+                                   <div class="opt">
+                                          <span class="spopt">
+                                                 <strong>Mumbai with Preeti tours</strong>
+                                          </span>
+                                          <span class="spopt1">
+                                                 <strong>Pune with Parvati tours</strong>
+                                          </span>
+                                          <span class="spopt2">
+                                                 <strong>Nagpur with Safar tours</strong>
+                                          </span>
+                                          <span class="spopt3">
+                                                 <strong>Cultural tour of Aurangabad</strong>
+                                          </span>
+                                   </div>
+                                   <div class="opt2">
+                                          <span class="spopt4">
+                                                 <strong>Aurangabad tour</strong>
+                                          </span>
+                                          <span class="spopt5">
+                                                 <strong>Ajanta, Nagpur Discovery</strong>
+                                          </span>
+                                          <span class="spopt6">
+                                                 <strong>Pune with Hilton Tours</strong>
+                                          </span>
+                                          <span class="spopt7">
+                                                 <strong>Mumbai with Geeta Tours</strong>
+                                          </span>
+                                   </div>
+                            </div>
+                            <button class="rotate" onclick="wheel_spin()">spin</button>
+                     </div>
+                     <div class="list-box">
+                            <h2>Why not add some fun elements to your travel?</h2>
+                            <ul>
+                                   <li>Press the spin button to get a random package assigned to you.</li>
+                                   <li>Have fun exploring the exciting travel options!</li>
+                                   <li>Remember, every spin is an adventure waiting to happen!</li>
+                            </ul>
+                     </div>
+              </div>
+       </body>
+</html>
diff --git a/features/wheel.png b/features/wheel.png
new file mode 100644
index 0000000..928c3c2
Binary files /dev/null and b/features/wheel.png differ
diff --git a/food.png b/food.png
deleted file mode 100644
index 5a62f59..0000000
Binary files a/food.png and /dev/null differ
diff --git a/gallery.html b/gallery.html
deleted file mode 100644
index 1a57ded..0000000
--- a/gallery.html
+++ /dev/null
@@ -1,303 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="gallery.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
-
-    <title>Gallery | TravelHub</title>
-    </head>
-
-
-<body>
-    <header>
-        <section class="header" >
-            <a href="homepg.html" class="logo"><img src="logoabout.png"></a>
-    
-            <nav class="navbar">
-                <a href="index.html">Home</a>
-                <a href="aboutUs.html">About</a>
-                <a href="packages/city_package/packages.html">Packages</a>
-                <a href="gallery.html">Gallery</a>
-                <a href="contactUs.html"> Contact</a>
-            </nav>
-        </section>
-    </header>
-
-
-    <div class="wrapper">
-        <div class="container">
-            <h1 class="heading">Traveller's Gallery</h1>
-            <p class="sub-txt">Share your journey snashots with us</p>
-        <div class="gallery">
-            <div class="card">
-                <img src="/packages/package_list/Mumbai1.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Juhu Beach</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </div>
-            <figure class="card">
-                <img src="/packages/package_list/pune.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Shaniwar wada, Pune</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>   
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/nagpur1.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Nagpur</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div> 
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/Mumbai2.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Gateway Of India</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/pune2.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Pune</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/nagpur2.jpg" alt="">
-                    <div class="overlay-text">
-                    <h2 class="card-title">Pune</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/Mumbai.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Mumbai CST</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/pune3.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Visapur Fort</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/nagpur3.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Tadoba-Andhari Tiger Reserve</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-             </figure>
-            <figure class="card">
-                <img src="/Nashik1.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Vineyard</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <figure class="card">
-                <img src="Kas Pathar.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Kas Pathar, Satara</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <figure class="card">
-                <img src="/packages/package_list/Aurangabad.jpg" alt="">
-                <div class="overlay-text">
-                    <h2 class="card-title">Ajanta Caves</h2>
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, commodi.</p>
-                </div>
-            </figure>
-            <!-- <figure class="card">
-                <img src="Nashik2.jpg" alt="">
-                <figcaption>Panchavati</figcaption>
-            </figure>
-            <figure class="card">
-                <img src="Raigad.jpg" alt="">
-                <figcaption>Raigad Fort</figcaption>
-            </figure> -->
-        </div>
-
-<div class="add-photo-card">
-   
-        <div class="add-text">
-            <h3>Share Your Journey with us😄❤️</h3>    
-           <p id="lecker">Click here👇 to Upload your photos</p>
-       <button class="add-photos-button" onclick="uploadPhoto()">Add Photo</button>
-           </div>
-    <div class="img-add">
-        <img src="image-gallery.png" alt="add-photo-card">
-    </div>
-    
-        
-     
-    </div>
-</div>
-<!-- <script src="script.js"></script>  -->
-  
- <!-- <div class="blogs-container">
-        <h2 class="blogs-header">Read Our Blogs</h2>
-        <ul class="blog-links" id="blog-list">
-            <li>
-                <a href="#">Travel Blog 1</a>
-                <button class="delete-blog-button" onclick="deleteBlog(this)">Delete</button>
-                <button class="update-blog-button" onclick="updateBlog(this)">Update</button>
-            </li>
-            <li>
-                <a href="#">Travel Blog 2</a>
-                <button class="delete-blog-button" onclick="deleteBlog(this)">Delete</button>
-                <button class="update-blog-button" onclick="updateBlog(this)">Update</button>
-            </li>
-            <li>
-                <a href="#">Travel Blog 3</a>
-                <button class="delete-blog-button" onclick="deleteBlog(this)">Delete</button>
-                <button class="update-blog-button" onclick="updateBlog(this)">Update</button>
-            </li>
-            <li>
-                <a href="#">Travel Blog 4</a>
-                <button class="delete-blog-button" onclick="deleteBlog(this)">Delete</button>
-                <button class="update-blog-button" onclick="updateBlog(this)">Update</button>
-            </li>
-        </ul>
-        <button class="add-blog-button" id="add-blog-button">Add Blog</button>
-        
-    </div> -->
-
-    <!-- <div class="add-blog-dialog" id="add-blog-dialog">
-        <h2>Add a Blog</h2>
-        <input type="text" id="blog-title" placeholder="Blog Title">
-        <textarea id="blog-content" placeholder="Blog Content"></textarea>
-        <button id="publish-blog-button" class="add-blog-button">Publish Blog</button>
-    </div> -->
-
-    </div>
-
-    <footer>
-<section class="footer">
-    <div class="box-container">
-        <div class="box">
-            <h3>Quick Links</h3>
-            <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-            <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-            <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-            <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
-        </div>
-
-        <div class="box">
-            <h3>Extra Links</h3>
-            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-            <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
-        </div>
-
-        <div class="box">
-            <h3>Contact info</h3>
-            <a href="#"><i class="fa fa-phone"></i>428416212</a>
-            <a href="#"><i class="fa fa-phone"></i>483481292</a>
-            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
-            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
-        </div>
-
-        <div class="box">
-            <h3>Follow Us</h3>
-            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
-            <a href="#"><i class="fa fa-twitter"></i>twitter</a>
-            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
-            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
-        </div>
-    </div>
-
-    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
-</section>
-</footer>
-<!-- <script>
-    const addBlogButton = document.getElementById('add-blog-button');
-    const addBlogDialog = document.getElementById('add-blog-dialog');
-    const publishBlogButton = document.getElementById('publish-blog-button');
-    const blogList = document.getElementById('blog-list');
-
-    addBlogButton.addEventListener('click', function () {
-        addBlogDialog.style.display = 'block';
-    });
-
-    publishBlogButton.addEventListener('click', function () {
-        const blogTitle = document.getElementById('blog-title').value;
-        const blogContent = document.getElementById('blog-content').value;
-
-        // Create a new blog entry
-        const newBlogItem = document.createElement('li');
-        newBlogItem.innerHTML = `
-            <a href="#">${blogTitle}</a>
-            <button class="delete-blog-button" onclick="deleteBlog(this)">Delete</button>
-            <button class="update-blog-button" onclick="updateBlog(this)">Update</button>
-        `;
-        blogList.appendChild(newBlogItem);
-
-        // Clear the form and hide the dialog box
-        document.getElementById('blog-title').value = '';
-        document.getElementById('blog-content').value = '';
-        addBlogDialog.style.display = 'none';
-    });
-
-    function deleteBlog(button) {
-        const listItem = button.parentElement;
-        blogList.removeChild(listItem);
-    }
-
-    function updateBlog(button) {
-        // You can add code to handle updating a blog post here.
-    }
-</script> -->
-<script>
-    const fileInput = document.getElementById('fileInput');
-const gallery = document.getElementById('gallery');
-
-function uploadPhoto() {
-    const file = fileInput.files[0];
-    if (file) {
-        const formData = new FormData();
-        formData.append('photo', file);
-
-        fetch('/upload', {
-            method: 'POST',
-            body: formData,
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                displayPhoto(data.photoPath);
-            } else {
-                alert('Failed to upload photo');
-            }
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            alert('Failed to upload photo');
-        });
-    } else {
-        alert('Please choose a file');
-    }
-}
-
-function displayPhoto(photoPath) {
-    const img = document.createElement('img');
-    img.src = photoPath;
-    gallery.appendChild(img);
-}
-</script>
-
-</body>
-</html>
diff --git a/Kas Pathar.jpg b/gallery/Kas Pathar.jpg
similarity index 100%
rename from Kas Pathar.jpg
rename to gallery/Kas Pathar.jpg
diff --git a/Nashik1.jpg b/gallery/Nashik1.jpg
similarity index 100%
rename from Nashik1.jpg
rename to gallery/Nashik1.jpg
diff --git a/gallery.css b/gallery/gallery.css
similarity index 64%
rename from gallery.css
rename to gallery/gallery.css
index e423061..8d372d4 100644
--- a/gallery.css
+++ b/gallery/gallery.css
@@ -8,73 +8,72 @@
     font-family: 'Poppins', sans-serif;
 }
 
-
 :root {
---main-color: rgb(66, 66, 255);
---black: #222;
---white: #fff;
---light-black: #777;
---light-white: #fff9;
---dark-bg: rgba(0, 0, 0, .7);
---light-bg: #eee;
---border: .1rem solid var(--black);
---box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
---text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
---light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
---dark-text: #333; /* Adjust as needed for better contrast */
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
 }
 
 html::-webkit-scrollbar {
-width: 1rem;
+    width: 1rem;
 }
 html::-webkit-scrollbar-track{
-background-color:var(--white);
+    background-color:var(--white);
 }
 html::-webkit-scrollbar-thumb{
-background-color:var(--light-black);
+    background-color:var(--light-black);
 }
 
 section{
-padding: 5rem 10%;
+    padding: 5rem 10%;
 }
 
 @keyframes fadeIn {
-0% { transform: scale(0);
-  opacity: 0;
-}
+    0% { transform: scale(0);
+        opacity: 0;
+    }
 }
 .header {
-position: fixed;
-top: 0;
-left: 0;
-right: 0;
-z-index: 1001;
-background-color: var(--white);
-display: flex;
-padding-top: 0.5rem;
-padding-bottom: 0.5rem;
-box-shadow: var(--box-shadow);
-padding-left: 10px;
-align-items: center;
-justify-content: space-between;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .header .logo img
 {
-height: 45px;
-padding: 0;
+    height: 45px;
+    padding: 0;
 }
 .header .navbar{
-margin-left:auto;
+    margin-left:auto;
 }
 .header .navbar a{
-font-size: 1rem;
-margin-left: 2rem;
-color: black;
-text-decoration: none;
+    font-size: 1rem;
+    margin-left: 2rem;
+    color: var(--black);
+    text-decoration: none;
 }
 .header .navbar a:hover{
-text-decoration: underline;
+  text-decoration: underline;
 }
 #menu-btn{
 font-size: 2.5rem;
@@ -137,67 +136,67 @@ html{
 }
 
 .footer {
-/* background: url(footer.jpg) no-repeat; */
-background-size: auto;
-background-color: #333;
-background-position: center;
-padding-top: 0;
-padding-bottom: 0;
-margin-top: 3rem;
-/* z-index: 999; Set a lower z-index value */
+  /* background: url(footer.jpg) no-repeat; */
+  background-size: auto;
+  background-color: #333;
+  background-position: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 3rem;
+  z-index: 999; /* Set a lower z-index value */
 }
 
 .footer .box-container {
-display: grid;
-grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
-gap: 3rem;
-padding: 2rem;
-padding-top: 2rem;
-margin-bottom: 0;
-padding-bottom: 0;
+  display: grid;
+  grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+  gap: 3rem;
+  padding: 2rem;
+  padding-top: 2rem;
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
 .footer .box-container .box h3 {
-color: white;
-font-size: 1.5rem;
-padding-bottom: 1rem;
+  color: white;
+  font-size: 1.5rem;
+  padding-bottom: 1rem;
 }
 
 .footer .box-container .box a {
-color: var(--light-white);
-font-size: 1rem;
-padding-bottom: 1rem;
-display: block;
-text-decoration: none;
+  color: var(--light-white);
+  font-size: 1rem;
+  padding-bottom: 1rem;
+  display: block;
+  text-decoration: none;
 }
 
 .footer .box-container .box a i {
-color: var(--main-color);
-padding-right: .5rem;
-transition: .2s linear;
+  color: var(--main-color);
+  padding-right: .5rem;
+  transition: .2s linear;
 }
 
 .footer .box-container .box a:hover i {
-padding-right: 2rem;
+  padding-right: 2rem;
 }
 .footer .credit{
-text-align: center;
-padding-top: 1rem;
-margin-top: 1rem;
-padding-bottom: 1rem;
-border-top: .1rem solid var(--light-white);
-font-size: 1rem;
-color: var(--light-white);
+  text-align: center;
+  padding-top: 1rem;
+  margin-top: 1rem;
+  padding-bottom: 1rem;
+  border-top: .1rem solid var(--light-white);
+  font-size: 1rem;
+  color: var(--light-white);
 }
 .footer .credit span{
-color: var(--main-color);
+  color: var(--main-color);
 }
 
 .wrapper{
     margin-top: 70px;
 height: 100vh;
-overflow-x: hidden;
-/* overflow-y: auto; */
+/* overflow-x: hidden; */
+/* overflow-y: hidden; */
 }
 
 .container{
@@ -545,3 +544,99 @@ cursor: pointer;
 font-size: 16px;
 }
 
+/* Modal styles */
+.modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+
+}
+
+/* Modal Content */
+.modal-content {
+
+  background-color: white;
+  margin: 6% auto; /* 15% from the top and centered */
+  padding: 1.8rem;
+  /* border: 1px solid #888; */
+  border-radius: 1.2rem;
+  overflow: auto;
+  width: 40%; /* Could be more or less, depending on screen size */
+}
+.modal-content input{
+  background-color: rgb(230, 230, 230);
+  padding: .5rem;
+  width: 100%;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: none;
+  margin-top: 1em;
+}
+.modal-content h4{
+  color: rgb(5, 5, 5);
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+  margin-top: 0;
+}
+#uploadButton{
+  background-color: #007BFF;
+color: #f7f7f7;
+border: none;
+width: 12vw;
+align-items: center;
+padding: 10px 20px;
+border-radius: 5px;
+cursor: pointer;
+font-size: 16px;
+margin-top:20px;
+}
+#previewImage{
+  max-height: 200px;
+display: flex;
+justify-content: center;
+}
+.close{
+ display: flex;
+ justify-content: end;
+ font-size: 1.4em;
+ margin: 0;
+ padding: 0;
+}
+
+#LOGIN{
+   
+  font-weight: 500;
+  color: white;
+  background-color: black;
+  text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+  background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+  position: relative;
+  display: inline-block;
+  margin-left: 2rem;
+}
+#userProfileLink{
+  border-radius: 2rem;
+  padding: 10px;
+  background-color: #eaeaea;
+}
+#userProfileLink:hover{
+ 
+  background-color: #e3e3e367;
+}
+
+.user-greeting {
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/gallery/gallery.html b/gallery/gallery.html
new file mode 100644
index 0000000..8b8a86c
--- /dev/null
+++ b/gallery/gallery.html
@@ -0,0 +1,316 @@
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="gallery.css">
+        <link rel="stylesheet" href="../headfoot.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+        <title>Gallery | TravelHub</title>
+        </head>
+
+
+    <body>
+        <header>
+            <section class="header" >
+                <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+        
+                <nav class="navbar">
+                    <a href="/Homepage/index.html">Home</a>
+                    <a href="/aboutUS/aboutUs.html">About</a>
+                    <a href="/packages/city_package/packages.html">Packages</a>
+                    <a href="/gallery/gallery.html">Gallery</a>
+                    <a href="/Other/contactUs.html">Contact</a>
+                    <div class="dropdown">
+                        <a href="#" id="profile-button">
+                            <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                            <span>Hi User</span>
+                            <i class="fas fa-chevron-down"></i>
+                        </a>
+                        <ul class="dropdown-content">
+                            <li><a href="/user/profile.html">Dashboard</a></li>
+                        </ul>
+                    </div>
+                </nav>
+                
+            </section>
+        </header>
+
+
+        <div class="wrapper">
+            <div class="container">
+                <h1 class="heading">Traveller's Gallery</h1>
+                <p class="sub-txt">Share your journey snashots with us</p>
+            <div class="gallery">
+                <div class="card">
+                    <img src="/packages/package_list/Mumbai1.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Juhu Beach</h2>
+                        <p class="pic_caption">A beautiful beach with stunning sunset views. Perfect for a relaxing evening stroll.</p>
+                    </div>
+                </div>
+                <figure class="card">
+                    <img src="/packages/package_list/pune.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Shaniwar wada, Pune</h2>
+                        <p class="pic_caption">A historic fort with intricate architecture. A must-visit for history enthusiasts.</p>
+                    </div>   
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/nagpur1.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Nagpur</h2>
+                        <p class="pic_caption">A vibrant city with a rich cultural heritage. Known for its delicious street food and bustling markets.</p>
+                    </div> 
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/Mumbai2.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Gateway Of India</h2>
+                        <p class="pic_caption">An iconic monument overlooking the Arabian Sea. A popular tourist attraction.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/pune2.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Pune</h2>
+                        <p class="pic_caption">A bustling city with a mix of modernity and tradition. Known for its educational institutions and vibrant nightlife.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/nagpur2.jpg" alt="">
+                        <div class="overlay-text">
+                        <h2 class="card-title">Pune</h2>
+                        <p class="pic_caption">It is celebrated for its rich heritage and academic excellence, harmoniously integrates tradition and modernity, offering a unique cultural tapestry.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/Mumbai.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Mumbai CST</h2>
+                        <p class="pic_caption">An architectural marvel and a UNESCO World Heritage Site. A symbol of Mumbai's rich history.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/pune3.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Visapur Fort</h2>
+                        <p class="pic_caption">A scenic hill fort offering breathtaking views of the surrounding landscape. Perfect for trekking enthusiasts.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/nagpur3.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Tadoba-Andhari Tiger Reserve</h2>
+                        <p class="pic_caption">A haven for wildlife lovers. Spot tigers, leopards, and other exotic animals in their natural habitat.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="/gallery/Nashik1.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Vineyard</h2>
+                        <p class="pic_caption">Experience the charm of wine tasting amidst picturesque vineyards. A delightful retreat for wine connoisseurs.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="Kas Pathar.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Kas Pathar, Satara</h2>
+                        <p class="pic_caption">Known as the Valley of Flowers, this place blooms with vibrant colors during the monsoon season. A photographer's paradise.</p>
+                    </div>
+                </figure>
+                <figure class="card">
+                    <img src="/packages/package_list/Aurangabad.jpg" alt="">
+                    <div class="overlay-text">
+                        <h2 class="card-title">Ajanta Caves</h2>
+                        <p class="pic_caption">An ancient rock-cut cave complex showcasing exquisite Buddhist art and architecture. A UNESCO World Heritage Site.</p>
+                    </div>
+                </figure>
+                <!-- <figure class="card">
+                    <img src="Nashik2.jpg" alt="">
+                    <figcaption>Panchavati</figcaption>
+                </figure>
+                <figure class="card">
+                    <img src="Raigad.jpg" alt="">
+                    <figcaption>Raigad Fort</figcaption>
+                </figure> -->
+            </div>
+
+            <div class="add-photo-card">
+    
+                <div class="add-text">
+                    <h3>Share Your Journey with us</h3>    
+                <p id="lecker">Click here to Upload your photos</p>
+                <button type="button"  class="add-photos-button" onclick="chooseFile()">Add Photo</button>
+            
+                </div>
+                <div id="previewModal" class="modal" style="display: none;">
+                    <div class="modal-content">
+                        <span class="close" onclick="closePreviewModal()">&times;</span>
+                        <h4>Photo Preview</h4>
+                        <img id="previewImage" alt="Preview" >
+                        <input type="text" id="titleInput" placeholder="Title">
+                        <input type="text" id="captionInput" placeholder="Add a caption...(5-10 words)">
+                        <button type="button" id="uploadButton" onclick="uploadPhoto()">Upload Photo</button>
+                    </div>
+                </div>
+        
+            
+                <form id="uploadForm" style="display: none;">
+                    <input type="file" id="photoInput" accept="image/*" style="display: none;">
+                    <input type="file" id="hiddenPhotoInput" accept="image/*" style="display: none;">
+                </form>
+            
+                <div class="uploaded-photo" id="uploadedPhoto" style="display: none;">
+                    <h4>Uploaded Photo</h4>
+                    <img id="photoPreview" alt="Preview" style="max-width: 300px;">
+                </div>
+            
+                <div class="img-add">
+                    <img src="/social logos/image-gallery.png" alt="add-photo-card">
+                </div>
+            </div>
+            <section class="footer">
+                <div class="box-container">
+                    <div class="box">
+                        <h3>Quick Links</h3>
+                        <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                        <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                        <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                        <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                        <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                    </div>
+            
+                    <div class="box">
+                        <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                    </div>
+            
+                    <div class="box">
+                        <h3>Contact info</h3>
+                        <a href="#"><i class="fa fa-phone"></i>428416212</a>
+                        <a href="#"><i class="fa fa-phone"></i>483481292</a>
+                        <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+                        <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+                    </div>
+            
+                    <div class="box">
+                        <h3>Follow Us</h3>
+                        <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+                        <a href="#"><i class="fa fa-twitter"></i>X</a>
+                        <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+                        <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+                    </div>
+                </div>
+            
+                <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+            </section>
+            
+            <!-- JavaScript -->
+            <script>
+                // JavaScript
+                let uploadedPhotoURL = null;
+            
+                function chooseFile() {
+                    // Trigger the hidden file input when the "Add Photo" button is clicked
+                    document.getElementById('hiddenPhotoInput').click();
+            
+                    // Handle file selection in the hidden input
+                    document.getElementById('hiddenPhotoInput').addEventListener('change', function () {
+                        const photoInput = document.getElementById('hiddenPhotoInput');
+                        const photoFile = photoInput.files[0];
+            
+                        // Display the selected photo in the preview
+                        displayPhotoPreview(photoFile);
+            
+                        // Show the "Upload Photo" button
+                        document.getElementById('uploadButton').style.display = 'block';
+                    });
+                }
+            
+                function displayPhotoPreview(file) {
+                    // Check if the selected file is an image
+                    if (file && file.type.startsWith('image/')) {
+                        const reader = new FileReader();
+            
+                        reader.onload = function (e) {
+                            // Display the preview image
+                            const previewImage = document.getElementById('previewImage');
+                            previewImage.src = e.target.result;
+            
+                            // Show the uploaded photo section
+                            document.getElementById('uploadedPhoto').style.display = 'none';
+            
+                            // Clear caption input
+                            document.getElementById('captionInput').value = '';
+                        };
+            
+                        // Read the selected file as a data URL
+                        reader.readAsDataURL(file);
+                        document.getElementById('previewModal').style.display = 'block';
+                    } else {
+                        // Handle non-image file selection (optional)
+                        console.error('Selected file is not an image.');
+                    }
+                }
+            
+                function uploadPhoto() {
+                    // Get the selected photo file
+                    const photoInput = document.getElementById('hiddenPhotoInput');
+                    const photoFile = photoInput.files[0];
+                
+                    const titleInputValue = document.getElementById('titleInput').value; // Get title input value
+                    const captionInputValue = document.getElementById('captionInput').value; // Get caption input value
+                
+                    // Create a new figure element with the uploaded photo, title, and caption
+                    const figure = document.createElement('figure');
+                    figure.classList.add('card');
+                
+                    const image = document.createElement('img');
+                    image.src = URL.createObjectURL(photoFile);
+                    image.alt = 'Uploaded Photo';
+                
+                    const overlayText = document.createElement('div');
+                    overlayText.classList.add('overlay-text');
+                
+                    const title = document.createElement('h2');
+                    title.classList.add('card-title');
+                    title.textContent = titleInputValue;
+                
+                    const caption = document.createElement('p');
+                    caption.classList.add('pic_caption');
+                    caption.textContent = captionInputValue;
+                
+                    // Append title and caption to overlayText
+                    overlayText.appendChild(title);
+                    overlayText.appendChild(caption);
+                
+                    // Append image and overlayText to figure
+                    figure.appendChild(image);
+                    figure.appendChild(overlayText);
+                
+                    // Append the new figure to the gallery
+                    document.querySelector('.gallery').appendChild(figure);
+                
+                    // Hide the preview modal
+                    closePreviewModal();
+                }
+                
+                function closePreviewModal() {
+                    // Close the preview modal
+                    document.getElementById('previewModal').style.display = 'none';
+                }
+            </script>
+            
+        
+    </div>
+    </div>
+    </body>
+    </html>
diff --git a/headfoot.css b/headfoot.css
new file mode 100644
index 0000000..db154c4
--- /dev/null
+++ b/headfoot.css
@@ -0,0 +1,216 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
+
+
+section{
+    padding: 5rem 10%;
+}
+
+
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header .logo img
+{
+    height: 45px;
+    padding: 0;
+}
+.header .navbar{
+    margin-left:auto;
+}
+.header .navbar a{
+    font-size: 1rem;
+    margin-left: 2rem;
+    color:black;
+    text-decoration: none;
+}
+.header .navbar a:hover{
+  text-decoration: underline;
+}
+
+.footer {
+    /* background: url(footer.jpg) no-repeat; */
+    background-size: auto;
+    background-color: #333;
+    background-position: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 3rem;
+    z-index: 999; /* Set a lower z-index value */
+}
+
+.footer .box-container {
+    display: grid;
+    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+    gap: 3rem;
+    padding: 2rem;
+    padding-top: 2rem;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.footer .box-container .box h3 {
+    color: white;
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+}
+
+.footer .box-container .box a {
+    color: var(--light-white);
+    font-size: 1rem;
+    padding-bottom: 1rem;
+    display: block;
+    text-decoration: none;
+}
+
+.footer .box-container .box a i {
+    color: var(--main-color);
+    padding-right: .5rem;
+    transition: .2s linear;
+}
+
+.footer .box-container .box a:hover i {
+    padding-right: 2rem;
+}
+.footer .credit{
+    text-align: center;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: .1rem solid var(--light-white);
+    font-size: 1rem;
+    color: var(--light-white);
+}
+.footer .credit span{
+    color: var(--main-color);
+}
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+.navbar a {
+    display: inline-block;
+    position: relative;
+    list-style: none;
+    text-decoration: none;
+}
+#profile-button{
+    min-width: 120px;
+    padding: 10px 15px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    /* border-radius: 30%; */
+}
+.navbar .dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.navbar .dropdown-content {
+    display: none;
+    position: absolute;
+    width: auto;
+    z-index: 999;
+}
+
+.navbar .dropdown-content li {
+    background-color: rgba(255, 255, 255, 0.831);
+    position: relative;
+    left: 33px;
+    padding: 9px;
+    display: block;
+    
+}
+
+.navbar .dropdown-content li a {
+    display: block;
+    padding: 10px 15px;
+    color: black;
+    margin-left: 0;
+    text-align: center;
+    
+    
+    
+}
+
+.navbar .dropdown-content li a:hover {
+    /* background-color: rgba(255, 255, 255, 0.687); */
+    text-decoration: none;
+}
+
+.navbar .dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.profile-circle {
+    margin-top: 0.2rem;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 10px;
+    position: relative;
+    display: inline;
+    top:3px;
+    width: 19px;
+    height: 19px;
+    object-fit: contain;
+}
+.user-greeting {
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/img.jpg b/img.jpg
deleted file mode 100644
index e420d65..0000000
Binary files a/img.jpg and /dev/null differ
diff --git a/nagpur.jpg b/nagpur.jpg
deleted file mode 100644
index bdd8b3b..0000000
Binary files a/nagpur.jpg and /dev/null differ
diff --git a/nagpurpin.html b/nagpurpin.html
deleted file mode 100644
index a73da39..0000000
--- a/nagpurpin.html
+++ /dev/null
@@ -1,419 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Bollywood ki boli ft. Pune</title>
-  <style>
-    /* Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
-
-    /* Colors */
-    :root {
-      --primary-color: #474747;
-  
-      --background-color: #f2f2f2;
-      --text-color: #333333;
-      --conversation-bg: #f0f0f0;
-      --conversation-border: #ddd;
-    }
-
-    /* Reset CSS */
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: 'Montserrat', sans-serif;
-      background-color: var(--background-color);
-      color: var(--text-color);
-      line-height: 1.6;
-    }
-
-    .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1001;
-    background-color: white;
-    display: flex;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    box-shadow: var(--box-shadow);
-    padding-left: 10px;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.header .logo img
-{
-    height: 45px;
-    padding: 0;
-}
-.header .navbar{
-    margin-left:auto;
-}
-.header .navbar a{
-    font-size: 1rem;
-    margin-left: 2rem;
-    color:black;
-    text-decoration: none;
-}
-.header .navbar a:hover{
-  text-decoration: underline;
-}
-    nav {
-      background-color: var(--w);
-      text-align: center;
-      padding: 10px 0;
-    }
-
-    nav a {
-      color: white;
-      text-decoration: none;
-      padding: 10px 20px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .timeline {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .location {
-      opacity: 0;
-      transition: opacity 0.5s ease;
-      padding: 40px;
-      margin-bottom: 80px; /* Increased space between text box and image */
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      max-width: 800px;
-    }
-
-    .location:nth-child(even) {
-      flex-direction: row-reverse;
-    }
-
-    .location.show {
-      opacity: 1;
-    }
-
-    .location img {
-      max-width: 400px;
-      border-radius: 10px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    }
-
-    .location .textbox {
-      background-color: var(--conversation-bg);
-      border-radius: 10px;
-      padding: 20px;
-      max-width: calc(100% - 350px); /* Adjusted width of the text box */
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-      border: 1px solid var(--conversation-border);
-    }
-
-    .location .textbox h3 {
-      color: var(--primary-color);
-      margin-top: 0;
-      margin-bottom: 10px;
-    }
-
-    .location .textbox p {
-      color: var(--text-color);
-    }
-
-    #content-container {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-
-    #about {
-      width: 50%;
-      text-align: left;
-      padding: 40px;
-      background-color: white;
-      border-radius: 10px;
-      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-      margin: 20px;
-      max-width: 400px;
-    }
-
-    #about h2 {
-      color: var(--primary-color);
-      margin-bottom: 20px;
-    }
-
-    #about p {
-      color: var(--text-color);
-    }
-
-    #slideshow-container {
-      width: 50%;
-      margin: 20px;
-      overflow: hidden;
-    }
-
-    .slideshow-image {
-      display: none;
-      width: 100%;
-      height: auto;
-    }
-
-    /* Typing animation styles */
-    .typing-animation {
-      text-align: center;
-      padding: 20px 0; /* Adjust the padding as needed */
-    }
-
-    .typing-animation h2 {
-      font-size: 46px; 
-      font-weight: bold;
-      font-family: fantasy;
-      color: #333; /* Adjust the color as needed */
-    }
-
-    @keyframes typing {
-      0% {
-        width: 0;
-      }
-      50% {
-        width: 50%;
-      }
-      100% {
-        width: 100%;
-      }
-    }
-
-    .footer {
-    /* background: url(footer.jpg) no-repeat; */
-    background-size: auto;
-    background-color: #333;
-    background-position: center;
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-top: 3rem;
-    z-index: 999; /* Set a lower z-index value */
-}
-
-.footer .box-container {
-    display: grid;
-    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
-    gap: 3rem;
-    padding: 2rem;
-    padding-top: 2rem;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-
-.footer .box-container .box h3 {
-    color: white;
-    font-size: 1.5rem;
-    padding-bottom: 1rem;
-}
-
-.footer .box-container .box a {
-    color: var(--light-white);
-    font-size: 1rem;
-    padding-bottom: 1rem;
-    display: block;
-    text-decoration: none;
-}
-
-.footer .box-container .box a i {
-    color: var(--main-color);
-    padding-right: .5rem;
-    transition: .2s linear;
-}
-
-.footer .box-container .box a:hover i {
-    padding-right: 2rem;
-}
-.footer .credit{
-    text-align: center;
-    padding-top: 1rem;
-    margin-top: 1rem;
-    padding-bottom: 1rem;
-    border-top: .1rem solid var(--light-white);
-    font-size: 1rem;
-    color: var(--light-white);
-}
-.footer .credit span{
-    color: var(--main-color);
-}
-  </style>
-</head>
-<body>
-  <section class="header" style="background-color:#302f2f;">
-    <a href="homepg.html" class="logo"><img src="logo.png"></a>
-
-    <nav class="navbar">
-        <a href="index.html">Home</a>
-        <a href="aboutUs.html">About</a>
-        <a href="packages.html">Packages</a>
-        <a href="gallery.html">Gallery</a>
-        <a href="contactUs.html"> Contact</a>
-    </nav>
-    <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
-</section>
-  <header>
-    <h1>Bollywood ki boli ft. Pune</h1>
-  </header>
-
-  <section class="typing-animation" style="font-size: 40px;margin-right: 20px;margin-left: 20px;">
-    <p id="typing-text"></p>
-  </section>
-
-  <div class="timeline">
-    <div class="location">
-      <img src="https://im.whatshot.in/img/2018/Aug/7637413454-d79b2fc7e5-b-cropped-1533932983.jpg" alt="Film shooting at Marine Drive">
-      <div class="textbox">
-        <h3>Agricultural College Of Pune </h3>
-        <p>The comically acclaimed Sanjay Dutt starrer film, Munna Bhai MBBS was largely shot at the Agricultural College of Pune. From the grand exterior to the classrooms there’s a good chunk of Pune embedded in the film, <b>bas kya bhidu?</b></p>
-     </div>
-    </div>
-    <div class="location">
-      <img src="https://imgstaticcontent.lbb.in/lbbnew/wp-content/uploads/2017/06/30132808/30062017_11EastStreetCaf%C3%A9_01.jpg" alt="Film shooting at Gateway of India">
-      <div class="textbox">
-        <h3>11 East Street </h3>
-        <p>The movie that was worked as a kick-starter for a real-life romance between Ranbir and Katrina, also shot some key moments in Pune. Especially the sequence from the song <b>‘Prem Ki Naiyya’</b> was shot at our very own 11 East Street Cafe. It’s hard to miss considering how obsessed people were back then with this movie and the songs. </p>
-      </div>
-    </div>
-    <div class="location">
-      <img src="https://im.whatshot.in/img/2019/Jan/andhadun-1-cropped-1547549283.jpg" alt="Film shooting at Film City">
-      <div class="textbox">
-        <h3>F.C Road</h3>
-        <p>At least 90% of the film is shot in Pune right from <b>MG Road, Shisha Jazz Cafe, Magarpatta, F.C Road, Koregaon Park and Peth areas.</b> How can one forget Cafe Goodluck and of course the Khadki underpass where Tabu gets kidnapped.</p>
-      </div>
-    </div>
-    <div class="location">
-      <img src="https://aninditadhikary.files.wordpress.com/2011/01/symbilavale.jpg" alt="Film shooting at Chhatrapati Shivaji Terminus">
-      <div class="textbox">
-        <h3>Symbiosis Lavale Campus </h3>
-        <p>If you haven’t been living under a rock, you must be familiar that the 2011 hit, <b>‘Bodyguard’</b> was shot at Symbiosis Lavale Campus. What most people do not know of is that couple of scenes from <b>‘Dangal’</b> were shot here too. </p>
-      </div>
-    </div>
-  </div>
-
-  <div id="content-container">
-    <div id="about">
-      <h2>About</h2>
-      <p>This page celebrates the deep connection between Bollywood and Pune, showcasing iconic shooting locations and landmarks.</p>
-    </div>
-
-    <div id="slideshow-container">
-      <img class="slideshow-image" src="https://im.whatshot.in/img/2019/Jan/film-companion-tumbbad-script-lead-3-cropped-1547548932.jpg" alt="Slideshow Image 1">
-      <img class="slideshow-image" src="https://static.toiimg.com/thumb/imgsize-23456,msid-61722032,width-600,resizemode-4/61722032.jpg" alt="Slideshow Image 2">
-      <img class="slideshow-image" src="https://media.gettyimages.com/id/914164900/photo/pune-india-bollywood-actor-madhuri-dixit-shooting-for-debut-marathi-film-bucket-list-at.jpg?s=612x612&w=gi&k=20&c=2Z2Pe4GDmpAE4D3nWsaOxPwTJ6Duf_VCWUDU4LU7xsw=" alt="Slideshow Image 3">
-      <img class="slideshow-image" src="https://im.whatshot.in/img/2020/Jul/major-saab-1594299075.jpg" alt="Slideshow Image 4">
-    </div>
-  </div>
-
-
-  <section class="footer">
-    <div class="box-container">
-        <div class="box">
-            <h3>Quick Links</h3>
-            <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-            <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-            <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-            <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
-        </div>
-
-        <div class="box">
-            <h3>Extra Links</h3>
-            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-            <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
-        </div>
-
-        <div class="box">
-            <h3>Contact info</h3>
-            <a href="#"><i class="fa fa-phone"></i>428416212</a>
-            <a href="#"><i class="fa fa-phone"></i>483481292</a>
-            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
-            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
-        </div>
-
-        <div class="box">
-            <h3>Follow Us</h3>
-            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
-            <a href="#"><i class="fa fa-twitter"></i>twitter</a>
-            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
-            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
-        </div>
-    </div>
-
-    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
-</section>
-
-  <script>
-    window.addEventListener('scroll', function() {
-      let locations = document.querySelectorAll('.location');
-      locations.forEach(location => {
-        if (isElementInViewport(location)) {
-          location.classList.add('show');
-        }
-      });
-    });
-
-    function isElementInViewport(el) {
-      var rect = el.getBoundingClientRect();
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-      );
-    }
-
-    // Typing animation
-    const text = "Yeh He Pune Meri Jaan"; // Text to display
-    let index = 0;
-
-    function typeWriter() {
-      if (index < text.length) {
-        document.getElementById("typing-text").innerHTML += text.charAt(index);
-        index++;
-        setTimeout(typeWriter, 100); // Speed of typing animation (milliseconds)
-      }
-    }
-
-    typeWriter();
-
-    // Slideshow
-    let slideIndex = 0;
-    showSlides();
-
-    function showSlides() {
-      let i;
-      const slides = document.getElementsByClassName("slideshow-image");
-      for (i = 0; i < slides.length; i++) {
-        slides[i].style.display = "none";
-      }
-      slideIndex++;
-      if (slideIndex > slides.length) {
-        slideIndex = 1;
-      }
-      slides[slideIndex - 1].style.display = "block";
-      setTimeout(showSlides, 2000);
-    }
-  </script>
-</body>
-</html>
diff --git a/nashik.jpg b/nashik.jpg
deleted file mode 100644
index fccaae6..0000000
Binary files a/nashik.jpg and /dev/null differ
diff --git a/packages/city_package/packages.html b/packages/city_package/packages.html
index 24c64bd..b35bbe3 100644
--- a/packages/city_package/packages.html
+++ b/packages/city_package/packages.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <link rel="stylesheet" href="packagesstyle.css">
+    <link rel="stylesheet" href="../../headfoot.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -11,20 +12,54 @@
 </head>
 <body>
     <header>
-      <section class="header">
-        <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
+      <section class="header" >
+        <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
         <nav class="navbar">
-            <a href="/index.html">Home</a>
-            <a href="/aboutUs.html">About</a>
-            <a href="#">Packages</a>
-            <a href="/gallery.html">Gallery</a>
-            <a href="/contactUs.html"> Contact</a>
+            <a href="/Homepage/index.html">Home</a>
+            <a href="/aboutUS/aboutUs.html">About</a>
+            <a href="/packages/city_package/packages.html">Packages</a>
+            <a href="/gallery/gallery.html">Gallery</a>
+            <a href="/Other/contactUs.html">Contact</a>
+            <div class="dropdown">
+                <a href="#" id="profile-button">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                    <span>Hi User</span>
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+                <ul class="dropdown-content">
+                    <li><a href="/user/profile.html">Dashboard</a></li>
+                </ul>
+            </div>
         </nav>
         <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
     </section>
     </header>
-        <div class="mumbai" >
+
+<!-- WEATHER: -->
+<div class="container" style="margin-top: 80px;">
+    <div class="weather-container" style="margin-top: 0; margin-bottom: 0;">
+        <a href="https://www.google.com/search?q=mumbai+weather&rlz=1C1CHBF_enIN1029IN1029&oq=mum&gs_lcrp=EgZjaHJvbWUqDggAEEUYJxg7GIAEGIoFMg4IABBFGCcYOxiABBiKBTIOCAEQRRgnGDsYgAQYigUyBggCEEUYOTISCAMQLhhDGIMBGLEDGIAEGIoFMgYIBBBFGDsyBggFEEUYPDIGCAYQRRg8MgYIBxBFGEHSAQgxNDgwajBqN6gCALACAA&sourceid=chrome&ie=UTF-8" class="weather-card" id="mumbai">
+            <div class="overlay"></div>
+        </a>
+        <a href="https://www.google.com/search?q=pune+weather&sca_esv=de06a028fb71868c&rlz=1C1CHBF_enIN1029IN1029&sxsrf=ACQVn0_37VdkFuRwsEEwdnwLie71pFVUYA%3A1712937155506&ei=w1gZZrvBHoegvr0PybKo4AE&oq=pune&gs_lp=Egxnd3Mtd2l6LXNlcnAiBHB1bmUqAggAMhAQABiABBiKBRhDGLEDGIMBMg0QABiABBiKBRhDGLEDMhAQABiABBiKBRhDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMhAQLhiABBiKBRhDGLEDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMgoQABiABBiKBRhDSOQQUPoCWIkIcAF4AZABAJgB_AGgAcYFqgEFMC4zLjG4AQPIAQD4AQGYAgSgAoMGqAIUwgIHECMY6gIYJ8ICExAAGIAEGIoFGEMY6gIYtALYAQHCAgQQIxgnwgIKECMYgAQYigUYJ8ICCxAAGIAEGLEDGIMBmAMbugYGCAEQARgBkgcFMS4zLjGgB_Uh&sclient=gws-wiz-serp" class="weather-card" id="pune">
+            <div class="overlay"></div>
+        </a>
+        <a href="https://www.google.com/search?q=nagpur+weather&sca_esv=de06a028fb71868c&rlz=1C1CHBF_enIN1029IN1029&sxsrf=ACQVn0_19pqnCRUzfiHfcMFIxktNtqSf5Q%3A1712937181321&ei=3VgZZuWhE7_W1e8P-K2c2As&oq=nag&gs_lp=Egxnd3Mtd2l6LXNlcnAiA25hZyoCCAAyEBAAGIAEGIoFGEMYsQMYgwEyEBAAGIAEGIoFGEMYsQMYgwEyDRAAGIAEGIoFGEMYsQMyChAAGIAEGIoFGEMyChAAGIAEGIoFGEMyChAAGIAEGIoFGEMyEBAuGIAEGIoFGEMYsQMYgwEyChAAGIAEGIoFGEMyChAAGIAEGIoFGEMyChAAGIAEGIoFGEMyChAAGIAEGIoFGENI2xJQ_wVY0AhwAXgBkAEAmAGzAaAB1wOqAQMwLjO4AQPIAQD4AQGYAgWgApgGqAIUwgIHECMY6gIYJ8ICExAAGIAEGIoFGEMY6gIYtALYAQHCAgoQIxiABBiKBRgnwgIREC4YgAQYsQMYgwEYxwEY0QPCAgQQIxgnmAMPugYGCAEQARgBkgcFMS4yLjKgB5Al&sclient=gws-wiz-serp" class="weather-card" id="nagpur">
+            <div class="overlay"></div>
+        </a>
+        <a href="https://www.google.com/search?q=aurangabad+weather&sca_esv=de06a028fb71868c&rlz=1C1CHBF_enIN1029IN1029&sxsrf=ACQVn08NRSvBfs6iCGjo2f-utAg9N2MK-A%3A1712937203415&ei=81gZZv39GNy3vr0P57W1qAM&oq=aura&gs_lp=Egxnd3Mtd2l6LXNlcnAiBGF1cmEqAggAMhAQABiABBiKBRhDGLEDGIMBMg0QABiABBiKBRhDGLEDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMg0QLhiABBiKBRhDGLEDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMgoQABiABBiKBRhDMgoQABiABBiKBRhDSMQaUMcDWPsTcAF4AZABAJgB3gGgAeUFqgEFMC4zLjG4AQPIAQD4AQGYAgWgApgGqAIUwgIHECMY6gIYJ8ICExAAGIAEGIoFGEMY6gIYtALYAQHCAgoQIxiABBiKBRgnwgIREC4YgAQYsQMYgwEYxwEY0QPCAgQQIxgnmAMPugYGCAEQARgBkgcFMS4yLjKgB5Al&sclient=gws-wiz-serp" class="weather-card" id="aurangabad">
+            <div class="overlay"></div>
+        </a>
+    </div>
+</div>
+
+  
+
+
+
+
+        <div class="mumbai" style="margin-top: 0%;">
           <div class="photo"><img src="mumbai_card.jpg" alt=""></div>
           <div class="para1">
             <h2>Explore Mumbai </h2>
@@ -67,20 +102,20 @@ <h2>Aurangabad</h2>
       <section class="footer">
         <div class="box-container">
             <div class="box">
-                <h3 style="margin-top: 0px;">Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <h3>Quick Links</h3>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
 
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+              <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+              <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+              <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+              <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
 
             <div class="box">
@@ -102,5 +137,91 @@ <h3>Follow Us</h3>
 
         <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
     </section>
+
+
+    <script>
+      // Function to fetch weather data
+      function fetchWeather(city, containerId) {
+          var apiKey = '567c0ba8d461410aa59144434241204'; // Replace with your WeatherAPI key
+          var url = 'https://api.weatherapi.com/v1/current.json?key=' + apiKey + '&q=' + city;
+          
+          fetch(url)
+          .then(response => response.json())
+          .then(data => {
+              var container = document.getElementById(containerId);
+              var weatherInfo = `
+                  <div class="city">${data.location.name}</div>
+                  <div class="temp">${data.current.temp_c}°C</div>
+                  <i class="icon ${getWeatherIcon(data.current.condition.code)}"></i>
+              `;
+              container.innerHTML = weatherInfo;
+          })
+          .catch(error => {
+              console.error('Error fetching weather data:', error);
+          });
+      }
+
+      // Function to get appropriate weather icon based on condition code
+      function getWeatherIcon(conditionCode) {
+          var icons = {
+              '1000': 'fas fa-sun',
+              '1003': 'fas fa-cloud-sun',
+              '1006': 'fas fa-cloud',
+              '1009': 'fas fa-cloud-sun-rain',
+              '1030': 'fas fa-smog',
+              '1063': 'fas fa-cloud-showers-heavy',
+              '1066': 'fas fa-snowflake',
+              '1069': 'fas fa-cloud-rain',
+              '1072': 'fas fa-poo-storm',
+              '1087': 'fas fa-poo-storm',
+              '1114': 'fas fa-cloud-showers-heavy',
+              '1117': 'fas fa-snowflake',
+              '1135': 'fas fa-cloud',
+              '1147': 'fas fa-cloud',
+              '1150': 'fas fa-cloud-sun',
+              '1153': 'fas fa-cloud-sun',
+              '1168': 'fas fa-cloud-showers-heavy',
+              '1171': 'fas fa-cloud-showers-heavy',
+              '1180': 'fas fa-cloud-showers-heavy',
+              '1183': 'fas fa-cloud-showers-heavy',
+              '1186': 'fas fa-cloud-showers-heavy',
+              '1189': 'fas fa-cloud-showers-heavy',
+              '1192': 'fas fa-cloud-showers-heavy',
+              '1195': 'fas fa-cloud-showers-heavy',
+              '1198': 'fas fa-cloud-showers-heavy',
+              '1201': 'fas fa-cloud-showers-heavy',
+              '1204': 'fas fa-cloud-showers-heavy',
+              '1207': 'fas fa-cloud-showers-heavy',
+              '1210': 'fas fa-cloud-showers-heavy',
+              '1213': 'fas fa-cloud-showers-heavy',
+              '1216': 'fas fa-cloud-showers-heavy',
+              '1219': 'fas fa-cloud-showers-heavy',
+              '1222': 'fas fa-cloud-showers-heavy',
+              '1225': 'fas fa-cloud-showers-heavy',
+              '1237': 'fas fa-cloud-showers-heavy',
+              '1240': 'fas fa-cloud-showers-heavy',
+              '1243': 'fas fa-cloud-showers-heavy',
+              '1246': 'fas fa-cloud-showers-heavy',
+              '1249': 'fas fa-cloud-showers-heavy',
+              '1252': 'fas fa-cloud-showers-heavy',
+              '1255': 'fas fa-cloud-showers-heavy',
+              '1258': 'fas fa-cloud-showers-heavy',
+              '1261': 'fas fa-cloud-showers-heavy',
+              '1264': 'fas fa-cloud-showers-heavy',
+              '1273': 'fas fa-cloud-showers-heavy',
+              '1276': 'fas fa-cloud-showers-heavy',
+              '1279': 'fas fa-cloud-showers-heavy',
+              '1282': 'fas fa-cloud-showers-heavy',
+          };
+          var defaultIcon = 'fas fa-question-circle';
+          return icons[conditionCode] || defaultIcon;
+      }
+
+      // Fetch weather for each city
+      fetchWeather('Mumbai', 'mumbai');
+      fetchWeather('Pune', 'pune');
+      fetchWeather('Nagpur', 'nagpur');
+      fetchWeather('Aurangabad', 'aurangabad');
+  </script>
 </body>
 </html>
diff --git a/packages/city_package/packagesstyle.css b/packages/city_package/packagesstyle.css
index a4e0476..cee784d 100644
--- a/packages/city_package/packagesstyle.css
+++ b/packages/city_package/packagesstyle.css
@@ -6,6 +6,7 @@
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
+    align-items: center;
 }
 
 :root {
@@ -136,67 +137,6 @@ section{
 }
 
 
-.footer {
-    /* background: url(footer.jpg) no-repeat; */
-    background-size: auto;
-    background-color: #333;
-    background-position: center;
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-top: 3rem;
-    z-index: 999; /* Set a lower z-index value */
-}
-
-.footer .box-container {
-    display: grid;
-    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
-    gap: 3rem;
-    padding: 2rem;
-    padding-top: 2rem;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-
-.footer .box-container .box h3 {
-    color: white;
-    font-size: 1.5rem;
-    padding-bottom: 1rem;
-}
-
-.footer .box-container .box a {
-    color: var(--light-white);
-    font-size: 1rem;
-    padding-bottom: 1rem;
-    display: block;
-    text-decoration: none;
-}
-
-.footer .box-container .box a i {
-    color: var(--main-color);
-    padding-right: .5rem;
-    transition: .2s linear;
-}
-
-.footer .box-container .box a:hover i {
-    padding-right: 2rem;
-}
-.footer .credit{
-    text-align: center;
-    padding-top: 1rem;
-    margin-top: 1rem;
-    border-top: .1rem solid var(--light-white);
-    font-size: 1rem;
-    color: var(--light-white);
-}
-.footer .credit span{
-    color: var(--main-color);
-}
-.socials{
-    width: 5%; 
-    height: auto; 
-    border-radius: 10px;
-    
-}
 
 .mumbai{
     background-color: #EEF8dd;
@@ -397,4 +337,101 @@ section{
 }
 .para4 p{
     margin-bottom: 40px;
+}
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+
+.user-greeting {
+    vertical-align: middle;
+}
+
+/* Container styles */
+.container {
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    width: 75%;
+    text-align: center;
+    margin: 0 auto; /* Center the container horizontally */
+    margin-bottom: 20px; /* Reduce bottom margin */
+}
+
+/* Weather container styles */
+.weather-container {
+    display: flex;
+    justify-content: center; /* Align horizontally in center */
+    overflow-x: auto;
+    padding: 20px 0;
+    margin-top: 80px; /* Add top margin */
+}
+
+/* Weather card styles */
+.weather-container a {
+    cursor: pointer;
+    position: relative;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 200px;
+    text-align: center;
+    margin: 0 10px;
+    transition: background-color 0.3s; /* Add smooth transition effect */
+}
+
+/* Weather card hover effect */
+.weather-container a:hover {
+    background-color: rgba(211, 211, 211, 0.5); /* Change background color on hover */
+}
+
+/* Link styles */
+.weather-container a {
+    color: inherit; /* Set link color to inherit from parent */
+    text-decoration: none; /* Remove underline */
+}
+
+
+/* City styles */
+.city {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+/* Temperature styles */
+.temp {
+    font-size: 36px;
+    color: #333;
+}
+
+/* Icon styles */
+.icon {
+    font-size: 48px;
+    color: #333;
+    margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/packages/iternary/aurangabad/Mahesh_it.html b/packages/iternary/aurangabad/Mahesh_it.html
index 897f395..3b30973 100644
--- a/packages/iternary/aurangabad/Mahesh_it.html
+++ b/packages/iternary/aurangabad/Mahesh_it.html
@@ -1,392 +1,442 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <title> Mahesh tours and travels |TravelHub | Iternary page</title>
-  <link rel="stylesheet" href="../iternary.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <title> Mahesh tours and travels |TravelHub | Iternary page</title>
+    <link rel="stylesheet" href="../iternary.css">
+<link rel="stylesheet" href="../../../headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 
 </head>
+
 <body>
-  <body>
-    <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
-      </nav>
-      <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
-  </section>
-        
-    </header>
-    <div class="cmp2">
-      <h1>Aurangabad tour package</h1> 
-        <p>Mahesh tours and travels</p>
-    </div>
-    <div class="booking">
-    <h2>Booking Summary</h2>
-    <p id="cap">Book Now and Get Ready for an amazing tour!</p>
-    <div class="book">
-      <!-- <div class="sum">
-        <img src="background.jpg" alt=""></div> -->
-      <div class="date">
-      <div class="val">
-      <form >
-      <label for="userDate">Select a Date:</label>
-      <input type="date" id="userDate" name="userDate">
-      <label for="userRoom">Number of rooms:</label>
-      <input type="number" id="userRoom" name="userRoom">
-      <label for="travellerno">Number of travellers:</label>
-      <input type="number" id="travellerno" name="travellerno">
-      <input type="submit" value="Book now">
-    </form>
-  </div>
-    <div class="price">
-      <div class="amt">
-      <div class="amt1">
-      <p>Price </p></div>
-      <div class="amt2">
-      <p>&#8377 42,000</p></div>
-    </div>
-      <p id="pe">per person</p>
-    </div>
-    </div>
-  </div>
-    </div>
-    <div class="slider">
-      <h2>Iternary</h2>
-      <p id="cap">Curious about your plans? Click to reveal your itinerary details!</p>
-    <div class="iternary">
-         <div class="item1">
-        <input id="day1" type="checkbox" name="menu" />
-        <label for="day1">
-          <div class="it_name">
-          <div class="icon">
-            <p>Day 1</p>
-            <img src="../icon.png" alt="">
-            <b>Cave Chronicles</b>
-          </div>
-          <div class="arrow">
-            <img src="../down-arrow.png" alt="">
-          </div>
-        </div>
-        </label>
-      
-    <div class="day">
-      <div class="list">
-      <div class="place">
-        <div class="text">
-            <p id="M">Ajanta Caves</p>
-              <p>Most Popular Heritage Site in Aurangabad.</p>
-            </div> 
-           <div class="pic">
-              <img src="Ajanta.jpg" alt="pic">
-           </div>
-          
-        </div>
-      </div>
-        <div class="place">
-            <div class="text">
-                <p id="M">Ellora Caves</p>
-              <p>Caves with Beautiful Sculptures.</p>
-        </div> 
-        <div class="pic">
-            <img src="Ellora.jpg" alt="pic">
+
+    <body>
+        <header>
+            <section class="header">
+                <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+
+                <nav class="navbar">
+                    <a href="/Homepage/index.html">Home</a>
+                    <a href="/aboutUS/aboutUs.html">About</a>
+                    <a href="/packages/city_package/packages.html">Packages</a>
+                    <a href="/gallery/gallery.html">Gallery</a>
+                    <a href="/Other/contactUs.html">Contact</a>
+                    <div class="dropdown">
+                        <a href="#" id="profile-button">
+                            <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                            <span>Hi User</span>
+                            <i class="fas fa-chevron-down"></i>
+                        </a>
+                        <ul class="dropdown-content">
+                            <li><a href="/user/profile.html">Dashboard</a></li>
+                        </ul>
+                    </div>
+                </nav>
+                <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
+            </section>
+
+        </header>
+        <div class="cmp2">
+            <h1>Aurangabad tour package</h1>
+            <p>Mahesh tours and travels</p>
         </div>
-      </div>
-        <div class="place">
-            <div class="text">
-                <p id="M">Pithalkhora Caves</p>
-                  <p>Set of 14 rock-cut Buddhist Caves</p>
-            </div>
-                <div class="pic">
-                  <img src="pithalkhora-caves.jpg" alt="">
+        <div class="booking">
+            <h2>Booking Summary</h2>
+            <p id="cap">Book Now and Get Ready for an amazing tour!</p>
+            <div class="book">
+                <div class="date">
+                    <div class="val">
+
+                        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post"> 
+                            <label for="userName">Enter your name</label>
+                            <input type="text" id="userName" name="userName">
+                            <label for="userDate">Select a Date:</label>
+                            <input type="date" id="userDate" name="userDate">
+                            <label for="userRoomType">Room Type:</label>
+                            <select id="userRoomType" name="userRoomType">
+                             <option value="ac">AC Room</option>
+                             <option value="non-ac">Non-AC Room</option>
+                            </select>
+                            <label for="userRoom">Number of rooms:</label>
+                            <input type="number" id="userRoom" name="userRoom">
+                            <label for="travellerno">Number of travellers:</label>
+                            <input type="number" id="travellerno" name="travellerno">
+                            <input type="submit" value="Book now">
+                        </form>
+
+                    </div>
+                    <div class="price">
+                        <div class="amt">
+                            <div class="amt1">
+                                <p>Price </p>
+                            </div>
+                            <div class="amt2">
+                                <p>&#8377 42,000</p>
+                            </div>
+                        </div>
+                        <p id="pe">per person</p>
+                    </div>
                 </div>
-        </div>
-          
-        
-      
-        <div class="place">
-            <div class="hotel">
-               <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                <span > Hotel Ajanta-Ellora</span>
-           </div> 
-                  
-       </div>
-      </div>
-    </div>
-         <div class="item1">
-      <input id="day2" type="checkbox" name="menu" />
-      <label for="day2"> 
-        <div class="it_name">
-          <div class="icon">
-          <p>Day 2</p>
-          <img src="../icon.png" alt="">
-          <b>Day Full of Variations</b>
-        </div>
-        <div class="arrow">
-          <img src="../down-arrow.png" alt="">
-        </div>
-      </div>
-      </label>
-      <div class="day">
-        <div class="list">
-          <div class="place">
-            <div class="text">
-                <p id="M">Grishneshwar Jyotirlinga Temple</p>
-                  <p>Temple of one of the five Jyothirlingas of Lord Shiva.</p>
-            </div> 
-             <div class="pic">
-              <img src="temple (2).jpg" alt="pic">
-             </div>
-          </div>
-          <div class="place">
-            <div class="text">
-              <p id="M">Daulatabad Fort</p>
-                <p>A Historical Fort.</p>
-            </div>
-            <div class="pic">
-              <img src="Daulatabad.jpg" alt="pic">
-            </div>
-          </div>
-          <div class="place">
-            <div class="text">
-                <p id="M">Jayakwadi Dam</p>
-                  <p>One of the huge dams on the Godavari River.</p>
-            </div> 
-            <div class="pic">
-               <img src="jayakwadi-dam.jpg" alt="pic">
-            </div>
-          </div>    
-            <div class="place">
-              <div class="hotel">
-                <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                <span>Hotel Sayaji</span>
-              </div> 
-                    
-            </div>
-           </div>
-      </div>
-    </div>
-         <div class="item1">
-        <input id="day3" type="checkbox" name="menu" />
-        <label for="day3">
-        <div class="it_name">
-          <div class="icon">
-            <p>Day 3</p>
-            <img src="../icon.png" alt="">
-            <b>Sacred Splendors</b>
-          </div>
-          <div class="arrow">
-            <img src="../down-arrow.png" alt="">
-          </div>
-        </div>
-        </label>
-      <div class="day">
-       <div class="list">
-        <div class="place">
-          <div class="text">
-            <p id="M">Bhadra Maruti</p>
-              <p>Lord Maruti Temple nearby Ajanta</p>  
-           </div>
-            <div class="pic">
-              <img src="bhadra-maruti.jpg" alt="pic">
             </div>
         </div>
-            <div class="place">
-              <div class="text">
-                <p id="M">Soneri Mahal</p>
-                <p>Green Lawns, garden full of flowers, and a zoo nearby.</p>
-              </div> 
-              <div class="pic">
-                <img src="sonerimahal.jpg" alt="pic">
-              </div>
-                
-            </div>
-            <div class="place">
-              <div class="text">
-                  <p id="M">Siddharth Garden</p>
-                  <p>Green Lawns, garden full of flowers, and a zoo nearby.</p>
-              </div> 
-              <div class="pic">
-                <img src="siddharth-garden.jpg" alt="pic">
-              </div>
-            </div>
-             <div class="place">
-                <div class="text">
-                   <p id="M">Gul Mandi Market</p>
-                    <p>The main market of Aurangabad City.</p>
+        <div class="slider">
+            <h2>Iternary</h2>
+            <p id="cap">Curious about your plans? Click to reveal your itinerary details!</p>
+            <div class="iternary">
+                <div class="item1">
+                    <input id="day1" type="checkbox" name="menu" />
+                    <label for="day1">
+                        <div class="it_name">
+                            <div class="icon">
+                                <p>Day 1</p>
+                                <img src="../icon.png" alt="">
+                                <b>Cave Chronicles</b>
+                            </div>
+                            <div class="arrow">
+                                <img src="../down-arrow.png" alt="">
+                            </div>
+                        </div>
+                    </label>
+
+                    <div class="day">
+                        <div class="list">
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Ajanta Caves</p>
+                                    <p>Most Popular Heritage Site in Aurangabad.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="Ajanta.jpg" alt="pic">
+                                </div>
+
+                            </div>
+                        </div>
+                        <div class="place">
+                            <div class="text">
+                                <p id="M">Ellora Caves</p>
+                                <p>Caves with Beautiful Sculptures.</p>
+                            </div>
+                            <div class="pic">
+                                <img src="Ellora.jpg" alt="pic">
+                            </div>
+                        </div>
+                        <div class="place">
+                            <div class="text">
+                                <p id="M">Pithalkhora Caves</p>
+                                <p>Set of 14 rock-cut Buddhist Caves</p>
+                            </div>
+                            <div class="pic">
+                                <img src="pithalkhora-caves.jpg" alt="">
+                            </div>
+                        </div>
+
+
+
+                        <div class="place">
+                            <div class="hotel">
+                                <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                                <span> Hotel Four-Season</span>
+                            </div>
+
+                        </div>
+                    </div>
                 </div>
-               <div class="pic">
-                <img src="Market.jpg" alt="pic">
-               </div>
-             </div>
-                
-                <div class="place">
-                  <div class="hotel">
-                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                    <span >Hotel Regal Plaza</span>
-                  </div> 
-                  
+                <div class="item1">
+                    <input id="day2" type="checkbox" name="menu" />
+                    <label for="day2">
+                        <div class="it_name">
+                            <div class="icon">
+                                <p>Day 2</p>
+                                <img src="../icon.png" alt="">
+                                <b>Day Full of Variations</b>
+                            </div>
+                            <div class="arrow">
+                                <img src="../down-arrow.png" alt="">
+                            </div>
+                        </div>
+                    </label>
+                    <div class="day">
+                        <div class="list">
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Grishneshwar Jyotirlinga Temple</p>
+                                    <p>Temple of one of the five Jyothirlingas of Lord Shiva.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="temple (2).jpg" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Daulatabad Fort</p>
+                                    <p>A Historical Fort.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="Daulatabad.jpg" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Jayakwadi Dam</p>
+                                    <p>One of the huge dams on the Godavari River.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="jayakwadi-dam.jpg" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="hotel">
+                                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                                    <span>Hotel Sayaji</span>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
                 </div>
-      </div>
-      </div>
-      </div>
-         <div class="item1">
-        <input id="day4" type="checkbox" name="menu" />
-        <label for="day4">
-        <div class="it_name">
-          <div class="icon">
-            <p>Day 4</p>
-            <img src="../icon.png" alt="">
-            <b>Aurangabad Specials!</b>
-          </div>
-          <div class="arrow">
-            <img src="../down-arrow.png" alt="">
-          </div>
-        </div>
-        </label>
-        <div class="day">
-          <div class="list">
-            <div class="place">
-              <div class="text">
-               <p id="M">Tomb Of The Mughal Emperor Aurangzeb</p>
-               <p>A Site for History Lovers.</p>
-             </div> 
-              <div class="pic">
-               <img src="Tomb-mughal.jpg" alt="pic">
-              </div> 
-            </div>
-            <div class="place">
-              <div class="text">
-                <p id="M">Bibika Makbara</p>
-                <p>A Historical Monument similar to Taj Mahal.</p>
-              </div> 
-              <div class="pic">
-                <img src="Bibika.jpg" alt="pic">
-              </div>
-            </div>
-            <div class="place">
-                <div class="text">
-                    <p id="M">Valley Of the Sufi saints</p> 
-                <p>Famous for the Dargah of Sufi Saint Muntajib-al-Din.</p> 
+                <div class="item1">
+                    <input id="day3" type="checkbox" name="menu" />
+                    <label for="day3">
+                        <div class="it_name">
+                            <div class="icon">
+                                <p>Day 3</p>
+                                <img src="../icon.png" alt="">
+                                <b>Sacred Splendors</b>
+                            </div>
+                            <div class="arrow">
+                                <img src="../down-arrow.png" alt="">
+                            </div>
+                        </div>
+                    </label>
+                    <div class="day">
+                        <div class="list">
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Bhadra Maruti</p>
+                                    <p>Lord Maruti Temple nearby Ajanta</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="bhadra-maruti.jpg" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Soneri Mahal</p>
+                                    <p>Green Lawns, garden full of flowers, and a zoo nearby.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="sonerimahal.jpg" alt="pic">
+                                </div>
+
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Siddharth Garden</p>
+                                    <p>Green Lawns, garden full of flowers, and a zoo nearby.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="siddharth-garden.jpg" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Gul Mandi Market</p>
+                                    <p>The main market of Aurangabad City.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="Market.jpg" alt="pic">
+                                </div>
+                            </div>
+
+                            <div class="place">
+                                <div class="hotel">
+                                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                                    <span>Hotel Regal Plaza</span>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="pic">
-                  <img src="valley-sufi.jpg" alt="">
-                </div> 
-            </div>
-              
-                
-               <div class="place">
-                  <div class="hotel">
-                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                    <span>Hotel Grand Ecotel</span>
-                  </div> 
-                      
+                <div class="item1">
+                    <input id="day4" type="checkbox" name="menu" />
+                    <label for="day4">
+                        <div class="it_name">
+                            <div class="icon">
+                                <p>Day 4</p>
+                                <img src="../icon.png" alt="">
+                                <b>Aurangabad Specials!</b>
+                            </div>
+                            <div class="arrow">
+                                <img src="../down-arrow.png" alt="">
+                            </div>
+                        </div>
+                    </label>
+                    <div class="day">
+                        <div class="list">
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Tomb Of The Mughal Emperor Aurangzeb</p>
+                                    <p>A Site for History Lovers.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="Tomb-mughal.jpg" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Bibika Makbara</p>
+                                    <p>A Historical Monument similar to Taj Mahal.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="Bibika.jpg" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Valley Of the Sufi saints</p>
+                                    <p>Famous for the Dargah of Sufi Saint Muntajib-al-Din.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="valley-sufi.jpg" alt="">
+                                </div>
+                            </div>
+
+
+                            <div class="place">
+                                <div class="hotel">
+                                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                                    <span>Hotel Grand Ecotel</span>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
-          </div>
-        </div>
+                <div class="item1">
+                    <input id="day5" type="checkbox" name="menu" />
+                    <label for="day5">
+                        <div class="it_name">
+                            <div class="icon">
+                                <p>Day 5</p>
+                                <img src="../icon.png" alt="">
+                                <b>Museum and Mall Expenditure</b>
+                            </div>
+                            <div class="arrow">
+                                <img src="../down-arrow.png" alt="">
+                            </div>
+                        </div>
+                    </label>
+                    <div class="day">
+                        <div class="list">
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Chhatrapati Shivaji Maharaj Museum</p>
+                                    <p>Collection of War weapons, coins and other artifacts from Maratha Empire.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="museum2.JPG" alt="pic">
+                                </div>
+                            </div>
+                            <div class="place">
+                                <div class="text">
+                                    <p id="M">Prozone Mall</p>
+                                    <p>Shopping Mall.</p>
+                                </div>
+                                <div class="pic">
+                                    <img src="mall.jpg" alt="pic">
+                                </div>
+                            </div>
+
+
+
+                            <div class="place">
+                                <div class="hotel">
+                                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                                    <span>Hotel Royal Inn</span>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
 
-    </div>
-    <div class="item1">
-        <input id="day5" type="checkbox" name="menu" />
-        <label for="day5">
-        <div class="it_name">
-          <div class="icon">
-            <p>Day 5</p>
-            <img src="../icon.png" alt="">
-            <b>Museum and Mall Expenditure</b>
-          </div>
-          <div class="arrow">
-            <img src="../down-arrow.png" alt="">
-          </div>
-        </div>
-        </label>
-        <div class="day">
-          <div class="list">
-            <div class="place">
-              <div class="text">
-               <p id="M">Chhatrapati Shivaji Maharaj Museum</p>
-               <p>Collection of War weapons, coins and other artifacts from Maratha Empire.</p>
-             </div> 
-              <div class="pic">
-               <img src="museum2.JPG" alt="pic">
-              </div> 
-            </div>
-            <div class="place">
-              <div class="text">
-                <p id="M">Prozone Mall</p>
-                <p>Shopping Mall.</p>
-              </div> 
-              <div class="pic">
-                <img src="mall.jpg" alt="pic">
-              </div>
-            </div>
-    
-              
-                
-               <div class="place">
-                  <div class="hotel">
-                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                    <span>Hotel Royal Inn</span>
-                  </div> 
-                      
                 </div>
-          </div>
-        </div>
 
-    </div>
-       
-        </div>
-      </div>
-    </div>
-    <footer>
-      <section class="footer">
-        <div class="box-container">
-            <div class="box">
-                <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
-            </div>
-    
-            <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
-            </div>
-    
-            <div class="box">
-                <h3>Contact info</h3>
-                <a href="#"><i class="fa fa-phone"></i>428416212</a>
-                <a href="#"><i class="fa fa-phone"></i>483481292</a>
-                <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
-                <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
-            </div>
-    
-            <div class="box">
-                <h3>Follow Us</h3>
-                <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
-                <a href="#"><i class="fa fa-twitter"></i>twitter</a>
-                <a href="#"><i class="fa fa-instagram"></i>instagram</a>
-                <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
             </div>
         </div>
-    
-        <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
-    </section>
-    
-  </footer>
-</body>
+        </div>
+        <section class="hotel_images">
+            <h2>Wondering About Your Stay?</h2>
+            <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+            <div class="hotel_slide">
+             
+                <i id="left" class="fa-solid fa-angle-left"></i>
+                <div class="carousel">
+                  <img src="../hotel/royal_inn.avif" alt="img" draggable="false">
+                  <img src="../hotel/four-season.avif" alt="img" draggable="false">
+                  <img src="../hotel/sayaji.jpg" alt="img" draggable="false">
+                  <img src="../hotel/regal_plaza.jpg" alt="img" draggable="false">
+                  <img src="../hotel/ecotel.jpg" alt="img" draggable="false">
+      
+                </div>
+                <i id="right" class="fa-solid fa-angle-right"></i>
+              
+            </div>
+               
+          </section>
+        <footer>
+            <section class="footer">
+                <div class="box-container">
+                    <div class="box">
+                        <h3>Quick Links</h3>
+                        <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                        <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                        <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                        <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                        <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                    </div>
+
+                    <div class="box">
+                        <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                    </div>
+
+                    <div class="box">
+                        <h3>Contact info</h3>
+                        <a href="#"><i class="fa fa-phone"></i>428416212</a>
+                        <a href="#"><i class="fa fa-phone"></i>483481292</a>
+                        <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+                        <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+                    </div>
+
+                    <div class="box">
+                        <h3>Follow Us</h3>
+                        <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+                        <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+                        <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+                        <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+                    </div>
+                </div>
+
+                <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+            </section>
+
+        </footer>
+        <script src="../slider.js"></script>
+        <script>
+            function submitForm() {
+              // Handle form submission here
+              
+              // Redirect to paynow.html
+              window.location.href = "../payment.html";
+          }
+          </script>
+    </body>
+
 </html>
diff --git a/packages/iternary/aurangabad/Mahesh_it.php b/packages/iternary/aurangabad/Mahesh_it.php
new file mode 100644
index 0000000..d1310f2
--- /dev/null
+++ b/packages/iternary/aurangabad/Mahesh_it.php
@@ -0,0 +1,28 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "mahesh_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    // Prepare SQL statement
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/aurangabad/Shiv_it.html b/packages/iternary/aurangabad/Shiv_it.html
index 4f079a5..afc02fe 100644
--- a/packages/iternary/aurangabad/Shiv_it.html
+++ b/packages/iternary/aurangabad/Shiv_it.html
@@ -3,6 +3,8 @@
 <head>
   <title> Shiv tours and travels |TravelHub | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -14,15 +16,25 @@
   <body>
     <header>    
     <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
+      <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
 
       <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
-      </nav>
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="dropdown">
+            <a href="#" id="profile-button">
+                <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                <span>Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+            </a>
+            <ul class="dropdown-content">
+                <li><a href="/user/profile.html">Dashboard</a></li>
+            </ul>
+        </div>
+    </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
         
@@ -35,13 +47,19 @@ <h1>Explore Aurangabad along with Ajanta and Ellora </h1>
     <h2>Booking Summary</h2>
     <p id="cap">Book Now and Get Ready for an amazing tour!</p>
     <div class="book">
-      <!-- <div class="sum">
-        <img src="background.jpg" alt=""></div> -->
+
       <div class="date">
       <div class="val">
-      <form >
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post">
+      <label for="userName">Enter your name</label>
+      <input type="text" id="userName" name="userName"> 
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -280,7 +298,7 @@ <h2>Iternary</h2>
                <div class="place">
                   <div class="hotel">
                     <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                    <span>Hotel Deccan</span>
+                    <span>Hotel Silver Oak</span>
                   </div> 
                       
                 </div>
@@ -290,24 +308,42 @@ <h2>Iternary</h2>
     </div>
     </div>
     </div>
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/aurangabad.avif" alt="img" draggable="false">
+            <img src="../hotel/aurangabad_1.jpg" alt="img" draggable="false">
+            <img src="../hotel/pearls.jpg" alt="img" draggable="false">
+            <img src="../hotel/silver.jpeg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+              <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+              <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+              <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+              <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -331,5 +367,14 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
 </html>
diff --git a/packages/iternary/aurangabad/Shiv_it.php b/packages/iternary/aurangabad/Shiv_it.php
new file mode 100644
index 0000000..e256527
--- /dev/null
+++ b/packages/iternary/aurangabad/Shiv_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "shiv_it";
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    // Prepare SQL statement
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+  ?>
\ No newline at end of file
diff --git a/packages/iternary/aurangabad/Zenga_it.html b/packages/iternary/aurangabad/Zenga_it.html
index a98c502..c33294a 100644
--- a/packages/iternary/aurangabad/Zenga_it.html
+++ b/packages/iternary/aurangabad/Zenga_it.html
@@ -3,6 +3,8 @@
 <head>
   <title>Zenga Travels |TravelHub | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -12,15 +14,25 @@
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
@@ -34,13 +46,19 @@ <h1>Cultural tour of Aurangabad</h1>
     <h2>Booking Summary</h2>
     <p id="cap">Book Now and Get Ready for an amazing tour!</p>
     <div class="book">
-      <!-- <div class="sum">
-        <img src="background.jpg" alt=""></div> -->
+
       <div class="date">
       <div class="val">
-      <form >
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post">
+          <label for="userName">Enter your name</label>
+          <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -168,7 +186,7 @@ <h2>Iternary</h2>
             <div class="place">
               <div class="hotel">
                 <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                <span>Hotel Ajanta-Ellora</span>
+                <span>Hotel Four-Season</span>
               </div> 
                     
             </div>
@@ -290,25 +308,42 @@ <h2>Iternary</h2>
         </div>
       </div>
     </div>
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/heritage.jpg" alt="img" draggable="false">
+            <img src="../hotel/royal_inn.avif" alt="img" draggable="false">
+            <img src="../hotel/four-season.avif" alt="img" draggable="false">
+            <img src="../hotel/sunrise.avif" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
-            </div>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
     
             <div class="box">
                 <h3>Contact info</h3>
@@ -331,5 +366,17 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
+
 </html>
+
diff --git a/packages/iternary/aurangabad/Zenga_it.php b/packages/iternary/aurangabad/Zenga_it.php
new file mode 100644
index 0000000..2bcb589
--- /dev/null
+++ b/packages/iternary/aurangabad/Zenga_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "Zenga_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/bg2.jpg b/packages/iternary/bg2.jpg
new file mode 100644
index 0000000..fa5d810
Binary files /dev/null and b/packages/iternary/bg2.jpg differ
diff --git a/packages/iternary/hotel/aryadeep.jpg b/packages/iternary/hotel/aryadeep.jpg
new file mode 100644
index 0000000..6eca6d4
Binary files /dev/null and b/packages/iternary/hotel/aryadeep.jpg differ
diff --git a/packages/iternary/hotel/aurangabad.avif b/packages/iternary/hotel/aurangabad.avif
new file mode 100644
index 0000000..1d0d476
Binary files /dev/null and b/packages/iternary/hotel/aurangabad.avif differ
diff --git a/packages/iternary/hotel/aurangabad_1.jpg b/packages/iternary/hotel/aurangabad_1.jpg
new file mode 100644
index 0000000..fd278b0
Binary files /dev/null and b/packages/iternary/hotel/aurangabad_1.jpg differ
diff --git a/packages/iternary/hotel/bentley.jpg b/packages/iternary/hotel/bentley.jpg
new file mode 100644
index 0000000..9a9b8a5
Binary files /dev/null and b/packages/iternary/hotel/bentley.jpg differ
diff --git a/packages/iternary/hotel/centre-point.avif b/packages/iternary/hotel/centre-point.avif
new file mode 100644
index 0000000..8573b11
Binary files /dev/null and b/packages/iternary/hotel/centre-point.avif differ
diff --git a/packages/iternary/hotel/centre-point_1.webp b/packages/iternary/hotel/centre-point_1.webp
new file mode 100644
index 0000000..1b08845
Binary files /dev/null and b/packages/iternary/hotel/centre-point_1.webp differ
diff --git a/packages/iternary/hotel/centre-point_2.jpeg b/packages/iternary/hotel/centre-point_2.jpeg
new file mode 100644
index 0000000..e93907f
Binary files /dev/null and b/packages/iternary/hotel/centre-point_2.jpeg differ
diff --git a/packages/iternary/hotel/ecotel.jpg b/packages/iternary/hotel/ecotel.jpg
new file mode 100644
index 0000000..54c77ca
Binary files /dev/null and b/packages/iternary/hotel/ecotel.jpg differ
diff --git a/packages/iternary/hotel/four-season.avif b/packages/iternary/hotel/four-season.avif
new file mode 100644
index 0000000..93f0501
Binary files /dev/null and b/packages/iternary/hotel/four-season.avif differ
diff --git a/packages/iternary/hotel/grand_legacy.jpg b/packages/iternary/hotel/grand_legacy.jpg
new file mode 100644
index 0000000..5fe2a69
Binary files /dev/null and b/packages/iternary/hotel/grand_legacy.jpg differ
diff --git a/packages/iternary/hotel/heritage.jpg b/packages/iternary/hotel/heritage.jpg
new file mode 100644
index 0000000..e2141a4
Binary files /dev/null and b/packages/iternary/hotel/heritage.jpg differ
diff --git a/packages/iternary/hotel/hilton.jpg b/packages/iternary/hotel/hilton.jpg
new file mode 100644
index 0000000..c35710f
Binary files /dev/null and b/packages/iternary/hotel/hilton.jpg differ
diff --git a/packages/iternary/hotel/himalaya.jpg b/packages/iternary/hotel/himalaya.jpg
new file mode 100644
index 0000000..c0d6ebc
Binary files /dev/null and b/packages/iternary/hotel/himalaya.jpg differ
diff --git a/packages/iternary/hotel/holiday-inn-primpri.jpeg b/packages/iternary/hotel/holiday-inn-primpri.jpeg
new file mode 100644
index 0000000..a7eb42a
Binary files /dev/null and b/packages/iternary/hotel/holiday-inn-primpri.jpeg differ
diff --git a/packages/iternary/hotel/hyatt.jpg b/packages/iternary/hotel/hyatt.jpg
new file mode 100644
index 0000000..a13cd5c
Binary files /dev/null and b/packages/iternary/hotel/hyatt.jpg differ
diff --git a/packages/iternary/hotel/jw.jpeg b/packages/iternary/hotel/jw.jpeg
new file mode 100644
index 0000000..96156aa
Binary files /dev/null and b/packages/iternary/hotel/jw.jpeg differ
diff --git a/packages/iternary/hotel/karl.jpg b/packages/iternary/hotel/karl.jpg
new file mode 100644
index 0000000..509d85f
Binary files /dev/null and b/packages/iternary/hotel/karl.jpg differ
diff --git a/packages/iternary/hotel/maitrayee.jpg b/packages/iternary/hotel/maitrayee.jpg
new file mode 100644
index 0000000..b63016f
Binary files /dev/null and b/packages/iternary/hotel/maitrayee.jpg differ
diff --git a/packages/iternary/hotel/maitrayee_1.avif b/packages/iternary/hotel/maitrayee_1.avif
new file mode 100644
index 0000000..6953638
Binary files /dev/null and b/packages/iternary/hotel/maitrayee_1.avif differ
diff --git a/packages/iternary/hotel/nisarg.avif b/packages/iternary/hotel/nisarg.avif
new file mode 100644
index 0000000..9264586
Binary files /dev/null and b/packages/iternary/hotel/nisarg.avif differ
diff --git a/packages/iternary/hotel/orchid-central.jpg b/packages/iternary/hotel/orchid-central.jpg
new file mode 100644
index 0000000..289f2f9
Binary files /dev/null and b/packages/iternary/hotel/orchid-central.jpg differ
diff --git a/packages/iternary/hotel/pearls.jpg b/packages/iternary/hotel/pearls.jpg
new file mode 100644
index 0000000..13a3514
Binary files /dev/null and b/packages/iternary/hotel/pearls.jpg differ
diff --git a/packages/iternary/hotel/pride_1.avif b/packages/iternary/hotel/pride_1.avif
new file mode 100644
index 0000000..7daf4f1
Binary files /dev/null and b/packages/iternary/hotel/pride_1.avif differ
diff --git a/packages/iternary/hotel/pride_2.avif b/packages/iternary/hotel/pride_2.avif
new file mode 100644
index 0000000..6d6e3dd
Binary files /dev/null and b/packages/iternary/hotel/pride_2.avif differ
diff --git a/packages/iternary/hotel/pride_3.jpg b/packages/iternary/hotel/pride_3.jpg
new file mode 100644
index 0000000..b37abac
Binary files /dev/null and b/packages/iternary/hotel/pride_3.jpg differ
diff --git a/packages/iternary/hotel/pride_4.jpg b/packages/iternary/hotel/pride_4.jpg
new file mode 100644
index 0000000..295d6c7
Binary files /dev/null and b/packages/iternary/hotel/pride_4.jpg differ
diff --git a/packages/iternary/hotel/pride_5.jpg b/packages/iternary/hotel/pride_5.jpg
new file mode 100644
index 0000000..fe15dbd
Binary files /dev/null and b/packages/iternary/hotel/pride_5.jpg differ
diff --git a/packages/iternary/hotel/radisson-blu.jpg b/packages/iternary/hotel/radisson-blu.jpg
new file mode 100644
index 0000000..6690143
Binary files /dev/null and b/packages/iternary/hotel/radisson-blu.jpg differ
diff --git a/packages/iternary/hotel/radisson.avif b/packages/iternary/hotel/radisson.avif
new file mode 100644
index 0000000..30f36d5
Binary files /dev/null and b/packages/iternary/hotel/radisson.avif differ
diff --git a/packages/iternary/hotel/ramee-grand.webp b/packages/iternary/hotel/ramee-grand.webp
new file mode 100644
index 0000000..f5c04f3
Binary files /dev/null and b/packages/iternary/hotel/ramee-grand.webp differ
diff --git a/packages/iternary/hotel/rangsharda.jpg b/packages/iternary/hotel/rangsharda.jpg
new file mode 100644
index 0000000..f00ea3a
Binary files /dev/null and b/packages/iternary/hotel/rangsharda.jpg differ
diff --git a/packages/iternary/hotel/regal_plaza.jpg b/packages/iternary/hotel/regal_plaza.jpg
new file mode 100644
index 0000000..ff81212
Binary files /dev/null and b/packages/iternary/hotel/regal_plaza.jpg differ
diff --git a/packages/iternary/hotel/ritz-carlton.jpg b/packages/iternary/hotel/ritz-carlton.jpg
new file mode 100644
index 0000000..db1ec64
Binary files /dev/null and b/packages/iternary/hotel/ritz-carlton.jpg differ
diff --git a/packages/iternary/hotel/royal_inn.avif b/packages/iternary/hotel/royal_inn.avif
new file mode 100644
index 0000000..a931a3c
Binary files /dev/null and b/packages/iternary/hotel/royal_inn.avif differ
diff --git a/packages/iternary/hotel/sayaji.jpg b/packages/iternary/hotel/sayaji.jpg
new file mode 100644
index 0000000..50894d6
Binary files /dev/null and b/packages/iternary/hotel/sayaji.jpg differ
diff --git a/packages/iternary/hotel/silver.jpeg b/packages/iternary/hotel/silver.jpeg
new file mode 100644
index 0000000..466088d
Binary files /dev/null and b/packages/iternary/hotel/silver.jpeg differ
diff --git a/packages/iternary/hotel/solitaire.avif b/packages/iternary/hotel/solitaire.avif
new file mode 100644
index 0000000..bb387ce
Binary files /dev/null and b/packages/iternary/hotel/solitaire.avif differ
diff --git a/packages/iternary/hotel/studio-estique.avif b/packages/iternary/hotel/studio-estique.avif
new file mode 100644
index 0000000..14f4519
Binary files /dev/null and b/packages/iternary/hotel/studio-estique.avif differ
diff --git a/packages/iternary/hotel/sunrise.avif b/packages/iternary/hotel/sunrise.avif
new file mode 100644
index 0000000..d2152ff
Binary files /dev/null and b/packages/iternary/hotel/sunrise.avif differ
diff --git a/packages/iternary/hotel/taj-gateway.jpg b/packages/iternary/hotel/taj-gateway.jpg
new file mode 100644
index 0000000..7eda488
Binary files /dev/null and b/packages/iternary/hotel/taj-gateway.jpg differ
diff --git a/packages/iternary/hotel/taj-gateway_1.webp b/packages/iternary/hotel/taj-gateway_1.webp
new file mode 100644
index 0000000..10cc7a3
Binary files /dev/null and b/packages/iternary/hotel/taj-gateway_1.webp differ
diff --git a/packages/iternary/hotel/taj-gateway_2.jpg b/packages/iternary/hotel/taj-gateway_2.jpg
new file mode 100644
index 0000000..442a0d7
Binary files /dev/null and b/packages/iternary/hotel/taj-gateway_2.jpg differ
diff --git a/packages/iternary/hotel/tropicana_resort.avif b/packages/iternary/hotel/tropicana_resort.avif
new file mode 100644
index 0000000..4ac2ee0
Binary files /dev/null and b/packages/iternary/hotel/tropicana_resort.avif differ
diff --git a/packages/iternary/hotel/west.jpg b/packages/iternary/hotel/west.jpg
new file mode 100644
index 0000000..536d6dc
Binary files /dev/null and b/packages/iternary/hotel/west.jpg differ
diff --git a/packages/iternary/iternary.css b/packages/iternary/iternary.css
index 3dbdd20..b47db25 100644
--- a/packages/iternary/iternary.css
+++ b/packages/iternary/iternary.css
@@ -4,7 +4,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Poppins', sans-serif;
     scroll-behavior:smooth ;
 }
 :root {
@@ -243,7 +243,6 @@ input[type="checkbox"]:checked~div.day {
     width: 75vw;
     margin-left: 1rem;
     transition: 2s;
-  
     
 }
 
@@ -272,6 +271,9 @@ input[type="date"] {
     font-size: 16px;
   }
   .slider{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     padding: 20px;
     background-color: rgba(238, 229, 130, 0.114);
     /* border-top: 1px solid rgba(0, 0, 0, 0.715); */
@@ -279,7 +281,6 @@ input[type="date"] {
 
   }
 .slider h2{
-
     padding-top: 10px;
     padding-bottom: 10px;
 
@@ -320,9 +321,9 @@ input[type="date"] {
 }
 .date{
     padding: 20px; 
-    width: 300px;
+    width: 320px;
     border: 1px solid rgba(0, 0, 0, 0.388);
-  margin: 30px;
+  margin: 45px;
     font-size: 14px;
     background-color: white;
 }
@@ -333,7 +334,6 @@ input[type="date"] {
     margin-top: 15px;
 }
 .amt2 {
-    
     color: green;
     font-size: 20px;
    
@@ -380,4 +380,92 @@ color: white;
 }
 .cmp2 h1{
     color: white;
-    }
\ No newline at end of file
+    }
+
+    .hotel_slide{
+        display: flex;
+        max-width: 1200px;
+        position: relative;
+        margin-left: 2rem;
+      }
+      .hotel_slide i{
+        top: 50%;
+        height: 44px;
+        width: 44px;
+        color: #343F4F;
+        cursor: pointer;
+        font-size: 1.15rem;
+        position: absolute;
+        text-align: center;
+        line-height: 44px;
+        background: #fff;
+        border-radius: 50%;
+        transform: translateY(-50%);
+        transition: transform 0.1s linear;
+      }
+      .hotel_slide i:active{
+        transform: translateY(-50%) scale(0.9);
+      }
+      .hotel_slide i:hover{
+        background: #f2f2f2;
+      }
+      .hotel_slide i:first-child{
+        left: -22px;
+        display: none;
+      }
+      .hotel_slide i:last-child{
+        right: -22px;
+      }
+      .hotel_slide .carousel{
+        font-size: 0px;
+        cursor: pointer;
+        overflow: hidden;
+        white-space: nowrap;
+        scroll-behavior: smooth;
+      }
+      .carousel.dragging{
+        cursor: grab;
+        scroll-behavior: auto;
+      }
+      .carousel.dragging img{
+        pointer-events: none;
+      }
+      .carousel img{
+        height: 340px;
+        object-fit: cover;
+        user-select: none;
+        margin-left: 14px;
+        width: calc(100% / 3);
+      }
+      .carousel img:first-child{
+        margin-left: 0px;
+      }
+      
+      @media screen and (max-width: 900px) {
+        .carousel img{
+          width: calc(100% / 2);
+        }
+      }
+      
+      @media screen and (max-width: 550px) {
+        .carousel img{
+          width: 100%;
+        }
+      }
+      .hotel_images{
+        display: flex;
+        flex-direction: column;
+        padding: 0 35px;
+        min-height: 90vh;
+    
+        align-items: center;
+        justify-content: center;
+        background:rgb(241, 241, 255);
+        margin: 2rem 0rem;
+      }
+
+      .hotel_images h2{
+        padding-top: 10px;
+        padding-bottom: 10px;
+    
+      }
\ No newline at end of file
diff --git a/packages/iternary/mumbai/Preeti_it.html b/packages/iternary/mumbai/Preeti_it.html
index 1477a28..cd720cb 100644
--- a/packages/iternary/mumbai/Preeti_it.html
+++ b/packages/iternary/mumbai/Preeti_it.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title >Preeti Travels |TravelHub | Iternary page</title>
+  <title >Preeti Travels | TravelHub | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -12,15 +14,25 @@
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
@@ -38,9 +50,16 @@ <h2>Booking Summary</h2>
         <img src="background.jpg" alt=""></div> -->
       <div class="date">
       <div class="val">
-      <form >
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post">
+          <label for="userName">Enter your name</label>
+          <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -285,26 +304,42 @@ <h2>Iternary</h2>
           </div>
       </div>
     </div>
-  
-    
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/bentley.jpg" alt="img" draggable="false">
+            <img src="../hotel/grand_legacy.jpg" alt="img" draggable="false">
+            <img src="../hotel/west.jpg" alt="img" draggable="false">
+            <img src="../hotel/jw.jpeg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -328,5 +363,15 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+
+    <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
 </html>
diff --git a/packages/iternary/mumbai/Preeti_it.php b/packages/iternary/mumbai/Preeti_it.php
new file mode 100644
index 0000000..29a87dc
--- /dev/null
+++ b/packages/iternary/mumbai/Preeti_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "Preeti_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/mumbai/darshan_it.html b/packages/iternary/mumbai/darshan_it.html
index 7ac361a..dce5cdc 100644
--- a/packages/iternary/mumbai/darshan_it.html
+++ b/packages/iternary/mumbai/darshan_it.html
@@ -3,25 +3,36 @@
 <head>
   <title>Darshan tours and travels | TravelHub | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="../slider.js">
 
 </head>
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
@@ -39,9 +50,16 @@ <h2>Booking Summary</h2>
         <img src="background.jpg" alt=""></div> -->
       <div class="date">
       <div class="val">
-      <form >
+      <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post">
+        <label for="userName">Enter your name</label>
+        <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -351,24 +369,43 @@ <h2>Iternary</h2>
     </div>
     </div>
     </div>
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/rangsharda.jpg" alt="img" draggable="false">
+            <img src="../hotel/bentley.jpg" alt="img" draggable="false">
+            <img src="../hotel/nisarg.avif" alt="img" draggable="false">
+            <img src="../hotel/solitaire.avif" alt="img" draggable="false">
+            <img src="../hotel/jw.jpeg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -392,5 +429,16 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
+
 </body>
 </html>
diff --git a/packages/iternary/mumbai/darshan_it.php b/packages/iternary/mumbai/darshan_it.php
new file mode 100644
index 0000000..7b14194
--- /dev/null
+++ b/packages/iternary/mumbai/darshan_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "darshan_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/mumbai/geeta_it.html b/packages/iternary/mumbai/geeta_it.html
index c6b87c0..c86f202 100644
--- a/packages/iternary/mumbai/geeta_it.html
+++ b/packages/iternary/mumbai/geeta_it.html
@@ -3,25 +3,38 @@
 <head>
   <title>TravelHub | Geeta tours and travels | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="index.css">  
+
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 
 </head>
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../packages/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
@@ -39,9 +52,16 @@ <h2>Booking Summary</h2>
         <img src="background.jpg" alt=""></div> -->
       <div class="date">
       <div class="val">
-      <form >
+      <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post">
+        <label for="userName">Enter your name</label>
+        <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -302,7 +322,7 @@ <h2>Iternary</h2>
                     <div class="place">
                       <div class="hotel">
                         <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
-                        <span >Tropicana Resort & Spa Alibaugre</span>
+                        <span >Tropicana Resort & Spa Alibaug</span>
                       </div> 
                       
                       </div>
@@ -311,26 +331,41 @@ <h2>Iternary</h2>
           </div>
       </div>
     </div>
-  
-    
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="/packages/iternary/hotel/radisson.avif" alt="img" draggable="false">
+            <img src="/packages/iternary/hotel/tropicana_resort.avif" alt="img" draggable="false">
+            <img src="/packages/iternary/hotel/regal_plaza.jpg" alt="img" draggable="false">
+            <img src="/packages/iternary/hotel/karl.jpg" alt="img" draggable="false">
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -354,5 +389,14 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/packages/iternary/mumbai/geeta_it.php b/packages/iternary/mumbai/geeta_it.php
new file mode 100644
index 0000000..958833a
--- /dev/null
+++ b/packages/iternary/mumbai/geeta_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "geeta_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/nagpur/arya_it.html b/packages/iternary/nagpur/arya_it.html
index 2012a3b..9584ebe 100644
--- a/packages/iternary/nagpur/arya_it.html
+++ b/packages/iternary/nagpur/arya_it.html
@@ -3,6 +3,8 @@
 <head>
   <title>TravelHub | Arya Travels | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -13,15 +15,25 @@
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
   </section>
         
@@ -37,9 +49,16 @@ <h2>Booking Summary</h2>
     <div class="book">
       <div class="date">
       <div class="val">
-      <form >
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post"> 
+          <label for="userName">Enter your name</label>
+          <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -308,26 +327,44 @@ <h2>Iternary</h2>
           </div>
       </div>
     </div>
-  
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/pride_1.avif" alt="img" draggable="false">
+            <img src="../hotel/pride_2.avif" alt="img" draggable="false">
+            <img src="../hotel/pride_3.jpg" alt="img" draggable="false">
+            <img src="../hotel/pride_4.jpg" alt="img" draggable="false">
+            <img src="../hotel/pride_5.jpg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -351,5 +388,14 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
 </html>
diff --git a/packages/iternary/nagpur/arya_it.php b/packages/iternary/nagpur/arya_it.php
new file mode 100644
index 0000000..efa25b7
--- /dev/null
+++ b/packages/iternary/nagpur/arya_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "arya_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/nagpur/pravasi_it.html b/packages/iternary/nagpur/pravasi_it.html
index 0176aca..6b08f00 100644
--- a/packages/iternary/nagpur/pravasi_it.html
+++ b/packages/iternary/nagpur/pravasi_it.html
@@ -3,6 +3,8 @@
 <head>
   <title>TravelHub | Hello Pravasi Travels | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -13,15 +15,25 @@
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
   </section>
         
@@ -37,9 +49,16 @@ <h2>Booking Summary</h2>
     <div class="book">
       <div class="date">
       <div class="val">
-      <form >
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post"> 
+          <label for="userName">Enter your name</label>
+          <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -392,26 +411,44 @@ <h2>Iternary</h2>
                           
       </div>
     </div>
-  
-    
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/aryadeep.jpg" alt="img" draggable="false">
+            <img src="../hotel/maitrayee.jpg" alt="img" draggable="false">
+            <img src="../hotel/maitrayee_1.avif" alt="img" draggable="false">
+            <img src="../hotel/taj-gateway.jpg" alt="img" draggable="false">
+            <img src="../hotel/taj-gateway_1.webp" alt="img" draggable="false">
+            <img src="../hotel/taj-gateway_2.jpg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -435,5 +472,14 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
 </html>
diff --git a/packages/iternary/nagpur/pravasi_it.php b/packages/iternary/nagpur/pravasi_it.php
new file mode 100644
index 0000000..da95148
--- /dev/null
+++ b/packages/iternary/nagpur/pravasi_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "pravasi_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/nagpur/safar_it.html b/packages/iternary/nagpur/safar_it.html
index 25ad4b5..677c6bb 100644
--- a/packages/iternary/nagpur/safar_it.html
+++ b/packages/iternary/nagpur/safar_it.html
@@ -3,6 +3,8 @@
 <head>
   <title>TravelHub | Safar Tours and Travels | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -13,15 +15,25 @@
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
   </section>
         
@@ -37,9 +49,16 @@ <h2>Booking Summary</h2>
     <div class="book">
       <div class="date">
       <div class="val">
-      <form >
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post"> 
+        <label for="userName">Enter your name</label>
+        <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -292,26 +311,43 @@ <h2>Iternary</h2>
          
       </div>
     </div>
-  
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/himalaya.jpg" alt="img" draggable="false">
+            <img src="../hotel/centre-point.avif" alt="img" draggable="false">
+            <img src="../hotel/centre-point_1.webp" alt="img" draggable="false">
+            <img src="../hotel/centre-point_2.jpeg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+              <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+              <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+              <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+              <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -335,5 +371,14 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
 </html>
diff --git a/packages/iternary/nagpur/safar_it.php b/packages/iternary/nagpur/safar_it.php
new file mode 100644
index 0000000..c719638
--- /dev/null
+++ b/packages/iternary/nagpur/safar_it.php
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>TravelHub | Safar Tours and Travels | Iternary page</title>
+  <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+</head>
+<body>
+  <body>
+    <header>    
+    <section class="header" >
+      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
+
+      <nav class="navbar">
+          <a href="/index.html">Home</a>
+          <a href="/aboutUs.html">About</a>
+          <a href="../../city_package/packages.html">Packages</a>
+          <a href="/gallery.html">Gallery</a>
+          <a href="/contactUs.html"> Contact</a>
+      </nav>
+  </section>
+        
+    </header>
+    <div class="cmp" style="background-image: radial-gradient(circle at 10%,rgba(64, 166, 110, 0.568) ,white );
+    box-shadow: 1px 1px 3px #237453f0;">
+      <h1>Explore Nagpur along with Pachmarhi  </h1> 
+        <p>Safar Tours and Travels</p>
+    </div>
+    <div class="booking">
+    <h2>Booking Summary</h2>
+    <p id="cap">Reserve your date now for an amazing travel experience!</p>
+    <div class="book">
+      <div class="date">
+      <div class="val">
+      <form action="safar_it.php" method="post">
+      <label for="userDate">Select a Date:</label>
+      <input type="date" id="userDate" name="userDate">
+      <label for="userRoom">Number of rooms:</label>
+      <input type="number" id="userRoom" name="userRoom">
+      <label for="travellerno">Number of travellers:</label>
+      <input type="number" id="travellerno" name="travellerno">
+      <input type="submit" value="Book now">
+    </form>
+  </div>
+    <div class="price">
+      <div class="amt">
+      <div class="amt1">
+      <p>Price </p></div>
+      <div class="amt2">
+      <p>&#8377 23,900</p></div>
+    </div>
+      <p id="pe">per person</p>
+    </div>
+    </div>
+  </div>
+    </div>
+    <div class="slider">
+      <h2>Iternary</h2>
+      <p id="cap">Curious about your plans? Click to reveal your itinerary details!</p>
+    <div class="iternary">
+         <div class="item1">
+        <input id="day1" type="checkbox" name="menu" />
+        <label for="day1">
+          <div class="it_name">
+          <div class="icon">
+            <p>Day 1</p>
+            <img src="../icon.png" alt="">
+            <b>Nagpur City Exploration</b>
+          </div>
+          <div class="arrow">
+            <img src="../down-arrow.png" alt="">
+          </div>
+        </div>
+        </label>
+      
+    <div class="day">
+      <div class="list">
+
+      <div class="place">
+        <div class="text">
+          <p id="M">Deekshabhoomi</p>
+              <p>Explore the sacred Buddhist stupa at Deekshabhoomi, a historically significant pilgrimage site where Dr. B.R. Ambedkar embraced Buddhism</p>
+        </div> 
+         <div class="pic">
+          <img src="deekshabhoomi.webp" alt="pic">      
+         </div>
+        </div>
+        <div class="place">
+            <div class="text">
+              <p id="M">Sitabuldi Fort</p>
+                  <p>Immerse yourself in history at Sitabuldi Fort, a British-era stronghold offering not only a glimpse into the past but also stunning panoramic views of Nagpur</p>
+            </div> 
+             <div class="pic">
+              <img src="sitabuldi.png" alt="pic">
+             </div>
+            </div>
+            <div class="place">
+                <div class="text">
+                  <p id="M">Futala Lake</p>
+                      <p>Immerse yourself in history at Sitabuldi Fort, a British-era stronghold offering not only a glimpse into the past but also stunning panoramic views of Nagpur</p>
+                </div> 
+                 <div class="pic">
+                  <img src="futala.jpg" alt="pic">
+                 </div>
+                </div>
+         
+          
+                <div class="place">
+                  <div class="hotel">
+                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                    <span >Hotel Centre Point</span>
+                  </div> 
+                  
+                  </div>
+      </div>
+      </div>
+    </div>
+         <div class="item1">
+      <input id="day2" type="checkbox" name="menu" />
+      <label for="day2"> 
+        <div class="it_name">
+          <div class="icon">
+          <p>Day 2</p>
+          <img src="../icon.png" alt="">
+          <b> Nature and Wildlife</b>
+        </div>
+        <div class="arrow">
+          <img src="../down-arrow.png" alt="">
+        </div>
+      </div>
+      </label>
+      <div class="day">
+        <div class="list">
+            <div class="place">
+                <div class="text">
+                  <p id="M">Ambazari Lake and Garden</p>
+                      <p>A peaceful lake for boating, paired with a beautiful garden.</p>
+                </div> 
+                 <div class="pic">
+                  <img src="ambazari.jpeg" alt="pic">
+                 </div>
+                </div>
+                <div class="place">
+                  <div class="text">
+                    <p id="M">Raman Science Centre</p>
+                        <p>Engaging science exhibits that are both educational and entertaining, providing an interactive experience.</p>
+                  </div> 
+                   <div class="pic">
+                    <img src="raman.jpg" alt="pic">
+                   </div>
+                  </div>
+       
+            <div class="place">
+              <div class="text">
+                <p id="M">Nagzira Wildlife Sanctuary</p>
+                    <p>Embark on a wildlife adventure at Nagzira Wildlife Sanctuary, a biodiverse haven offering a captivating safari experience amidst diverse flora and fauna.</p>
+              </div> 
+               <div class="pic">
+                <img src="nagzira.jpeg" alt="pic">
+               </div>
+              </div>
+             
+                  <div class="place">
+                    <div class="hotel">
+                      <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                      <span >Hotel Centre Point</span>
+                    </div> 
+                    
+                    </div>
+        </div>
+      </div>
+      </div>
+         <div class="item1">
+        <input id="day3" type="checkbox" name="menu" />
+        <label for="day3">
+        <div class="it_name">
+          <div class="icon">
+            <p>Day 3</p>
+            <img src="../icon.png" alt="">
+            <b>Historical & Religious Sites</b>
+          </div>
+          <div class="arrow">
+            <img src="../down-arrow.png" alt="">
+          </div>
+        </div>
+        </label>
+      <div class="day">
+        
+       
+        <div class="list">
+        <div class="place">
+          <div class="text">
+            <p id="M">Ramtek Temple</p>
+                <p> Climb to the ancient Ramtek Temple atop a hill, not just for its religious significance but also for the breathtaking views it provides of the surrounding landscape.</p>
+          </div> 
+           <div class="pic">
+            <img src="ramtek.jpg" alt="pic">
+           </div>
+          </div>
+          
+          <div class="place">
+            <div class="text">
+              <p id="M">Dragon Palace Buddhist Temple</p>
+                  <p>Immerse yourself in the serene ambiance of Dragon Palace, a beautiful Buddhist temple surrounded by lush greenery, offering a peaceful retreat.</p>
+            </div> 
+             <div class="pic">
+              <img src="dragon.jpg" alt="pic">
+             </div>
+            </div>
+            <div class="place">
+              <div class="text">
+                <p id="M">Sevagram</p>
+                    <p>Step into history at Sevagram, Gandhi's ashram, which played a pivotal role in India's fight for independence, providing insight into the Mahatma's life and principles.</p>
+              </div> 
+               <div class="pic">
+                <img src="sevagram.jpg" alt="pic">
+               </div>
+              </div>
+             
+                <div class="place">
+                  <div class="hotel">
+                    <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                    <span >Hotel Centre Point</span>
+                  </div> 
+                  
+                  </div>
+        </div>
+        </div>
+      </div>
+         <div class="item1">
+        <input id="day4" type="checkbox" name="menu" />
+        <label for="day4">
+        <div class="it_name">
+          <div class="icon">
+            <p>Day 4</p>
+            <img src="../icon.png" alt="">
+            <b>Pachmarhi Hill Station Excursion</b>
+          </div>
+          <div class="arrow">
+            <img src="../down-arrow.png" alt="">
+          </div>
+        </div>
+        </label>
+        <div class="day">
+          
+          
+          <div class="list">
+          
+              <div class="place">
+                <div class="text">
+                  <p id="M">Pachmarhi</p>
+                      <p>Explore the enchanting hill station of Pachmarhi, characterized by scenic waterfalls, colonial architecture, and ancient caves, offering a perfect blend of nature and history.</p>
+                </div> 
+                 <div class="pic">
+                  <img src="pachmarhi.jpg" alt="pic">
+                 </div>
+                </div>
+                <div class="place">
+                    <div class="text">
+                      <p id="M">Bee Falls</p>
+                          <p>Witness the breathtaking beauty of Bee Falls, a stunning cascade surrounded by lush greenery, providing a tranquil escape in the lap of nature.</p>
+                    </div> 
+                     <div class="pic">
+                      <img src="bee-falls.jpg" alt="pic">
+                     </div>
+                    </div>
+                    <div class="place">
+                        <div class="text">
+                          <p id="M">Jata Shankar Caves</p>
+                              <p>Delve into history at Jata Shankar Caves, ancient limestone caves housing a sacred Shiva lingam, creating a mystical and spiritual atmosphere.</p>
+                        </div> 
+                         <div class="pic">
+                          <img src="jatashankar.jpg" alt="pic">
+                         </div>
+                        </div>
+                
+                    <div class="place">
+                      <div class="hotel">
+                        <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                        <span >Hotel Himalaya Pachmarhi</span>
+                      </div> 
+                      
+                      </div>
+          </div>
+          </div>
+          </div>
+         
+      </div>
+    </div>
+  
+    
+    <footer>
+      <section class="footer">
+        <div class="box-container">
+            <div class="box">
+                <h3>Quick Links</h3>
+                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+            </div>
+    
+            <div class="box">
+                <h3>Extra Links</h3>
+                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
+                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+            </div>
+    
+            <div class="box">
+                <h3>Contact info</h3>
+                <a href="#"><i class="fa fa-phone"></i>428416212</a>
+                <a href="#"><i class="fa fa-phone"></i>483481292</a>
+                <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+                <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+            </div>
+    
+            <div class="box">
+                <h3>Follow Us</h3>
+                <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+                <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+                <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+                <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+            </div>
+        </div>
+    
+        <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+    </section>
+    
+  </footer>
+  <?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "safar_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+  ?>
+</body>
+</html>
diff --git a/packages/iternary/nagpur/safar_it[1].php b/packages/iternary/nagpur/safar_it[1].php
new file mode 100644
index 0000000..2d5a44c
--- /dev/null
+++ b/packages/iternary/nagpur/safar_it[1].php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "safar_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/payg.css b/packages/iternary/payg.css
new file mode 100644
index 0000000..d0e5001
--- /dev/null
+++ b/packages/iternary/payg.css
@@ -0,0 +1,62 @@
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('bg2.jpg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: right top;
+    opacity: 100%; /* Adjust the opacity as needed */
+    z-index: -1; /* Place the pseudo-element behind the content */
+}
+
+.logo{
+    width: 35%; /* Set a fixed width */
+    height: auto; /* Maintain the aspect ratio */
+    border-radius:10px;
+}
+
+main {
+    width: 500px;
+    margin: 20px auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    background-color: rgba(255, 255, 255, 0.8); /* Adding a semi-transparent white background */
+    margin-right: 45%;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    
+}
+
+label {
+    margin-top: 10px;
+}
+
+input {
+    padding: 8px;
+    margin-top: 5px;
+}
+
+.summary {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.primary-btn {
+    background-color: gold;
+    color: #000;
+    font-family: Arial, sans-serif;
+    font-size:medium;
+    padding: 10px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
diff --git a/packages/iternary/payment.html b/packages/iternary/payment.html
new file mode 100644
index 0000000..e123181
--- /dev/null
+++ b/packages/iternary/payment.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="payg.css">
+    <link rel="stylesheet" href="../../headfoot.css">
+
+    <title>Travel Package Payment</title>
+</head>         
+<br>
+<br>
+<section class="header" >
+    <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+
+    <nav class="navbar">
+        <a href="/Homepage/index.html">Home</a>
+        <a href="/aboutUS/aboutUs.html">About</a>
+        <a href="/packages/city_package/packages.html">Packages</a>
+        <a href="/gallery/gallery.html">Gallery</a>
+        <a href="/Other/contactUs.html">Contact</a>
+        <div class="dropdown">
+            <a href="#" id="profile-button">
+                <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                <span>Hi User</span>
+                <i class="fas fa-chevron-down"></i>
+            </a>
+            <ul class="dropdown-content">
+                <li><a href="/user/profile.html">Dashboard</a></li>
+            </ul>
+        </div>
+    </nav>
+    
+    <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
+</section>
+<body>
+    
+    <main>
+        <form action="/paynow.html" method="post" id="payment-form">
+            <!-- Payment Form Fields -->
+            <label for="card-number">Card Number:</label>
+            <input type="text" id="card-number" name="card-number" required>
+            <span id="card-number-error" class="error-message"></span>
+
+
+            <label for="expiration-date">Expiration Date:</label>
+            <input type="text" id="expiration-date" name="expiration-date" placeholder="MM/YY" required>
+            <span id="expiration-date-error" class="error-message"></span>
+
+            <label for="cvv">CVV:</label>
+            <input type="password" id="cvv" name="cvv" pattern="[0-9]{3,4}" required>
+            <span id="cvv-error" class="error-message"></span>
+
+            <label for="cardholder-name">Cardholder Name:</label>
+            <input type="text" id="cardholder-name" name="cardholder-name" required>
+            <span id="cardholder-name-error" class="error-message"></span>
+
+            <p>Trip Details:</p> 
+             <label for="place">Place:</label>
+             <input type="text" id="place" name="place" required>
+             <span id="place-error" class="error-message"></span>
+
+             <label for="package-name">Tour Package Name:</label>
+             <input type="text" id="package-name" name="package-name" required>
+             <span id="package-name-error" class="error-message"></span>
+
+            <p>Total Amount: [Your Total Amount]</p>
+                <!-- Additional details as needed -->
+             
+                
+                <!-- Action Buttons -->
+                <button type="submit" class="primary-btn" onclick="validateForm(); return false;">Pay Now</button>
+            </form>
+        </main>
+        
+                       <script> 
+                        function validateForm() {
+                            // Validate card number, expiration date, CVV, etc.
+                        var cardNumber = document.getElementById("card-number").value;
+                        var expirationDate = document.getElementById("expiration-date").value;
+                        var cvv = document.getElementById("cvv").value;
+                        var cardholderName = document.getElementById("cardholder-name").value;
+                        var place = document.getElementById("place").value;
+                        var packageName = document.getElementById("package-name").value;
+                        var totalAmountElement = document.getElementById("total-amount").value;
+                        var totalAmount = calculateTotalAmount(packageName);
+        
+            
+                        totalAmountElement.innerText = totalAmount;
+        
+                       console.log("Form is valid!");
+        
+                       return true;
+        }
+        
+        function calculateTotalAmount(packageName) {
+            // Implement your logic to calculate the total amount based on the package name
+            // For example, you might have a predefined mapping of package names to amounts
+            var packageAmounts = {
+                "Mumbai Safar Tours": 45000,
+                "Mumbai Darshan Geeta Tours": 50000,
+                "Mumbai HelloPravasi Tours": 38000,
+                // Add more packages as needed
+            };
+        
+            // Default to 0 if the package name is not found
+            return packageAmounts[packageName] || 0;
+        }
+        
+        
+                        clearErrorMessages();
+                         
+                        if (!isValidCardNumber(cardNumber)) {
+                        displayErrorMessage('card-number-error', 'Please enter a valid card number.');
+                        return false;
+                    }
+        
+                    if (!isValidExpirationDate(expirationDate)) {
+                        displayErrorMessage('expiration-date-error', 'Please enter a valid expiration date (MM/YY).');
+                        return false;
+                    }
+        
+                    if (!isValidCVV(cvv)) {
+                        displayErrorMessage('cvv-error', 'Please enter a valid CVV.');
+                        return false;
+                    }
+                    if (cardholderName.trim() === "") {
+                        displayErrorMessage('cardholder-name-error', 'Please enter the cardholder name.');
+                        return false;
+            }
+        
+                    if (place.trim() === "") {
+                        displayErrorMessage('place-error', 'Please enter the place.');
+                        return false;
+            }
+        
+                   if (packageName.trim() === "") {
+                     displayErrorMessage('package-name-error', 'Please enter the package name.');
+                     return false;
+            }
+        
+                 console.log("Form is valid!");
+        
+                    return true;
+        
+                function isValidCardNumber(cardNumber) {
+                    // Implement your card number validation logic
+                    // For example, check if it's a valid credit card number
+                    return /^[0-9]{16}$/.test(cardNumber);
+                }
+        
+                function isValidExpirationDate(expirationDate) {
+                    // Implement your expiration date validation logic
+                    // For example, check if it's in the format MM/YY
+                    return /^[0-9]{2}\/[0-9]{2}$/.test(expirationDate);
+                }
+        
+                function isValidCVV(cvv) {
+                    // Implement your CVV validation logic
+                    // For example, check if it's a 3 or 4-digit number
+                    return /^[0-9]{3}$/.test(cvv);
+                }
+        
+                function displayErrorMessage(elementId, message) {
+                    var errorElement = document.getElementById(elementId);
+                    errorElement.innerText = message;
+                    errorElement.style.color = 'red';
+                }
+        
+                function clearErrorMessages() {
+                    var errorElements = document.querySelectorAll('.error-message');
+                    errorElements.forEach(function (element) {
+                        element.innerText = '';
+                    });
+                }
+        
+                function Paymentwindow() {
+                    console.log("Redirecting to paynow.html");
+                    window.location.href= "paynow.html";
+                }
+            </script>
+        
+                        
+                    
+                    
+
+    
+                         <section class="footer">
+                             <div class="box-container">
+                                 <div class="box">
+                                     <h3>Quick Links</h3>
+                                     <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+        </div>
+
+        <div class="box">
+            <h3>Extra Links</h3>
+            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
+            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
+            <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+        </div>
+
+        <div class="box">
+            <h3>Contact info</h3>
+            <a href="#"><i class="fa fa-phone"></i>428416212</a>
+            <a href="#"><i class="fa fa-phone"></i>483481292</a>
+            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+        </div>
+        
+        <div class="box">
+            <h3>Follow Us</h3>
+            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+            <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+        </div>
+    </div>
+
+    <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+</section>
+</body>
+</html>
diff --git a/packages/iternary/paynow.html b/packages/iternary/paynow.html
new file mode 100644
index 0000000..00c7acc
--- /dev/null
+++ b/packages/iternary/paynow.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="payg.css">
+    <title>Travel Website Payment</title>
+    <main>
+        <form action="#" method="post" id="payment-form">
+            <p>One Time Passcode sent to +91********</p>
+            <!-- Payment Form Fields -->
+            <label for="otp">Enter OTP:</label>
+            <input type="number" id="otp" name="otp" required>
+            <button type="submit" class="primary-btn">Submit</button>
+    <script>
+        // Simulated function to generate a random OTP (for demonstration purposes)
+        function generateOTP() {
+            return Math.floor(1000 + Math.random() * 9000).toString();
+        }
+
+            // Simulating successful payment initiation
+            var otp = generateOTP();
+            var userEnteredOTP = prompt('Please enter the OTP sent to your mobile/email:', '');
+
+            if (userEnteredOTP === otp) {
+                handlePaymentSuccess();
+                return true;
+            } else {
+                alert('Invalid OTP. Please try again.');
+                return false;
+            }
+        
+
+        function handlePaymentSuccess() {
+            // Your actual payment processing logic would go here.
+            // This is just a simulated success message.
+            console.log('Payment successful! Thank you for your booking.');
+
+            // You can redirect the user to a confirmation page or perform other actions.
+            // For example:
+            // window.location.href = 'confirmation.html';
+        }
+    </script>
\ No newline at end of file
diff --git a/packages/iternary/pune/hilton_it.html b/packages/iternary/pune/hilton_it.html
index 4b2a5dc..6a14115 100644
--- a/packages/iternary/pune/hilton_it.html
+++ b/packages/iternary/pune/hilton_it.html
@@ -3,6 +3,7 @@
 <head>
   <title> Hilton tours and travels | TravelHub |Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -13,16 +14,26 @@
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
-      </nav>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+            <a href="/Homepage/index.html">Home</a>
+            <a href="/aboutUS/aboutUs.html">About</a>
+            <a href="/packages/city_package/packages.html">Packages</a>
+            <a href="/gallery/gallery.html">Gallery</a>
+            <a href="/Other/contactUs.html">Contact</a>
+            <div class="dropdown">
+                <a href="#" id="profile-button">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                    <span>Hi User</span>
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+                <ul class="dropdown-content">
+                    <li><a href="/user/profile.html">Dashboard</a></li>
+                </ul>
+            </div>
+        </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
         
@@ -40,9 +51,16 @@ <h2>Booking Summary</h2>
         <img src="background.jpg" alt=""></div> -->
       <div class="date">
       <div class="val">
-      <form >
-      <label for="userDate">Select a Date:</label>
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post"> 
+          <label for="userName">Enter your name</label>
+        <input type="text" id="userName" name="userName">
+          <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -340,26 +358,41 @@ <h2>Iternary</h2>
               </div>
       </div>
     </div>
-  
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/hyatt.jpg" alt="img" draggable="false">
+            <img src="../hotel/holiday-inn-primpri.jpeg" alt="img" draggable="false">
+            <img src="../hotel/radisson-blu.jpg" alt="img" draggable="false">
+            <img src="../hotel/orchid-central.jpg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+      </div>
+    </section>
     
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -383,5 +416,14 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
 </html>
diff --git a/packages/iternary/pune/hilton_it.php b/packages/iternary/pune/hilton_it.php
new file mode 100644
index 0000000..a952b78
--- /dev/null
+++ b/packages/iternary/pune/hilton_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "hilton_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/pune/parvati_it.html b/packages/iternary/pune/parvati_it.html
index 035ed93..88ce81c 100644
--- a/packages/iternary/pune/parvati_it.html
+++ b/packages/iternary/pune/parvati_it.html
@@ -3,6 +3,7 @@
 <head>
   <title>Parvati tours and travels | TravelHub | Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -13,15 +14,25 @@
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+          <a href="/Homepage/index.html">Home</a>
+          <a href="/aboutUS/aboutUs.html">About</a>
+          <a href="/packages/city_package/packages.html">Packages</a>
+          <a href="/gallery/gallery.html">Gallery</a>
+          <a href="/Other/contactUs.html">Contact</a>
+          <div class="dropdown">
+              <a href="#" id="profile-button">
+                  <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                  <span>Hi User</span>
+                  <i class="fas fa-chevron-down"></i>
+              </a>
+              <ul class="dropdown-content">
+                  <li><a href="/user/profile.html">Dashboard</a></li>
+              </ul>
+          </div>
       </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
@@ -41,8 +52,15 @@ <h2>Booking Summary</h2>
       <div class="date">
       <div class="val">
       <form >
+        <label for="userName">Enter your name</label>
+        <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -285,26 +303,43 @@ <h2>Iternary</h2>
           </div>
       </div>
     </div>
-  
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/studio-estique.avif" alt="img" draggable="false">
+            <img src="../hotel/ramee-grand.webp" alt="img" draggable="false">
+            <img src="../hotel/hilton.jpg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     
     <footer>
       <section class="footer">
-        <div class="box-container">
-            <div class="box">
-                <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
-            </div>
+        <section class="footer">
+          <div class="box-container">
+              <div class="box">
+                  <h3>Quick Links</h3>
+                  <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+              </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
     
             <div class="box">
@@ -328,5 +363,6 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
 </body>
 </html>
diff --git a/packages/iternary/pune/parvati_it.php b/packages/iternary/pune/parvati_it.php
new file mode 100644
index 0000000..689a7b9
--- /dev/null
+++ b/packages/iternary/pune/parvati_it.php
@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Parvati tours and travels | TravelHub | Iternary page</title>
+  <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+</head>
+
+<body>
+
+  <body>
+    <header>
+      <section class="header">
+        <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
+
+        <nav class="navbar">
+          <a href="/index.html">Home</a>
+          <a href="/aboutUs.html">About</a>
+          <a href="../../city_package/packages.html">Packages</a>
+          <a href="/gallery.html">Gallery</a>
+          <a href="/contactUs.html"> Contact</a>
+        </nav>
+        <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
+      </section>
+
+    </header>
+    <div class="cmp" style="background-image: radial-gradient(circle at 10%,rgba(246, 77, 77, 0.568) ,white );
+    box-shadow: 1px 1px 3px #f9899c;">
+      <h1>Exploring Pune: A Journey Through History, Culture, and Nature</h1>
+      <p>Parvati Tours and Travels</p>
+    </div>
+    <div class="booking">
+      <h2>Booking Summary</h2>
+      <p id="cap">Reserve your date now for an amazing travel experience!</p>
+      <div class="book">
+        <!-- <div class="sum">
+        <img src="background.jpg" alt=""></div> -->
+        <div class="date">
+          <div class="val">
+            <form action="parvati_it.php" method="post">
+              <label for="userDate">Select a Date:</label>
+              <input type="date" id="userDate" name="userDate">
+              <label for="userRoom">Number of rooms:</label>
+              <input type="number" id="userRoom" name="userRoom">
+              <label for="travellerno">Number of travellers:</label>
+              <input type="number" id="travellerno" name="travellerno">
+              <input type="submit" value="Book now">
+            </form>
+          </div>
+          <div class="price">
+            <div class="amt">
+              <div class="amt1">
+                <p>Price </p>
+              </div>
+              <div class="amt2">
+                <p>&#8377 46,000</p>
+              </div>
+            </div>
+            <p id="pe">per person</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="slider">
+      <h2>Iternary</h2>
+      <p id="cap">Curious about your plans? Click to reveal your itinerary details!</p>
+      <div class="iternary">
+        <div class="item1">
+          <input id="day1" type="checkbox" name="menu" />
+          <label for="day1">
+            <div class="it_name">
+              <div class="icon">
+                <p>Day 1</p>
+                <img src="../icon.png" alt="">
+                <b>Pune Local Sightseeing</b>
+              </div>
+              <div class="arrow">
+                <img src="../down-arrow.png" alt="">
+              </div>
+            </div>
+          </label>
+
+          <div class="day">
+            <div class="list">
+              <div class="place">
+                <div class="text">
+                  <p id="M">Saras Baug</p>
+                  <p>Explore Pune's serene Saras Baug - a perfect blend of nature and history.</p>
+                </div>
+                <div class="pic">
+                  <img src="saras_baug.webp" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">Shaniwar Wada Temple</p>
+                  <p>Pune's Timeless Icon of Grace and History.</p>
+                </div>
+                <div class="pic">
+                  <img src="shaniwar_wada_temple.jpg" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">Lal Mahal</p>
+                  <p>Pune's Historic Gem and the Red Palace Resonating with Rich Heritage.</p>
+                </div>
+                <div class="pic">
+                  <img src="lal_mahal.jpg" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="hotel">
+                  <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                  <span>Hotel Studio Estique</span>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item1">
+          <input id="day2" type="checkbox" name="menu" />
+          <label for="day2">
+            <div class="it_name">
+              <div class="icon">
+                <p>Day 2</p>
+                <img src="../icon.png" alt="">
+                <b>Relgious and historical sites</b>
+              </div>
+              <div class="arrow">
+                <img src="../down-arrow.png" alt="">
+              </div>
+            </div>
+          </label>
+          <div class="day">
+            <div class="list">
+              <div class="place">
+                <div class="text">
+                  <p id="M">Chaturshringi Temple</p>
+                  <p>A sacred temple nestled in the hills, offering spiritual solace and breathtaking views.</p>
+                </div>
+                <div class="pic">
+                  <img src="chaturshringi-temple.webp" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">Sri Balaji Temple</p>
+                  <p> Sri Balaji Mandir: Pune's sacred abode for divine blessings.</p>
+                </div>
+                <div class="pic">
+                  <img src="sri-balaji-temple.png" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">St. Mary's Church</p>
+                  <p>Explore Pune's rich heritage with a visit to St. Mary's Church- a timeless blend of history and
+                    serenity</p>
+                </div>
+                <div class="pic">
+                  <img src="st-marys-church-pune.jpg" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">Bund Garden</p>
+                  <p>Pune's calm waterside spot to relax and enjoy.</p>
+                </div>
+                <div class="pic">
+                  <img src="bund_garden.jpg" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="hotel">
+                  <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                  <span>Hilton</span>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item1">
+          <input id="day3" type="checkbox" name="menu" />
+          <label for="day3">
+            <div class="it_name">
+              <div class="icon">
+                <p>Day 3</p>
+                <img src="../icon.png" alt="">
+                <b>Nature Lovers Trip</b>
+              </div>
+              <div class="arrow">
+                <img src="../down-arrow.png" alt="">
+              </div>
+            </div>
+          </label>
+          <div class="day">
+
+
+            <div class="list">
+              <div class="place">
+                <div class="text">
+                  <p id="M">Rajiv Gandhi Zoological Park </p>
+                  <p> Experience the wonders of nature at Rajiv Gandhi Zoological Park - a captivating addition to our
+                    Pune exploration.</p>
+                </div>
+                <div class="pic">
+                  <img src="rajiv_gandhi.jpg" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">Katraj Snake Park</p>
+                  <p>Pune's unique wildlife destination for an intriguing and educational experience.</p>
+                </div>
+                <div class="pic">
+                  <img src="katraj_snake_park.jpg" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">Pashan Lake</p>
+                  <p> A peaceful nature spot in Pune, perfect for a relaxing visit.</p>
+                </div>
+                <div class="pic">
+                  <img src="pashan_lake.webp" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="hotel">
+                  <span><img src="../hotel.png" alt="hotel" id="hotel"></span>
+                  <span>Ramee Grand</span>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item1">
+          <input id="day4" type="checkbox" name="menu" />
+          <label for="day4">
+            <div class="it_name">
+              <div class="icon">
+                <p>Day 4</p>
+                <img src="../icon.png" alt="">
+                <b>Dam Discovery and Park Pleasures</b>
+              </div>
+              <div class="arrow">
+                <img src="../down-arrow.png" alt="">
+              </div>
+            </div>
+          </label>
+          <div class="day">
+
+
+            <div class="list">
+              <div class="place">
+                <div class="text">
+                  <p id="M">Mulshi Lake</p>
+                  <p>A Scenic Retreat in our Exclusive Pune Getaway</p>
+                </div>
+                <div class="pic">
+                  <img src="mulshi_lake.jpg" alt="pic">
+                </div>
+              </div>
+              <div class="place">
+                <div class="text">
+                  <p id="M">Okayama Friendship Garden</p>
+                  <p>Pune's Peaceful Oasis for a Relaxing Day Out in Nature</p>
+                </div>
+                <div class="pic">
+                  <img src="okayama_garden.JPG" alt="pic">
+                </div>
+              </div>
+              <!-- <div class="place">
+                      <div class="hotel">
+                        <span><img src="hotel.png" alt="hotel" id="hotel"></span>
+                        <span >Tropicana Resort & Spa Alibaugre</span>
+                      </div> 
+                      
+                      </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <footer>
+      <section class="footer">
+        <div class="box-container">
+          <div class="box">
+            <h3>Quick Links</h3>
+            <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
+            <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+            <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+            <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+            <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+          </div>
+
+          <div class="box">
+            <h3>Extra Links</h3>
+            <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+            <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
+            <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
+            <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+          </div>
+
+          <div class="box">
+            <h3>Contact info</h3>
+            <a href="#"><i class="fa fa-phone"></i>428416212</a>
+            <a href="#"><i class="fa fa-phone"></i>483481292</a>
+            <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+            <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+          </div>
+
+          <div class="box">
+            <h3>Follow Us</h3>
+            <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+            <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+            <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+            <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+          </div>
+        </div>
+
+        <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+      </section>
+
+    </footer>
+    <?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "parvati_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+  ?>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/packages/iternary/pune/parvati_it[1].php b/packages/iternary/pune/parvati_it[1].php
new file mode 100644
index 0000000..7199db9
--- /dev/null
+++ b/packages/iternary/pune/parvati_it[1].php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "parvati_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?> 
\ No newline at end of file
diff --git a/packages/iternary/pune/tina_it.html b/packages/iternary/pune/tina_it.html
index 432049c..644532e 100644
--- a/packages/iternary/pune/tina_it.html
+++ b/packages/iternary/pune/tina_it.html
@@ -3,26 +3,38 @@
 <head>
   <title> Tina travels | TravelHub |Iternary page</title>
   <link rel="stylesheet" href="../iternary.css">
+  <link rel="stylesheet" href="../../../headfoot.css">
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="/Homepage/index.css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 
 </head>
 <body>
   <body>
     <header>    
-    <section class="header" >
-      <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-      <nav class="navbar">
-          <a href="/index.html">Home</a>
-          <a href="/aboutUs.html">About</a>
-          <a href="../../city_package/packages.html">Packages</a>
-          <a href="/gallery.html">Gallery</a>
-          <a href="/contactUs.html"> Contact</a>
-      </nav>
+      <section class="header" >
+        <a href="homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+  
+        <nav class="navbar">
+            <a href="/Homepage/index.html">Home</a>
+            <a href="/aboutUS/aboutUs.html">About</a>
+            <a href="/packages/city_package/packages.html">Packages</a>
+            <a href="/gallery/gallery.html">Gallery</a>
+            <a href="/Other/contactUs.html">Contact</a>
+            <div class="dropdown">
+                <a href="#" id="profile-button">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                    <span>Hi User</span>
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+                <ul class="dropdown-content">
+                    <li><a href="/user/profile.html">Dashboard</a></li>
+                </ul>
+            </div>
+        </nav>
       <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
   </section>
         
@@ -40,9 +52,16 @@ <h2>Booking Summary</h2>
         <img src="background.jpg" alt=""></div> -->
       <div class="date">
       <div class="val">
-      <form >
+        <form action="javascript:void(0);" onsubmit="submitForm();" id="payment-form" method="post"> 
+          <label for="userName">Enter your name</label>
+        <input type="text" id="userName" name="userName">
       <label for="userDate">Select a Date:</label>
       <input type="date" id="userDate" name="userDate">
+      <label for="userRoomType">Room Type:</label>
+      <select id="userRoomType" name="userRoomType">
+        <option value="ac">AC Room</option>
+        <option value="non-ac">Non-AC Room</option>
+      </select>
       <label for="userRoom">Number of rooms:</label>
       <input type="number" id="userRoom" name="userRoom">
       <label for="travellerno">Number of travellers:</label>
@@ -240,27 +259,41 @@ <h2>Iternary</h2>
       </div>
     </div>
   
-    
+    <section class="hotel_images">
+      <h2>Wondering About Your Stay?</h2>
+      <p id="cap">Get a Glimpse with Our Hotel Image Gallery</p>
+      <div class="hotel_slide">
+       
+          <i id="left" class="fa-solid fa-angle-left"></i>
+          <div class="carousel">
+            <img src="../hotel/hilton.jpg" alt="img" draggable="false">
+            <img src="../hotel/ritz-carlton.jpg" alt="img" draggable="false">
+
+          </div>
+          <i id="right" class="fa-solid fa-angle-right"></i>
+        
+      </div>
+         
+    </section>
     <footer>
       <section class="footer">
         <div class="box-container">
             <div class="box">
                 <h3>Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
             </div>
     
             <div class="box">
-                <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+              <h3>Extra Links</h3>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
-    
             <div class="box">
                 <h3>Contact info</h3>
                 <a href="#"><i class="fa fa-phone"></i>428416212</a>
@@ -282,5 +315,14 @@ <h3>Follow Us</h3>
     </section>
     
   </footer>
+  <script src="../slider.js"></script>
+  <script>
+    function submitForm() {
+      // Handle form submission here
+      
+      // Redirect to paynow.html
+      window.location.href = "../payment.html";
+  }
+  </script>
 </body>
 </html>
diff --git a/packages/iternary/pune/tina_it.php b/packages/iternary/pune/tina_it.php
new file mode 100644
index 0000000..da9f582
--- /dev/null
+++ b/packages/iternary/pune/tina_it.php
@@ -0,0 +1,27 @@
+<?php
+    $servername = "localhost";
+    $username = "root";
+    $password = "";
+    $database = "tina_it";
+
+    // Check Connection
+    $conn = mysqli_connect($servername, $username, $password, $database);
+
+    if(!$conn)
+    {
+    die("Connection failed: " . mysqli_connect_error());
+    }
+
+    if($_SERVER["REQUEST_METHOD"] == "POST")
+    {
+    $user_date = $_POST["userDate"];
+    $user_room = $_POST["userRoom"];
+    $traveller_number = $_POST["travellerno"];
+
+    $sql = "INSERT INTO booking (date, rooms, traveller) VALUES ('$user_date', '$user_room', '$traveller_number')";
+    $result = mysqli_query($conn, $sql);
+
+    // Close the Connection
+    mysqli_close($conn);
+    }
+?>
\ No newline at end of file
diff --git a/packages/iternary/slider.js b/packages/iternary/slider.js
new file mode 100644
index 0000000..c34f100
--- /dev/null
+++ b/packages/iternary/slider.js
@@ -0,0 +1,73 @@
+const carousel = document.querySelector(".carousel"),
+firstImg = carousel.querySelectorAll("img")[0],
+arrowIcons = document.querySelectorAll(".hotel_slide i");
+
+let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
+
+const showHideIcons = () => {
+    // showing and hiding prev/next icon according to carousel scroll left value
+    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+    arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
+}
+
+arrowIcons.forEach(icon => {
+    icon.addEventListener("click", () => {
+        let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
+        // if clicked icon is left, reduce width value from the carousel scroll left else add to it
+        carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
+        setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+    });
+});
+
+const autoSlide = () => {
+    // if there is no image left to scroll then return from here
+    if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
+
+    positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
+    let firstImgWidth = firstImg.clientWidth + 14;
+    // getting difference value that needs to add or reduce from carousel left to take middle img center
+    let valDifference = firstImgWidth - positionDiff;
+
+    if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
+        return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+    }
+    // if user is scrolling to the left
+    carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+}
+
+const dragStart = (e) => {
+    // updatating global variables value on mouse down event
+    isDragStart = true;
+    prevPageX = e.pageX || e.touches[0].pageX;
+    prevScrollLeft = carousel.scrollLeft;
+}
+
+const dragging = (e) => {
+    // scrolling images/carousel to left according to mouse pointer
+    if(!isDragStart) return;
+    e.preventDefault();
+    isDragging = true;
+    carousel.classList.add("dragging");
+    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+    carousel.scrollLeft = prevScrollLeft - positionDiff;
+    showHideIcons();
+}
+
+const dragStop = () => {
+    isDragStart = false;
+    carousel.classList.remove("dragging");
+
+    if(!isDragging) return;
+    isDragging = false;
+    autoSlide();
+}
+
+carousel.addEventListener("mousedown", dragStart);
+carousel.addEventListener("touchstart", dragStart);
+
+document.addEventListener("mousemove", dragging);
+carousel.addEventListener("touchmove", dragging);
+
+document.addEventListener("mouseup", dragStop);
+carousel.addEventListener("touchend", dragStop);
\ No newline at end of file
diff --git a/packages/package_list/Aurangabad.html b/packages/package_list/Aurangabad.html
index 367c534..396ac2a 100644
--- a/packages/package_list/Aurangabad.html
+++ b/packages/package_list/Aurangabad.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Book now</title>
     <link rel="stylesheet" href="mumbai.css">
+    <link rel="stylesheet" href="../../headfoot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -13,27 +16,57 @@
 </head>
 <body>
     <header>
-        <section class="header">
-        <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-        <nav class="navbar">
-            <a href="/index.html">Home</a>
-            <a href="/aboutUs.html">About</a>
-            <a href="../city_package/packages.html">Packages</a>
-            <a href="/gallery.html">Gallery</a>
-            <a href="/contactUs.html"> Contact</a>
-        </nav>
-        <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
-    </section>
+        <section class="header" >
+            <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+    
+            <nav class="navbar">
+                <a href="/Homepage/index.html">Home</a>
+                <a href="/aboutUS/aboutUs.html">About</a>
+                <a href="/packages/city_package/packages.html">Packages</a>
+                <a href="/gallery/gallery.html">Gallery</a>
+                <a href="/Other/contactUs.html">Contact</a>
+                <div class="dropdown">
+                    <a href="#" id="profile-button">
+                        <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                        <span>Hi User</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </a>
+                    <ul class="dropdown-content">
+                        <li><a href="/user/profile.html">Dashboard</a></li>
+                    </ul>
+                </div>
+            </nav>
+            <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
+        </section>
    </header>
    <main>
-    <div class="city">
+    <div class="search-container">
+        <input type="text" id="searchInput" onkeyup="filterPackages()" placeholder="Search for packages...">
+        <i class="fas fa-search"></i> <!-- Search icon -->
+    </div>
+    <div class="filters">
+        <p class="filter_title">Filter:</p>
+        <button class="filter_btn active" onclick="filterSelection('all')">All</button>
+            <button class="filter_btn" onclick="filterSelection('adventure')">Adventure</button>
+            <button class="filter_btn" onclick="filterSelection('culture')">Culture</button>
+            <!-- Add more filter buttons as needed -->
+            <select id="sortBy" onchange="sortPackages()">
+                <option value="priceLowToHigh">Price: Low to High</option>
+                <option value="priceHighToLow">Price: High to Low</option>
+                <option value="durationShortToLong">Duration: Short to Long</option>
+                <option value="durationLongToShort">Duration: Long to Short</option>
+                <option value="ratingHighToLow">Rating: High to Low</option>
+
+            </select>
+    </div>
+    <div class="packages">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="Aurangabad.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Aurangabad tour package with Mahesh tours and travels</b>
-         <p>5 days 4 nights</p>
+         <p class="duration">5 days 4 nights</p>
          <p>Historical Monuments | Caves | Natural Beauty | Ajanta </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -43,16 +76,19 @@
              </div>
            <div class="book_btn"><a href="../iternary/aurangabad/Mahesh_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 3.5</span>
+        </div>
         </div>
         </div>
 
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="Aurangabad3.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Explore Aurangabad along with Ajanta and Ellora</b>
-         <p>4 days 3 nights</p>
+         <p class="duration">4 days 3 nights</p>
          <p>Soneri Mahal| Jayakwadi Dam | Ajanta | Ellora
          </p>
          <div class="thin-line"></div>
@@ -63,16 +99,19 @@
              </div>
            <div class="book_btn"><a href="../iternary/aurangabad/Shiv_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating">3</span>
+        </div>
         </div>
         </div>
 
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="Aurangabad2.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Cultural tour of Aurangabad</b>
-         <p>4 days 3 nights</p>
+         <p class="duration">4 days 3 nights</p>
          <p>City tour | Ajanta-Ellora | Bibika Makbara | Jyotirlinga </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -83,29 +122,105 @@
              </div>
            <div class="book_btn"><a href="../iternary/aurangabad/Zenga_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;<span >&#x00BD;</span><span class="pkg_rating"> 3.5</span>
         </div>
         </div>
+        </div>
+        <div class="city" data-category="adventure">
+            <div class="photo"><img src="guatala.jpg" alt="info1">
+                </div>
+        
+            <div class="info1">
+             <b>Gautala's charm, birdwatching at Salim Ali Lake!</b>
+             <p class="duration">5 days 4 nights</p>
+             <p>Paddle boating|Canoeing|Mountain biking|Photography expeditions</p>
+             <div class="thin-line"></div>
+             <div class="book">
+                 <div class="price">
+                 <b>&#8377 42,000</b>
+                 <p>per person</p>
+                 </div>
+               <div class="book_btn"><a href="../iternary/aurangabad/Mahesh_it.html">View Details</a></div>
+             </div>
+             <div class="rating">
+                <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating"> 4</span>
+            </div>
+            </div>
+            </div>
+    
+        <div class="city" data-category="adventure">
+            <div class="photo"><img src="salim.jpg" alt="info1">
+                </div>
+        
+            <div class="info1">
+             <b>Salim Ali Lake, Ellora Caves' wonder</b>
+             <p class="duration">4 days 3 nights</p>
+             <p>Nature photography|Picnicking|Camping|Historical tours</p>
+             <div class="thin-line"></div>
+             <div class="book">
+                 <div class="price">
+                 <b>&#8377 27,500</b>
+                 <p>per person</p>
+                 </div>
+               <div class="book_btn"><a href="../iternary/aurangabad/Shiv_it.html">View Details</a></div>
+             </div>
+             <div class="rating">
+                <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 4.5</span>
+            </div>
+            </div>
+            </div>
+    
+        <div class="city" data-category="adventure">
+            <div class="photo"><img src="ellora.jpg" alt="info1">
+                </div>
+        
+            <div class="info1">
+             <b>Explore Ellora, Discover Gautala!</b>
+             <p class="duration">4 days 3 nights</p>
+             <p>Rappelling|Mountain biking|Trekking|Cave exploration</p>
+             <div class="thin-line"></div>
+             <div class="book">
+                 <div class="price">
+                 <b>&#8377 25,000</b>
+                 <p>per person</p>
+                 
+                 </div>
+               <div class="book_btn"><a href="../iternary/aurangabad/Zenga_it.html">View Details</a></div>
+             </div>
+             <div class="rating">
+                <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating"> 3</span>
+            </div>
+            </div>
+            </div>
+        <div class="popup" id="loginPopup" style="display:none;">
+            <h2>Looking to explore more?</h2>
+            <p>Join the fun! Tap that login button and let's level up your experience together!</p>
+            <button onclick="closePopup()">Close</button>
+            <button onclick="redirectToLogin()">Login</button>
+          </div>
+        </div>
    </main>
 
    
     <footer>
-             <section class="footer">
-        <div class="box-container">
-            <div class="box">
-                <h3 style="margin-top: 0px;">Quick Links</h3>
-                <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
-            </div>
+        <section class="footer">
+            <div class="box-container">
+                <div class="box">
+                    <h3>Quick Links</h3>
+                    <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                    <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                    <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                    <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                    <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                </div>
 
             <div class="box">
                 <h3>Extra Links</h3>
-                <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
             </div>
 
             <div class="box">
@@ -128,5 +243,87 @@ <h3>Follow Us</h3>
         <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
     </section>
     </footer>
+    <script src="popup.js"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const filterBtns = document.querySelectorAll('.filter_btn');
+        const cities = document.querySelectorAll('.info');
+    
+        filterBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const category = btn.textContent.toLowerCase();
+                filterSelection(category);
+                setActiveButton(btn);
+            });
+        });
+    
+        function filterSelection(category) {
+            cities.forEach(city => {
+                if (category === 'all' || city.dataset.category === category) {
+                    city.style.display = 'flex';
+                } else {
+                    city.style.display = 'none';
+                }
+            });
+        }
+    
+        function setActiveButton(clickedBtn) {
+            filterBtns.forEach(btn => {
+                btn.classList.remove('active');
+            });
+            clickedBtn.classList.add('active');
+        }
+    
+        // Add event listener for the select element
+        const sortBySelect = document.getElementById('sortBy');
+        sortBySelect.addEventListener('change', () => {
+            sortPackages(sortBySelect.value);
+        });
+    
+        function sortPackages(sortBy) {
+            const packagesContainer = document.querySelector('.packages');
+            const packages = Array.from(packagesContainer.querySelectorAll('.city'));
+    
+            packages.forEach(package => {
+                const aValue = getDataAttribute(package, sortBy);
+                package.dataset.sortValue = aValue;
+            });
+    
+            packages.sort((a, b) => {
+                const aValue = parseFloat(a.dataset.sortValue);
+                const bValue = parseFloat(b.dataset.sortValue);
+    
+                if (sortBy === 'priceLowToHigh') {
+                    return aValue - bValue;
+                } else if (sortBy === 'priceHighToLow') {
+                    return bValue - aValue;
+                } else if (sortBy === 'durationShortToLong') {
+                    return aValue - bValue;
+                } else if (sortBy === 'durationLongToShort') {
+                    return aValue - bValue; // Inverted the logic here
+                } else if (sortBy === 'ratingHighToLow') {
+                    return bValue - aValue; // Sort by rating in descending order
+                }
+            });
+    
+            packages.forEach(city => packagesContainer.appendChild(city));
+        }
+    
+        function getDataAttribute(packageElement, sortBy) {
+            if (sortBy === 'priceLowToHigh' || sortBy === 'priceHighToLow') {
+                const priceText = packageElement.querySelector('.price b').textContent.replace(',', '').replace('₹', '');
+                return parseFloat(priceText);
+            } else if (sortBy === 'durationShortToLong' || sortBy === 'durationLongToShort') {
+                const durationText = packageElement.querySelector('.duration').textContent.trim();
+                const firstNumber = parseInt(durationText.match(/\d+/)[0]); // Extract the first number from the duration
+                return sortBy === 'durationShortToLong' ? firstNumber : -firstNumber; // Inverted the logic here
+            }else if (sortBy === 'ratingHighToLow') {
+                const ratingText = packageElement.querySelector('.pkg_rating').textContent.trim();
+                return parseFloat(ratingText);
+            }
+        }
+    });
+    
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/packages/package_list/Nagpur.html b/packages/package_list/Nagpur.html
index 4ee413e..4abf85b 100644
--- a/packages/package_list/Nagpur.html
+++ b/packages/package_list/Nagpur.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Book now</title>
     <link rel="stylesheet" href="mumbai.css">
+    <link rel="stylesheet" href="../../headfoot.css">
     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
@@ -15,26 +16,56 @@
 <body>
     <header>
         <section class="header" >
-            <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
+            <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
     
             <nav class="navbar">
-                <a href="index.html">Home</a>
-                <a href="aboutUs.html">About</a>
-                <a href="../city_package/packages.html">Packages</a>
-                <a href="gallery.html">Gallery</a>
-                <a href="contactUs.html"> Contact</a>
+                <a href="/Homepage/index.html">Home</a>
+                <a href="/aboutUS/aboutUs.html">About</a>
+                <a href="/packages/city_package/packages.html">Packages</a>
+                <a href="/gallery/gallery.html">Gallery</a>
+                <a href="/Other/contactUs.html">Contact</a>
+                <div class="dropdown">
+                    <a href="#" id="profile-button">
+                        <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                        <span>Hi User</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </a>
+                    <ul class="dropdown-content">
+                        <li><a href="/user/profile.html">Dashboard</a></li>
+                    </ul>
+                </div>
             </nav>
             <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
         </section>
    </header>
    <main>
-    <div class="city">
+    <div class="search-container">
+        <input type="text" id="searchInput" onkeyup="filterPackages()" placeholder="Search for packages...">
+        <i class="fas fa-search"></i> <!-- Search icon -->
+    </div>
+    <div class="filters">
+        <p class="filter_title">Filter:</p>
+        <button class="filter_btn active" onclick="filterSelection('all')">All</button>
+            <button class="filter_btn" onclick="filterSelection('adventure')">Adventure</button>
+            <button class="filter_btn" onclick="filterSelection('culture')">Culture</button>
+            <!-- Add more filter buttons as needed -->
+            <select id="sortBy" onchange="sortPackages()">
+                <option value="priceLowToHigh">Price: Low to High</option>
+                <option value="priceHighToLow">Price: High to Low</option>
+                <option value="durationShortToLong">Duration: Short to Long</option>
+                <option value="durationLongToShort">Duration: Long to Short</option>
+                <option value="ratingHighToLow">Rating: High to Low</option>
+
+            </select>
+    </div>
+    <div class="packages">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="nagpur2.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Budget-friendly Nagpur Package with Arya Travels</b>
-         <p>5 days 4 nights</p>
+         <p class="duration">5 days 4 nights</p>
          <p>Deekshabhoomi | Futala Lake | Sitabuldi Fort | Swaminarayan Temple </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -44,19 +75,20 @@
              </div>
            <div class="book_btn"><a href="../iternary/nagpur/arya_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 4.5</span>
+        </div>
         </div>
         </div>
    
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="nagpur3.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Explore Nagpur along with Pachmarhi with Safar Tours and Travels</b>
-         <p>4 days 3 nights</p>
-         <p>
-            Ramtek Temple | Sevagram | Pachmarhi  | Jungle Safari
-         </p>
+         <p class="duration">4 days 3 nights</p>
+         <p>Ramtek Temple | Sevagram | Pachmarhi  | Jungle Safari</p>
          <div class="thin-line"></div>
          <div class="book">
              <div class="price">
@@ -65,17 +97,20 @@
              </div>
            <div class="book_btn"><a href="../iternary/nagpur/safar_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating"> 3</span>
+        </div>
         </div>
         </div>
    
   
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="nagpur1.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Ajanta ,Vidarbha and Nagpur Discovery Tour</b>
-         <p>6 days 5 nights</p>
+         <p class="duration">6 days 5 nights</p>
          <p>Ajanta | Sitabuldi fort | Vidarbha | Wildlife </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -86,8 +121,85 @@
              </div>
            <div class="book_btn"><a href="../iternary/nagpur/pravasi_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 4.5</span>
+        </div>
+        </div>
+        </div>
+    <div class="city" data-category="adventure">
+        <div class="photo"><img src="ramtek.webp" alt="info1">
+            </div>
+    
+        <div class="info1">
+         <b>Discover adventure at Ramtek hills and Khekranala waters.</b>
+         <p class="duration">5 days 4 nights</p>
+         <p>Camping|Bird watching|Jet skiing|Fishing</p>
+         <div class="thin-line"></div>
+         <div class="book">
+             <div class="price">
+             <b>&#8377 23,900</b>
+             <p>per person</p>
+             </div>
+           <div class="book_btn"><a href="../iternary/nagpur/arya_it.html">View Details</a></div>
+         </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating">4</span>
+        </div>
+        </div>
         </div>
+   
+    <div class="city" data-category="adventure">
+        <div class="photo"><img src="khekranala.jpg" alt="info1">
+            </div>
+    
+        <div class="info1">
+         <b>Explore excitement at Khekranala's waters and Umred's wilds</b>
+         <p class="duration">4 days 3 nights</p>
+         <p>Photography expeditions|Night safaris|Swimming|Water zorbing</p>
+         <div class="thin-line"></div>
+         <div class="book">
+             <div class="price">
+             <b>&#8377 27,500</b>
+             <p>per person</p>
+             </div>
+           <div class="book_btn"><a href="../iternary/nagpur/safar_it.html">View Details</a></div>
+         </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating"> 4</span>
         </div>
+        </div>
+        </div>
+   
+  
+    <div class="city" data-category="adventure">
+        <div class="photo"><img src="umred.jpg" alt="info1">
+            </div>
+    
+        <div class="info1">
+         <b>Embrace adventure amidst Umred's sanctuary and Ramtek's hills</b>
+         <p class="duration">6 days 5 nights</p>
+         <p>Bird watching|Nature walks|Photography expeditions|Mountain biking</p>
+         <div class="thin-line"></div>
+         <div class="book">
+             <div class="price">
+             <b>&#8377 45,300</b>
+             <p>per person</p>
+             
+             </div>
+           <div class="book_btn"><a href="../iternary/nagpur/pravasi_it.html">View Details</a></div>
+         </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 3.5</span>
+        </div>
+        </div>
+        </div>
+        <div class="popup" id="loginPopup" style="display:none;">
+            <h2>Looking to explore more?</h2>
+            <p>Join the fun! Tap that login button and let's level up your experience together!</p>
+            <button onclick="closePopup()">Close</button>
+            <button onclick="redirectToLogin()">Login</button>
+          </div>
+          </div>
    </main>
 
    
@@ -96,19 +208,20 @@
             <div class="box-container">
                 <div class="box">
                     <h3>Quick Links</h3>
-                    <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                    <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                    <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                    <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                    <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                    <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                    <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                    <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                    <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                    <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
                 </div>
         
                 <div class="box">
                     <h3>Extra Links</h3>
                     <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                    <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                    <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                    <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                    <a href="../../faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                    <a href="../../privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                    <a href="../../t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+
                 </div>
         
                 <div class="box">
@@ -134,5 +247,87 @@ <h3>Follow Us</h3>
 
        
     </footer>
+    <script src="popup.js"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const filterBtns = document.querySelectorAll('.filter_btn');
+            const cities = document.querySelectorAll('.city');
+        
+            filterBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const category = btn.textContent.toLowerCase();
+                    filterSelection(category);
+                    setActiveButton(btn);
+                });
+            });
+        
+            function filterSelection(category) {
+                cities.forEach(city => {
+                    if (category === 'all' || city.dataset.category === category) {
+                        city.style.display = 'flex';
+                    } else {
+                        city.style.display = 'none';
+                    }
+                });
+            }
+        
+            function setActiveButton(clickedBtn) {
+                filterBtns.forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                clickedBtn.classList.add('active');
+            }
+        
+            // Add event listener for the select element
+            const sortBySelect = document.getElementById('sortBy');
+            sortBySelect.addEventListener('change', () => {
+                sortPackages(sortBySelect.value);
+            });
+        
+            function sortPackages(sortBy) {
+                const packagesContainer = document.querySelector('.packages');
+                const packages = Array.from(packagesContainer.querySelectorAll('.city'));
+        
+                packages.forEach(package => {
+                    const aValue = getDataAttribute(package, sortBy);
+                    package.dataset.sortValue = aValue;
+                });
+        
+                packages.sort((a, b) => {
+                    const aValue = parseFloat(a.dataset.sortValue);
+                    const bValue = parseFloat(b.dataset.sortValue);
+        
+                    if (sortBy === 'priceLowToHigh') {
+                        return aValue - bValue;
+                    } else if (sortBy === 'priceHighToLow') {
+                        return bValue - aValue;
+                    } else if (sortBy === 'durationShortToLong') {
+                        return aValue - bValue;
+                    } else if (sortBy === 'durationLongToShort') {
+                        return aValue - bValue; // Inverted the logic here
+                    } else if (sortBy === 'ratingHighToLow') {
+                        return bValue - aValue; // Sort by rating in descending order
+                    }
+                });
+        
+                packages.forEach(city => packagesContainer.appendChild(city));
+            }
+        
+            function getDataAttribute(packageElement, sortBy) {
+                if (sortBy === 'priceLowToHigh' || sortBy === 'priceHighToLow') {
+                    const priceText = packageElement.querySelector('.price b').textContent.replace(',', '').replace('₹', '');
+                    return parseFloat(priceText);
+                } else if (sortBy === 'durationShortToLong' || sortBy === 'durationLongToShort') {
+                    const durationText = packageElement.querySelector('.duration').textContent.trim();
+                    const firstNumber = parseInt(durationText.match(/\d+/)[0]); // Extract the first number from the duration
+                    return sortBy === 'durationShortToLong' ? firstNumber : -firstNumber; // Inverted the logic here
+                }else if (sortBy === 'ratingHighToLow') {
+                    const ratingText = packageElement.querySelector('.pkg_rating').textContent.trim();
+                    return parseFloat(ratingText);
+                }
+            }
+        });
+        
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/packages/package_list/Pune.html b/packages/package_list/Pune.html
index 35c2c84..b88d154 100644
--- a/packages/package_list/Pune.html
+++ b/packages/package_list/Pune.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Book now</title>
     <link rel="stylesheet" href="mumbai.css">
+    <link rel="stylesheet" href="../../headfoot.css">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -13,27 +15,58 @@
 </head>
 <body>
     <header>
-        <section class="header">
-            <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
+        <section class="header" >
+            <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
     
             <nav class="navbar">
-                <a href="/index.html">Home</a>
-                <a href="/aboutUs.html">About</a>
-                <a href="../city_package/packages.html">Packages</a>
-                <a href="/gallery.html">Gallery</a>
-                <a href="/contactUs.html"> Contact</a>
+                <a href="/Homepage/index.html">Home</a>
+                <a href="/aboutUS/aboutUs.html">About</a>
+                <a href="/packages/city_package/packages.html">Packages</a>
+                <a href="/gallery/gallery.html">Gallery</a>
+                <a href="/Other/contactUs.html">Contact</a>
+                <div class="dropdown">
+                    <a href="#" id="profile-button">
+                        <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                        <span>Hi User</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </a>
+                    <ul class="dropdown-content">
+                        <li><a href="/user/profile.html">Dashboard</a></li>
+                    </ul>
+                </div>
             </nav>
+            
             <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
         </section>
    </header>
    <main>
-    <div class="city">
+    <div class="search-container">
+        <input type="text" id="searchInput" onkeyup="filterPackages()" placeholder="Search for packages...">
+        <i class="fas fa-search"></i> <!-- Search icon -->
+    </div>
+    <div class="filters">
+        <p class="filter_title">Filter:</p>
+        <button class="filter_btn active" onclick="filterSelection('all')">All</button>
+            <button class="filter_btn" onclick="filterSelection('adventure')">Adventure</button>
+            <button class="filter_btn" onclick="filterSelection('culture')">Culture</button>
+            <!-- Add more filter buttons as needed -->
+            <select id="sortBy" onchange="sortPackages()">
+                <option value="priceLowToHigh">Price: Low to High</option>
+                <option value="priceHighToLow">Price: High to Low</option>
+                <option value="durationShortToLong">Duration: Short to Long</option>
+                <option value="durationLongToShort">Duration: Long to Short</option>
+                <option value="ratingHighToLow">Rating: High to Low</option>
+
+            </select>
+    </div>
+    <div class="packages">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="pune.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Pune tour package with Parvati tours and travel</b>
-         <p>4 days 3 nights</p>
+         <p class="duration">4 days 3 nights</p>
          <p>Historical Forts | Sarasbaug | Natural Beauty | Ghat </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -41,18 +74,22 @@
              <b>&#8377 26,000</b>
              <p>per person</p>
              </div>
-           <div class="book_btn"><a href="../iternary/pune/parvati_it.html">View Details</a></div>
+           <div class="book_btn"><a  href="../iternary/pune/parvati_it.html">View Details</a></div>
+
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 3.5</span>
+        </div>
         </div>
         </div>
   
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="pune2.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Pune tour package with Tina travel</b>
-         <p>4 days 3 nights</p>
+         <p class="duration">4 days 3 nights</p>
          <p>Explore all the wonderful places with Safar!!
             | Forts | Museum | Traditional Maharashtrian Food | Temples
          </p>
@@ -62,18 +99,21 @@
              <b>&#8377 27,900</b>
              <p>per person</p>
              </div>
-           <div class="book_btn"><a href="../iternary/pune/tina_it.html">View Details</a></div>
+           <div class="book_btn"  ><a  href="../iternary/pune/tina_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 4.5</span>
+        </div>
         </div>
         </div>
 
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="pune3.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Pune tour package with Hilton tours and travels</b>
-         <p>5 days 4 nights</p>
+         <p class="duration">5 days 4 nights</p>
          <p>Pune Darshan | Ghat | Temples | Shopping Markets </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -82,31 +122,112 @@
              <p>per person</p>
              
              </div>
-           <div class="book_btn"><a href="../iternary/pune/hilton_it.html">View Details</a></div>
+
+           <div class="book_btn" ><a  href="../iternary/pune/hilton_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating"> 4</span>
         </div>
         </div>
-   </main>
+        </div>
+    
+    <div class="city" data-category="adventure">
+        <div class="photo"><img src="kamshet.jpg" alt="info1">
+            </div>
+    
+        <div class="info1">
+         <b>Dive into Kolad's waves, soar in Kamshet's skies!</b>
+         <p class="duration">4 days 3 nights</p>
+         <p>Rock climbing|Caving|Zip-lining|River Crossing</p>
+         <div class="thin-line"></div>
+         <div class="book">
+             <div class="price">
+             <b>&#8377 26,000</b>
+             <p>per person</p>
+             </div>
+           <div class="book_btn"><a  href="../iternary/pune/parvati_it.html">View Details</a></div>
 
+         </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 4.5</span>
+        </div>
+        </div>
+        </div>
+  
+    <div class="city" data-category="adventure">
+        <div class="photo"><img src="khandala.jpg" alt="info1">
+            </div>
+    
+        <div class="info1">
+         <b>Experience paragliding in Kamshet and scenic charm in Khandala</b>
+         <p class="duration">4 days 3 nights</p>
+         <p>White Water Rafting|Kayaking|Valley Crossing|River Crossing</p>
+         <div class="thin-line"></div>
+         <div class="book">
+             <div class="price">
+             <b>&#8377 27,900</b>
+             <p>per person</p>
+             </div>
+           <div class="book_btn"  ><a  href="../iternary/pune/tina_it.html">View Details</a></div>
+         </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 3.5</span>
+        </div>
+        </div>
+        </div>
+
+    <div class="city" data-category="adventure">
+        <div class="photo"><img src="kolad.jpg" alt="info1">
+            </div>
+    
+        <div class="info1">
+         <b>Khandala's charm, Kolad's thrill - where nature meets adventure</b>
+         <p class="duration">5 days 4 nights</p>
+         <p>Valley Crossing|Caving|Trekking|Rock Climbing</p>
+         <div class="thin-line"></div>
+         <div class="book">
+             <div class="price">
+             <b>&#8377 46,900</b>
+             <p>per person</p>
+             
+             </div>
+
+           <div class="book_btn" ><a  href="../iternary/pune/hilton_it.html">View Details</a></div>
+         </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating">4</span>
+        </div>
+        </div>
+    </div>
+            <div class="popup" id="loginPopup" style="display:none;">
+            <h2>Looking to explore more?</h2>
+            <p>Join the fun! Tap that login button and let's level up your experience together!</p>
+            <button onclick="closePopup()">Close</button>
+            <button onclick="redirectToLogin()">Login</button>
+          </div>
+        </div>
+    </main>
+ 
    
     <footer>
         <section class="footer">
             <div class="box-container">
                 <div class="box">
-                    <h3 style="margin-top: 0px;">Quick Links</h3>
-                    <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                    <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                    <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                    <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                    <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                    <h3>Quick Links</h3>
+                    <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                    <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                    <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                    <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                    <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
                 </div>
     
                 <div class="box">
                     <h3>Extra Links</h3>
                     <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                    <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                    <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                    <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                    <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                    <a href="../../privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                    <a href="../../t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+
                 </div>
     
                 <div class="box">
@@ -129,5 +250,87 @@ <h3>Follow Us</h3>
             <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
         </section>
     </footer>
+    <script src="popup.js"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const filterBtns = document.querySelectorAll('.filter_btn');
+            const cities = document.querySelectorAll('.city');
+        
+            filterBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const category = btn.textContent.toLowerCase();
+                    filterSelection(category);
+                    setActiveButton(btn);
+                });
+            });
+        
+            function filterSelection(category) {
+                cities.forEach(city => {
+                    if (category === 'all' || city.dataset.category === category) {
+                        city.style.display = 'flex';
+                    } else {
+                        city.style.display = 'none';
+                    }
+                });
+            }
+        
+            function setActiveButton(clickedBtn) {
+                filterBtns.forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                clickedBtn.classList.add('active');
+            }
+        
+            // Add event listener for the select element
+            const sortBySelect = document.getElementById('sortBy');
+            sortBySelect.addEventListener('change', () => {
+                sortPackages(sortBySelect.value);
+            });
+        
+            function sortPackages(sortBy) {
+                const packagesContainer = document.querySelector('.packages');
+                const packages = Array.from(packagesContainer.querySelectorAll('.city'));
+        
+                packages.forEach(package => {
+                    const aValue = getDataAttribute(package, sortBy);
+                    package.dataset.sortValue = aValue;
+                });
+        
+                packages.sort((a, b) => {
+                    const aValue = parseFloat(a.dataset.sortValue);
+                    const bValue = parseFloat(b.dataset.sortValue);
+        
+                    if (sortBy === 'priceLowToHigh') {
+                        return aValue - bValue;
+                    } else if (sortBy === 'priceHighToLow') {
+                        return bValue - aValue;
+                    } else if (sortBy === 'durationShortToLong') {
+                        return aValue - bValue;
+                    } else if (sortBy === 'durationLongToShort') {
+                        return aValue - bValue; // Inverted the logic here
+                    } else if (sortBy === 'ratingHighToLow') {
+                        return bValue - aValue; // Sort by rating in descending order
+                    }
+                });
+        
+                packages.forEach(city => packagesContainer.appendChild(city));
+            }
+        
+            function getDataAttribute(packageElement, sortBy) {
+                if (sortBy === 'priceLowToHigh' || sortBy === 'priceHighToLow') {
+                    const priceText = packageElement.querySelector('.price b').textContent.replace(',', '').replace('₹', '');
+                    return parseFloat(priceText);
+                } else if (sortBy === 'durationShortToLong' || sortBy === 'durationLongToShort') {
+                    const durationText = packageElement.querySelector('.duration').textContent.trim();
+                    const firstNumber = parseInt(durationText.match(/\d+/)[0]); // Extract the first number from the duration
+                    return sortBy === 'durationShortToLong' ? firstNumber : -firstNumber; // Inverted the logic here
+                }else if (sortBy === 'ratingHighToLow') {
+                    const ratingText = packageElement.querySelector('.pkg_rating').textContent.trim();
+                    return parseFloat(ratingText);
+                }
+            }
+        });
+        
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/packages/package_list/ellora.jpg b/packages/package_list/ellora.jpg
new file mode 100644
index 0000000..85440a8
Binary files /dev/null and b/packages/package_list/ellora.jpg differ
diff --git a/packages/package_list/guatala.jpg b/packages/package_list/guatala.jpg
new file mode 100644
index 0000000..e5e5fcb
Binary files /dev/null and b/packages/package_list/guatala.jpg differ
diff --git a/packages/package_list/juhu.webp b/packages/package_list/juhu.webp
new file mode 100644
index 0000000..e0fd065
Binary files /dev/null and b/packages/package_list/juhu.webp differ
diff --git a/packages/package_list/kamshet.jpg b/packages/package_list/kamshet.jpg
new file mode 100644
index 0000000..55aa725
Binary files /dev/null and b/packages/package_list/kamshet.jpg differ
diff --git a/packages/package_list/khandala.jpg b/packages/package_list/khandala.jpg
new file mode 100644
index 0000000..59888d5
Binary files /dev/null and b/packages/package_list/khandala.jpg differ
diff --git a/packages/package_list/khekranala.jpg b/packages/package_list/khekranala.jpg
new file mode 100644
index 0000000..21be368
Binary files /dev/null and b/packages/package_list/khekranala.jpg differ
diff --git a/packages/package_list/kolad.jpg b/packages/package_list/kolad.jpg
new file mode 100644
index 0000000..89c6d2c
Binary files /dev/null and b/packages/package_list/kolad.jpg differ
diff --git a/packages/package_list/lonavala_1.avif b/packages/package_list/lonavala_1.avif
new file mode 100644
index 0000000..dd8e139
Binary files /dev/null and b/packages/package_list/lonavala_1.avif differ
diff --git a/packages/package_list/mahabaleshwar.jpg b/packages/package_list/mahabaleshwar.jpg
new file mode 100644
index 0000000..5e58103
Binary files /dev/null and b/packages/package_list/mahabaleshwar.jpg differ
diff --git a/packages/package_list/mumbai.css b/packages/package_list/mumbai.css
index 243aac1..4284940 100644
--- a/packages/package_list/mumbai.css
+++ b/packages/package_list/mumbai.css
@@ -162,26 +162,24 @@ body{
     margin-top: 20px;
     /* margin-left: 30px; */
 }
-
-.photo img{
+.photo {
     height: 300px;
     width: 390px;
-   object-fit: cover;
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-    transition: 0.5s all ease-in-out;
-}
-.photo{
-    
     overflow: hidden;
-  height: 300px;
-  width: 390px;
+}
 
+.photo img {
+    width: 100%; /* Ensure the image fills the container horizontally */
+    height: 300px; /* Let the browser calculate the height to maintain aspect ratio */
+    transition: transform 0.5s ease-in-out;
+    object-fit: cover;
 }
-.photo img:hover{
+
+.photo:hover img {
     transform: scale(1.1);
-    transition: 1s;
 }
+
+
 .city{
     margin:18px 30px 20px 190px;
     display: flex;
@@ -226,3 +224,125 @@ body{
     width: 102%; /* Adjust width based on your layout */
 }
 
+/* Center the popup */
+.popup {
+    display: none;
+    color: white; /* Hide the popup by default */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(8, 4, 4, 0.779);
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  }
+.popup h2{
+    font-size: 30px;
+    margin-bottom: 2rem;
+}
+.popup p{
+    font-size:17px;
+    margin-bottom: 1.5rem;
+}
+.popup button{
+    cursor: pointer;
+    font-size: 17px;
+font-weight: 600;
+    border: none;
+    background-color: white;
+    padding: 10px 20px;
+    border-radius: 10px;
+    margin-right: 1em;
+}
+.popup button:hover{
+    background-color: rgb(174, 173, 173);
+}
+/* Optional: Add styling for the "Show All" checkbox */
+.filters {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.filter_title {
+    margin-right: 10px;
+}
+
+.filter_btn {
+    padding: 5px 10px;
+    margin-right: 10px;
+    background-color: #ccc;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.filter_btn.active {
+    background-color: #007bff;
+    color: #fff;
+}
+
+#sortBy {
+    margin-left: 20px;
+}
+.search-container{
+    display: flex;
+    justify-content: center;
+    padding: 2rem;
+}
+#searchInput{
+    height: 3rem;
+    width: 40%;
+    border-radius: 1.2rem;
+    border: none;
+    padding: 1.3rem;
+    font-size: 14px;
+}
+.search-container i{
+    margin-top: 1rem;
+margin-left: 1.2rem;
+    padding: 0;
+    font-size: 1.2rem;
+}
+.rating {
+    margin-top: 5px;
+    font-size: 16px;
+    color: orange;
+}
+
+.rating span {
+    margin-right: 2px; /* Adjust spacing between stars */
+}
+
+
+#LOGIN{
+   
+    font-weight: 500;
+    color: white;
+    background-color: black;
+    text-decoration: none;
+padding: 10px 20px;
+border-radius: 2rem;
+}
+#LOGIN :hover{
+    background-color:rgba(0, 0, 0, 0.304);
+}
+.user-profile {
+    position: relative;
+    display: inline-block;
+    margin-left: 2rem;
+}
+#userProfileLink{
+    border-radius: 2rem;
+    padding: 10px;
+    background-color: #eaeaea;
+}
+#userProfileLink:hover{
+   
+    background-color: #e3e3e367;
+}
+.user-greeting {
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/packages/package_list/mumbai.html b/packages/package_list/mumbai.html
index 05bf227..42265ab 100644
--- a/packages/package_list/mumbai.html
+++ b/packages/package_list/mumbai.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Book now</title>
     <link rel="stylesheet" href="mumbai.css">
+    <link rel="stylesheet" href="../../headfoot.css">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -14,26 +16,57 @@
 <body>
     <header>
         <section class="header" >
-        <a href="homepg.html" class="logo"><img src="/logoabout.png"></a>
-
-        <nav class="navbar">
-            <a href="/index.html">Home</a>
-            <a href="/aboutUs.html">About</a>
-            <a href="../city_package/packages.html">Packages</a>
-            <a href="/gallery.html">Gallery</a>
-            <a href="/contactUs.html"> Contact</a>
-        </nav>
-        <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
-    </section>
+            <a href="/homepg.html" class="logo"><img src="/Homepage/logoabout.png"></a>
+    
+            <nav class="navbar">
+                <a href="/Homepage/index.html">Home</a>
+                <a href="/aboutUS/aboutUs.html">About</a>
+                <a href="/packages/city_package/packages.html">Packages</a>
+                <a href="/gallery/gallery.html">Gallery</a>
+                <a href="/Other/contactUs.html">Contact</a>
+                <div class="dropdown">
+                    <a href="#" id="profile-button">
+                        <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                        <span>Hi User</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </a>
+                    <ul class="dropdown-content">
+                        <li><a href="/user/profile.html">Dashboard</a></li>
+                    </ul>
+                </div>
+            </nav>
+            
+            <!-- <div id="menu-btn" style="padding: 0; align-items: flex-end;"><i class="fa fa-bars" style="color: white;"></i></div> -->
+        </section>
    </header>
    <main>
-    <div class="city">
+    <div class="search-container">
+        <input type="text" id="searchInput" onkeyup="filterPackages()" placeholder="Search for packages...">
+        <i class="fas fa-search"></i>
+    </div>
+    <div class="filters">
+        <p class="filter_title">Filter:</p>
+        <button class="filter_btn active" onclick="filterSelection('all')">All</button>
+            <button class="filter_btn" onclick="filterSelection('adventure')">Adventure</button>
+            <button class="filter_btn" onclick="filterSelection('culture')">Culture</button>
+            <!-- Add more filter buttons as needed -->
+            <select id="sortBy" onchange="sortPackages()">
+                <option value="priceLowToHigh">Price: Low to High</option>
+                <option value="priceHighToLow">Price: High to Low</option>
+                <option value="durationShortToLong">Duration: Short to Long</option>
+                <option value="durationLongToShort">Duration: Long to Short</option>
+                <option value="ratingHighToLow">Rating: High to Low</option>
+
+            </select>
+    </div>
+    <div class="packages">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="Mumbai.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Mumbai tour package with Geeta tours and travel</b>
-         <p>4 days 3 nights</p>
+         <p class="duration">4 days 3 nights</p>
          <p> Mumbai | Mahableshwar | Lonavla | Alibaug  </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -43,16 +76,19 @@
              </div>
            <div class="book_btn"><a href="../iternary/mumbai/geeta_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 3.5</span>
+        </div>
         </div>
         </div>
    
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="Mumbai1.jpg" alt="info1">
             </div>
     
         <div class="info1">
          <b>Premium Mumbai Tour Package with Preeti Travels</b>
-         <p>4 days 3 nights</p>
+         <p class="duration">6 days 7 nights</p>
          <p>Mumbai Darshan | Beaches | Temples | Museum </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -62,16 +98,19 @@
              </div>
            <div class="book_btn"><a href="../iternary/mumbai/Preeti_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 4.5</span>
+        </div>
         </div>
         </div>
    
-    <div class="city">
+    <div class="city" data-category="culture">
         <div class="photo"><img src="Mumbai2.jpg" alt="info1">
             </div>
     
-        <div class="info1">
+        <div class="info1" data-category="culture">
          <b>Take a Deep dive into our Sapno ka Shahar Mumbai</b>
-         <p>5 days 4 nights</p>
+         <p class="duration">5 days 4 nights</p>
          <p>Mumbai Darshan | Juhu | Malshej Ghat | Museum </p>
          <div class="thin-line"></div>
          <div class="book">
@@ -82,29 +121,105 @@
              </div>
            <div class="book_btn"><a href="../iternary/mumbai/darshan_it.html">View Details</a></div>
          </div>
+         <div class="rating">
+            <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating"> 4</span>
         </div>
         </div>
-   </main>
-
+        </div>
+        <div class="city" data-category="adventure">
+            <div class="photo"><img src="lonavala_1.avif" alt="info1">
+                </div>
+        
+            <div class="info1">
+             <b>Discover Mahabaleshwar & Lonavla: Adventure Awaits!</b>
+             <p class="duration">4 days 3 nights</p>
+             <p>Paragliding|Trekking|Rock Climbing|Water Rappelling</p>
+             <div class="thin-line"></div>
+             <div class="book">
+                 <div class="price">
+                 <b>&#8377 56,900</b>
+                 <p>per person</p>
+                 </div>
+               <div class="book_btn"><a href="../iternary/mumbai/geeta_it.html">View Details</a></div>
+             </div>
+             <div class="rating">
+                <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 4.5</span>
+            </div>
+            </div>
+            </div>
+       
+        <div class="city" data-category="adventure">
+            <div class="photo"><img src="juhu.webp" alt="info1">
+                </div>
+        
+            <div class="info1">
+             <b>Lonavla & Juhu beach: Natural Beauty Awaits!</b>
+             <p class="duration">6 days 7 nights</p>
+             <p>Parasailing|Jet Skiing|Caving|Zip-lining</p>
+             <div class="thin-line"></div>
+             <div class="book">
+                 <div class="price">
+                 <b>&#8377 57,500</b>
+                 <p>per person</p>
+                 </div>
+               <div class="book_btn"><a href="../iternary/mumbai/Preeti_it.html">View Details</a></div>
+             </div>
+             <div class="rating">
+                <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span >&#x00BD;</span><span class="pkg_rating"> 3.5</span>
+            </div>
+            </div>
+            </div>
+       
+        <div class="city" data-category="adventure">
+            <div class="photo"><img src="mahabaleshwar.jpg" alt="info1">
+                </div>
+        
+            <div class="info1">
+             <b>Mahabaleshwar & Juhu beach: Nature's Treasures Await!</b>
+             <p class="duration">5 days 4 nights</p>
+             <p>Hot Air Ballooning|Bungee Jumping|Rappelling|Kayaking</p>
+             <div class="thin-line"></div>
+             <div class="book">
+                 <div class="price">
+                 <b>&#8377 42,000</b>
+                 <p>per person</p>
+                 
+                 </div>
+               <div class="book_btn"><a href="../iternary/mumbai/darshan_it.html">View Details</a></div>
+             </div>
+             <div class="rating">
+                <span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span>&#x2605;</span><span class="pkg_rating"> 4</span>
+            </div>
+            </div>
+            </div>
+        </div>
+        <div class="popup" id="loginPopup" style="display:none;">
+            <h2>Looking to explore more?</h2>
+            <p>Join the fun! Tap that login button and let's level up your experience together!</p>
+            <button onclick="closePopup()">Close</button>
+            <button onclick="redirectToLogin()">Login</button>
+          </div>
+   </div>
+</main>
    
     <footer>
         <section class="footer">
             <div class="box-container">
                 <div class="box">
                     <h3>Quick Links</h3>
-                    <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
-                    <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
-                    <a href="packages.html"><i class="fa fa-angle-right"></i>Packages</a>
-                    <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
-                    <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                    <a href="/Homepage/index.html"><i class="fa fa-angle-right"></i>Home</a>
+                    <a href="/aboutUS/aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                    <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                    <a href="/gallery/gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                    <a href="/Other/contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
                 </div>
         
                 <div class="box">
                     <h3>Extra Links</h3>
-                    <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
-                    <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
-                    <a href="#"><i class="fa fa-angle-right"></i>privacy policy</a>
-                    <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                        <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                        <a href="/Other/faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                        <a href="/privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                        <a href="/Other/t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
                 </div>
         
                 <div class="box">
@@ -128,5 +243,151 @@ <h3>Follow Us</h3>
         </section>
         
     </footer>
+    <script src="popup.js"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const filterBtns = document.querySelectorAll('.filter_btn');
+            const cities = document.querySelectorAll('.city');
+    
+            filterBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const category = btn.textContent.toLowerCase();
+                    filterSelection(category);
+                    setActiveButton(btn);
+                });
+            });
+    
+            function filterSelection(category) {
+                cities.forEach(city => {
+                    if (category === 'all' || city.dataset.category === category) {
+                        city.style.display = 'flex';
+                    } else {
+                        city.style.display = 'none';
+                    }
+                });
+            }
+    
+            function setActiveButton(clickedBtn) {
+                filterBtns.forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                clickedBtn.classList.add('active');
+            }
+    
+            function sortPackages() {
+                const sortBy = document.getElementById('sortBy').value;
+                const packagesContainer = document.querySelector('.packages');
+                const packages = Array.from(packagesContainer.querySelectorAll('.city'));
+        
+                packages.sort((a, b) => {
+                    const aData = getDataAttribute(a, sortBy);
+                    const bData = getDataAttribute(b, sortBy);
+        
+                    if (sortBy.includes('price b')) {
+                        return parseFloat(aData) - parseFloat(bData);
+                    } else if (sortBy.includes('city p')) {
+                        return parseInt(aData) - parseInt(bData);
+                    } else {
+                        return aData.localeCompare(bData);
+                    }
+                });
+        
+                packages.forEach(package => {
+                    packagesContainer.appendChild(package);
+                });
+            }
+        
+            function getDataAttribute(package, sortBy) {
+                if (sortBy === 'default') {
+                    return package.getAttribute('data-category');
+                } else if (sortBy === 'category') {
+                    return package.getAttribute('data-category');
+                } else {
+                    return package.querySelector(`.${sortBy}`).textContent.trim();
+                }
+            }});
+    </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const filterBtns = document.querySelectorAll('.filter_btn');
+            const cities = document.querySelectorAll('.city');
+        
+            filterBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const category = btn.textContent.toLowerCase();
+                    filterSelection(category);
+                    setActiveButton(btn);
+                });
+            });
+        
+            function filterSelection(category) {
+                cities.forEach(city => {
+                    if (category === 'all' || city.dataset.category === category) {
+                        city.style.display = 'flex';
+                    } else {
+                        city.style.display = 'none';
+                    }
+                });
+            }
+        
+            function setActiveButton(clickedBtn) {
+                filterBtns.forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                clickedBtn.classList.add('active');
+            }
+        
+            // Add event listener for the select element
+            const sortBySelect = document.getElementById('sortBy');
+            sortBySelect.addEventListener('change', () => {
+                sortPackages(sortBySelect.value);
+            });
+        
+            function sortPackages(sortBy) {
+                const packagesContainer = document.querySelector('.packages');
+                const packages = Array.from(packagesContainer.querySelectorAll('.city'));
+        
+                packages.forEach(package => {
+                    const aValue = getDataAttribute(package, sortBy);
+                    package.dataset.sortValue = aValue;
+                });
+        
+                packages.sort((a, b) => {
+                    const aValue = parseFloat(a.dataset.sortValue);
+                    const bValue = parseFloat(b.dataset.sortValue);
+        
+                    if (sortBy === 'priceLowToHigh') {
+                        return aValue - bValue;
+                    } else if (sortBy === 'priceHighToLow') {
+                        return bValue - aValue;
+                    } else if (sortBy === 'durationShortToLong') {
+                        return aValue - bValue;
+                    } else if (sortBy === 'durationLongToShort') {
+                        return aValue - bValue; // Inverted the logic here
+                    } else if (sortBy === 'ratingHighToLow') {
+                        return bValue - aValue; // Sort by rating in descending order
+                    }
+                });
+        
+                packages.forEach(city => packagesContainer.appendChild(city));
+            }
+        
+            function getDataAttribute(packageElement, sortBy) {
+                if (sortBy === 'priceLowToHigh' || sortBy === 'priceHighToLow') {
+                    const priceText = packageElement.querySelector('.price b').textContent.replace(',', '').replace('₹', '');
+                    return parseFloat(priceText);
+                } else if (sortBy === 'durationShortToLong' || sortBy === 'durationLongToShort') {
+                    const durationText = packageElement.querySelector('.duration').textContent.trim();
+                    const firstNumber = parseInt(durationText.match(/\d+/)[0]); // Extract the first number from the duration
+                    return sortBy === 'durationShortToLong' ? firstNumber : -firstNumber; // Inverted the logic here
+                }else if (sortBy === 'ratingHighToLow') {
+                    const ratingText = packageElement.querySelector('.pkg_rating').textContent.trim();
+                    return parseFloat(ratingText);
+                }
+            }
+        });
+        
+    </script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/packages/package_list/popup.js b/packages/package_list/popup.js
new file mode 100644
index 0000000..2390647
--- /dev/null
+++ b/packages/package_list/popup.js
@@ -0,0 +1,40 @@
+// Function to check if the user is authenticated using Firebase
+function isFirebaseAuthenticated() {
+  // Check if a Firebase user is signed in
+  var user = firebase.auth().currentUser;
+  return user !== null;
+}
+
+// Function to check if the user is authenticated using PHP (assuming authentication tokens are stored in cookies)
+function isPHPAuthenticated() {
+  // Check if the authentication token cookie is set
+  // You'll need to replace 'auth_token' with the actual name of your authentication token cookie
+  var authToken = getCookie('auth_token');
+  return authToken !== null && authToken !== '';
+}
+
+// Function to get cookie value by name
+function getCookie(name) {
+  var value = "; " + document.cookie;
+  var parts = value.split("; " + name + "=");
+  if (parts.length === 2) return parts.pop().split(";").shift();
+}
+
+// Function to check if the user is authenticated
+function isAuthenticated() {
+  // Check if the user is authenticated using Firebase or PHP
+  return isFirebaseAuthenticated() || isPHPAuthenticated();
+}
+
+// Add event listener to all "Book Now" links
+document.querySelectorAll('.book_btn').forEach(function(link) {
+  link.addEventListener('click', function(event) {
+      // Check if the user is authenticated
+      if (!isAuthenticated()) {
+          // If the user is not authenticated, prevent the default behavior of the link and show the login popup
+          event.preventDefault(); // Prevent default behavior of the link
+          document.getElementById('loginPopup').style.display = 'block'; // Show the popup
+          isFirstClick = false; // Set the flag to false after the first click
+      }
+  });
+});
diff --git a/packages/package_list/ramtek.webp b/packages/package_list/ramtek.webp
new file mode 100644
index 0000000..9db2341
Binary files /dev/null and b/packages/package_list/ramtek.webp differ
diff --git a/packages/package_list/salim.jpg b/packages/package_list/salim.jpg
new file mode 100644
index 0000000..85bc901
Binary files /dev/null and b/packages/package_list/salim.jpg differ
diff --git a/packages/package_list/umred.jpg b/packages/package_list/umred.jpg
new file mode 100644
index 0000000..283a8a0
Binary files /dev/null and b/packages/package_list/umred.jpg differ
diff --git a/privacy.html b/privacy.html
deleted file mode 100644
index d01f779..0000000
--- a/privacy.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    
-</body>
-</html>
\ No newline at end of file
diff --git a/profile 2.png b/profile 2.png
deleted file mode 100644
index 88fdadf..0000000
Binary files a/profile 2.png and /dev/null differ
diff --git a/profile1.png b/profile1.png
deleted file mode 100644
index 62613c7..0000000
Binary files a/profile1.png and /dev/null differ
diff --git a/profile3.png b/profile3.png
deleted file mode 100644
index 399415c..0000000
Binary files a/profile3.png and /dev/null differ
diff --git a/profile4.png b/profile4.png
deleted file mode 100644
index efc34e3..0000000
Binary files a/profile4.png and /dev/null differ
diff --git a/profile5.png b/profile5.png
deleted file mode 100644
index bcf5de0..0000000
Binary files a/profile5.png and /dev/null differ
diff --git a/facebook.png b/social logos/facebook.png
similarity index 100%
rename from facebook.png
rename to social logos/facebook.png
diff --git a/image-gallery.png b/social logos/image-gallery.png
similarity index 100%
rename from image-gallery.png
rename to social logos/image-gallery.png
diff --git a/instagram.png b/social logos/instagram.png
similarity index 100%
rename from instagram.png
rename to social logos/instagram.png
diff --git a/itineraries.png b/social logos/itineraries.png
similarity index 100%
rename from itineraries.png
rename to social logos/itineraries.png
diff --git a/linkedin.png b/social logos/linkedin.png
similarity index 100%
rename from linkedin.png
rename to social logos/linkedin.png
diff --git a/whatsapp.png b/social logos/whatsapp.png
similarity index 100%
rename from whatsapp.png
rename to social logos/whatsapp.png
diff --git a/style.css b/style.css
deleted file mode 100644
index 2a322a0..0000000
--- a/style.css
+++ /dev/null
@@ -1,161 +0,0 @@
-/* Reset default margin and padding */
-body, h1, h2, p, ul, li {
-    margin: 0;
-    padding: 0;
-}
-
-/* Basic styling for the entire page */
-body {
-    font-family: 'Trip Sans VF', 'Trip Sans', Arial, sans-serif !important;
-}
-
-/* Style the header and navigation */
-header {
-    background-color: #161F6D;
-    color: #fff;
-    padding: 10px 0;
-}
-
-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px;
-}
-
-.nav-links {
-    list-style: none;
-    display: flex;
-}
-
-.nav-links li {
-    display: flex;
-    margin-right: 20px;
-    
-}
-
-.nav-links a {
-    text-decoration: none;
-    color:white;
-}
-
-/* Style the hero section */
-
-.hero {
-   
-    text-align: center;
-    padding: 20px 0;
-   
-   
-}
-.logo{
-    width: 35%; /* Set a fixed width */
-    height: auto; /* Maintain the aspect ratio */
-    border-radius: 10px;
-}
-.hero h2 {
- 
-    font-size: 36px;
-    margin-bottom: 20px;
-}
-
-.hero p {
-   
-    font-size: 18px;
-    margin-bottom: 40px;
-}
-
-
-
-
-/* Style the contact section */
-.contact {
-    background-color: #161F6D;
-   
-    color: #fff;
-    padding: 80px 0;
-
-}
-
-.contact h2 {
-    font-size: 36px;
-    margin-bottom: 20px;
-}
-
-.contact p {
-    font-size: 18px;
-    margin-bottom: 40px;
-}
-
-/* Style the footer */
-footer {
-    background-color: #161F6D;
-    
-    color: #fff;
-text-align: center;
-    padding: 10px 0;
-}
-.socials{
-    width: 5%; /* Set a fixed width */
-    height: auto; /* Maintain the aspect ratio */
-    border-radius: 10px;
-    
-}
-
-.package img {
-    width: 100%; /* Set a fixed width */
-    height: auto; /* Maintain the aspect ratio */
-    border-radius: 10px;
-}
-.package-grid {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    padding: 20px;
-}
-
-.services {
-    max-width: 300px;
-    margin: 20px;
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-    text-align: center;
-}
-
-.services img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 10px;
-}
-
-.services h2 {
-    font-size: 24px;
-    margin-top: 10px;
-}
-
-.services p {
-    font-size: 16px;
-    line-height: 1.5;
-}
-
-
-
-.services a {
-    display: inline-block;
-    background-color: #333;
-    color: #fff;
-    text-decoration: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    margin-top: 10px;
-}
-
-.services a:hover {
-    background-color: #555;
-}
-
-/* Add media queries for responsive design */
\ No newline at end of file
diff --git a/sunflower.png b/sunflower.png
deleted file mode 100644
index f735ed5..0000000
Binary files a/sunflower.png and /dev/null differ
diff --git a/text.png b/text.png
deleted file mode 100644
index 13101d6..0000000
Binary files a/text.png and /dev/null differ
diff --git a/travelhome.png b/travelhome.png
deleted file mode 100644
index d7883ab..0000000
Binary files a/travelhome.png and /dev/null differ
diff --git a/travelhome2.png b/travelhome2.png
deleted file mode 100644
index eb40aa9..0000000
Binary files a/travelhome2.png and /dev/null differ
diff --git a/travelhome3.png b/travelhome3.png
deleted file mode 100644
index 974016e..0000000
Binary files a/travelhome3.png and /dev/null differ
diff --git a/user/login.js b/user/login.js
new file mode 100644
index 0000000..97c5ee0
--- /dev/null
+++ b/user/login.js
@@ -0,0 +1,46 @@
+  // Import the functions you need from the SDKs you need
+  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
+  import { getAuth ,GoogleAuthProvider ,signInWithPopup} from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";
+  // TODO: Add SDKs for Firebase products that you want to use
+  // https://firebase.google.com/docs/web/setup#available-libraries
+
+  // Your web app's Firebase configuration
+  const firebaseConfig = {
+    apiKey: "AIzaSyBSbEmB7oXs1gZpwR5f7QDkpgwLLbbVw9Y",
+    authDomain: "travelhub-1da77.firebaseapp.com",
+    projectId: "travelhub-1da77",
+    storageBucket: "travelhub-1da77.appspot.com",
+    messagingSenderId: "728451045135",
+    appId: "1:728451045135:web:0909dcbd9e8aaec718d07a"
+  };
+
+  // Initialize Firebase
+  const app = initializeApp(firebaseConfig);
+  const auth =getAuth(app);
+  const user=auth.currentUser;
+  auth.languageCode ='en'
+  const provider = new GoogleAuthProvider();
+
+  const googleLogin=document.getElementById("googlee");
+  googleLogin.addEventListener("click", function () {
+    auth.signInWithPopup(provider)
+        .then((result) => {
+          const credential =GoogleAuthProvider.credentialFromResult(result);
+            const user = result.user;
+            console.log(user);
+            // Display user's username and image thumbnail
+            document.getElementById('username').innerText = `Username: ${user.displayName}`;
+            document.getElementById('userImage').innerHTML = `<img src="${user.photoURL}" alt="User Image" width="100" height="100">`;
+
+            console.log('User logged in:', user);
+            window.location.href = "index.html";
+        })
+        .catch((error) => {
+            const errorCode = error.code;
+            const errorMessage = error.message;
+            console.error('Google sign-in error:', errorMessage);
+        });
+});
+
+
+
diff --git a/user/profile.css b/user/profile.css
new file mode 100644
index 0000000..5d63e00
--- /dev/null
+++ b/user/profile.css
@@ -0,0 +1,393 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat:wght@400;700&family=Poppins:wght@100;200;300;400;500;600&family=Whisper&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --main-color: rgb(66, 66, 255);
+    --black: #222;
+    --white: #fff;
+    --light-black: #777;
+    --light-white: #fff9;
+    --dark-bg: rgba(0, 0, 0, .7);
+    --light-bg: #eee;
+    --border: .1rem solid var(--black);
+    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
+    --text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
+    --light-bg-hover: #f4f4f4; /* Adjust as needed for hover effect */
+    --dark-text: #333; /* Adjust as needed for better contrast */
+}
+
+
+section{
+    padding: 5rem 10%;  
+}
+
+
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1001;
+    background-color: var(--white);
+    display: flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding-left: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header .logo img
+{
+    height: 45px;
+    padding: 0;
+}
+.header .navbar{
+    margin-left:auto;
+}
+.header .navbar a{
+    font-size: 1rem;
+    margin-left: 2rem;
+    color:black;
+    text-decoration: none;
+}
+.header .navbar a:hover{
+  text-decoration: underline;
+}
+
+.footer {
+    /* background: url(footer.jpg) no-repeat; */
+    background-size: auto;
+    background-color: #333;
+    background-position: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 3rem;
+    z-index: 999; /* Set a lower z-index value */
+}
+
+.footer .box-container {
+    display: grid;
+    grid-template-columns: repeat(4, 0.5fr); /* Adjust columns for four boxes */
+    gap: 3rem;
+    padding: 2rem;
+    padding-top: 2rem;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.footer .box-container .box h3 {
+    color: white;
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+}
+
+.footer .box-container .box a {
+    color: var(--light-white);
+    font-size: 1rem;
+    padding-bottom: 1rem;
+    display: block;
+    text-decoration: none;
+}
+
+.footer .box-container .box a i {
+    color: var(--main-color);
+    padding-right: .5rem;
+    transition: .2s linear;
+}
+
+.footer .box-container .box a:hover i {
+    padding-right: 2rem;
+}
+.footer .credit{
+    text-align: center;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: .1rem solid var(--light-white);
+    font-size: 1rem;
+    color: var(--light-white);
+}
+.footer .credit span{
+    color: var(--main-color);
+}
+  
+  .container {
+    display: flex;
+    max-width: 1200px;
+    margin: 20px auto;
+  }
+  
+  /* Sidebar Styles */
+  .sidebar {
+    position:relative;
+    width: 20%;
+    background-color: #f4f4f4;
+    padding: 20px;
+  }
+  
+  .sidebar h2 {
+    margin-bottom: 10px;
+  }
+  
+  .sidebar ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  .sidebar ul li {
+    margin-bottom: 10px;
+  }
+  
+  .sidebar ul li a {
+    text-decoration: none;
+    color: #333;
+  }
+  
+  .sidebar ul li a:hover {
+    color: #666;
+  }
+  
+  /* Main Content Styles */
+  .main-content {
+    width: 80%;
+    padding: 20px;
+  }
+  .profile-info{
+    margin-top: 3rem;
+    display: flex;
+    width: max-content;
+    flex-direction: column;
+   margin-left: 10rem;
+  }
+  .profile-info h2{
+    margin-bottom: 2rem;
+  }
+  .profile-photo {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-bottom: 20px;
+    object-fit: cover;
+    border: 1px solid #fff; /* Add a border to give a frame effect */
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+button{
+background-color: #007BFF;
+color: #f7f7f7;
+border: none;
+width: 12vw;
+align-items: center;
+padding: 10px 10px;
+border-radius: 30px;
+cursor: pointer;
+font-size: 16px;
+margin-left:5px;
+}
+.profile-photo img {
+    width: 100%;
+    height: auto;
+}
+
+.form-group {
+    margin-bottom: 20px;
+    /* text-align: center; */
+    display: flex;
+    align-items: center;
+}
+
+.form-group label {
+    /* display: flex; */
+    font-weight: bold;
+    color: rgb(101, 101, 101);
+    flex: 0 0 auto; 
+    text-align: right; /* Align label text to the right */
+    margin-right: 10px; 
+}
+
+.form-group input {
+    flex: 1;
+    width: 40vw;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 5px;
+}
+  .contact {
+    position: relative;
+    min-height: 100vh;
+    padding: 50px 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background: url(bg.png);
+    background-size: cover;
+}
+
+.contact .content {
+    max-width: 800;
+    text-align: center;
+}
+
+.contact .content h2 {
+    font-size: 36px;
+    font-weight: 500;
+}
+
+.contact .content p {
+    font-weight: 500;
+}
+
+.container {
+    width: 100vw;
+    display: flex;
+   
+    align-items: center;
+    margin-top: 30px;
+}
+main{
+    display: block;
+}
+.container .contactInfo {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+}
+
+.container .contactInfo .box {
+    position: relative;
+    padding: 20px 0;
+    display: flex;
+}
+
+.container .contactInfo .box .icon {
+    width: 60px;
+    height: 60px;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    font-size: 22px;
+}
+
+.container .contactInfo .box .text {
+    display: flex;
+    margin-left: 20px;
+    font-size: 16px;
+    flex-direction: column;
+    font-weight: 300;
+}
+
+.container .contactInfo .box .text h3 {
+    font-weight: 500;
+    color: #00bcd4;
+}
+
+.contactForm {
+    width: 40%;
+    padding: 40px;
+    background: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.contactForm h2 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 500;
+}
+
+.contactForm .inputBox {
+    position: relative;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.contactForm .inputBox input,
+.contactForm .inputBox textarea {
+    width: 100%;
+    padding: 5px 0;
+    font-size: 16px;
+    margin: 10px 0;
+    border-bottom: 2px solid #333;
+    outline: none;
+    resize: none;
+}
+
+.contactForm .inputBox span {
+    position: absolute;
+    left: 10px;
+    padding: 5px 0;
+    font-size: 16px;
+    margin: 10px 0;
+    pointer-events: none;
+    transition: 0.5s ease-in-out;
+    color: #666;
+}
+
+.contactForm .inputBox input:focus ~ span,
+.contactForm .inputBox input:valid ~ span,
+.contactForm .inputBox textarea:focus ~ span,
+.contactForm .inputBox textarea:valid ~ span {
+    color: #e91e63;
+    font-size: 12px;
+    transform: translateY(-80%);
+}
+
+.contactForm .inputBox input[type="submit"] {
+    width: 100px;
+    background: #00bcd4;
+    color: #333;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    font-size: 18px;
+    border-radius: 40px;
+    width: 180px;
+}
+.booking-details {
+    margin-top: 3rem;
+    flex: 0 0 80%;
+    padding: 20px;
+}
+
+h2 {
+    margin-top: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+}
+
+th, td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+td:first-child {
+    font-weight: bold;
+}
+button:hover {
+    background-color: #ff1f00;
+}
\ No newline at end of file
diff --git a/user/profile.html b/user/profile.html
new file mode 100644
index 0000000..5ef0451
--- /dev/null
+++ b/user/profile.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book now</title>
+    <link rel="stylesheet" href="profile.css">
+    <link rel="stylesheet" href="../headfoot.css">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+</head>
+<body>
+    <header>
+        <section class="header">
+        <a href="homepg.html" class="logo"><img src="../Homepage/logoabout.png"></a>
+        
+        <nav class="navbar">
+            <a href="/Homepage/index.html">Home</a>
+            <a href="/aboutUS/aboutUs.html">About</a>
+            <a href="/packages/city_package/packages.html">Packages</a>
+            <a href="/gallery/gallery.html">Gallery</a>
+            <a href="/Other/contactUs.html">Contact</a>
+            <div class="dropdown">
+                <a href="#" id="profile-button">
+                    <img src="/Homepage/profiletemp.png" alt="User Profile" class="profile-circle">
+                    <span>Hi User</span>
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+                <ul class="dropdown-content">
+                    <li><a href="/user/profile.html">Dashboard</a></li>
+                </ul>
+            </div>
+        </nav>
+        </section>
+      <main class="main-content">
+        <div class="container">
+            <aside class="sidebar">
+              <h2>Dashboard</h2>
+              <ul>
+                <li><a href="#" id="profile">Profile</a></li>
+                <li><a href="#" id="bookings">Bookings</a></li>
+              </ul>
+            </aside>
+            <div class="booking-details">
+                <h2>Booking Details</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>Package Name</th>
+                    <th>Room Deatils</th>
+                    <th>Occupancy</th>
+                    <th>Price</th>
+                    <th colspan="4">Start Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Aurangabad tour package with Mahesh tours and travels</td>
+                    <td>AC room</td>
+                    <td>1 person</td>
+                    <td>$100</td>
+                    <td>20/01/2023</td>
+                    <td rowspan="2"><button>Cancel booking</button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+            <div class="profile-info">
+                <h2>Edit Profile</h2>
+                <div class="form-group">
+                    <input type="file" id="photo-upload" accept="image/*" style="display: none;">
+                    <div class="profile-photo" id="profile-photo"></div>
+                    <button id="upload-photo-btn">Upload Photo</button>
+                    <!-- <div class="form-group" id="file-name-display"></div> -->
+                </div>
+                <div class="form-group">
+                    <label for="name">Name:</label>
+                    <input type="text" id="name" placeholder="Enter your name">
+                </div>
+                <div class="form-group">
+                    <label for="phone">Phone Number:</label>
+                    <input type="tel" id="phone" placeholder="Enter your phone number">
+                </div>
+                <div class="form-group">
+                    <label for="email">Email Address:</label>
+                    <input type="email" id="email" placeholder="Enter your email address">
+                </div>
+                <div class="form-group">
+                    <button id="edit-profile-btn">Edit Profile</button>
+                    <button id="save-profile-btn" style="display: none;">Save Profile</button>
+                    <button type="button"><a href="https://forms.gle/br6JGPqiUfuxcPGr5" style="color: white; text-decoration: none;">Finish travel</a></button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+        <section class="footer">
+            <div class="box-container">
+                <div class="box">
+                    <h3>Quick Links</h3>
+                    <a href="index.html"><i class="fa fa-angle-right"></i>Home</a>
+                    <a href="aboutUs.html"><i class="fa fa-angle-right"></i>About</a>
+                    <a href="/packages/city_package/packages.html"><i class="fa fa-angle-right"></i>Packages</a>
+                    <a href="gallery.html"><i class="fa fa-angle-right"></i>Gallery</a>
+                    <a href="contactUs.html"><i class="fa fa-angle-right"></i>Contact</a>
+                </div>
+    
+                <div class="box">
+                    <h3>Extra Links</h3>
+                    <a href="#"><i class="fa fa-angle-right"></i>ask questions</a>
+                    <a href="faq.html"><i class="fa fa-angle-right"></i>faq</a>
+                    <a href="privacy.html"><i class="fa fa-angle-right"></i>privacy policy</a>
+                    <a href="t&c.html"><i class="fa fa-angle-right"></i>terms of use</a>
+                </div>
+    
+                <div class="box">
+                    <h3>Contact info</h3>
+                    <a href="#"><i class="fa fa-phone"></i>428416212</a>
+                    <a href="#"><i class="fa fa-phone"></i>483481292</a>
+                    <a href="#"><i class="fa fa-envelope"></i>travelhub@ves.ac.in</a>
+                    <a href="#"><i class="fa fa-map"></i>mumbai,India - 400094</a>
+                </div>
+    
+                <div class="box">
+                    <h3>Follow Us</h3>
+                    <a href="#"><i class="fa fa-facebook-f"></i>facebook</a>
+                    <a href="#"><i class="fa fa-twitter"></i>twitter</a>
+                    <a href="#"><i class="fa fa-instagram"></i>instagram</a>
+                    <a href="#"><i class="fa fa-linkedin"></i>linkedin</a>
+                </div>
+            </div>
+    
+            <div class="credit">Created by <span> Team TravelHub</span> | all rights reserved</div>
+        </section>
+</header>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const editProfileBtn = document.getElementById('edit-profile-btn');
+    const saveProfileBtn = document.getElementById('save-profile-btn');
+    const editableFields = document.querySelectorAll('.editable');
+
+    // Function to enable editing mode
+    function enableEditMode() {
+        editableFields.forEach(function(field) {
+            field.contentEditable = true;
+            field.classList.add('editable-active');
+        });
+        editProfileBtn.style.display = 'none';
+        saveProfileBtn.style.display = 'block';
+    }
+
+    // Function to disable editing mode
+    function disableEditMode() {
+        editableFields.forEach(function(field) {
+            field.contentEditable = false;
+            field.classList.remove('editable-active');
+        });
+        editProfileBtn.style.display = 'block';
+        saveProfileBtn.style.display = 'none';
+    }
+
+    // Event listener for edit profile button
+    editProfileBtn.addEventListener('click', function() {
+        enableEditMode();
+    });
+
+    // Event listener for save profile button
+    saveProfileBtn.addEventListener('click', function() {
+        // Send updated information to server using AJAX (not implemented here)
+        // On success, disable editing mode
+        disableEditMode();
+    });
+
+    // Fetch user information from server and populate fields
+    fetchUserInfo();
+
+    function fetchUserInfo() {
+        // Simulate fetching user information from the server (replace with actual AJAX call)
+        const userInfo = {
+            name: "John Doe",
+            email: "john@example.com"
+            // Add more user information as needed
+        };
+
+        // Populate fields with fetched information
+        document.getElementById('name').textContent = userInfo.name;
+        document.getElementById('email').textContent = userInfo.email;
+        // Populate more fields if needed
+    }
+});
+</script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const uploadPhotoBtn = document.getElementById('upload-photo-btn');
+        const photoUploadInput = document.getElementById('photo-upload');
+        const profilePhoto = document.getElementById('profile-photo');
+        const fileNameDisplay = document.getElementById('file-name-display');
+
+        uploadPhotoBtn.addEventListener('click', function() {
+            // Trigger the file input field when the "Upload Photo" button is clicked
+            photoUploadInput.click();
+        });
+
+        photoUploadInput.addEventListener('change', function() {
+            // When a file is selected, read its contents and display it as the profile photo
+            const file = photoUploadInput.files[0];
+            const reader = new FileReader();
+
+            reader.onload = function(event) {
+                const imageUrl = event.target.result;
+                profilePhoto.innerHTML = `<img src="${imageUrl}" alt="Profile Photo">`; // Corrected line
+            };
+
+            if (file) {
+                reader.readAsDataURL(file);
+                // Display the file name
+                fileNameDisplay.textContent = file.name;
+            }
+        });
+    });
+</script>
+<script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Get references to elements
+            const bookingLink = document.querySelector('#bookings');
+            const profileLink = document.querySelector('#profile');
+            const bookingDetailsSection = document.querySelector('.booking-details');
+            const profileInfoSection = document.querySelector('.profile-info');
+        
+            // Add event listener for Bookings link
+            bookingLink.addEventListener('click', function(event) {
+                event.preventDefault(); // Prevent default link behavior
+                displayBookings(); // Call function to display booking details
+            });
+        
+            // Add event listener for Profile link
+            profileLink.addEventListener('click', function(event) {
+                event.preventDefault(); // Prevent default link behavior
+                displayProfile(); // Call function to display profile information
+            });
+        
+            function displayProfile() {
+                // Hide booking details section
+                bookingDetailsSection.style.display = 'none';
+                // Display profile info section
+                profileInfoSection.style.display = 'flex';
+            }
+        
+            function displayBookings() {
+                // Hide profile info section
+                profileInfoSection.style.display = 'none';
+                // Display booking details section
+                bookingDetailsSection.style.display = 'block';
+            }
+        
+            function displayBookingDetails() {
+                var bookingId = document.getElementById('bookingIdInput').value;
+                // Simulate fetching and displaying booking details (replace with actual code)
+                var bookingDetails = `Booking details for ID ${bookingId}.`;
+                document.getElementById('bookingDetails').innerHTML = bookingDetails;
+            }
+            profileLink.click();
+        });
+ 
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/user/update.js b/user/update.js
new file mode 100644
index 0000000..d67c62a
--- /dev/null
+++ b/user/update.js
@@ -0,0 +1,50 @@
+  // Import the functions you need from the SDKs you need
+  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
+  import { getAuth ,GoogleAuthProvider ,onAuthStateChanged} from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";
+  // TODO: Add SDKs for Firebase products that you want to use
+  // https://firebase.google.com/docs/web/setup#available-libraries
+
+  // Your web app's Firebase configuration
+  const firebaseConfig = {
+    apiKey: "AIzaSyBSbEmB7oXs1gZpwR5f7QDkpgwLLbbVw9Y",
+    authDomain: "travelhub-1da77.firebaseapp.com",
+    projectId: "travelhub-1da77",
+    storageBucket: "travelhub-1da77.appspot.com",
+    messagingSenderId: "728451045135",
+    appId: "1:728451045135:web:0909dcbd9e8aaec718d07a"
+  };
+
+  // Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth =getAuth(app);
+const user=auth.currentUser;
+function updateUserProfile(user) {
+    const userName = user.displayName;
+    const userEmail = user.email;
+    const userProfilePicture = user.photoURL;
+    console.log(userEmail);
+  
+    // Update the profile section with user data
+    const usernameElement = document.getElementById("username");
+    const profilePicElement = document.getElementById("profilepic");
+  
+    if (usernameElement && profilePicElement) {
+      usernameElement.textContent = userName;
+      profilePicElement.src = userProfilePicture;
+    } else {
+      console.error("One or more elements not found.");
+    }
+  }
+  
+  document.addEventListener('DOMContentLoaded', function() {
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        updateUserProfile(user);
+        const uid = user.uid;
+        return uid;
+      } else {
+        alert("Create Account and Login");
+      }
+    });
+  });
+  
diff --git a/user/user_login.css b/user/user_login.css
new file mode 100644
index 0000000..c455db2
--- /dev/null
+++ b/user/user_login.css
@@ -0,0 +1,191 @@
+*{
+  font-family: 'Trip Sans VF', 'Trip Sans', Arial, sans-serif !important;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ 
+ 
+}
+body {
+  background-color:rgba(233, 233, 141, 0.468);
+  background: linear-gradient(to right,rgba(252, 252, 159, 0.183),#161f6d90);
+ display: flex;
+  justify-content: center;
+  align-items: center;
+ height: 100vh;
+ flex-direction: column;
+  
+}
+
+.container{
+
+  background-color: white;
+  border-radius: 30px;
+  box-shadow: 0 5px 15px rgb(247, 251, 189);
+  position: relative;
+  overflow: hidden;
+  width: 768px;
+  max-width: 100%;
+  max-height: 480px;
+  display: flex;
+  
+}
+.container input{
+  background-color: #eee;
+  border:none;
+  margin:8px 0;
+  padding:10px 15px;
+  font-size: 13px;
+  border-radius: 8px;
+  width: 100%;
+  outline: none;
+}
+.form-container button{
+  background-color: #161F6D;
+  color: #fff;
+  font-size: 12px;
+  padding: 10px 45px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-top: 10px;
+  cursor: pointer;
+
+}
+.container button:hover{
+  opacity: .8;
+}
+.container form{
+background-color: #fff;
+display: flex;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+padding: 0 40px;
+height: 100%;
+}
+.form-container{
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 25px;
+  
+}
+.form-container h2{
+  margin-bottom: 15px;
+}
+.google{
+  padding-right: 20px;
+  position: relative;
+padding-left: 2rem;
+}
+.google p{
+  width: 95%;
+text-align: center;
+font-size: 14px;
+color: rgba(0, 0, 0, 0.413);
+/* padding-top: 10px; */
+margin-bottom: 15px;
+}
+
+.full_box{
+  width: 50%;
+  padding-top: 70px;
+}
+.title{
+  text-align: center;
+  padding-top: 100px;
+  height: 480px;
+  border-top-left-radius: 10rem;
+  border-bottom-left-radius: 10rem;
+  background-color: #cbcddd;
+  width: 50%;
+ 
+  margin: 0;
+}
+.title a{
+  text-decoration: none;
+  color: black;
+} 
+.title b{
+  display: flex;
+ 
+  color: #5760ad;
+ line-height: 160%;
+ font-size: 50px;
+ font-weight:800;
+
+}
+.title a{
+  background-color: #cbcddd;
+box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.16);
+  font-size: 12px;
+  padding: 10px 45px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-top: 30px;
+  cursor: pointer;
+}
+.title a:hover{
+  background-color: #161F6D;
+  color: #fff;
+  transition: 0.4s all ease-in-out;
+  
+
+}
+.title p{
+  text-align: center;
+padding: 20px;
+}
+/* google sign in css */
+.signin {
+  margin-left: 4.4rem;
+}
+.login-with-google-btn {
+  transition: background-color .3s, box-shadow .3s;
+    cursor: pointer;
+  padding: 12px 16px 12px 42px;
+  border: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
+
+  color: #757575;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
+  background-color: white;
+  background-repeat: no-repeat;
+  background-position: 12px 11px;
+  
+  &:hover {
+    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
+  }
+  
+  &:active {
+    background-color: #eeeeee;
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 
+      0 -1px 0 rgba(0, 0, 0, .04),
+      0 2px 4px rgba(0, 0, 0, .25),
+      0 0 0 3px #c8dafc;
+  }
+  
+  &:disabled {
+    filter: grayscale(100%);
+    background-color: #ebebeb;
+    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
+    cursor: not-allowed;
+  }
+
+}
\ No newline at end of file
diff --git a/user/user_login.html b/user/user_login.html
new file mode 100644
index 0000000..b72eac7
--- /dev/null
+++ b/user/user_login.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="user_login.css">
+</head>
+<body>
+  <div class="container">
+    <div class="full_box">
+    <div class="form-container">
+   <form action="user_login.php" method="post">
+    <h2 >Sign In</h2>
+      <input type="text" placeholder="Username or Email " name="uname" id="username" required>
+    
+      <input type="password" placeholder="Password" name="psw" id="password" required>
+      
+      <button type="submit" id="sign-up">Sign In</button>
+    </form>
+  </div>
+
+  <div class="google">
+    <p>OR</p>
+  <!-- google sign in  -->
+  <div class="signin">
+    <button type="button" class="login-with-google-btn" id="googlee" >
+      Sign in with Google
+    </button>
+  </div>
+  </div>
+  
+   </div>
+   <div class="title">
+    <b>Welcome to TravelHub!</b>
+    <p>Don't have an account yet Sign up here</p>
+     <a href="user_signup.html">Sign Up</a>
+  </div>
+  
+   </div>
+</body>
+<script src="login.js" defer type="module"></script>
+
+</html>
\ No newline at end of file
diff --git a/user/user_login.php b/user/user_login.php
new file mode 100644
index 0000000..002cb26
--- /dev/null
+++ b/user/user_login.php
@@ -0,0 +1,33 @@
+<?php
+  $servername = "localhost";
+  $username = "root";
+  $password = "";
+  $database = "signup";
+
+  $conn = mysqli_connect($servername, $username, $password,$database);
+  if (!$conn) 
+  {  
+    die("Connection failed: " . mysqli_connect_error());
+  }
+
+  if ($_SERVER["REQUEST_METHOD"] == "POST") 
+  {
+    $username = $_POST["uname"];
+    $password = $_POST["psw"];
+    $sql = "Select * from users where username='$username' AND password='$password'";
+
+    $result = mysqli_query($conn, $sql);
+    $num = mysqli_num_rows($result);
+    if ($num == 1)
+    {
+      header("location: index.html");
+    }
+    else
+    {
+      echo '<script> 
+      alert("Invalid Username or Password"); 
+      window.location.href = "user_login.html";
+      </script>';
+    } 
+  }
+?>
\ No newline at end of file
diff --git a/user/user_signup.css b/user/user_signup.css
new file mode 100644
index 0000000..d4d6cce
--- /dev/null
+++ b/user/user_signup.css
@@ -0,0 +1,154 @@
+*{
+  font-family: 'Trip Sans VF', 'Trip Sans', Arial, sans-serif !important;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ 
+ 
+}
+body {
+  background-color:rgba(233, 233, 141, 0.468);
+  background: linear-gradient(to right,rgba(252, 252, 159, 0.183),#161f6d90);
+ display: flex;
+  justify-content: center;
+  align-items: center;
+ height: 100vh;
+ flex-direction: column;
+  
+}
+
+.container{
+
+  background-color: white;
+  border-radius: 30px;
+  box-shadow: 0 5px 15px rgb(247, 251, 189);
+  position: relative;
+  overflow: hidden;
+  width: 768px;
+  max-width: 100%;
+  max-height: 480px;
+  display: flex;
+  
+}
+.container input{
+  background-color: #eee;
+  border:none;
+  margin:8px 0;
+  padding:10px 15px;
+  font-size: 13px;
+  border-radius: 8px;
+  width: 100%;
+  outline: none;
+}
+.form-container button{
+  background-color: #161F6D;
+  color: #fff;
+  font-size: 12px;
+  padding: 10px 45px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-top: 10px;
+  cursor: pointer;
+
+}
+.container button:hover{
+  opacity: .8;
+}
+.container form{
+background-color: #fff;
+display: flex;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+padding: 0 40px;
+height: 100%;
+}
+.form-container{
+
+  padding: 25px;
+}
+.form-container h2{
+  margin-bottom: 15px;
+}
+.google{
+  /* padding: 20px; */
+  position: relative;
+padding-left: 2rem;
+}
+.google p{
+  width: 90%;
+text-align: center;
+font-size: 14px;
+color: rgba(0, 0, 0, 0.413);
+/* padding-top: 10px; */
+margin-bottom: 15px;
+}
+
+.full_box{
+  /* display: flex; */
+  width: 50%;
+}
+.title{
+  display: flex;
+  align-items: center;
+  justify-content:center;
+  text-align: center;
+  height: 480px;
+  background-color: #cbcddd;
+  color: #5760ad;
+  border-top-left-radius: 10rem;
+  border-bottom-left-radius: 10rem;
+ font-size: 50px;
+ font-weight:800;
+ line-height: 160%;
+  margin: 0;
+  width: 50%;
+}
+/* google sign in css */
+.signin {
+  margin-left: 4.4rem;
+}
+.login-with-google-btn {
+  transition: background-color .3s, box-shadow .3s;
+    cursor: pointer;
+  padding: 12px 16px 12px 42px;
+  border: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
+
+  color: #757575;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
+  background-color: white;
+  background-repeat: no-repeat;
+  background-position: 12px 11px;
+  
+  &:hover {
+    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
+  }
+  
+  &:active {
+    background-color: #eeeeee;
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 
+      0 -1px 0 rgba(0, 0, 0, .04),
+      0 2px 4px rgba(0, 0, 0, .25),
+      0 0 0 3px #c8dafc;
+  }
+  
+  &:disabled {
+    filter: grayscale(100%);
+    background-color: #ebebeb;
+    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
+    cursor: not-allowed;
+  }
+
diff --git a/user/user_signup.html b/user/user_signup.html
new file mode 100644
index 0000000..3eb4198
--- /dev/null
+++ b/user/user_signup.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
+  <link rel="stylesheet" href="user_signup.css">
+  <script src="login.js" defer type="module"></script>
+
+</head>
+
+<body>
+  <div class="container">
+    <div class="full_box">
+    <div class="form-container">
+   <form action="user_signup.php" method="post">
+    <h2 >Sign Up</h2>
+      <input type="text" placeholder="Username " name="uname" id="username" required>
+      <input type="text" placeholder="Email " name="email" id="email" required>
+  
+      <input type="password" placeholder="Password" name="psw" id="password" required>
+      
+      <input type="password" placeholder="Confirm Password" name="psw1" id="repeat_password" required>
+      
+      <button type="submit" id="sign-up">Sign Up</button>
+    </form>
+  </div>
+
+  <div class="google">
+    <p>OR</p>
+  <!-- google sign in  -->
+  <div class="signin">
+    <button type="button" class="login-with-google-btn" id="googlee" >
+      Sign in with Google
+    </button>
+  </div>
+ </div>
+   </div>
+   <div class="title">
+    <p>Welcome to TravelHub!</p>
+  </div>
+   </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/user/user_signup.php b/user/user_signup.php
new file mode 100644
index 0000000..ce82ebb
--- /dev/null
+++ b/user/user_signup.php
@@ -0,0 +1,59 @@
+<?php
+  $servername = "localhost";
+  $username = "root";
+  $password = "";
+  $database = "signup";
+
+  // Check connection
+  $conn = mysqli_connect($servername, $username, $password, $database);
+  if (!$conn) {
+    die("Connection failed: " . mysqli_connect_error());
+  }
+  
+  $username = $_POST["uname"];
+  $password = $_POST["psw"];
+  $repeat_password = $_POST["psw1"];
+  $email = $_POST["email"];
+
+  $passwordLength = strlen($password);
+  $repeatPasswordLength = strlen($repeat_password);
+
+  if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    function checkGmail($email) {
+        if (strpos($email, "@ves.ac.in") !== false) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    if (checkGmail($username)) {
+        if (strlen($password) >= 8) {
+            if (strlen($repeat_password) >= 8) {
+                if ($password == $repeat_password) {
+                    // Passwords match, insert user into database
+                    $sql = "INSERT INTO `users` (`username`, `email`, `password`, `date_time`) VALUES ('$username', '$email', '$password', current_timestamp())";
+                    $result = mysqli_query($conn, $sql);
+                    if ($result) {
+                        echo '<script type="text/JavaScript">  
+                        alert("Account Created Successfully");
+                        window.location.href = "user_login.html";
+                        </script>';
+                    }
+                } else {
+                    // Passwords do not match, show error message
+                    echo '<script type="text/JavaScript">  
+                    alert("Passwords do not match"); 
+                    window.location.href = "user_signup.html";
+                    </script>';
+                }
+            }
+        }
+    } else {
+        // Username is not a ves email, show error message
+        echo '<script> alert("Please enter ves email only");
+        window.location.href="user_signup.html";
+        </script>';
+    }
+}
+?>
\ No newline at end of file
