diff --git a/Animated Landing Page Website Template/index.html b/Animated Landing Page Website Template/index.html
index 780f39d..f47ca20 100644
--- a/Animated Landing Page Website Template/index.html	
+++ b/Animated Landing Page Website Template/index.html	
@@ -5,31 +5,207 @@
 	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, viewport-fit=cover">
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 
-	<!-- Page Title -->
-	<title>New Template — Slides 4.1 Template Generator</title>
+	<title>Enhanced Slides Template - Chatbot and UI Refresh</title>
 
-	<!-- Compressed Styles -->
 	<link href="css/slides.min.css?41331" rel="stylesheet" type="text/css">
 
-	<!-- Custom Styles -->
-	<!-- <link href="css/custom.css" rel="stylesheet" type="text/css"> -->
-
-	<!-- jQuery 3.3.1 -->
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-
-	<!-- Compressed Scripts -->
-	<script src="js/slides.min.js?41331" type="text/javascript"></script>
-
-	<!-- Custom Scripts -->
-	<!-- <script src="js/custom.js" type="text/javascript"></script> -->
-
-	<!-- Fonts and Material Icons -->
+	<link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700|Material+Icons" crossorigin>
 	<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700|Material+Icons"/>
+    
+    <style>
+        /* CSS Variables for New Design System */
+        :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;
+            /* Sale/Alerts: Standard red */
+            --color-sale: #E94E4E;
+        }
+
+        /* --- UI Refresh Overrides --- */
+        
+        /* Navigation Panel Top */
+        .panel.top {
+            background: var(--color-bg-light); 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); 
+        }
+
+        /* Nav Menu Links */
+        .panel.top .menu a:hover {
+            color: var(--color-accent) !important;
+        }
+
+        /* Buttons */
+        .button.blue.gradient {
+            background: var(--color-accent) !important;
+            border-color: var(--color-accent) !important;
+        }
+        .button.blue.gradient:hover {
+            background: #037c6b !important; /* Darker accent hover */
+        }
+
+        /* Pricing Card Accent */
+        .slide .wrap .grid-85 li:nth-child(2) .pad {
+             background: var(--color-accent) !important;
+             color: #fff !important;
+        }
+        .slide .wrap .grid-85 li:nth-child(2) .pad h3,
+        .slide .wrap .grid-85 li:nth-child(2) .pad .price {
+            color: #fff !important;
+        }
+        .slide .wrap .grid-85 li:nth-child(2) .pad .opacity-8 {
+            opacity: 0.9 !important;
+        }
+        .slide .wrap .grid-85 li:nth-child(2) .pad .currency {
+            color: #fff !important;
+        }
+        .slide .wrap .grid-85 li:nth-child(2) .pad .button.blue.gradient {
+            background: var(--color-primary) !important;
+            border-color: var(--color-primary) !important;
+        }
+        
+        /* --- CHATBOT UI STYLES --- */
+
+        #chatbot-container {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            z-index: 1000;
+        }
+
+        #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 {
+            width: 320px;
+            height: 400px;
+            background-color: var(--color-bg-light);
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            display: none; 
+            flex-direction: column;
+            overflow: hidden;
+            font-family: 'Roboto', sans-serif;
+        }
+
+        #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;
+            font-weight: 500;
+        }
+
+        #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;
+        }
+        
+        .chat-message.bot {
+            background-color: #E3F2FD; 
+            color: var(--color-text-dark);
+            align-self: flex-start;
+        }
+        
+        .chat-message.user {
+            background-color: var(--color-accent); 
+            color: #fff;
+            align-self: flex-end;
+        }
+
+        #chat-input-area {
+            display: flex;
+            border-top: 1px solid #ccc;
+            padding: 10px;
+            background-color: #fff;
+        }
+
+        #chat-input-area input {
+            flex-grow: 1;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-right: 10px;
+            font-size: 14px;
+            outline: none;
+        }
+
+        #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;
+        }
+
+    </style>
  
 </head>
 <body class="slides chain simplifiedMobile animated">
 		
