diff --git a/topdeals/topdeals.css b/topdeals/topdeals.css
index e69de29b..c319eeea 100644
--- a/topdeals/topdeals.css
+++ b/topdeals/topdeals.css
@@ -0,0 +1,146 @@
+   /* General Styles */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+  background: url("bestdeal.jpg") no-repeat center center fixed;
+  background-size: cover;
+}
+
+/* Container */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Header */
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.header h1 {
+  font-size: 64px;
+  margin: 0;
+  color: white;
+}
+
+.header p {
+  font-size: 18px;
+  color: #0a0a0a;
+  max-width: 90%;
+  margin: 20px auto;
+}
+
+/* Deals Section */
+.deals {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+
+
+/* Card */
+.card {
+  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  transition: transform 0.3s ease-in-out;
+}
+
+.card:hover {
+  transform: scale(1.03);
+}
+
+/* Card Images */
+.card img {
+  width: 100%;
+  height: 200px;      /* fixed height for uniform cards */
+  object-fit: cover;  /* maintain aspect ratio */
+  display: block;
+}
+
+/* Card Content */
+.card-content {
+  padding: 15px;
+}
+
+.card-content h2 {
+  font-size: 20px;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+/* Tags, Location, Price */
+.tags,
+.location,
+.price,
+.book-now {
+  margin-bottom: 10px;
+}
+
+.tags span,
+.location span,
+.price span {
+  background-color: #eee;
+  border-radius: 3px;
+  padding: 5px 10px;
+  font-size: 14px;
+  color: #555;
+  display: flex;
+  justify-content: center;
+}
+
+.price span {
+  background-color: #f7b731;
+  color: #fff;
+}
+
+/* Book Now Button */
+.book-now li {
+  display: flex;
+  justify-content: center;
+    margin-left: -5px;
+}
+
+.book-now a {
+  color: white;
+  text-decoration: none;
+  font-size: 16px;
+
+}
+
+.book-now a span {
+  display: inline-block;
+  padding: 8px 20px;
+  background: #ff5a5f;
+  border-radius: 4px;
+  transition: 0.3s;
+ 
+}
+
+.book-now a:hover span {
+  background: #ff787d;
+}
+
+/* Responsive Typography */
+@media (max-width: 768px) {
+  .header h1 {
+    font-size: 42px;
+  }
+  .header p {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .header h1 {
+    font-size: 28px;
+  }
+  .header p {
+    font-size: 14px;
+  }
+}
+
diff --git a/topdeals/topdeals.html b/topdeals/topdeals.html
index bc2a9d4e..ccadbe2e 100644
--- a/topdeals/topdeals.html
+++ b/topdeals/topdeals.html
@@ -14,340 +14,8 @@
     <link rel="stylesheet" href="../Image-Gallery/style.css">
     <!-- <link rel="stylesheet" href="../about.css"> -->
     <link rel="stylesheet" href="../navLinks.css" />
+    <link rel ="stylesheet" href="topdeals.css">
     <script src="Theme.js" defer></script>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background: url("bestdeal.jpg");
-            margin: 0;
-            padding: 20px;
-            background-size: cover;
-            background-attachment: fixed;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .header {
-            text-align: center;
-            display: flex;
-            justify-items: center;
-            margin-bottom: 60px;
-        }
-
-        .header h1 {
-            font-size: 76px;
-            margin: 0;
-            color: white;
-        }
-
-        .header p {
-            font-size: 20px;
-            color: #0a0a0a;
-            width: 800px;
-            margin-left: 210px;
-        }
-
-        .deals {
-            display: flex;
-            justify-content: space-between;
-            /* display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
-            flex-wrap: wrap;
-
-
-
-        }
-
-        .card {
-            background-color: rgba(255, 255, 255, 0.8);
-
-            border-radius: 15px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-            width: 32%;
-            margin-bottom: 30px;
-            flex-wrap: wrap;
-
-
-        }
-
-        .card:hover {
-            transform: scale(1.035);
-        }
-
-        .card img {
-            width: 100%;
-            height: auto;
-        }
-
-        .card-content {
-            padding: 20px;
-        }
-
-        .card-content h2 {
-            font-size: 22px;
-            margin: 0;
-            margin-bottom: 10px;
-        }
-
-        .tags,
-        .location,
-        .price,
-        .book-now {
-            margin-bottom: 10px;
-        }
-
-        .tags span,
-        .location span,
-        .price span {
-            background-color: #eee;
-            border-radius: 3px;
-            padding: 5px 10px;
-            font-size: 14px;
-            color: #555;
-        }
-
-        .price span {
-            background-color: #f7b731;
-            color: #fff;
-        }
-
-        /* .book-now a {
-            display: block;
-            text-align: center;
-            background-color: #ff5a5f;
-            color: #fff;
-            padding: 10px;
-            border-radius: 3px;
-            text-decoration: none;
-            font-weight: bold;
-        }
-        .book-now a:hover {
-            background-color: #ff787d;
-        } */
-
-
-
-        ul {
-            list-style: none;
-        }
-
-        .book-now a {
-            color: white;
-            /* Text color for the link */
-            font-weight: normal;
-            /* Normal font weight */
-            line-height: 45px;
-            /* Line height for vertical centering */
-            perspective: 1000px;
-            /* Perspective for 3D effect */
-
-        }
-
-        .book-now a span {
-            position: relative;
-            /* Positioning context for the span */
-            display: inline-block;
-            /* Allow block-like behavior */
-            font-size: 18px;
-            /* Font size for the text */
-            font-weight: normal;
-            /* Normal font weight */
-            letter-spacing: 0.5px;
-            /* Slightly increased letter spacing */
-            padding: 2px 27px;
-            /* Padding around the text */
-            background: #ff5a5f;
-            /* Background color of the span */
-            border-radius: 1px;
-            /* Rounded corners */
-            transition: transform 0.3s;
-            /* Smooth transition for transformation */
-            transform-origin: 50% 0;
-            /* Set transform origin to the center top */
-            transform-style: preserve-3d;
-            /* Preserve 3D transformations */
-        }
-
-        .book-now a span::before {
-            position: absolute;
-            /* Position the pseudo-element */
-            top: 100%;
-            /* Position it just below the span */
-            left: 0;
-            /* Align to the left */
-            height: 100%;
-            /* Match the height of the span */
-            width: 100%;
-            /* Match the width of the span */
-            color: white;
-            /* Text color for the pseudo-element */
-            background: black;
-            /* Background color for the hover text */
-            border-radius: 1px;
-            /* Match rounded corners */
-            text-align: center;
-            transition: background 0.3s;
-            /* Smooth transition for background color */
-            transform: rotateX(-90deg);
-            /* Hide it initially by rotating */
-            content: attr(data-hover);
-            /* Set content to the value of data-hover attribute */
-            transform-origin: 50% 0;
-            /* Set transform origin for the rotation */
-        }
-
-        .book-now a:hover span,
-        .section-btn a:focus span {
-            transform: rotateX(90deg) translateY(-22px);
-            /* Flip the text on hover */
-        }
-
-
-        .book-now a::after {
-            width: 0 !important;
-            /* Remove the underline */
-        }
-
-        .book-now li {
-            display: flex;
-            justify-content: center;
-        }
-
-        /* navbar styles */
-        body {
-            margin: 0;
-            font-family: Arial, sans-serif;
-        }
-
-        /* .nav-container {
-            height: auto;
-            width: 100%;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 9999;
-            background-color: #0a1e3f;
-            padding: 1rem 1rem;
-        }
-
-        .newNav {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-        }
-
-        .logo-container {
-            display: flex;
-            align-items: center;
-        }
-
-        .sitelogo {
-            width: 40px;
-            height: auto;
-        }
-
-        .nav__logo {
-            color: #ffffff;
-            text-decoration: none;
-            font-size: 24px;
-            margin-left: 10px;
-        }
-
-        .navLinks {
-            display: flex;
-            list-style: none;
-            padding: 0;
-            gap: 1.2rem;
-            white-space: nowrap;
-        }
-
-        .navLinks .link {
-            position: relative;
-        }
-
-        .navLinks a {
-            color: #ffffff;
-            text-decoration: none;
-            padding: 10px 15px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .navLinks a:hover {
-            background-color: rgba(238, 130, 238, 0.8);
-            color: #ff6347;
-        }
-
-        .active {
-            color: red !important;
-        }
-
-        .dropdown-menu {
-            display: none;
-            position: absolute;
-            top: 100%;
-            background-color: #1f2532;
-            z-index: 999;
-            padding: 10px;
-        }
-
-        .dropdown:hover .dropdown-menu {
-            display: block;
-        }
-
-        .btn {
-            background-color: #ff6347;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            cursor: pointer;
-            border-radius: 40px;
-            transition: background-color 0.3s ease;
-        }
-
-        .btn:hover {
-            background-color: #ff4500;
-        }
-
-        .hamburger {
-            display: none;
-        }
-
-        .line {
-            height: 3px;
-            width: 25px;
-            background-color: white;
-            margin: 4px 0;
-        }
-
-        @media (max-width: 768px) {
-            .navLinks {
-                display: none;
-                flex-direction: column;
-                width: 100%;
-                position: absolute;
-                top: 60px;
-                left: 0;
-                background-color: #0a1e3f;
-            }
-
-            .navLinks.active {
-                display: flex;
-            }
-
-            .hamburger {
-                display: block;
-            }
-        } */
-    </style>
-
 </head>
 
 <body>