diff --git a/components.css b/components.css
index 721f324..354fe25 100644
--- a/components.css
+++ b/components.css
@@ -1,249 +1,117 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
-* {
+html, body {
+	height: 100%;
 	margin: 0;
 	padding: 0;
-	box-sizing: border-box;
-	font-family: Arial;
 }
 
 body {
-	/* background-image: url(bg.jpg);` */
-	background-color: #f0f0f0;
-	/* background-size: cover; */
-	/* height: 100vh; */
-	/* background-position: center; */
-	padding: 0 3%;
-	font-family: "Lato", sans-serif;
-}
-
-header {
-	width: 100%;
-	height: 100px;
+	font-family: 'Montserrat', sans-serif;
+	background: linear-gradient(to right, #6a11cb, #2575fc);
 	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	position: fixed;
-	z-index: 99;
-	box-shadow: 0 0 10px #0000;
-	background: rgba(0, 0, 0, 0.5);
+	flex-direction: column;
 }
 
-#chk1 {
-	display: none;
+.navbar {
+	background: linear-gradient(to right, #ff7e5f, #fa872f);
+	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+	height: 70px; 
+	padding: 0 20px; 
+	display: flex;
+	align-items: center; 
 }
 
-i {
-	color: #fff;
-	cursor: pointer;
+
+.navbar-brand {
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: white !important;
 }
 
-header .logo {
-	flex: 1;
-	color: #fff;
-	margin-left: 50px;
-	text-transform: uppercase;
-	font-size: 15px;
+.nav-link {
+	color: white !important;
+	transition: color 0.3s;
+	margin: 10px;
 }
 
-header .search-box {
-	flex: 1;
-	position: relative;
-}
-
-.search-box input {
-	width: 100%;
-	height: 30px;
-	border: none;
-	outline: none;
-	background: #f2f2f2;
-	border-radius: 30px;
-	color: gray;
-	font-size: 14px;
+.nav-link:hover {
+	color: #ffe8e8 !important;
+}
+
+footer {
+	background-color: #343a40;
+	color: white;
+	padding: 20px 0;
 	text-align: center;
-	padding-left: 5px;
-	padding-right: 40px;
-}
-
-.search-box button {
-	cursor: pointer;
-	width: 30px;
-	height: 30px;
-	border-radius: 50%;
-	border: none;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	transform: scale(0.9);
-	background: green;
-}
-
-header .menu {
-	font-size: 2.5em;
-	display: none;
-}
-
-.wrapper{
-    position: relative;
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    gap: 24px;
-    flex-wrap: wrap;
-}
-
-.card{
-    position: relative;
-    width: 325px;
-    height: 450px;
-    background: #000;
-    border-radius: 18px;
-    overflow: hidden;
-    box-shadow: 0 5px 10px rgba(0,0,0,.2);
-}
-
-.poster{
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
-.poster a img{
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	transition: .3s;
-}
-
-.poster::before{
-    content: '';
-    position: absolute;
-    bottom: -45%;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.details{
-    position: absolute;
-    bottom: -100%;
-    left: 0;
-    width: 100%;
-    height: auto;
-    padding: 1.5em 1.5em 2em;
-    background: #000a;
-    backdrop-filter: blur(16px) saturate(120%);
-    transition: .3s;
-    color: #fff;
-    z-index: 2;
-}
-
-.card:hover .details{
-    bottom: 0;
-}
-
-.details h1,
-.details h2{
-    font-weight: 700;
-}
-
-.details h1{
-    font-size: 1.5em;
-    margin-bottom: 5px;
-}
-
-.details h2{
-    font-weight: 400;
-    font-size: 1em;
-    margin-left: 10px;
-    opacity: .6;
-}
-
-@media (max-width: 1000px) {
-	.search-box button {
-		position: absolute;
-	}
-	header ul {
-		position: fixed;
-		top: 100px;
-		right: -100%;
-		background: rgba(0, 0, 0, 0.5);
-		height: calc(100vh - 100px);
-		width: 50%;
-		flex-direction: column;
-		align-items: center;
-		transition: right 0.5s linear;
-	}
-
-    .card{
-        width: 250px;
-        height: 375px;
-    }
-	header .menu {
-		display: block;
-		width: 100px;
-		text-align: center;
-	}
-
-	#chk1:checked ~ ul {
-		right: 0;
-	}
-}
-
-@media (max-width: 600px) {
-	header .logo {
-		font-size: 10px;
-		margin-left: 8px;
-	}
-
-	header ul {
-		width: 100%;
-		flex-wrap: wrap;
-		justify-content: center;
-	}
-
-    .card{
-        height: 325px;
-        width: 225px;
-    }
+	margin-top: auto; 
 }
-.navbar-brand {
-	color: #2a2a2a;
-	font-size: 160%;
-	font-weight: 600;
-	width: 60%;
+
+.card img {
+	height: 200px; /* Set a fixed height */
+	object-fit: cover; /* This will maintain the aspect ratio and crop the image if necessary */
+	width: 100%; /* Ensure the image fills the width of the card */
 }
-.nav-item {
-	margin: 0 20px;
+
+footer h3 {
+	font-size: 1.5rem;
 }
 
-.row {
-	width: 100%;
+footer ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
 }
-@media only screen and (max-width: 600px) {
-	.navbar-brand {
-		width: 70%;
-	}
+
+footer ul li {
+	margin: 10px 0;
 }
-@media only screen and (max-width: 450px) {
-	.navbar-brand {
-		font-size: 140%;
-	}
+
+footer ul li a {
+	color: white;
+	text-decoration: none;
+	transition: color 0.3s;
 }
 
-/* footer */
+footer ul li a:hover {
+	color: #feb47b;
+}
 
-footer{
-	margin-top: 5%;
+#component-items {
+	padding: 40px 0;
+	flex: 1;
 }
 
-/* cards css */
+.card {
+	margin: 15px 0;
+	border-radius: 20px;
+	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+	transition: transform 0.3s;
+}
 
-/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */
+.card img {
+	border-radius: 20px 20px 0 0;
+}
 
+.card:hover {
+	transform: translateY(-10px);
+}
+
+.card-body {
+	padding: 20px;
+}
+
+.card-title {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.card-text {
+	font-size: 1rem;
+}
 
+.btn-custom {
+	background-color: #ff7e5f;
+	color: white;
+	border-radius: 50px;
+	padding: 10px 25px;
+	transition: background-color 0.3s;
+}
\ No newline at end of file
diff --git a/components.html b/components.html
index b8bd0ce..c6d2578 100644
--- a/components.html
+++ b/components.html
@@ -4,22 +4,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <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.4.2/css/all.min.css"
-        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="components.css">
-    <link rel="stylesheet" href="style.css">
+    <title>Frontend Treasure - Components</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="components.css" />
 </head>
 
 <body>
-    <nav class="navbar navbar-expand-lg bg-none">
+    <nav class="navbar navbar-expand-lg">
         <div class="container-fluid">
             <a class="navbar-brand" href="index.html">Frontend Treasure</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -29,62 +24,51 @@
                     </li>
                 </ul>
                 <form class="d-flex" role="search">
-                    <input class="form-control me-3" type="search" placeholder="Search for the components"
-                        aria-label="Search" id="searchInput" />
-                    <button class="btn btn-outline-success" type="button" onclick="searchComponents()">
-                        Search
-                    </button>
+                    <input class="form-control me-2" type="search" placeholder="Search for the components" aria-label="Search" id="searchInput" />
+                    <button class="btn btn-outline-light" type="button" onclick="searchComponents()">Search</button>
                 </form>
             </div>
         </div>
     </nav>
 
-    <div class="wrapper" id="component-items">
+    <div class="container" id="component-items">
+      <div class="row">
+          <!-- Cards will be appended here by JS -->
+      </div>
+  </div>
+  
 
-        <!-- components will be fetched here -->
-
-    </div>
     <footer>
-        <div class=" bg-black " >
-          <div class="">
-            <div class="pt-2 ps-3 pe-3 d-md-flex text-center justify-content-md-between align-items-center">
-              <h3 class="text-white">Follow Us</h3>
-              <ul class="list-inline text-dark mt-1 ">
-                <li class="list-inline-item m-2">
-                  <a href="https://www.instagram.com/csi_ddu/" class="text-white text-decoration-none">
-                    <i class="fab fa-instagram"></i> Instagram
-                  </a>
+        <div class="container">
+            <h3>Follow Us</h3>
+            <ul class="list-unstyled d-flex justify-content-center">
+                <li class="mx-3">
+                    <a href="https://www.instagram.com/csi_ddu/" class="text-white text-decoration-none">
+                        <i class="fab fa-instagram"></i> Instagram
+                    </a>
                 </li>
-                <li class="list-inline-item m-2">
-                  <a
-                    href="https://www.linkedin.com/company/computer-society-of-india-ddu/mycompany/"
-                    class="text-white  text-decoration-none"
-                  >
-                    <i class="fab fa-linkedin "></i> LinkedIn
-                  </a>
+                <li class="mx-3">
+                    <a href="https://www.linkedin.com/company/computer-society-of-india-ddu/mycompany/" class="text-white text-decoration-none">
+                        <i class="fab fa-linkedin"></i> LinkedIn
+                    </a>
                 </li>
-                <li class="list-inline-item m-2">
-                  <a href="https://medium.com/@csi_ddu" class="text-white  text-decoration-none">
-                    <i class="fab fa-medium"></i> Medium
-                  </a>
+                <li class="mx-3">
+                    <a href="https://medium.com/@csi_ddu" class="text-white text-decoration-none">
+                        <i class="fab fa-medium"></i> Medium
+                    </a>
                 </li>
-                <li class="list-inline-item m-2">
-                  <a href="https://discord.gg/2aUM8ArA" class="text-white  text-decoration-none">
-                    <i class="fab fa-discord"></i> Discord
-                  </a>
+                <li class="mx-3">
+                    <a href="https://discord.gg/2aUM8ArA" class="text-white text-decoration-none">
+                        <i class="fab fa-discord"></i> Discord
+                    </a>
                 </li>
-              </ul>
-            </div>
-          </div>
+            </ul>
         </div>
-      </footer>
-      <!-- JS Section -->
-      <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
-        crossorigin="anonymous"></script>
+    </footer>
 
+    <!-- JS Section -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
     <script src="script.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 26ad69e..5ac841c 100644
--- a/index.html
+++ b/index.html
@@ -4,29 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Frontend Treasure</title>
-    <!-- CSS Section -->
-    <!-- bootstrap CSS -->
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
-      crossorigin="anonymous"
-    />
-    
+    <!-- Google Fonts -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" />
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"/>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous"/>
+    <!-- Custom CSS -->
     <link rel="stylesheet" href="style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
-      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-
-   
   </head>
+
   <body>
     <!-- Navbar Section -->
-    <nav class="navbar navbar-expand-lg bg-none">
+    <nav class="navbar navbar-expand-lg">
       <div class="container-fluid">
         <a class="navbar-brand" href="index.html">Frontend Treasure</a>
         <button
@@ -49,92 +39,70 @@
               <a class="nav-link" href="#">Contact</a>
             </li>
           </ul>
-          <form class="d-flex" role="search">
+          <form class="d-flex">
             <input
-              class="form-control me-3"
+              class="form-control me-2"
               type="search"
-              placeholder="Search for the components"
+              placeholder="Search..."
               aria-label="Search"
             />
-            <button class="btn btn-outline-success" type="submit">
-              Search
+            <button class="btn btn-outline-light" type="submit">
+              <i class="fas fa-search"></i>
             </button>
           </form>
         </div>
       </div>
     </nav>
 
-    <section id="hero">
-      <div class="row">
-        <div class="col-md-6" id="hero-left">
-          <img src="images/wb.png" id="hero-img" />
-        </div>
-        <div class="col-md-6" id="hero-right">
-          <p id="hero-head">Code your Dreams!</p>
-          <p id="hero-text">
-            Frontend Treasure: Simplify web development. Copy, paste, and create
-            stunning websites effortlessly. Explore, customize, and bring your
-            ideas to life.
-          </p>
-          <form class="d-flex m-1" role="search">
-            <input
-              class="form-control me-2"
-              type="search"
-              placeholder="Search by name, component & more... "
-            />
-            <button class="btn btn-outline-success" type="submit">
-              Search
-            </button>
-          </form>
+    <!-- Main content -->
+    <div id="main-content">
+      <!-- Hero Section -->
+      <section id="hero">
+        <div class="container">
+          <div class="row align-items-center">
+            <div class="col-md-6">
+              <h1 id="hero-head">Code Your Dreams!</h1>
+              <p id="hero-text">
+                Frontend Treasure: Simplify web development. Copy, paste, and create stunning websites effortlessly. Explore, customize, and bring your ideas to life. 
+              </p>
+              <button class="btn btn-custom" onclick="redirectToComponents()">Get Started</button>
+            </div>
+            <div class="col-md-6">
+              <img src="images/wb.png" id="hero-img" alt="Hero Image" />
+            </div>
+          </div>
         </div>
-      </div>
-    </section>
-  
-    <!-- <a href="http://192.168.137.1:3000">ok</a> -->
+      </section>
+    </div>
 
+    <!-- Footer Section -->
     <footer>
-      <div class=" bg-black">
-        <div class="">
-          <div class="pt-2 ps-3 pe-3 d-md-flex text-center justify-content-md-between align-items-center">
-            <h3 class="text-white">Follow Us</h3>
-            <ul class="list-inline text-dark mt-1 ">
-              <li class="list-inline-item m-2">
-                <a href="https://www.instagram.com/csi_ddu/" class="text-white text-decoration-none">
-                  <i class="fab fa-instagram"></i> Instagram
-                </a>
-              </li>
-              <li class="list-inline-item m-2">
-                <a
-                  href="https://www.linkedin.com/company/computer-society-of-india-ddu/mycompany/"
-                  class="text-white  text-decoration-none"
-                >
-                  <i class="fab fa-linkedin "></i> LinkedIn
-                </a>
-              </li>
-              <li class="list-inline-item m-2">
-                <a href="https://medium.com/@csi_ddu" class="text-white  text-decoration-none">
-                  <i class="fab fa-medium"></i> Medium
-                </a>
-              </li>
-              <li class="list-inline-item m-2">
-                <a href="https://discord.gg/2aUM8ArA" class="text-white  text-decoration-none">
-                  <i class="fab fa-discord"></i> Discord
-                </a>
-              </li>
-            </ul>
-          </div>
+        <div class="container">
+          <h3>Follow Us</h3>
+          <ul class="list-unstyled d-flex justify-content-center">
+            <li class="mx-3">
+              <a href="https://www.instagram.com/csi_ddu/"><i class="fab fa-instagram"></i> Instagram</a>
+            </li>
+            <li class="mx-3">
+              <a href="https://www.linkedin.com/company/computer-society-of-india-ddu/mycompany/"><i class="fab fa-linkedin"></i> LinkedIn</a>
+            </li>
+            <li class="mx-3">
+              <a href="https://medium.com/@csi_ddu"><i class="fab fa-medium"></i> Medium</a>
+            </li>
+            <li class="mx-3">
+              <a href="https://discord.gg/2aUM8ArA"><i class="fab fa-discord"></i> Discord</a>
+            </li>
+          </ul>
         </div>
-      </div>
-    </footer>
-    <!-- JS Section -->
-    <!-- Bootstrap JS -->
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
-      crossorigin="anonymous"
-    ></script>
+      </footer>
+      
 
+    <!-- JS Section -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+    <script>
+      redirectToComponents = () => {
+        window.location.href = "components.html";
+      };
+    </script>
   </body>
 </html>
-
-<!-- "Unlock a World of Frontend Magic! -->
diff --git a/script.js b/script.js
index 82c2e29..1bf2b9e 100644
--- a/script.js
+++ b/script.js
@@ -1,40 +1,53 @@
 document.addEventListener("DOMContentLoaded", () => {
-  const parentDiv = document.getElementById("component-items");
+    const parentDiv = document.getElementById("component-items");
+    const rowDiv = document.createElement("div");
+    rowDiv.className = "row"; // Create a new row for cards
 
-  fetch("./components.json")
-    .then((response) => response.json())
-    .then((data) => {
-      data.forEach((component) => {
-        const newElement = document.createElement("div");
-        newElement.innerHTML = ` <div class="card">
-                <div class="poster"><a href="components/${component.url}"><img
-                            src="${component.imgUrl}" alt="${component.name}" /></a></div>
-                <div class="details">
-                    <h1>${component.name}</h1>
-                    <h2>By: ${component.authorName}</h2>
-                </div>
-            </div>`;
-        parentDiv.appendChild(newElement);
-      });
-    });
+    fetch("./components.json")
+        .then((response) => response.json())
+        .then((data) => {
+            data.forEach((component, index) => {
+                const newElement = document.createElement("div");
+                newElement.className = "col-md-4"; // Add the column class for Bootstrap
+                newElement.innerHTML = `
+                    <div class="card mb-4"> <!-- Added margin-bottom for spacing -->
+                        <img src="${component.imgUrl}" class="card-img-top" alt="${component.name}" />
+                        <div class="card-body">
+                            <h5 class="card-title">${component.name}</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">By: ${component.authorName}</h6>
+                            <a href="components/${component.url}" class="btn btn-custom">View Details</a>
+                        </div>
+                    </div>`;
+
+                rowDiv.appendChild(newElement);
+
+                // After every 3 cards, append the row to the parent and create a new row
+                if ((index + 1) % 3 === 0) {
+                    parentDiv.appendChild(rowDiv);
+                    rowDiv = document.createElement("div");
+                    rowDiv.className = "row"; // Reset row for next set of cards
+                }
+            });
+
+            // Append any remaining cards that don't fill a row
+            if (rowDiv.childElementCount > 0) {
+                parentDiv.appendChild(rowDiv);
+            }
+        });
 });
 
 function searchComponents() {
-  const searchInput = document
-    .getElementById("searchInput")
-    .value.toLowerCase();
-  const cards = document.querySelectorAll(".card");
+    const searchInput = document.getElementById("searchInput").value.toLowerCase();
+    const cards = document.querySelectorAll(".card");
 
-  cards.forEach((card) => {
-    const title = card.querySelector(".details h1").textContent.toLowerCase();
-    const author = card.querySelector(".details h2").textContent.toLowerCase();
-    console.log(title, author);
+    cards.forEach((card) => {
+        const title = card.querySelector(".card-title").textContent.toLowerCase();
+        const author = card.querySelector(".card-subtitle").textContent.toLowerCase();
 
-    if (title.includes(searchInput) || author.includes(searchInput)) {
-      card.style.display = "block";
-      foundResults = true;
-    } else {
-      card.style.display = "none";
-    }
-  });
+        if (title.includes(searchInput) || author.includes(searchInput)) {
+            card.style.display = "block";
+        } else {
+            card.style.display = "none";
+        }
+    });
 }
diff --git a/style.css b/style.css
index a2ab2d0..f6860c7 100644
--- a/style.css
+++ b/style.css
@@ -1,190 +1,111 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
-* {
+html, body {
+  height: 100%;
   margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: Arial;
+  font-family: 'Montserrat', sans-serif;
+  display: flex;
+  flex-direction: column;
+  background-color: #f8f9fa;
+}
+
+
+#main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.navbar {
+	background: linear-gradient(to right, #ff7e5f, #fa872f);
+	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+	height: 70px; 
+	padding: 0 20px; 
+	display: flex;
+	align-items: center; 
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: white !important;
+}
+
+.nav-link {
+  color: white !important;
+  transition: color 0.3s;
 }
 
-body {
-  /* background-image: url(bg.jpg);` */
-  background-color: #f0f0f0;
-  /* background-size: cover; */
-  /* height: 100vh; */
-  /* background-position: center; */
-  padding: 0 3%;
-  font-family: "Lato", sans-serif;
+.nav-link:hover {
+  color: #ffe8e8 !important;
 }
 
-header {
-  width: 100%;
-  height: 100px;
+#hero {
+  background: linear-gradient(to right, #6a11cb, #2575fc);
+  color: white;
+  padding: 40px 0; /* Reduced padding */
+  flex-grow: 1; 
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  position: fixed;
-  z-index: 99;
-  box-shadow: 0 0 10px #0000;
-  background: rgba(0, 0, 0, 0.5);
 }
 
-#chk1 {
-  display: none;
+#hero-head {
+  font-size: 2.5rem;
+  font-weight: 700;
 }
 
-i {
-  color: #fff;
-  cursor: pointer;
+#hero-text {
+  font-size: 1.1rem;
+  margin: 20px 0;
 }
 
-header .logo {
-  flex: 1;
-  color: #fff;
-  margin-left: 50px;
-  text-transform: uppercase;
-  font-size: 15px;
+#hero-img {
+  max-width: 100%;
+  animation: float 2s ease-in-out infinite;
 }
 
-header .search-box {
-  flex: 1;
-  position: relative;
-}
-
-.search-box input {
-  width: 100%;
-  height: 30px;
-  border: none;
-  outline: none;
-  background: #f2f2f2;
-  border-radius: 30px;
-  color: gray;
-  font-size: 14px;
-  text-align: center;
-  padding-left: 5px;
-  padding-right: 40px;
-}
-
-.search-box button {
-  cursor: pointer;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  border: none;
-  position: absolute;
-  top: 0;
-  right: 5px;
-  transform: scale(0.9);
-  background: green;
-}
-
-header .menu {
-  font-size: 2.5em;
-  display: none;
-}
-
-@media (max-width: 1000px) {
-  .search-box button {
-    position: absolute;
-  }
-
-  header ul {
-    position: fixed;
-    top: 100px;
-    right: -100%;
-    background: rgba(0, 0, 0, 0.5);
-    height: calc(100vh - 100px);
-    width: 50%;
-    flex-direction: column;
-    align-items: center;
-    transition: right 0.5s linear;
-  }
-
-  header .menu {
-    display: block;
-    width: 100px;
-    text-align: center;
-  }
-
-  #chk1:checked ~ ul {
-    right: 0;
-  }
-}
-
-@media (max-width: 600px) {
-  header .logo {
-    font-size: 10px;
-    margin-left: 8px;
-  }
-
-  header ul {
-    width: 100%;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
 }
-.navbar-brand {
-  color: #2a2a2a;
-  font-size: 170%;
-  font-weight: 600;
-  width: 60%;
+
+.btn-custom {
+  background-color: #ff7e5f;
+  color: white;
+  border-radius: 50px;
+  padding: 10px 25px;
+  transition: background-color 0.3s;
 }
-.nav-item {
-  margin: 0 20px;
+
+.btn-custom:hover {
+  background-color: #feb47b;
 }
-#hero-img {
-  width: 100%;
+
+footer {
+  background-color: #343a40;
+  color: white;
+  padding: 20px 0;
+  text-align: center;
 }
-#hero-left {
-  padding: 7% 0;
+
+footer h3 {
+  font-size: 1.5rem;
 }
-#hero-head {
-  color: #4483e5;
-  font-size: 290%;
-  font-weight: bold;
+
+footer ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
-#hero-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
+
+footer ul li {
+  margin: 10px 0;
 }
-#hero-text {
-  color: #2a2a2a;
-  font-size: 21px;
-}
-#hero-right form {
-  margin-top: 5%;
-}
-#hero-right form input {
-  width: 350px;
-}
-.row {
-  width: 100%;
-}
-@media only screen and (max-width: 600px) {
-  .navbar-brand {
-    width: 70%;
-  }
-  #hero-right form input {
-    width: 250px;
-  }
-  #hero-head {
-    font-size: 200%;
-  }
-  #hero-left {
-    text-align: center;
-  }
-  #hero-text {
-    font-size: 16px;
-  }
-}
-@media only screen and (max-width: 450px) {
-  .navbar-brand {
-    font-size: 140%;
-  }
-}
-
-/* Footer */
-footer{
-  margin-bottom: 2%;
+
+footer ul li a {
+  color: white;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+footer ul li a:hover {
+  color: #feb47b;
 }
\ No newline at end of file