-<!-- SVG Library -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
   
   <symbol id="logo" viewBox="0 0 106 31"><title>Slides Framework</title><path d="M17.413 14.04c-.56-5.84-5.6-7-8.52-7-4.6 0-8.6 2.92-8.6 7.52 0 3 2.4 4.88 5.28 5.8 4.24 1.64 5.88 1.84 5.88 3.36 0 1.08-1.2 1.72-2.32 1.72-.28 0-2.24 0-2.52-2.04h-6.6c.6 5.84 5.68 7.36 9.04 7.36 4.92 0 9.04-2.88 9.04-7.76 0-4.8-4-5.92-7.76-6.96-1.76-.52-3.4-1.2-3.4-2.2 0-.6.48-1.48 1.88-1.48 1.96 0 2.04 1.2 2.08 1.68h6.52zm2.222 15.96h6.64v-29.6h-6.64v29.6zm9.662-24.56h6.64v-5.04h-6.64v5.04zm0 24.56h6.64v-22.2h-6.64v22.2zm32.782-29.6h-6.64v9.28c-.72-.72-2.6-2.64-6.52-2.64-5.64 0-11 4.28-11 11.8 0 6.68 4.4 11.88 11.12 11.88 4.48 0 6.08-2.2 6.72-3.12v2.4h6.32v-29.6zm-17.52 18.4c0-2.56 1.8-5.56 5.64-5.56 1.56 0 2.96.56 3.96 1.56 1 .96 1.64 2.32 1.64 3.92.08 1.64-.52 3.08-1.56 4.12s-2.52 1.68-4.12 1.68c-3.12 0-5.56-2.28-5.56-5.68v-.04zm42.502 2.4c.52-4.08-.32-7.64-3.12-10.64-2.08-2.2-5-3.52-8.4-3.52-6.76 0-11.64 5.72-11.64 11.92 0 6.6 5.4 11.76 11.76 11.76 2.28 0 4.48-.68 6.32-2 1.88-1.28 3.44-3.2 4.52-5.68h-6.8c-.8 1.16-1.92 2.08-4.04 2.08-2.6 0-4.84-1.56-5.12-3.92h16.52zm-16.44-5.04c.16-1.04 1.52-3.52 4.96-3.52s4.8 2.48 4.96 3.52h-9.92zm34.502-2.12c-.56-5.84-5.6-7-8.52-7-4.6 0-8.6 2.92-8.6 7.52 0 3 2.4 4.88 5.28 5.8 4.24 1.64 5.88 1.84 5.88 3.36 0 1.08-1.2 1.72-2.32 1.72-.28 0-2.24 0-2.52-2.04h-6.6c.6 5.84 5.68 7.36 9.04 7.36 4.92 0 9.04-2.88 9.04-7.76 0-4.8-4-5.92-7.76-6.96-1.76-.52-3.4-1.2-3.4-2.2 0-.6.48-1.48 1.88-1.48 1.96 0 2.04 1.2 2.08 1.68h6.52z"/></symbol>
@@ -66,7 +242,6 @@
   
   <symbol id="sound-off" viewBox="0 0 18 18"><path d="M15.9,8l1.8-1.8c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-1.8,1.8l-1.8-1.8c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L13.1,8l-1.8,1.8 c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l1.8-1.8l1.8,1.8c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L15.9,8z M8.5,0.1C8.1-0.1,7.7,0,7.4,0.2L3.7,3H2C0.9,3,0,3.9,0,5v6c0,1.1,0.9,2,2,2h1.7l3.7,2.8C7.6,15.9,7.8,16,8,16 c0.2,0,0.3,0,0.4-0.1C8.8,15.7,9,15.4,9,15V1C9,0.6,8.8,0.3,8.5,0.1z M7,13l-2.4-1.8C4.4,11.1,4.2,11,4,11l-2,0l0-6h2 c0.2,0,0.4-0.1,0.6-0.2L7,3V13z"/></symbol>
   
