diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e8f214b..1f2f46b 100644
--- a/index.html
+++ b/index.html
@@ -6,10 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>e-commerce website</title>
 
-    <!-- font-awesome cdn link -->
     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
 
-    <!-- custom css file link -->
     <link rel="stylesheet" href="style.css">
 
 </head>
@@ -435,7 +433,25 @@ <h4>Install App</h4>
         </div>
     </footer>
 
-    <!-- javascript script file link -->
+    <div id="chatbot-container">
+        <div id="chat-button">
+            <i class="far fa-comments"></i>
+        </div>
+        <div id="chat-window">
+            <div id="chat-header">
+                <h4>Live Support</h4>
+                <i id="chat-close" class="far fa-times"></i>
+            </div>
+            <div id="chat-body">
+                <p class="chat-message bot">Welcome! How can I help you find the perfect product today?</p>
+                <!-- <p class="chat-message bot">This is a static UI feature for practice!</p> -->
+            </div>
+            <div id="chat-input-area">
+                <input type="text" placeholder="Type a message...">
+                <button><i class="fas fa-paper-plane"></i></button>
+            </div>
+        </div>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 48c4145..13526e3 100644
--- a/script.js
+++ b/script.js
@@ -12,4 +12,111 @@ if (close) {
     close.addEventListener('click', () => {
         nav.classList.remove('active');
     })
+}
+
+// ====================================
+// CHATBOT JS FUNCTIONALITY
+// ====================================
+const chatButton = document.getElementById('chat-button');
+const chatWindow = document.getElementById('chat-window');
+const chatClose = document.getElementById('chat-close');
+const chatBody = document.getElementById('chat-body');
+const chatInput = document.querySelector('#chat-input-area input');
+const sendButton = document.querySelector('#chat-input-area button');
+
+// --- Hardcoded Knowledge Base ---
+const responses = {
+    // Basic Greetings/Info
+    'hello': "Hi there! I'm your virtual assistant. How can I help you shop today?",
+    'hi': "Hi there! I'm your virtual assistant. How can I help you shop today?",
+    'help': "I can answer questions about shipping, returns, and sales. Try asking about 'shipping' or 'return policy'.",
+    
+    // Core E-commerce Questions
+    'how many days will it take for shipping': "Standard shipping within the country typically takes 3-5 business days. Express options are available at checkout!",
+    'delivery': "Standard shipping within the country typically takes 3-5 business days. Express options are available at checkout!",
+    'return': "Our return policy allows for returns within 30 days of purchase, provided the items are unworn and have tags attached. Please visit the 'About' page for full details.",
+    'policy': "Our return policy allows for returns within 30 days of purchase, provided the items are unworn and have tags attached. Please visit the 'About' page for full details.",
+    'sale': "Yes! We have a Super Value Deal offering up to 70% off on T-shirts & Accessories. Check our homepage banners!",
+    'coupon': "You can apply coupon codes during the checkout process on the Cart page to save money.",
+    
+    // NEW QUESTION: How Shopping Works
+    'shopping': "Shopping is easy! Here are the steps: 1. **Browse** the Shop page. 2. **Click** on a product to view details. 3. **Select** size/quantity and click 'Add to Cart'. 4. **Review** your items on the Cart page. 5. **Proceed** to checkout to enter payment and shipping info. Happy shopping!",
+    
+    // Default Fallback
+    'default': "Sorry, I didn't quite catch that. I can help with topics like 'shipping', 'returns', or 'sales'."
+};
+
+function getBotResponse(userInput) {
+    // Simple preprocessing: lowercase and remove leading/trailing spaces
+    const processedInput = userInput.toLowerCase().trim();
+
+    // Check for keywords in the predefined list
+    for (const key in responses) {
+        if (processedInput.includes(key)) {
+            return responses[key];
+        }
+    }
+    // Return the default response if no keyword is found
+    return responses['default'];
+}
+
+function appendMessage(sender, text) {
+    const messageElement = document.createElement('p');
+    messageElement.classList.add('chat-message', sender);
+    messageElement.textContent = text;
+    chatBody.appendChild(messageElement);
+
+    // Scroll to the bottom of the chat body
+    chatBody.scrollTop = chatBody.scrollHeight;
+}
+
+function handleUserInput() {
+    const userInput = chatInput.value;
+    if (userInput === '') return; // Don't send empty messages
+
+    // 1. Append user message
+    appendMessage('user', userInput);
+
+    // 2. Get and append bot response after a short delay
+    const botText = getBotResponse(userInput);
+
+    setTimeout(() => {
+        appendMessage('bot', botText);
+    }, 500); // 0.5 second delay for a realistic feel
+
+    // 3. Clear input
+    chatInput.value = '';
+}
+
+// Event Listeners for Chatbot Input
+if (sendButton) {
+    sendButton.addEventListener('click', handleUserInput);
+}
+
+if (chatInput) {
+    chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            handleUserInput();
+        }
+    });
+}
+
+// Toggle logic (remains the same)
+if (chatButton && chatWindow) {
+    chatButton.addEventListener('click', () => {
+        chatWindow.classList.toggle('active');
+        chatButton.style.display = chatWindow.classList.contains('active') ? 'none' : 'flex';
+
+        // Set focus to the input when opening the chat
+        if (chatWindow.classList.contains('active')) {
+             chatInput.focus();
+        }
+    });
+}
+
+if (chatClose && chatWindow) {
+    chatClose.addEventListener('click', () => {
+        chatWindow.classList.remove('active');
+        chatButton.style.display = 'flex';
+    });
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 277fa1c..3aad49f 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,23 @@
 @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
+/* ==================================== */
+/* NEW COLOR PALETTE AND BASE STYLES */
+/* ==================================== */
+:root {
+    /* Brand Primary: A dark teal/petrol for a premium feel */
+    --color-primary: #042D3D; 
+    /* Brand Accent: A vibrant, inviting green */
+    --color-accent: #059D89; 
+    /* Backgrounds: Soft, warm white */
+    --color-bg-light: #F7F7F7;
+    /* Text/Base: Dark gray for readability */
+    --color-text-dark: #333333;
+    /* Secondary/Muted: Light gray for borders and dividers */
+    --color-border: #E8E8E8;
+    /* Sale/Alerts: Standard red */
+    --color-sale: #E94E4E;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -10,18 +28,18 @@
 h1 {
     font-size: 50px;
     line-height: 64px;
-    color: #222;
+    color: var(--color-text-dark); /* Updated */
 }
 
 h2 {
     font-size: 46px;
     line-height: 54px;
-    color: #222;
+    color: var(--color-text-dark); /* Updated */
 }
 
 h4 {
     font-size: 20px;
-    color: #222;
+    color: var(--color-text-dark); /* Updated */
 }
 
 h6 {
@@ -70,6 +88,7 @@ button.white {
 
 body {
     width: 100%;
+    background-color: var(--color-bg-light); /* Added background color variable */
 }
 
 /* Header Start */
@@ -79,8 +98,8 @@ body {
     align-items: center;
     justify-content: space-between;
     padding: 20px 80px;
-    background: #E3E6F3;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
+    background: var(--color-bg-light); /* Updated */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Updated subtle shadow */
     z-index: 999;
     position: sticky;
     top: 0;
@@ -108,7 +127,7 @@ body {
 
 #navbar li a:hover,
 #navbar li a.active {
-    color: #088178;
+    color: var(--color-accent); /* Updated */
 }
 
 #navbar li a:hover::after,
@@ -116,7 +135,7 @@ body {
     content: "";
     width: 30%;
     height: 2px;
-    background: #088178;
+    background: var(--color-accent); /* Updated */
     position: absolute;
     bottom: -4px;
     left: 20px;
@@ -151,21 +170,29 @@ body {
 }
 
 #hero h1 {
-    color: #088178;
+    color: var(--color-accent); /* Updated */
 }
 
 #hero button {
-    background-image: url(images/button.png);
-    background-color: transparent;
-    color: #088178;
+    /* Removed background image for cleaner look */
+    background-image: none;
+    background-color: var(--color-accent); /* Updated */
+    color: #fff; /* Updated */
     border: 0;
-    padding: 14px 80px 14px 65px;
+    padding: 14px 40px; /* Adjusted padding */
     background-repeat: no-repeat;
     cursor: pointer;
-    font-weight: 700;
+    font-weight: 600;
     font-size: 15px;
+    border-radius: 4px;
+    transition: 0.3s;
 }
 
+#hero button:hover {
+    background-color: #037c6b; /* Darker hover for accent */
+}
+
+
 #feature {
     display: flex;
     align-items: center;
@@ -272,14 +299,14 @@ body {
 
 #product1 .pro .des i {
     font-size: 12px;
-    color: rgb(243, 181, 25);
+    color: #FFC107; /* Updated star color */
 }
 
 #product1 .pro .des h4 {
     padding-top: 7px;
     font-size: 15px;
     font-weight: 700;
-    color: #088178;
+    color: var(--color-accent); /* Updated price color */
 }
 
 #product1 .pro .cart {
@@ -289,8 +316,8 @@ body {
     border-radius: 50px;
     background-color: #e8f6ea;
     font-weight: 500;
-    color: #088178;
-    border: 1px solid #cce7d0;
+    color: var(--color-accent); /* Updated cart icon color */
+    border: 1px solid var(--color-accent); /* Updated cart border color */
     position: absolute;
     bottom: 20px;
     right: 10px;
@@ -321,11 +348,11 @@ body {
 }
 
 #banner h2 span {
-    color: #ef3636;
+    color: var(--color-sale); /* Updated */
 }
 
 #banner button:hover {
-    background-color: #088178;
+    background-color: var(--color-accent); /* Updated */
     color: #fff;
 }
 
@@ -369,8 +396,8 @@ body {
 }
 
 #sm-banner .banner-box:hover button{
-    background-color: #088178;
-    border: 1px solid #088178;
+    background-color: var(--color-accent); /* Updated */
+    border: 1px solid var(--color-accent); /* Updated */
 }
 
 #sm-banner .banner-box:nth-child(2) {
