diff --git a/about.css b/about.css
new file mode 100644
index 00000000..04a04575
--- /dev/null
+++ b/about.css
@@ -0,0 +1,185 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    width: 100vw;
+    min-height: 100vh;
+    color: #fff;
+    overflow-x: hidden;
+}
+
+.background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-image: url('path_to_fallback_image.jpg');
+    background-size: cover;
+    background-position: center;
+}
+
+.background video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+.content-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 40px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+header {
+    margin-bottom: 30px;
+}
+
+.heading {
+    font-size: 4rem;
+    color: #fff;
+    margin-bottom: 10px;
+    font-weight: 700;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    letter-spacing: 2px;
+}
+
+.subheading {
+    font-size: 1.5rem;
+    color: #f0f0f0;
+    margin-top: 0;
+    font-weight: 300;
+    letter-spacing: 1px;
+}
+
+.content-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+    max-width: 800px;
+}
+.video-container {
+    width: 100%;
+    max-width: 800px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    margin-bottom: 4rem;
+}
+
+.video-container::before {
+    content: '';
+    display: block;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+
+.summary {
+    font-size: 1.1rem;
+    color: #f0f0f0;
+    line-height: 1.6;
+    text-align: center;
+    margin: 0;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.features {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 3rem !important;
+    margin: 0 auto;
+    margin-left: 2.2rem;
+}
+
+.feature {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.feature i {
+    font-size: 2.5rem;
+    color: #ff6b6b;
+}
+
+.feature h3 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.cta-button {
+    display: inline-block;
+    padding: 15px 30px;
+    background-color: #ff6b6b;
+    color: #fff;
+    text-decoration: none;
+    font-size: 1.2rem;
+    font-weight: 600;
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
+    margin-top: 1.5rem;
+}
+
+.cta-button:hover {
+    background-color: #ff8787;
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
+}
+
+@media (max-width: 768px) {
+    .content-wrapper {
+        padding: 20px;
+    }
+
+    .heading {
+        font-size: 3rem;
+    }
+
+    .subheading {
+        font-size: 1.2rem;
+    }
+
+    .summary {
+        font-size: 1rem;
+    }
+
+    .features {
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .feature i {
+        font-size: 2rem;
+    }
+
+    .feature h3 {
+        font-size: 1rem;
+    }
+
+    .cta-button {
+        font-size: 1rem;
+        padding: 12px 25px;
+    }
+}
\ No newline at end of file
diff --git a/about.html b/about.html
new file mode 100644
index 00000000..1acf2a2c
--- /dev/null
+++ b/about.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us - TourGuide</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&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="about.css">
+</head>
+<body>
+    <div class="background">
+        <video autoplay muted loop playsinline>
+            <source src="./about.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+
+    <div class="content-wrapper">
+        <header>
+            <h1 class="heading">About Us</h1>
+            <p class="subheading">Discover Your Purpose Through Travel</p>
+        </header>
+
+        <div class="content-block">
+            <div class="video-container">
+                <iframe src="https://www.youtube.com/embed/veULUjsSrPg?si=eq3sDAt3-yZnZUme" allowfullscreen></iframe>
+            </div>
+            <p class="summary">
+                Welcome to TourGuide, where life's purpose unfolds through exploration and the pursuit of the extraordinary. We empower you to navigate the world with unparalleled assistance, forging unforgettable memories.
+            </p>
+            <p class="summary">
+                Our local guides help you effortlessly navigate languages, customs, and traditions. We offer curated itineraries, once-in-a-lifetime experiences, and valuable travel advice, all customizable to your wishes.
+            </p>
+            <p class="summary">
+                Since 2024, TourGuide has grown to 30,000+ guides across 200+ countries. Join our family, where every journey becomes a story worth sharing!
+            </p>
+            <div class="features">
+                <div class="feature">
+                    <i class="fas fa-map-marked-alt"></i>
+                    <h3>Curated Itineraries</h3>
+                </div>
+                <div class="feature">
+                    <i class="fas fa-users"></i>
+                    <h3>Local Guides</h3>
+                </div>
+                <div class="feature">
+                    <i class="fas fa-star"></i>
+                    <h3>Unforgettable Experiences</h3>
+                </div>
+            </div>
+            <a href="/" class="cta-button">Start Your Journey</a>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/about.mp4 b/about.mp4
new file mode 100644
index 00000000..beca95ad
Binary files /dev/null and b/about.mp4 differ
diff --git a/index.html b/index.html
index a4d8e9c9..f7cfa0c0 100644
--- a/index.html
+++ b/index.html
@@ -552,7 +552,7 @@ <h1>TourGuide . . .</h1>
           <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="#AboutUs">About</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">
@@ -667,19 +667,18 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
           <!-- Left background color column -->
           <div class="col-8 bg primary"></div>
           <!-- Right content container -->
-          <div
-            class="section__container gallary__container relative z-10 max-w-screen-xl px-4 mx-auto text-center pb-14">
+          <div class="section__container gallary__container relative z-10 max-w-screen-xl px-4 mx-auto text-center pb-14">
             <div class="aboutcon">
               <div class="col-span-2 mx-auto lg:mx-0 lg:text-left">
-                <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></h1>
+                <h1 class="headingofAbout section__title" data-aos="fade-in"><b>About Us</b></h1>
                 <!-- Article with about us content -->
                 <article class="w-full text-left format sm:format-base lg:format-lg format-blue dark:format-invert">
                   <!-- Adding the content -->
                   <style>
                     /* CSS for hover effect */
                     .aboutcontent:hover {
-                      transform: scale(1.8);
-                      transition: transform 0.8s ease;
+                      transform: scale(1.05);
+                      transition: transform 0.5s ease;
                     }
                     .video-container {
                       display: flex;
@@ -687,11 +686,13 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
                       justify-content: center;
                       height: 30vh;
                     }
-                    .iframe {
-                       width: 760px;
-                       height: 515px;
-                       border: none;
-
+                    iframe {
+                      width: 100%;
+                      height: 100%;
+                      max-width: 700px;
+                      max-height: 400px;
+                      border: none;
+                      border-radius: 10px;
                     }
                   </style>
                   <br>
@@ -699,34 +700,7 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
                     <iframe src="https://www.youtube.com/embed/veULUjsSrPg?si=eq3sDAt3-yZnZUme" allowfullscreen></iframe>
                   </div>
                   <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
-                    <span style="margin-left: 80px;"></span>Welcome to TourGuide, where we firmly believe that life's
-                    true purpose unfolds amidst the thrill of exploration, the embrace of the unfamiliar, and the
-                    pursuit of the extraordinary! Our mission is to embolden you, the intrepid traveler, to unveil this
-                    purpose and elevate your journey by providing unparalleled assistance and guidance. Let us be your
-                    compass as you navigate through the wonders of the world, forging unforgettable memories and
-                    discovering the essence of travel!
-                  </p>
-
-                  <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
-                    <span style="margin-left: 80px;"></span> At TourGuide, our local guides serve as your passport to
-                    effortlessly navigate through local
-                    languages, customs, and traditions that often make traveling to a foreign place overwhelming. We
-                    provide curated travel itineraries, once-in-a-lifetime experiences, valuable travel advice, and the
-                    freedom to customize itineraries to ensure everything aligns with your wishlist.
-                  </p>
-
-                  <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
-                    <span style="margin-left: 80px;"></span>Since our inception in 2024, TourGuide has cultivated a
-                    dynamic travel community, with 30,000+
-                    guides hailing from over 200+ countries globally. We continue to grow each day, expanding the
-                    horizons of possibilities for discovering the world. With TourGuide by your side, there's no limit
-                    to the different ways you can embark on an unforgettable journey!
-                  </p>
-
-                  <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
-                    <strong><span style="margin-left: 50px;"></span> We welcome you to the TourGuide family - where
-                      every journey becomes a story worth
-                      sharing!</strong>
+                    Welcome to TourGuide, your trusted companion in discovering the wonders of the world. We provide unparalleled assistance, offering curated itineraries, local guides, and unforgettable experiences tailored just for you. Join our growing community and let your journey become a story worth sharing!
                   </p>
                 </article>
               </div>
@@ -735,6 +709,7 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
         </div>
       </div>
     </section>
+    
 
 
     </div>
diff --git a/packages.html b/packages.html
index 87e63dea..6f9aef35 100644
--- a/packages.html
+++ b/packages.html
@@ -5,256 +5,504 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Trip & Hotel Packages</title>
-    <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">
-  <link rel="stylesheet" href="packages.css" class="rel">
- 
-    <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" />
-
-      </head>
-
-      <body>
-        
-    <!-- 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 dropdown aos-init aos-animate" 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 &amp; Resort</a></li>
-          </ul>
-      </li>
-      <li class="link aos-init aos-animate" data-aos=""><a href="#testimonials">Testimonial</a></li>
-      <li class="link aos-init aos-animate" data-aos=""><a href="feedback.html">Rate Us?</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> -->
-
-    <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>
-  
-   
-    <div class="nav-wrapperr">
-        <div id="progress-container">
-          <div id="progress-bar"></div>
-        </div>
-    
-        <script>
-        window.addEventListener('scroll', function() {
-    // Get the current scroll position
-    const winScroll = document.documentElement.scrollTop || document.body.scrollTop;
-    
-    // Get the total scrollable height
-    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-    
-    // Calculate the percentage scrolled
-    const scrolled = (winScroll / height) * 100;
-    
-    // Set the progress bar width
-    document.getElementById('progress-bar').style.width = scrolled + '%';
-});
-
-        </script>
-      </div>
-
-       <div class="main-wrapper">
-        <div class="slideshow">
-            <img src="https://i.pinimg.com/736x/ac/94/35/ac9435b1dae07a86462fa6fa691498c4.jpg" class="slide" alt="Tiger 1">
-            <img src="https://i.pinimg.com/564x/c5/39/96/c53996d4e79d2f8dcc0ca608e2613873.jpg" class="slide" alt="Tiger 2">
-            <img src="https://i.pinimg.com/564x/fd/76/77/fd767725f6663d77389b322d309189f3.jpg" class="slide" alt="Tiger 3">
-        </div>
-        <div class="content">
-            <h1>Let us plan you a perfect </h1>
-            <h1><span>Holiday</span></h1>
-            <p>Custom-Crafted Tour Packages for Unforgettable Holiday Experiences in the world, based on your interests.</p>
-
-            <div class="package-options">
-                <div class="package">
-                    <div class="row-new">
-                        <h2> Wildlife</h2>
-                        <i class="fa-solid fa-hippo"></i>
-                    </div>
-                    <div class="packagecount">30+ Packages</div>
-                   <div style="">
-                    <a class="img1">
-                        <img src="https://www.tourmyindia.com/imagess/wildlife.webp" alt="" class="src"/>
-                    </a>
-                </div>
-                  
-                   
-                </div>
-                <div class="package">
-                    <div class="row-new">
-                        <h2> Heritage</h2>
-                        <i class="fa-solid fa-landmark"></i>
-                    </div>
-                    <div class="packagecount">40+ Packages</div>
-                    <div style="">
-                        <a class="img1">
-                            <img src="https://www.tourmyindia.com/imagess/heritage.webp" alt="" class="src"/>
-                        </a>
-                    </div>
-                    
+    <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" />
+    <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 {
+            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);
+            }
+        }
+
+        @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>
+        <nav>
+            <div class="container">
+                <a href="#" class="nav__logo">
+                    <img src="logo.png" alt="Logo" class="sitelogo" />
+                    Trip & Hotel Packages
+                </a>
+                <div class="navigationbar_package">
+                    <ul>
+                        <li class="link"><a href="#">Home</a></li>
+                        <li class="link"><a href="#">About Us</a></li>
+                        <li class="link dropdown">
+                            <a href="#">Packages</a>
+                            <ul class="dropdown-menu">
+                                <li><a href="#">Package 1</a></li>
+                                <li><a href="#">Package 2</a></li>
+                                <li><a href="#">Package 3</a></li>
+                            </ul>
+                        </li>
+                        <li class="link"><a href="#">Contact</a></li>
+                    </ul>
                 </div>
-                <div class="package">
-                    <div class="row-new">
-                        <h2> Romantic</h2>
-                        <i class="fa-solid fa-heart"></i>
-                    </div>
-                    <div class="packagecount">50+ Packages</div>
-                    <div style="">
-                        <a class="img1">
-                            <img src="https://www.tourmyindia.com/imagess/beach01.webp" alt="" class="src"/>
-                        </a>
-                    </div>
+                <div class="toggle-container">
+                    <button id="themeToggle" class="btn">Toggle Theme</button>
                 </div>
-            </div>
-
-       
-
-
-      
-          
-           
-
-        </div>
-    </div>
-
-    <div class="explore-destinations-section">
-        <h2 class="explore-destinations-heading">Explore Top Destinations by Region</h2>
-        <div class="region-tabs">
-            <span class="region-tab active">North India</span>
-            <span class="region-tab">South India</span>
-            <span class="region-tab">East India</span>
-            <span class="region-tab">West India</span>
-            <span class="region-tab">Central India</span>
-        </div>
-        <div class="row-grid">
-            <div class="destination-card left1">
-                <img src="https://www.tourmyindia.com/imagess/uttarakhand01-package.webp" alt="Uttarakhand">
-                <div class="destination-info">
-                    <h3>Uttarakhand</h3>
-                    <p>50+ Packages</p>
+                <div class="hamburger">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
                 </div>
             </div>
-
-            <div class="destination-grid">
-            
-                <div class="destination-card">
-                    <img src="https://www.tourmyindia.com/imagess/rajasthan-package.webp" alt="Rajasthan">
-                    <div class="destination-info">
-                        <h3>Rajasthan</h3>
-                        <p>30+ Packages</p>
+        </nav>
+    </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="destination-card">
-                    <img src="https://www.tourmyindia.com/imagess/himachal-package.webp" alt="Himachal">
-                    <div class="destination-info">
-                        <h3>Himachal</h3>
-                        <p>60+ Packages</p>
+                <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="destination-card">
-                    <img src="https://www.tourmyindia.com/imagess/j&k-package.webp" alt="Jammu & Kashmir">
-                    <div class="destination-info">
-                        <h3>Jammu & Kashmir</h3>
-                        <p>30+ Packages</p>
+                <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="destination-card">
-                    <img src="https://www.tourmyindia.com/imagess/up-package.webp" alt="Uttar Pradesh">
-                    <div class="destination-info">
-                        <h3>Uttar Pradesh</h3>
-                        <p>25+ Packages</p>
-                    </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="destination-card">
-                    <img src="https://www.tourmyindia.com/imagess/delhi-package.webp" alt="Delhi">
-                    <div class="destination-info">
-                        <h3>Delhi</h3>
-                        <p>20+ Packages</p>
-                    </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="destination-card">
-                    <img src="https://www.tourmyindia.com/imagess/ladakh-trend.webp" alt="Ladakh">
-                    <div class="destination-info">
-                        <h3>Ladakh</h3>
-                        <p>25+ Packages</p>
-                    </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>
+    </main>
+</body>
 
-        </div>
-        
-    </div>
-    
-
-    <div class="why-choose-us-section">
-        <h2 class="why-choose-us-heading">Why Choose Us?</h2>
-        <div class="why-choose-us-cards">
-            <div class="why-choose-us-card experience-card">
-                <div class="why-choose-us-icon">&#128077;</div>
-                <h3 class="why-choose-us-title">20+ Year Experience</h3>
-                <p class="why-choose-us-description">Boasting over two decades in the tourism and hospitality industry, Tour My India has amassed invaluable experience that sets us apart.</p>
-            </div>
-            <div class="why-choose-us-card experts-card">
-                <div class="why-choose-us-icon">&#128100;</div>
-                <h3 class="why-choose-us-title">A Team of Experts</h3>
-                <p class="why-choose-us-description">Our experienced team at Tour My India is more than just proficient; they are destination experts for every location within the mesmerizing landscape of India. Their knowledge is an invaluable asset for every traveler.</p>
-            </div>
-            <div class="why-choose-us-card hotels-card">
-                <div class="why-choose-us-icon">&#127969;</div>
-                <h3 class="why-choose-us-title">Verified Hotels</h3>
-                <p class="why-choose-us-description">We offer a meticulously selected and verified list of high-grade hotels. Our partners consistently deliver top-notch service, ensuring an exceptional experience for our guests.</p>
-            </div>
-            <div class="why-choose-us-card value-card">
-                <div class="why-choose-us-icon">&#128176;</div>
-                <h3 class="why-choose-us-title">Value for Money Tours</h3>
-                <p class="why-choose-us-description">With Tour My India, your vacation is not just about sightseeing; it's about creating memories that last a lifetime. Our holiday packages are hassle-free and designed with a focus on value for money.</p>
-            </div>
-        </div>
-    </div>
-    
-    
-    <script src="packages.js"></script>
-      </body>
\ No newline at end of file
+</html>
diff --git a/styles.css b/styles.css
index 3b0275eb..3b50b603 100644
--- a/styles.css
+++ b/styles.css
@@ -2480,17 +2480,13 @@ body {
 
 /* Light Mode and Dark Mode of AboutUs */
 .headingofAbout {
-  font-weight: bold; /* Make the heading bold */
+  font-weight: bold;
   text-align: center;
-  color: yellow; /* Set heading color to yellow */
-  font-size: 2.5rem; /* Increase font size */
-  margin: 20px 0; /* Add margin for spacing */
-  text-shadow: 
-      -1px -1px 0 #000,  
-      1px -1px 0 #000,
-      -1px 1px 0 #000,
-       1px 1px 0 #000; /* Dark black outline around each letter */
-  font-family: 'Roboto', sans-serif; /* Use Roboto font family */
+  color: yellow;
+  font-size: 2.5rem;
+  margin: 20px 0;
+  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+  font-family: 'Roboto', sans-serif;
 }
 
 /* Styling for elements with .aboutcon class */
@@ -2499,49 +2495,49 @@ body {
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
-  background: linear-gradient(135deg, #7b4397, #32b1fa, rgb(254, 71, 227)); /* Gradient background */
-  padding: 40px 20px; /* Add padding for spacing */
-  border-radius: 10px; /* Rounded corners */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
-  transition: background-color 0.3s ease; /* Smooth transition for background color */
+  background: linear-gradient(135deg, #90b7f6, #d6edf7); /* Soft blue gradient */
+  padding: 40px 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease;
 }
 
+
 /* Styling for elements with .aboutcontent class */
 .aboutcontent {
   text-align: center;
-  color: black;
+  color: #333;
   margin-bottom: 20px;
-  flex: 1 1 300px; /* Make flex items responsive */
   padding: 20px;
-  background-color: rgba(255, 255, 255, 0.8); /* Background color for content */
-  border-radius: 10px; /* Rounded corners */
-  transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for transform and background color */
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
 }
 
 /* Hover Effect for aboutcontent */
 .aboutcontent:hover {
-  transform: scale(1); /* Slightly enlarge on hover */
-  background-color: rgba(255, 255, 255, 1); /* Change background color on hover */
+  transform: scale(1.05);
+  background-color: rgba(255, 255, 255, 1);
 }
 
 /* Media Queries for Responsiveness */
 @media (max-width: 768px) {
   .aboutcon {
-      flex-direction: column; /* Stack items vertically on small screens */
+    flex-direction: column;
   }
 
   .headingofAbout {
-      font-size: 2rem; /* Adjust font size for smaller screens */
+    font-size: 2rem;
   }
 }
+
 /* Adjust hover effect for touch devices */
 @media (hover: none) {
   .aboutcontent:hover {
-      transform: none; /* Remove scaling on touch devices */
+    transform: none;
   }
 }
 
-
 /* Styling for SVG elements inside .iconss class */
 .iconss svg {
   width: 100px;