-  <!-- social -->
   <symbol id="apple" viewBox="-1 1 24 24"><path d="M17.6 13.8c0-3 2.5-4.5 2.6-4.6-1.4-2.1-3.6-2.3-4.4-2.4-1.9-.2-3.6 1.1-4.6 1.1-.9 0-2.4-1.1-4-1-2 0-3.9 1.2-5 3-2.1 3.7-.5 9.1 1.5 12.1 1 1.5 2.2 3.1 3.8 3 1.5-.1 2.1-1 3.9-1s2.4 1 4 1 2.7-1.5 3.7-2.9c1.2-1.7 1.6-3.3 1.7-3.4-.1-.1-3.2-1.3-3.2-4.9zm-3.1-9c.8-1 1.4-2.4 1.2-3.8-1.2 0-2.7.8-3.5 1.8-.8.9-1.5 2.3-1.3 3.7 1.4.1 2.8-.7 3.6-1.7z"/></symbol>
 
   <symbol id="dribbble" viewBox="0 0 24 24"><path d="M12 0c-6.7 0-12 5.3-12 12s5.3 12 12 12 12-5.3 12-12-5.3-12-12-12zm7.9 5.7c1.3 1.7 2.1 3.9 2.3 6.1-.4-.1-2.4-.4-4.7-.4-.8 0-1.5 0-2.3.1 0-.1-.1-.3-.3-.5l-.7-1.5c3.7-1.4 5.3-3.4 5.7-3.8zm-7.9-3.8c2.5 0 4.9.9 6.7 2.5-.3.4-1.9 2.3-5.2 3.6-1.6-2.9-3.3-5.3-3.7-5.9.6-.1 1.4-.2 2.2-.2zm-4.4 1c.4.6 2.1 3 3.7 5.8-4.4 1.2-8.2 1.2-9.2 1.2h-.1c.8-3.1 2.9-5.6 5.6-7zm-5.7 9.1v-.3h.3c1.2 0 5.6-.1 10.1-1.5l.8 1.6c-.1 0-.3 0-.4.1-5.1 1.6-7.9 6-8.3 6.7-1.6-1.7-2.5-4.1-2.5-6.6zm10.1 10.1c-2.3 0-4.4-.8-6.1-2.1.3-.5 2.4-4.4 7.9-6.3 1.3 3.6 2 6.7 2.1 7.6-1.2.6-2.6.8-3.9.8zm5.7-1.8c-.1-.8-.7-3.6-2-7.1.7-.1 1.3-.1 2-.1 2.1 0 3.7.4 4.1.5-.3 2.8-1.8 5.2-4.1 6.7z"/></symbol>
@@ -103,17 +278,22 @@
 
 </svg>
 
-<!-- Navigation -->
 <nav class="side pole">
   <div class="navigation">
-    <ul></ul>
+    <ul>
+      <li><a href="#slide-1" data-section="1">Get Started</a></li>
+      <li><a href="#slide-2" data-section="2">Design Principles</a></li>
+      <li><a href="#slide-3" data-section="3">Expression</a></li>
+      <li><a href="#slide-4" data-section="4">Case Study</a></li>
+      <li><a href="#slide-5" data-section="5">Pricing</a></li>
+      <li><a href="#slide-6" data-section="6">Mobile App</a></li>
+    </ul>
   </div>
 </nav>
 
-<!-- Panel Top #08 -->
 <nav class="panel top">
   <div class="sections desktop">
-    <div class="left"><a href="#" title="Slides Framework"><svg style="width:82px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg></a></div>
+    <div class="left"><a href="#" title="Slides Framework" aria-label="Slides Framework Logo"><svg style="width:82px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg></a></div>
     <div class="center">
       <ul class="menu uppercase">
         <li><a href="#">Tour</a></li>
@@ -131,12 +311,11 @@
     </div>
   </div>
   <div class="sections compact hidden">
-    <div class="left"><a href="#" title="Slides Framework"><svg style="width:82px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg></a></div>
+    <div class="left"><a href="#" title="Slides Framework" aria-label="Slides Framework Logo"><svg style="width:82px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg></a></div>
     <div class="right"><span class="button actionButton sidebarTrigger" data-sidebar-id="1"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"></use></svg></span></div>
   </div>
 </nav>
 
-<!-- Sidebar -->
 <nav class="sidebar" data-sidebar-id="1">
   <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg></div>
   <div class="content">
@@ -165,10 +344,7 @@
 </nav>
 
 