@@ -414,7 +441,7 @@ body {
 }
 
 #banner3 h3 {
-    color: #ec544e;
+    color: var(--color-sale); /* Updated */
     font-weight: 800;
     font-size: 15px;
 }
@@ -427,7 +454,7 @@ body {
     background-image: url(images/banner/b14.png);
     background-repeat: no-repeat;
     background-position: 20% 30%;
-    background-color: #041e42;
+    background-color: var(--color-primary); /* Updated */
 }
 
 #newsletter h4 {
@@ -464,7 +491,7 @@ body {
 }
 
 #newsletter button {
-    background-color: #088178;
+    background-color: var(--color-accent); /* Updated */
     color: #fff;
     white-space: nowrap;
     border-top-left-radius: 0;
@@ -516,14 +543,14 @@ footer .follow i{
 }
 
 footer .install .row img{
-    border: 1px solid #088178;
+    border: 1px solid var(--color-accent); /* Updated */
     border-radius: 6px;
     margin: 10px 0 15px 0;
 }
 
 footer .follow i:hover,
 footer a:hover {
-    color: #088178;
+    color: var(--color-accent); /* Updated */
 }
 
 footer .copyright {
@@ -556,7 +583,7 @@ footer .copyright {
 
 #pagination a {
     text-decoration: none;
-    background-color: #088178;
+    background-color: var(--color-accent); /* Updated */
     padding: 15px 20px;
     border-radius: 4px;
     color: #fff;
@@ -618,7 +645,7 @@ footer .copyright {
 }
 
 #productdetails .single-pro-details button {
-    background-color: #088178;
+    background-color: var(--color-accent); /* Updated */
     color: #fff;
 }
 
@@ -683,11 +710,11 @@ footer .copyright {
 }
 
 #blog .blog-details a:hover {
-    color: #088178;
+    color: var(--color-accent); /* Updated */
 }
 
 #blog .blog-details a:hover::after {
