diff --git a/img/image.png b/image.png
similarity index 100%
rename from img/image.png
rename to image.png
diff --git a/img/img1.jpeg b/img1.jpeg
similarity index 100%
rename from img/img1.jpeg
rename to img1.jpeg
diff --git a/img/img2.jpg b/img2.jpg
similarity index 100%
rename from img/img2.jpg
rename to img2.jpg
diff --git a/index.html b/index.html
index 48699c2f..38361484 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
 
diff --git a/packages.css b/packages.css
index e96b566d..8d033f5b 100644
--- a/packages.css
+++ b/packages.css
@@ -23,6 +23,10 @@ body {
     margin-bottom: 5px;
     font-weight: 500;
 }
+.trip-package-grid{
+    height: 150px;
+    width: 80px;
+}
 .slideshow {
     margin-left: 0px;
     width: 100%;
@@ -92,8 +96,8 @@ h1 span {
 
 .package img{
     transform: translateX(-28px);
-    max-width: 100%;
-    /* width: 100%; */
+    max-width: 80%;
+    
     border-radius: 5px;
 }
 
diff --git a/packages.html b/packages.html
index f1bb1673..718efc6a 100644
--- a/packages.html
+++ b/packages.html
@@ -2,529 +2,648 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Trip & Hotel Packages</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <link rel="stylesheet" href="styles.css" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
-    <style>
-        :root {
-            --primary-color: #d6eaf7;
-            --secondary-color: #e73e76;
-            --bg-color: #f4f4f9;
-            --text-color: #333;
-            --card-bg: #ffffff;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-        }
-
-        body,
-        html {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            overflow-x: hidden;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: none;
-            color: var(--text-color);
-            display: block;
-        }
-
-        #background-video {
-            position: fixed;
-            right: 0;
-            bottom: 0;
-            min-width: 100%;
-            min-height: 100%;
-            width: auto;
-            height: auto;
-            z-index: -1000;
-            object-fit: cover;
-            background-size: cover;
-        }
-
-        .video-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: -999;
-        }
-
-        .sitelogo {
-            height: 40px;
-            margin-right: 10px;
-            min-width: fit-content;
-        }
-
-        .nav__logo {
-            color: white;
-            text-decoration: none;
-            font-size: 1.5rem;
-            font-weight: 600;
-        }
-
-        .nav__logo span {
-            color: #e73e76;
-        }
-
-        .link {
-            position: relative;
-        }
-
-        .link>a {
-            display: block;
-            color: white;
-            text-align: center;
-            padding: 6px 10px;
-            text-decoration: none;
-            width: 100%;
-            transition: all 0.3s linear;
-            align-items: center;
-            margin-top: -15px;
-        }
-
-        .link>a:hover {
-            background-color: #f6ddff;
-            border-radius: 10px;
-            box-shadow: rgb(56, 0, 109) 0px 0px 8px 2px inset;
-            color: #002152;
-        }
-
-        .navigationbar_package {
-            align-items: center;
-            display: flex;
-            gap: 5px;
-        }
+  <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <style>
+    .newNav{
+      opacity:1 !important;
+      translate: none !important;
+      rotate: none !important;
+      scale: none !important;
+      transform: none !important;
+    }
+    .top-btn {
+      display: none;
+      width: 50px;
+      height: 50px;
+      position: fixed;
+      bottom: 10px;
+      right: 0px;
+      background-color: #ab45e7;
+      color: #fff;
+      padding: 2px;
+      border: none;
+      margin-right: 36px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    .top-btn:hover {
+      background-color: #0056b3;
+    }
+
+    .reveal {
+      position: relative;
+      opacity: 0;
+    }
+
+    .reveal.active {
+      opacity: 1;
+    }
+
+    .active.fade-bottom {
+      animation: fade-bottom 0.5s ease-in-out;
+    }
+
+    .active.fade-left {
+      animation: fade-left 0.5s ease-in-out;
+    }
+
+    .active.fade-right {
+      animation: fade-right 0.5s ease-in-out;
+    }
+
+    @keyframes fade-bottom {
+      0% {
+        transform: translateY(50px);
+        opacity: 0;
+      }
+
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+
+    @keyframes fade-left {
+      0% {
+        transform: translateX(-100px);
+        opacity: 0;
+      }
+
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    @keyframes fade-right {
+      0% {
+        transform: translateX(100px);
+        opacity: 0;
+      }
+
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  </style>
+
+  <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="./Image-Gallery/style.css">
+  <title>Arpan Codes | Tourguide</title>
+  <!-- adding a fav-icon -->
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+  <script src="index.js"></script>
+
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
+  </script>
+  <script type="text/javascript">
+    (function () {
+      emailjs.init("WB9rAyWwwLZube-er");
+    })();
+  </script>
+
+  <style>
+    html {
+      scroll-behavior: smooth;
+    }
+  </style>
+  <style>
+    :root {
+        --primary-color: #d6eaf7;
+        --secondary-color: #e73e76;
+        --bg-color: #f4f4f9;
+        --text-color: #333;
+        --card-bg: #ffffff;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    body,
+    html {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+    }
+
+    body {
+        font-family: 'Poppins', sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: none;
+        color: var(--text-color);
+        display: block;
+    }
+
+    #background-video {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        min-width: 100%;
+        min-height: 100%;
+        width: auto;
+        height: auto;
+        z-index: -1000;
+        object-fit: cover;
+        background-size: cover;
+    }
+
+    .video-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: -999;
+    }
+
+    .sitelogo {
+        height: 40px;
+        margin-right: 10px;
+        min-width: fit-content;
+    }
+
+    .nav__logo {
+        color: white;
+        text-decoration: none;
+        font-size: 1.5rem;
+        font-weight: 600;
+    }
+
+    .nav__logo span {
+        color: #e73e76;
+    }
+
+    .link {
+        position: relative;
+    }
+
+    .link>a {
+        display: block;
+        color: white;
+        text-align: center;
+        padding: 6px 10px;
+        text-decoration: none;
+        width: 100%;
+        transition: all 0.3s linear;
+        align-items: center;
+        margin-top: -15px;
+    }
+
+    .link>a:hover {
+        background-color: #f6ddff;
+        border-radius: 10px;
+        box-shadow: rgb(56, 0, 109) 0px 0px 8px 2px inset;
+        color: #002152;
+    }
+
+    .navigationbar_package {
+        align-items: center;
+        display: flex;
+        gap: 5px;
+    }
+
+    .dropdown-menu {
+        display: none;
+        position: absolute;
+        background-color: #123456;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+    }
+
+    .dropdown-menu>li {
+        float: none;
+    }
+
+    .dropdown-menu>li>a {
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        text-align: left;
+        color: white;
+    }
+
+    .dropdown-menu>li>a:hover {
+        background-color: #575757;
+    }
+
+    .dropdown:hover .dropdown-menu {
+        display: block;
+    }
+
+    .contact-btn {
+        position: relative;
+        right: 15px;
+        box-sizing: border-box;
+    }
+
+    .btn {
+        padding: 1rem 1rem;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        color: white;
+        background-color: #0697f1;
+        margin: 0;
+    }
+
+    .btn:hover {
+        background-color: #0578c1;
+    }
+
+    #themeToggle {
+        width: inherit;
+    }
+
+    .toggle-container {
+        margin-left: 15px;
+    }
+
+    .hamburger {
+        height: 2rem;
+        width: 1.7rem;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        display: none;
+        transition: 0.2s;
+    }
+
+    .line {
+        height: 5px;
+        width: 100%;
+        background-color: white;
+        border-radius: 2px;
+    }
+
+    .main-content {
+        position: relative;
+        z-index: 1;
+    }
+
+    .package-grid {
+       
+    justify-content: center;
+    gap: 30px;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+   }
+    
 
-        .dropdown-menu {
+    .package-card {
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: transform 0.3s ease;
+    }
+
+    .package-card:hover {
+        transform: translateY(-5px);
+    }
+
+    .package-card img {
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
+    }
+
+    .package-info {
+        padding: 20px;
+    }
+
+    .package-info h3 {
+        margin: 0 0 10px;
+        color: #0697f1;
+    }
+
+    .package-info p {
+        margin: 0;
+        color: #666;
+    }
+
+    .login_packages {
+        color: white !important;
+        background-color: #6a5acd !important;
+    }
+
+    .login_packages:hover {
+        background-color: #ff0000 !important;
+        border-color: #ff0000 !important;
+        color: #fff !important;
+    }
+
+    @media (max-width: 1024px) {
+        .navLinks {
             display: none;
-            position: absolute;
-            background-color: #123456;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 1;
-        }
-
-        .dropdown-menu>li {
-            float: none;
-        }
-
-        .dropdown-menu>li>a {
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            text-align: left;
-            color: white;
-        }
-
-        .dropdown-menu>li>a:hover {
-            background-color: #575757;
-        }
-
-        .dropdown:hover .dropdown-menu {
-            display: block;
-        }
-
-        .contact-btn {
-            position: relative;
-            right: 15px;
-            box-sizing: border-box;
-        }
-
-        .btn {
-            padding: 1rem 1rem;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            color: white;
-            background-color: #0697f1;
-            margin: 0;
-        }
-
-        .btn:hover {
-            background-color: #0578c1;
-        }
-
-        #themeToggle {
-            width: inherit;
-        }
-
-        .toggle-container {
-            margin-left: 15px;
         }
 
         .hamburger {
-            height: 2rem;
-            width: 1.7rem;
-            display: flex;
-            justify-content: space-between;
-            flex-direction: column;
-            display: none;
-            transition: 0.2s;
-        }
-
-        .line {
-            height: 5px;
-            width: 100%;
-            background-color: white;
-            border-radius: 2px;
-        }
-
-        .main-content {
-            position: relative;
-            z-index: 1;
-        }
-
-        .package-grid {
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-            padding: 0 40px;
-        }
-
-        .package-card {
-            background-color: #fff;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-            transition: transform 0.3s ease;
-        }
-
-        .package-card:hover {
-            transform: translateY(-5px);
-        }
-
-        .package-card img {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-        }
-
-        .package-info {
-            padding: 20px;
-        }
-
-        .package-info h3 {
-            margin: 0 0 10px;
-            color: #0697f1;
-        }
-
-        .package-info p {
-            margin: 0;
-            color: #666;
-        }
-
-        .login_packages {
-            color: white !important;
-            background-color: #6a5acd !important;
-        }
-
-        .login_packages:hover {
-            background-color: #ff0000 !important;
-            border-color: #ff0000 !important;
-            color: #fff !important;
-        }
-
-        @media (max-width: 1024px) {
-            .navLinks {
-                display: none;
-            }
-
-            .hamburger {
-                display: flex;
-            }
-        }
-
-        .section-title {
-            text-align: center;
-            font-size: 2.2em;
-            margin: 90px 0 20px !important;
-            font-weight: 800;
-            font-family: 'Poppins', sans-serif;
-            color: var(--primary-color);
-            animation: fadeInUp 0.5s ease-out;
-        }
-
-        .subtitle {
-            color: var(--secondary-color);
-            font-style: italic;
-            font-family: 'Poppins', sans-serif;
-            text-align: center;
-            font-weight: 800;
-            font-size: 1.2em;
-            margin-bottom: 30px;
-            animation: fadeInUp 0.5s ease-out 0.2s both;
-        }
-
-        .center-card {
             display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 30px;
-            padding: 20px;
-        }
-
-        .center-card img {
-            max-width: 400px;
-            height: auto;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-            border-radius: 15px;
-            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-            animation: fadeInUp 0.5s ease-out;
-        }
-
-        .center-card img:hover {
-            transform: scale(1.05) translateY(-10px);
-            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
-            cursor: pointer;
-        }
-
-        .hotel-packages {
-            padding: 40px 0;
-            margin-top: 10px;
-        }
-
-        @keyframes fadeInDown {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
         }
+    }
+
+    .section-title {
+        text-align: center;
+        font-size: 2.2em;
+        margin: 90px 0 20px !important;
+        font-weight: 800;
+        font-family: 'Poppins', sans-serif;
+        color: var(--secondary-color);
+        animation: fadeInUp 0.5s ease-out;
+    }
+
+    .subtitle {
+        color: var(--secondary-color);
+        font-style: italic;
+        font-family: 'Poppins', sans-serif;
+        text-align: center;
+        font-weight: 800;
+        font-size: 1.2em;
+        margin-bottom: 30px;
+        animation: fadeInUp 0.5s ease-out 0.2s both;
+    }
+
+    .center-card {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 30px;
+        padding: 20px;
+    }
+
+    .center-card img {
+        max-width: 400px;
+        height: auto;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        border-radius: 15px;
+        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+        animation: fadeInUp 0.5s ease-out;
+    }
+
+    .center-card img:hover {
+        transform: scale(1.05) translateY(-10px);
+        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+    }
+
+    .hotel-packages {
+        padding: 40px 0;
+        margin-top: 10px;
+    }
+
+    @keyframes fadeInDown {
+        from {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .animate-fadeInUp {
+        animation: fadeInUp 0.6s ease-out;
+    }
+
+    .pricing-section {
+        padding: 60px 0;
+        background-color: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(10px);
+        margin-top: 40px;
+    }
+
+    .pricing-container {
+        display: flex;
+        justify-content: center;
+        gap: 30px;
+        flex-wrap: wrap;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+    }
+
+    .pricing-card {
+        background-color: rgba(255, 255, 255, 0.8);
+        border-radius: 15px;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        text-align: center;
+        padding: 30px;
+        flex: 1 1 300px;
+        min-width: 300px;
+        max-width: 400px;
+        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    }
+
+    .pricing-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    .pricing-card h3 {
+        color: var(--secondary-color);
+        margin-bottom: 20px;
+        font-size: 1.8em;
+        font-family: 'Poppins', sans-serif;
+        animation: fadeInUp 0.5s ease-out;
+    }
+
+    .pricing-card p {
+        font-size: 1em;
+        color: var(--text-color);
+        margin-bottom: 30px;
+    }
+
+    .pricing-card ul {
+        list-style: none;
+        padding: 0;
+        margin-bottom: 30px;
+        font-size: 1em;
+        color: var(--text-color);
+    }
+
+    .pricing-card ul li {
+        margin-bottom: 10px;
+    }
+
+    .pricing-card ul li i {
+        color: var(--secondary-color);
+        margin-right: 10px;
+    }
+
+    .pricing-card .btn {
+        padding: 15px 30px;
+        font-size: 1em;
+        border-radius: 50px;
+        transition: background-color 0.3s ease;
+        animation: fadeInUp 0.5s ease-out;
+        margin-top: 20px;
+    }
+</style>
 
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .animate-fadeInUp {
-            animation: fadeInUp 0.6s ease-out;
-        }
-
-        .pricing-section {
-            padding: 60px 0;
-            background-color: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            margin-top: 40px;
-        }
-
-        .pricing-container {
-            display: flex;
-            justify-content: center;
-            gap: 30px;
-            flex-wrap: wrap;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-
-        .pricing-card {
-            background-color: rgba(255, 255, 255, 0.8);
-            border-radius: 15px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-            text-align: center;
-            padding: 30px;
-            flex: 1 1 300px;
-            min-width: 300px;
-            max-width: 400px;
-            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-        }
-
-        .pricing-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .pricing-card h3 {
-            color: var(--secondary-color);
-            margin-bottom: 20px;
-            font-size: 1.8em;
-            font-family: 'Poppins', sans-serif;
-            animation: fadeInUp 0.5s ease-out;
-        }
-
-        .pricing-card p {
-            font-size: 1em;
-            color: var(--text-color);
-            margin-bottom: 30px;
-        }
-
-        .pricing-card ul {
-            list-style: none;
-            padding: 0;
-            margin-bottom: 30px;
-            font-size: 1em;
-            color: var(--text-color);
-        }
-
-        .pricing-card ul li {
-            margin-bottom: 10px;
-        }
-
-        .pricing-card ul li i {
-            color: var(--secondary-color);
-            margin-right: 10px;
-        }
-
-        .pricing-card .btn {
-            padding: 15px 30px;
-            font-size: 1em;
-            border-radius: 50px;
-            transition: background-color 0.3s ease;
-            animation: fadeInUp 0.5s ease-out;
-            margin-top: 20px;
-        }
-    </style>
 </head>
 
 <body>
-    <video autoplay muted loop id="background-video">
-        <source src="background-video.mp4" type="video/mp4">
-    </video>
-    <div class="video-overlay"></div>
-    <header>
-        <div class="nav-container" id="top">
-            <nav class="newNav">
-              <div style="display: flex; flex-direction: row; align-items: center;">
-              <img src="/favicon.ico" class="sitelogo">
-              
-              <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
-            </div>
-      
-              <ul class="navLinks">
-                <li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
-                <li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
-                <li class="link" data-aos=""><a href="#Home">Home</a></li>
-                <li class="link" data-aos=""><a href="./about.html">About</a></li>
-                <li class="link dropdown" data-aos="">
-                    <a href="#Services" class="dropdown">Services</a>
-                    <ul class="dropdown-menu">
-                        <li><a href="#Destinations">Destination</a></li>
-                        <li><a href="#trip">Prices</a></li>
-                        <li><a href="#ReviewGallery">Trip Gallery</a></li>
-                        <li><a href="#tourist">Tourist Guide</a></li>
-                        <li><a href="#hotel">Hotel & Resort</a></li>
-                    </ul>
-                </li>
-                <li class="link" data-aos=""><a href="./topdeals/topdeals.html">Top Deals</a></li>
-                <li class="link" data-aos=""><a href="./packages.html">Packages</a></li>
-                <li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
-                <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
-                <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
-            </ul>
-      
-              <a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login" id="btn-style"
-                  data-aos="fade-down">Login/SignUp</button></a>
-              <a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn" id="btn-style" style="margin: 0;"
-                  data-aos="fade-down">view <map name=""></map></button></a>
-      
-              <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn"
-                  style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button></a>
-      
-              <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
-                  style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
-      
-              <div class="toggle-container" data-aos="fade-down">
-                <input id="themeToggle" class="toggle" type="checkbox">
-              </div>
-              <div class="hamburger" data-aos="fade-down">
-                <div class="line"></div>
-                <div class="line"></div>
-                <div class="line"></div>
-              </div>
-            </nav>
-          </div>
+
+  <!-- <nav>
+      <div class="nav__logo">Tourguide<span>.</span></div>
+      <ul class="nav__links">
+        <li class="link"><a href="./index.html">Home</a></li>
+        <li class="link"><a href="/index.html" >AboutUs</a></li>
+        <li class="link"><a href="./index.html">Destinations</a></li>
+        <li class="link"><a href="/index.html">Pricing</a></li>
+        <li class="link"><a href="/index.html">Packages</a></li>
+        <li class="link"><a href="/index.html">Reviews</a></li>
+        
+        <li class="link"><a href="login.html">Login</a></li>
+      </ul>
+      <a href="/index.html"><button class="btn">Contact Us</button></a>
+    </nav> -->
+     <!-- sticky animation  -->
+ <script type="text/javascript">
+  window.addEventListener("scroll", function () {
+    var header = document.querySelector("nav");
+    header.classList.toggle("sticky", window.scrollY > 50)
+  })
+</script>
+
+<nav class="newNav">
+  <div style="display: flex; flex-direction: row; align-items: center;">
+  <img src="./img/tour1.png" class="sitelogo">
+  
+  <a href="#" class="nav__logo aos-init aos-animate" data-aos="fade-right">Tourguide<span>.</span></a>
+</div>
+
+  <ul class="navLinks">
+    <li class="link aos-init aos-animate" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
+    <li class="link aos-init aos-animate" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
+    <li class="link aos-init aos-animate" data-aos=""><a href="#Home">Home</a></li>
+    <li class="link aos-init aos-animate" data-aos=""><a href="#AboutUs">About</a></li>
+    <li class="link aos-init aos-animate" data-aos=""><a href="#Packages">Packages</a></li>
+    <li class="link aos-init aos-animate" data-aos=""><a href="#cnt-form">Contact Us</a></li>
+</ul>
+
+  <a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login aos-init aos-animate" id="btn-style" data-aos="fade-down" style="display: block;">Login/SignUp</button></a>
+  <a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn aos-init aos-animate" id="btn-style" style="margin: 0;" data-aos="fade-down">view <map name=""></map></button></a>
+
+  <a href="loginPage.html" class="contact-btn"><button class="btn aos-init aos-animate" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled="">Log Out</button></a>
+
+  <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
+      style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
     
-    </header>
-    <main class="main-content">
-        <section class="hotel-packages">
-            <h2 class="section-title">Our Packages</h2>
-            <p class="subtitle">Find the best deals and offers for your next adventure!</p>
-            <div class="package-grid">
-                <div class="package-card">
-                    <img src="image1.jpg" alt="Package 1">
-                    <div class="package-info">
-                        <h3>Package 1</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                    </div>
-                </div>
-                <div class="package-card">
-                    <img src="image2.jpg" alt="Package 2">
-                    <div class="package-info">
-                        <h3>Package 2</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                    </div>
-                </div>
-                <div class="package-card">
-                    <img src="image3.jpg" alt="Package 3">
-                    <div class="package-info">
-                        <h3>Package 3</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                    </div>
-                </div>
+  <div class="toggle-container aos-init aos-animate" data-aos="fade-down">
+    <input id="themeToggle" class="toggle" type="checkbox">
+  </div>
+  <div class="hamburger aos-init aos-animate" data-aos="fade-down">
+    <div class="line"></div>
+    <div class="line"></div>
+    <div class="line"></div>
+  </div>
+</nav>
+
+  <section class="trip" id="trip">
+    <div class="section__container trip__container">
+      <h2 class="section__title">Our Packages</h2>
+      <p class="section__subtitle text-center">
+        Find the best deals and offers for your next adventure!</p>
+      </b></h2>
+      <div class="package-grid">
+        <div class="package-card">
+            <img src="image.png" alt="Package 1"  >
+            
+            <div class="package-info">
+                <h3>Package 1</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            </div>
+        </div>
+        <div class="package-card">
+            <img src="img1.jpeg" alt="Package 2" height="300" >
+            <div class="package-info">
+                <h3>Package 2</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
             </div>
-        </section>
-        <section class="pricing-section">
-            <h2 class="section-title">Pricing</h2>
-            <p class="subtitle">Choose the perfect plan for your needs</p>
-            <div class="pricing-container">
-                <div class="pricing-card">
-                    <h3>Basic Plan</h3>
-                    <p>Starting at $199</p>
-                    <ul>
-                        <li><i class="fas fa-check"></i> 3 Days / 2 Nights</li>
-                        <li><i class="fas fa-check"></i> Hotel Accommodation</li>
-                        <li><i class="fas fa-check"></i> Guided Tours</li>
-                    </ul>
-                    <button class="btn">Book Now</button>
-                </div>
-                <div class="pricing-card">
-                    <h3>Premium Plan</h3>
-                    <p>Starting at $399</p>
-                    <ul>
-                        <li><i class="fas fa-check"></i> 5 Days / 4 Nights</li>
-                        <li><i class="fas fa-check"></i> Hotel Accommodation</li>
-                        <li><i class="fas fa-check"></i> All Meals Included</li>
-                    </ul>
-                    <button class="btn">Book Now</button>
-                </div>
-                <div class="pricing-card">
-                    <h3>Luxury Plan</h3>
-                    <p>Starting at $599</p>
-                    <ul>
-                        <li><i class="fas fa-check"></i> 7 Days / 6 Nights</li>
-                        <li><i class="fas fa-check"></i> 5 Star Hotel Accommodation</li>
-                        <li><i class="fas fa-check"></i> All Meals & Drinks Included</li>
-                    </ul>
-                    <button class="btn">Book Now</button>
-                </div>
+        </div>
+        <div class="package-card">
+            <img src="img2.jpg" alt="Package 3" height="300">
+            <div class="package-info">
+                <h3>Package 3</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
             </div>
-        </section>
-    </main>
-</body>
+        </div>
+    </div>
+      
+  </section>   
+  
+  <section class="pricing-section">
+    <h2 class="section-title">Pricing</h2>
+    <p class="subtitle">Choose the perfect plan for your needs</p>
+    <div class="pricing-container">
+        <div class="pricing-card">
+            <h3>Basic Plan</h3>
+            <p>Starting at $199</p>
+            <ul>
+                <li><i class="fas fa-check"></i> 3 Days / 2 Nights</li>
+                <li><i class="fas fa-check"></i> Hotel Accommodation</li>
+                <li><i class="fas fa-check"></i> Guided Tours</li>
+            </ul>
+            <button class="btn">Book Now</button>
+        </div>
+        <div class="pricing-card">
+            <h3>Premium Plan</h3>
+            <p>Starting at $399</p>
+            <ul>
+                <li><i class="fas fa-check"></i> 5 Days / 4 Nights</li>
+                <li><i class="fas fa-check"></i> Hotel Accommodation</li>
+                <li><i class="fas fa-check"></i> All Meals Included</li>
+            </ul>
+            <button class="btn">Book Now</button>
+        </div>
+        <div class="pricing-card">
+            <h3>Luxury Plan</h3>
+            <p>Starting at $599</p>
+            <ul>
+                <li><i class="fas fa-check"></i> 7 Days / 6 Nights</li>
+                <li><i class="fas fa-check"></i> 5 Star Hotel Accommodation</li>
+                <li><i class="fas fa-check"></i> All Meals & Drinks Included</li>
+            </ul>
+            <button class="btn">Book Now</button>
+        </div>
+    </div>
+</section>
+
+ 
+<script src="./Image-Gallery/script.js"></script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 0cb7f489..d67f3c98 100644
--- a/styles.css
+++ b/styles.css
@@ -387,7 +387,7 @@ body {
   padding: 5rem 1rem;
   margin-top: 20px;
   margin-bottom: -28px;
-  /*background: rgb(241, 239, 239);  */
+  background: rgb(241, 239, 239); 
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2066,8 +2066,7 @@ body {
 .nav-container {
   margin-top: 0;
   height: auto;
-  /* width: 200%; */
-  width: 100%;
+  width: 200%;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -2084,7 +2083,7 @@ body {
   gap: 0.5rem;
   height: auto;
   width: 100%;
-  padding: 0.4rem 1rem;
+  padding: 0.4rem 0.5rem;
   z-index: 10000;
   transition: all 0.6s;
 }
@@ -2092,9 +2091,9 @@ body {
 .sticky{
   /* margin: 10px 5px; */
   border-radius: 10px;
-  padding-top: 0.5rem;
+  margin-top: 0.5rem;
   background: linear-gradient(#002152, #271050);
-  /* scale:0.99; */
+  scale:0.99;
   
   /* padding: 0rem 1rem;
   margin-top: 0.5rem;
@@ -2107,16 +2106,13 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  /* font-size: 1.16rem; */
-  font-size: 1rem;
+  font-size: 1.16rem;
   list-style: none;
-  /* gap: 0.97rem; */
+  gap: 0.97rem;
   position: relative;
-  /* top: 0.5rem; */
-  top: 0;
+  top: 0.5rem;
   z-index: 10;
   right: 24px;
-
 }
 
 .link {
@@ -2193,9 +2189,6 @@ body {
   width: 100%;
   transition: all 0.2s ease-in-out;
 } */
-
-
-
 .contact-btn {
   position: relative;
   right: 15px;
@@ -2235,11 +2228,9 @@ body {
     position: absolute;
     top: 70px;
     background-color: #091020;
-    /* width: 0%; */
-    width: 100%;
+    width: 0%;
     left: 0;
-    /* height: 100vh; */
-    height: auto;
+    height: 100vh;
     padding: 2rem 0;
     flex-direction: column;
     transition: 0.2s;
@@ -2666,7 +2657,6 @@ body {
   transition: all 0.5s;
   transition: box-shadow 0.3s; /* Added transition for box-shadow */
   display: none;
-  z-index: 10;
 }
 
 .goupbtn:hover {
@@ -2863,7 +2853,7 @@ body.dark-theme .testimonials .testimonial-user p{
     transform: translate(26%, 9%);
   }
   .newNav {
-    flex-wrap: no-wrap;
+    flex-wrap: wrap;
   }
   .aboutcon {
     padding: 1rem;
@@ -3108,32 +3098,4 @@ a:hover::after {
   margin-bottom: auto;
   font-size: 14px;
   font-weight: 600;
-}
-
-/* For removing the red line that appears on the navbar of navlink section */
-.navLinks a, .link a {
-  position: relative;
-  text-decoration: none;
-  color: white;
-  font-size: 14px;
-}
-
-.navLinks a::after, .link a::after {
-  content: '';
-  position: absolute;
-  width: 0%;
-  height: 0px;
-  bottom: -5px;
-  left: 0;
-  background-color: transparent;
-  transition: all 0.3s ease-in-out;
-}
-
-.navLinks a:hover, .link a:hover {
-  color: red;
-}
-
-.navLinks a:hover::after, .link a:hover::after {
-  width: 0%;
-  background-color: transparent;
 }
\ No newline at end of file