-
-
-<!-- Slide 1 (#09) -->
-<section class="slide fade-6 kenBurns">
+<section class="slide fade-6 kenBurns" id="slide-1">
   <div class="content">
     <div class="container">
       <div class="wrap">
@@ -177,14 +353,14 @@
           <div class="fix-3-12">
             <svg height="77" class="wide ae-1 fromCenter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
           </div>
-          <div class="button play small white popupTrigger ae-2 fromCenter margin-top-6 margin-bottom-6" data-popup-id="9">
+          <div class="button play small white popupTrigger ae-2 fromCenter margin-top-6 margin-bottom-6" data-popup-id="9" aria-label="Play video about the template">
             <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#play"></use></svg>
           </div>
           <p class="ae-3"><span class="opacity-8">Start now and get <b>free bonus</b> on account</span></p>
           <form class="slides-form" action="#" autocomplete="off">
-            <input type="email" class="input-9 ae-4 fromCenter" name="user-email" placeholder="Email" val=""/>
-            <input type="password" class="input-9 ae-5 fromCenter" name="user-password" placeholder="Password" val=""/>
-            <input type="password" class="input-9 ae-6 fromCenter" name="confirm-password" placeholder="Confirm the password" val=""/>
+            <input type="email" class="input-9 ae-4 fromCenter" name="user-email" placeholder="Email" required/>
+            <input type="password" class="input-9 ae-5 fromCenter" name="user-password" placeholder="Password" required/>
+            <input type="password" class="input-9 ae-6 fromCenter" name="confirm-password" placeholder="Confirm the password" required/>
             <button type="submit" class="button blue gradient ae-7 fromCenter" name="button">Get Started</button>
           </form>
         </div>
@@ -195,7 +371,6 @@
   <div class="background" style="background-image:url(assets/img/background/img-09.jpg)"></div>
 </section>
 
-<!-- Popup Video -->
 <div class="popup autoplay" data-popup-id="9">
   <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg></div>
   <div class="content">
@@ -212,8 +387,7 @@
 </div>
 
 
-<!-- Slide 2 (#15) -->
-<section class="slide fade-6 kenBurns fromLeft">
+<section class="slide fade-6 kenBurns fromLeft" id="slide-2">
   <div class="content">
     <div class="container">
       <div class="wrap">
@@ -232,8 +406,7 @@ <h1 class="ae-1">Designing a product is designing a relationship</h1>
   <div class="background" style="background-image:url(assets/img/background/img-15.jpg)"></div>
 </section>
 
-<!-- Slide 3 (#14) -->
-<section class="slide fade-6 kenBurns fromRight">
+<section class="slide fade-6 kenBurns fromRight" id="slide-3">
   <div class="content">
     <div class="container">
       <div class="wrap">
@@ -252,8 +425,7 @@ <h1 class="ae-1">Designers are meant to be loved, not to be understood.</h1>
   <div class="background" style="background-image:url(assets/img/background/img-14.jpg)"></div>
 </section>
 
-<!-- Slide 4 (#89) -->
-<section class="slide fade-6 kenBurns">
+<section class="slide fade-6 kenBurns" id="slide-4">
   <div class="content">
     <div class="container">
       <div class="wrap">
@@ -286,9 +458,9 @@ <h3 class="margin-top-3">Channels</h3>
             <li class="col-1-12">&nbsp;</li>
             <li class="col-5-12 bottom">
               <div class="videoThumbnail shadow rounded popupTrigger margin-bottom-3 ae-7" data-popup-id="89-3">
-                <img src="assets/img/image-89-1.jpg" class="wide" alt="Video Thumbnail"/>
+                <img src="assets/img/image-89-1.jpg" class="wide" alt="Thumbnail for video about The Secret of Success"/>
               </div>
-              <img src="assets/img/image-89-2.jpg" data-action="zoom" class="shadow rounded ae-8" alt="Image"/>
+              <img src="assets/img/image-89-2.jpg" data-action="zoom" class="shadow rounded ae-8" alt="Visual representation of the case study details"/>
             </li>
           </ul>
         </div>
@@ -299,7 +471,6 @@ <h3 class="margin-top-3">Channels</h3>
   <div class="background" style="background-image:url(assets/img/background/img-89.jpg)"></div>
 </section>
 
-<!-- Popup Video -->
 <div class="popup autoplay" data-popup-id="89-3">
   <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg></div>
   <div class="content">
@@ -317,8 +488,7 @@ <h3 class="margin-top-3">Channels</h3>
 
 
 
-<!-- Slide 5 (#85) -->
-<section class="slide fade-6 kenBurns">
+<section class="slide fade-6 kenBurns" id="slide-5">
   <div class="content">
     <div class="container">
       <div class="wrap">
@@ -371,8 +541,7 @@ <h6 class="uppercase bold small opacity-4">Billed per Month</h6>
   <div class="background" style="background-image:url(assets/img/background/img-85.jpg)"></div>
 </section>
 
-<!-- Slide 6 (#95) -->
-<section class="slide fade-6 kenBurns">
+<section class="slide fade-6 kenBurns" id="slide-6">
   <div class="content">
     <div class="container">
       <div class="wrap">
@@ -382,11 +551,12 @@ <h1 class="huge ae-1 margin-bottom-2">Download Mobile App</h1>
           <p class="hero ae-2 margin-bottom-3"><span class="opacity-8">Learning never exhausts the mind.</span></p>
 
           <form action="#" autocomplete="off" class="slides-form margin-bottom-3">
-            <input type="email" class="ae-3" name="email" placeholder="E-mail address"/>
+            <input type="email" class="ae-3" name="email" placeholder="E-mail address" required/>
             <button type="submit" class="button blue gradient ae-4" name="submit">Try it free</button>
           </form>
 
-          <a href="#" class="button hollow ae-5"><img src="assets/img/appstore.jpg" height="63"/></a><a href="#" class="button hollow ae-6"><img src="assets/img/googleplay.jpg" height="63"/></a>
+          <a href="#" class="button hollow ae-5" aria-label="Download on the App Store"><img src="assets/img/appstore.jpg" height="63" alt="Apple App Store logo"/></a>
+          <a href="#" class="button hollow ae-6" aria-label="Get it on Google Play"><img src="assets/img/googleplay.jpg" height="63" alt="Google Play Store logo"/></a>
         </div>
                 
       </div>
@@ -395,15 +565,135 @@ <h1 class="huge ae-1 margin-bottom-2">Download Mobile App</h1>
   <div class="background" style="background-image:url(assets/img/background/img-95.jpg)"></div>
 </section>
 
-<!-- Panel Bottom #15 -->
 <nav class="panel bottom lastSlideOnly">
   <div class="sections">
     <div class="center"><a href="#" class="opacity-8">Available <svg style="height:21px;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#apple"></use></svg> iPhone</a></div>
   </div>
 </nav>
 
-<!-- Loading Progress Bar -->
 <div class="progress-bar blue"></div>
+
+<div id="chatbot-container">
+    <div id="chat-button" aria-label="Open Chatbot">
+        <svg style="width:24px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chat"></use></svg>
+    </div>
+    <div id="chat-window">
+        <div id="chat-header">
+            <h4>Live Support</h4>
+            <span id="chat-close" aria-label="Close Chatbot"><svg style="width:18px;height:18px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-small"></use></svg></span>
+        </div>
+        <div id="chat-body">
+            <p class="chat-message bot">Welcome! I'm your virtual assistant. How can I help you today?</p>
+            <p class="chat-message bot">Try asking about 'shopping', 'shipping', or 'returns'!</p>
+        </div>
+        <div id="chat-input-area">
+            <input type="text" placeholder="Type a message...">
+            <button id="send-button" aria-label="Send Message">
+                <i class="material-icons">send</i>
+            </button>
+        </div>
+    </div>
+</div>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+	<script src="js/slides.min.js?41331" type="text/javascript"></script>
+
+    <script>
+        // CONSOLIDATED CHATBOT LOGIC AND HARDCODED Q&A
+
+        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.getElementById('send-button');
+
+        // --- Hardcoded Knowledge Base ---
+        const responses = {
+            '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 shopping, shipping, returns, and sales. Try asking about 'shopping' or 'return policy'.",
+            
+            '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!",
+            'shipping': "Standard shipping typically takes 3-5 business days. Express options are available at checkout!",
+            'delivery': "Standard shipping 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 see our Help 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 see our Help page for full details.",
+            'sale': "Yes! We have a special deal running right now. Check the main page banners!",
+            
+            'default': "Sorry, I didn't quite catch that. I can help with topics like 'shopping', 'shipping', or 'returns'."
+        };
+
+        function getBotResponse(userInput) {
+            const processedInput = userInput.toLowerCase().trim();
+
+            for (const key in responses) {
+                if (processedInput.includes(key)) {
+                    return responses[key];
+                }
+            }
+            return responses['default'];
+        }
+
+        function appendMessage(sender, text) {
+            const messageElement = document.createElement('p');
+            messageElement.classList.add('chat-message', sender);
+            messageElement.textContent = text;
+            chatBody.appendChild(messageElement);
+
+            chatBody.scrollTop = chatBody.scrollHeight;
+        }
+
+        function handleUserInput() {
+            const userInput = chatInput.value;
+            if (userInput === '') return;
+
+            // 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); 
+
+            // 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
+        if (chatButton && chatWindow) {
+            chatButton.addEventListener('click', () => {
+                chatWindow.classList.toggle('active');
+                chatButton.style.display = chatWindow.classList.contains('active') ? 'none' : 'flex';
+
+                if (chatWindow.classList.contains('active')) {
+                     chatInput.focus();
+                }
+            });
+        }
+
+        if (chatClose && chatWindow) {
+            chatClose.addEventListener('click', () => {
+                chatWindow.classList.remove('active');
+                chatButton.style.display = 'flex';
+            });
+        }
+    </script>
 		
 </body>
-</html>
+</html>
\ No newline at end of file