-    background-color: #088178;
+    background-color: var(--color-accent); /* Updated */
 }
 
 #blog .blog-box h1 {
@@ -818,7 +845,7 @@ footer .copyright {
 }
 
 #form-details form button {
-    background-color: #088178;
+    background-color: var(--color-accent); /* Updated */
     color: #fff;
 }
 
@@ -939,7 +966,7 @@ footer .copyright {
 
 #cart-add .coupon button,
 #cart-add .subtotal button {
-    background-color: #088178;
+    background-color: var(--color-accent); /* Updated */
     color: #fff;
     padding: 12px 20px;
 }
@@ -964,6 +991,136 @@ footer .copyright {
     font-size: 13px;
 }
 
+/* ==================================== */
+/* CHATBOT UI STYLES */
+/* ==================================== */
+
+#chatbot-container {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 1000;
+}
+
+/* Chat Button (The floating circle) */
+#chat-button {
+    width: 60px;
+    height: 60px;
+    background-color: var(--color-accent);
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+}
+
+#chat-button:hover {
+    transform: scale(1.05);
+}
+
+/* Chat Window */
+#chat-window {
+    width: 320px;
+    height: 400px;
+    background-color: var(--color-bg-light);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    /* Initially hidden: JavaScript will toggle this */
+    display: none; 
+    flex-direction: column;
+    overflow: hidden;
+}
+
+#chat-window.active {
+    display: flex;
+}
+
+#chat-header {
+    background-color: var(--color-primary);
+    color: #fff;
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#chat-header h4 {
+    color: #fff;
+    font-size: 16px;
+    margin: 0;
+}
+
+#chat-close {
+    cursor: pointer;
+    font-size: 18px;
+    transition: color 0.2s;
+}
+#chat-close:hover {
+    color: var(--color-sale);
+}
+
+#chat-body {
+    flex-grow: 1;
+    padding: 15px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-message {
+    padding: 8px 12px;
+    border-radius: 15px;
+    max-width: 85%;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 1.4;
+    align-self: flex-start;
+}
+
+.chat-message.bot {
+    background-color: #E3F2FD; /* Light blue for bot */
+    color: var(--color-text-dark);
+}
+
+/* Chat Input */
+#chat-input-area {
+    display: flex;
+    border-top: 1px solid var(--color-border);
+    padding: 10px;
+    background-color: #fff;
+}
+
+#chat-input-area input {
+    flex-grow: 1;
+    padding: 8px;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    margin-right: 10px;
+    font-size: 14px;
+}
+
+#chat-input-area button {
+    background-color: var(--color-accent);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 0 10px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+#chat-input-area button:hover {
+    background-color: #037c6b;
+}
+
+
 /* Media Query */
 
 @media (max-width: 799px) {