diff --git a/index.html b/index.html
index 9c97b22..d965bf6 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,6 @@ <h1 class="text-white text-2xl font-bold">Sampada <span class="text-cyan-400">Ti
       <a href="#hero" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Home</a>
       <a href="about.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">About</a>
 
-
       <a href="#skills" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Skills</a>
       <a href="experience.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Experience</a>
 
diff --git a/project.html b/project.html
index e264f4c..695e4ea 100644
--- a/project.html
+++ b/project.html
@@ -1,32 +1,336 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Projects — Sampada Tiwari</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
-    <link rel="stylesheet" href="css/project.css" />
-  </head>
-  <body>
-    <!-- Navbar -->
-    <header
-      class="fixed top-0 left-0 w-full bg-[#0f172a]/80 backdrop-blur-md z-50"
-    >
-      <div
-        class="max-w-7xl mx-auto flex justify-between items-center px-6 py-4"
-      >
-        <!-- Brand / Logo -->
-        <h1 class="text-white text-2xl font-bold">
-          Sampada <span class="text-cyan-400">Tiwari</span>
-        </h1>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Projects — Sampada Tiwari</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    body { font-family: 'Space Grotesk', sans-serif; background: #0f172a; color: #e0e0e0; overflow-x:hidden; }
+      
+    .gradient-text { 
+      background: linear-gradient(135deg,#6c5ce7,#00c6ff,#ff6ec7);
+      -webkit-background-clip: text;
+      background-clip: text;  
+      -webkit-text-fill-color: transparent;
+
+    }
+    /* Light Mode Overrides */
+body.light {
+    --bg-primary: #f9f9f9;
+    --text-primary: #1a1a1a;
+    --text-secondary: #555;
+    --card-bg: #ffffff;
+    --card-gradient: linear-gradient(145deg, #ffffff, #f0f0f0);
+    --gradient-primary: linear-gradient(135deg, #6c5ce7, #00c6ff, #ff6ec7);
+    --gradient-accent: linear-gradient(135deg, #ff6ec7, #00c6ff, #6c5ce7);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+/* Project Card Light Mode */
+body.light .project-card {
+    background: var(--card-gradient);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+body.light .project-card:hover {
+    box-shadow: 0 25px 60px rgba(108,92,231,0.15);
+}
+
+/* Project Info Overlay Light Mode */
+body.light .project-info {
+    background: linear-gradient(to top, rgba(249,249,249,0.9), transparent);
+    color: var(--text-primary);
+}
+
+body.light .project-info p {
+    color: var(--text-secondary);
+}
+
+/* Modal Light Mode */
+body.light .modal-content {
+    background: var(--card-bg);
+}
+
+body.light .modal-content h2 {
+    background: var(--gradient-accent);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+body.light .modal-content p {
+    color: #333;
+}
+
+body.light .modal-content .buttons a {
+    background-image: linear-gradient(var(--card-bg), var(--card-bg)), var(--gradient-accent);
+    color: #fff;
+}
+
+/* Scroll to Top Button Light Mode */
+body.light #scrollTop {
+    background: var(--gradient-accent);
+    box-shadow: 0 8px 30px rgba(108,92,231,0.3);
+}
+
+    /* Toggle Button */
+    .theme-toggle {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: linear-gradient(45deg, var(--royal-purple), var(--deep-navy));
+      border: none;
+      border-radius: 50%;
+      width: 45px;
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: #fff;
+      font-size: 1.2rem;
+      z-index: 2000;
+      box-shadow: 0 4px 15px var(--shadow-color);
+      transition: all 0.3s ease;
+    }
+
+    .theme-toggle:hover {
+      transform: scale(1.1);
+    }
+
+    /* Projects Grid */
+    /* --- Only for consistent card layout --- */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+  align-items: stretch;          /* equal row height */
+}
+
+.project-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;                  /* stretch to full grid cell */
+  padding: 1.5rem;               /* uniform internal spacing */
+  box-sizing: border-box;
+}
+
+.project-card p {
+  flex-grow: 1;                  /* pushes buttons to bottom */
+  margin-bottom: 1rem;
+}
+
+.project-card .actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between; /* align buttons evenly */
+}
+
+.project-card .actions a {
+  flex: 1;
+  text-align: center;
+}
+
+    .project-card:hover { transform: scale(1.05) rotateZ(1deg); box-shadow: 0 20px 50px rgba(108,92,231,0.5); }
+
+    .project-card img {
+      width:100%; height:250px; object-fit:cover; transition: transform 0.5s ease;
+    }
+    .project-card:hover img { transform: scale(1.15); }
+
+    .project-info {
+      position:absolute; bottom:0; left:0; width:100%;
+      background: linear-gradient(to top, rgba(15,23,42,0.9), transparent);
+      padding:1rem; color:#fff; transition: transform 0.5s ease;
+      transform: translateY(100%);
+    }
+    .project-card:hover .project-info { transform: translateY(0); }
+
+    .project-info h3 { font-size:1.4rem; font-weight:700; margin-bottom:0.5rem; }
+    .project-info p { font-size:0.95rem; color:#e0e0e0; }
+
+    /* Fullscreen Project Modal */
+    .project-modal { display:none; position:fixed; inset:0; background: rgba(0,0,0,0.95); justify-content:center; align-items:center; z-index:50; overflow:auto; }
+    .project-modal.active { display:flex; }
+    .modal-content { background:#1e293b; border-radius:1.5rem; max-width:800px; width:90%; padding:2rem; position:relative; animation:fadeIn 0.4s ease forwards; }
+    @keyframes fadeIn { from { transform: scale(0.8); opacity:0 } to { transform: scale(1); opacity:1 } }
+
+    .modal-close { position:absolute; top:1rem; right:1rem; font-size:1.5rem; color:#fff; cursor:pointer; }
+    .modal-content img { width:100%; border-radius:1rem; margin-bottom:1rem; }
+    .modal-content h2 { font-size:2rem; background: linear-gradient(135deg,#6c5ce7,#00c6ff,#ff6ec7); -webkit-background-clip:text; background-clip: text;   -webkit-text-fill-color:transparent; margin-bottom:1rem; }
+    .modal-content p { color:#c0c0c0; line-height:1.6; margin-bottom:1rem; }
+    .modal-content .buttons a { display:inline-block; margin-right:1rem; padding:0.5rem 1rem; border-radius:9999px; background:linear-gradient(135deg,#6c5ce7,#00c6ff); color:#fff; font-weight:600; transition:transform 0.3s ease; }
+    .modal-content .buttons a:hover { transform:scale(1.05); }
+
+    /* Scroll to top */
+    #scrollTop { position:fixed; bottom:30px; right:30px; background:linear-gradient(135deg,#6c5ce7,#00c6ff); width:50px; height:50px; border-radius:9999px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; visibility:hidden; z-index:50; }
+    #scrollTop.visible { opacity:1; visibility:visible; }
+    #scrollTop:hover { transform: translateY(-4px) scale(1.1); box-shadow:0 8px 30px rgba(108,92,231,0.5); }
+html {
+  scroll-behavior: smooth;
+}
+.project-card h3 {
+  text-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
+  transition: all 0.3s ease-in-out;
+}
+.project-card:hover h3 {
+  text-shadow: 0 0 5px rgba(192, 255, 236, 0.599);
+}
+.modal-content .buttons a {
+  background-image:
+    linear-gradient(#1e293b, #1e293b),
+    linear-gradient(135deg, #6c5ce7, #00c6ff, #ff6ec7);
+}
+.project-card {
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+.project-card:hover {
+  box-shadow: 0 25px 60px rgba(108,92,231,0.35);
+}
+.project-card img {
+  filter: brightness(0.9);
+}
+.project-card:hover img {
+  filter: brightness(1.05) blur(0.5px);
+}
+/* Light Mode Footer */
+body.light footer {
+    background: #f9f9f9;
+    color: #1a1a1a;
+}
+
+body.light footer h2 {
+    background: linear-gradient(to right, #6c5ce7, #00c6ff); /* Gradient for name */
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+body.light footer p {
+    color: #555; /* Subtitle text */
+}
+
+body.light footer h3 {
+    color: #6c5ce7; /* Section headings like Quick Links, Follow Me */
+}
+
+body.light footer a {
+    color: #1a1a1a; /* Default link color */
+    transition: color 0.3s ease, transform 0.3s ease;
+}
+
+body.light footer a:hover {
+    color: #6c5ce7; /* Hover color */
+    transform: scale(1.1);
+}
+
+body.light footer .border-t {
+    border-color: #ddd; /* Bottom bar border */
+}
+
+body.light footer .text-gray-500 {
+    color: #555; /* Bottom bar text */
+}
+
+body.light footer .text-gray-400 {
+    color: #777; /* Subtitle small text */
+}
+
+body.light footer .fab,
+body.light footer .fas {
+    color: #1a1a1a; /* Social icons default */
+}
+
+body.light footer .fab:hover,
+body.light footer .fas:hover {
+    color: #6c5ce7; /* Social icons hover */
+}
+/* Light Mode Navbar */
+body.light header {
+    background: rgba(249, 249, 249, 0.8); /* Light semi-transparent background */
+    backdrop-filter: blur(8px);
+}
+
+body.light header h1 {
+    color: #1a1a1a; /* Brand text */
+}
+
+body.light header h1 span {
+    color: #6c5ce7; /* Accent color */
+}
+
+body.light header nav a {
+    color: #1a1a1a; /* Nav links */
+    transition: color 0.3s ease;
+}
+
+body.light header nav a:hover {
+    color: #6c5ce7; /* Hover color */
+}
+
+body.light #menu-btn svg {
+    stroke: #1a1a1a; /* Mobile menu icon color */
+}
+
+/* Mobile Menu in Light Mode */
+body.light #mobile-menu {
+    background: rgba(249, 249, 249, 0.95);
+    backdrop-filter: blur(8px);
+}
+
+body.light #mobile-menu a {
+    color: #1a1a1a;
+}
+
+body.light #mobile-menu a:hover {
+    color: #6c5ce7;
+}
+
+/* Theme Toggle Button */
+body.light .theme-toggle {
+    background: linear-gradient(45deg, #6c5ce7, #00c6ff); /* Button gradient remains */
+    color: #fff;
+}
+
+/* Projects Section */
+body.light section h1.gradient-text {
+    background: linear-gradient(135deg, #6c5ce7, #00c6ff, #ff6ec7);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+body.light section p {
+    color: #555; /* Paragraph text */
+}
+
+
+
+ /* Comment Section */
+    .comment-section { margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top:1rem; }
+    .comment { display:flex; justify-content:space-between; items-center; gap:0.5rem; padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.1); }
+    .comment p { flex:1; color:#c0c0c0; }
+    .comment button { background:none; border:none; color:#6c5ce7; cursor:pointer; transition: transform 0.2s; }
+    .comment button:hover { transform:scale(1.2); }
+    .comment-input { display:flex; gap:0.5rem; margin-top:0.5rem; }
+    .comment-input input { flex:1; padding:0.5rem 1rem; border-radius:9999px; border:none; outline:none; background:#1e293b; color:#fff; }
+    .comment-input button { padding:0.5rem 1rem; border-radius:9999px; border:none; background:linear-gradient(135deg,#6c5ce7,#00c6ff); color:#fff; cursor:pointer; transition: transform 0.2s; }
+    .comment-input button:hover { transform:scale(1.05); }
+
+  </style>
+</head>
+<body>
+  
+  <!-- Navbar -->
+<header class="fixed top-0 left-0 w-full bg-[#0f172a]/80 backdrop-blur-md z-50">
+  <div class="max-w-7xl mx-auto flex justify-between items-center px-6 py-4">
+    <!-- Brand / Logo -->
+    <h1 class="text-white text-2xl font-bold">Sampada <span class="text-cyan-400">Tiwari</span></h1>
 
     <!-- Navigation Links -->
     <nav class="space-x-6 hidden md:flex">
@@ -35,683 +339,413 @@ <h1 class="text-white text-2xl font-bold">
       <a href="skills.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Skills</a>
       <a href="experience.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Experience</a>
       <a href="project.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Projects</a>
-      <a href="index.html#testimonial" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Testimonials</a>
+      <a href="experience.html#testimonials" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Testimonials</a>
       <a href="contact.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Contact</a>
     </nav>
       <button class="theme-toggle" id="themeToggle">
     <i class="fas fa-moon"></i>
   </button>
 
-        <!-- Mobile Menu Button -->
-        <div class="md:hidden">
-          <button id="menu-btn" class="text-white focus:outline-none">
-            <svg
-              class="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M4 6h16M4 12h16M4 18h16"
-              ></path>
-            </svg>
-          </button>
-        </div>
-      </div>
+    <!-- Mobile Menu Button -->
+    <div class="md:hidden">
+      <button id="menu-btn" class="text-white focus:outline-none">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
 
-      <!-- Mobile Menu -->
-      <div
-        id="mobile-menu"
-        class="hidden md:hidden bg-[#0f172a]/95 backdrop-blur-md"
-      >
-        <nav class="flex flex-col px-6 py-4 space-y-4">
-          <a
-            href="#hero"
-            class="text-white font-medium hover:text-cyan-400 transition-colors duration-300"
-            >Home</a
-          >
-          <a
-            href="about.html"
-            class="text-white font-medium hover:text-cyan-400 transition-colors duration-300"
-            >About</a
-          >
-
-          <a
-            href="#skills"
-            class="text-white font-medium hover:text-cyan-400 transition-colors duration-300"
-            >Skills</a
-          >
-          <a
-            href="experience.html"
-            class="text-white font-medium hover:text-cyan-400 transition-colors duration-300"
-            >Experience</a
-          >
-          <a
-            href="project.html"
-            class="text-white font-medium hover:text-cyan-400 transition-colors duration-300"
-            >Projects</a
-          >
-          <a
-            href="#testimonials"
-            class="text-white font-medium hover:text-cyan-400 transition-colors duration-300"
-            >Testimonials</a
-          >
-          <a
-            href="contact.html"
-            class="text-white font-medium hover:text-cyan-400 transition-colors duration-300"
-            >Contact</a
-          >
-        </nav>
-      </div>
-    </header>
-    <section class="py-20 text-center" style="margin-top: 4rem">
-      <h1 class="text-5xl md:text-6xl font-extrabold gradient-text mb-4">
-        Projects
-      </h1>
-      <p class="text-gray-400 max-w-xl mx-auto text-lg">
-        Modern interactive showcase with hover animations, gradients, and
-        detailed content below each project.
-      </p>
-    </section>
-
-    <!-- Projects Grid -->
-    <div
-      class="projects-grid grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-6"
-    >
-      <!-- Real Estate Platform -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80"
-            alt="Real Estate Platform"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            Real Estate Platform
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Virtual real estate marketplace in metaverse environments with 3D
-            visualization and virtual tours.
-          </p>
-          <div class="text-gray-300 text-sm space-y-1">
-            <p><strong>Technologies:</strong> Unity, Three.js, Web3.js</p>
-            <p>
-              <strong>Key Features:</strong> 3D visualization, Virtual tours,
-              Integrated payments
-            </p>
-            <p><strong>Role:</strong> Full Stack Developer</p>
-            <p>
-              <strong>Outcome:</strong> Immersive virtual real estate platform
-            </p>
-          </div>
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="#"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
+  <!-- Mobile Menu -->
+  <div id="mobile-menu" class="hidden md:hidden bg-[#0f172a]/95 backdrop-blur-md">
+    <nav class="flex flex-col px-6 py-4 space-y-4">
+      <a href="#hero" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Home</a>
+      <a href="about.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">About</a>
+
+      <a href="#skills" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Skills</a>
+      <a href="experience.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Experience</a>
+      <a href="project.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Projects</a>
+      <a href="#testimonials" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Testimonials</a>
+      <a href="contact.html" class="text-white font-medium hover:text-cyan-400 transition-colors duration-300">Contact</a>
+    </nav>
+  </div>
+</header>
+<section class="py-20 text-center" style="margin-top: 4rem;">
+  <h1 class="text-5xl md:text-6xl font-extrabold gradient-text mb-4">Projects</h1>
+  <p class="text-gray-400 max-w-xl mx-auto text-lg">Modern interactive showcase with hover animations, gradients, and detailed content below each project.</p>
+</section>
+
+<!-- Projects Grid -->
+<div class="projects-grid grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-6">
+    <!-- Real Estate Platform -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80" alt="Real Estate Platform" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">Real Estate Platform</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Virtual real estate marketplace in metaverse environments with 3D visualization and virtual tours.</p>
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> Unity, Three.js, Web3.js</p>
+      <p><strong>Key Features:</strong> 3D visualization, Virtual tours, Integrated payments</p>
+      <p><strong>Role:</strong> Full Stack Developer</p>
+      <p><strong>Outcome:</strong> Immersive virtual real estate platform</p>
+    </div>
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="#" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
-      <!-- कला.ficial -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="./images/kala.ficial.png"
-            alt="कला.ficial"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            कला.ficial
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Virtual art exhibition platform with modern UI, fluid animations,
-            and real-time global notifications.
-          </p>
-          <div class="text-gray-300 text-sm space-y-1">
-            <p>
-              <strong>Technologies:</strong> HTML, CSS, JavaScript, Leaflet.js
-            </p>
-            <p>
-              <strong>Key Features:</strong> Virtual exhibition, Real-time
-              notifications
-            </p>
-            <p><strong>Role:</strong> Frontend Developer</p>
-            <p><strong>Outcome:</strong> Engaging virtual art platform</p>
-          </div>
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="https://example.com/kala-ficial"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
+    </div>
+  </div>
+</div>
+<!-- कला.ficial -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="./images/kala.ficial.png" alt="कला.ficial" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">कला.ficial</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Virtual art exhibition platform with modern UI, fluid animations, and real-time global notifications.</p>
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> HTML, CSS, JavaScript, Leaflet.js</p>
+      <p><strong>Key Features:</strong> Virtual exhibition, Real-time notifications</p>
+      <p><strong>Role:</strong> Frontend Developer</p>
+      <p><strong>Outcome:</strong> Engaging virtual art platform</p>
+    </div>
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="https://example.com/kala-ficial" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
+    </div>
+  </div>
+</div>
 
-      <!-- NASA Space Challenge -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="https://sites.uwasa.fi/vaasaspaceavenue/wp-content/blogs.dir/4/files/sites/188/2025/07/nasa-space-apps-kuva-jollaan-1080x500.png"
-            alt="NASA Space Challenge"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            NASA Space Challenge (Hack Celestia)
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Collaborative task manager for exploring planetary data and solar
-            system exploration during NASA Space Apps Challenge.
-          </p>
-          <div class="text-gray-300 text-sm space-y-1">
-            <p><strong>Technologies:</strong> React, Node.js, APIs</p>
-            <p>
-              <strong>Key Features:</strong> Collaborative data management,
-              Planetary exploration
-            </p>
-            <p><strong>Role:</strong> Full Stack Developer</p>
-            <p>
-              <strong>Outcome:</strong> Efficient task management for NASA
-              challenge
-            </p>
-          </div>
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="https://example.com/nasa-hack"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
+<!-- NASA Space Challenge -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="https://sites.uwasa.fi/vaasaspaceavenue/wp-content/blogs.dir/4/files/sites/188/2025/07/nasa-space-apps-kuva-jollaan-1080x500.png" alt="NASA Space Challenge" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">NASA Space Challenge (Hack Celestia)</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Collaborative task manager for exploring planetary data and solar system exploration during NASA Space Apps Challenge.</p>
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> React, Node.js, APIs</p>
+      <p><strong>Key Features:</strong> Collaborative data management, Planetary exploration</p>
+      <p><strong>Role:</strong> Full Stack Developer</p>
+      <p><strong>Outcome:</strong> Efficient task management for NASA challenge</p>
+    </div>
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="https://example.com/nasa-hack" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
+    </div>
+  </div>
+</div>
 
-      <!-- DeshDarshan -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="./images/desh-darshan.png"
-            alt="DeshDarshan"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            DeshDarshan (Ongoing)
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Platform showcasing India’s heritage, festivals, food, art, and
-            famous places for immersive exploration across all states.
-          </p>
-          <div class="text-gray-300 text-sm space-y-1">
-            <p><strong>Technologies:</strong> React, Tailwind CSS, APIs</p>
-            <p>
-              <strong>Key Features:</strong> Cultural exploration, State-wise
-              content
-            </p>
-            <p><strong>Role:</strong> Frontend Developer</p>
-            <p>
-              <strong>Outcome:</strong> Interactive cultural discovery platform
-            </p>
-          </div>
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="https://example.com/deshdarshan"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
+<!-- DeshDarshan -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="./images/desh-darshan.png" alt="DeshDarshan" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">DeshDarshan (Ongoing)</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Platform showcasing India’s heritage, festivals, food, art, and famous places for immersive exploration across all states.</p>
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> React, Tailwind CSS, APIs</p>
+      <p><strong>Key Features:</strong> Cultural exploration, State-wise content</p>
+      <p><strong>Role:</strong> Frontend Developer</p>
+      <p><strong>Outcome:</strong> Interactive cultural discovery platform</p>
+    </div>
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="https://example.com/deshdarshan" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
+    </div>
+  </div>
+</div>
 
-      <!-- Project Card -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <!-- Image with overlay -->
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="https://griddb-pro-ewemahawekgyd8bs.a03.azurefd.net/en/wp-content/uploads/2021/11/email-spam-1160x650.png"
-            alt="spam-mail-classification"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-
-        <!-- Content -->
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            spam-mail-classification
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Automated email classifier using NLP techniques for real-time spam
-            detection...
-          </p>
-
-          <div class="text-gray-300 text-sm space-y-1">
-            <p><strong>Technologies:</strong> Python, NLP, scikit-learn</p>
-            <p>
-              <strong>Key Features:</strong> Real-time spam detection, learning
-              model
-            </p>
-            <p><strong>Role:</strong> Developer & Designer</p>
-            <p>
-              <strong>Outcome:</strong> Scalable email classification system
-            </p>
-          </div>
-
-          <!-- Links -->
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="#"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- DeFi Trading Platform Card -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="https://www.solulab.com/wp-content/uploads/2023/08/Best-Defi-Trading-Platforms.jpg"
-            alt="DeFi Trading Platform"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            DeFi Trading Platform
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Decentralized finance platform for trading, staking, and liquidity
-            across multiple blockchains...
-          </p>
-
-          <div class="text-gray-300 text-sm space-y-1">
-            <p><strong>Technologies:</strong> Solidity, React, Web3.js</p>
-            <p>
-              <strong>Key Features:</strong> Multi-chain trading, staking,
-              analytics
-            </p>
-            <p><strong>Role:</strong> Full Stack Developer</p>
-            <p>
-              <strong>Outcome:</strong> DeFi platform with automated strategies
-            </p>
-          </div>
-
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="#"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
+<!-- Project Card -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <!-- Image with overlay -->
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="https://griddb-pro-ewemahawekgyd8bs.a03.azurefd.net/en/wp-content/uploads/2021/11/email-spam-1160x650.png" alt="spam-mail-classification" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
+
+  <!-- Content -->
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">spam-mail-classification</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Automated email classifier using NLP techniques for real-time spam detection...</p>
+
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> Python, NLP, scikit-learn</p>
+      <p><strong>Key Features:</strong> Real-time spam detection, learning model</p>
+      <p><strong>Role:</strong> Developer & Designer</p>
+      <p><strong>Outcome:</strong> Scalable email classification system</p>
+    </div>
+
+    <!-- Links -->
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="#" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
+    </div>
+  </div>
+</div>
+
+<!-- DeFi Trading Platform Card -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="https://www.solulab.com/wp-content/uploads/2023/08/Best-Defi-Trading-Platforms.jpg" alt="DeFi Trading Platform" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
 
-      <!-- Contract Auditing Tool -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="https://101blockchains.com/wp-content/uploads/2023/12/top-smart-contracts-auditing-tools.png"
-            alt="Contract Auditing Tool"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            Contract Auditing Tool
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Automated smart contract auditing platform identifying
-            vulnerabilities and optimizing gas usage.
-          </p>
-          <div class="text-gray-300 text-sm space-y-1">
-            <p><strong>Technologies:</strong> Solidity, Hardhat, Ethers.js</p>
-            <p>
-              <strong>Key Features:</strong> Security auditing, Gas
-              optimization, Compliance check
-            </p>
-            <p><strong>Role:</strong> Smart Contract Developer</p>
-            <p><strong>Outcome:</strong> Safer and optimized contracts</p>
-          </div>
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="#"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">DeFi Trading Platform</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Decentralized finance platform for trading, staking, and liquidity across multiple blockchains...</p>
+
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> Solidity, React, Web3.js</p>
+      <p><strong>Key Features:</strong> Multi-chain trading, staking, analytics</p>
+      <p><strong>Role:</strong> Full Stack Developer</p>
+      <p><strong>Outcome:</strong> DeFi platform with automated strategies</p>
+    </div>
+
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="#" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
+    </div>
+  </div>
+</div>
 
-      <!-- HearMe Platform -->
-      <div
-        class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl"
-      >
-        <div class="relative h-48 overflow-hidden rounded-t-2xl">
-          <img
-            src="https://i.ytimg.com/vi/crAHR64_C48/maxresdefault.jpg"
-            alt="HearMe Platform"
-            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div
-            class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"
-          ></div>
-        </div>
-        <div class="p-5 bg-[#0f172a]">
-          <h3
-            class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400"
-          >
-            HearMe Platform
-          </h3>
-          <p class="text-gray-400 mb-3 line-clamp-3">
-            Responsive e-commerce platform for the deaf and mute community,
-            designed with accessibility and intuitive navigation.
-          </p>
-          <div class="text-gray-300 text-sm space-y-1">
-            <p>
-              <strong>Technologies:</strong> React, Tailwind CSS, Accessibility
-              API
-            </p>
-            <p>
-              <strong>Key Features:</strong> Accessibility-focused, Intuitive
-              navigation
-            </p>
-            <p><strong>Role:</strong> Frontend Developer</p>
-            <p><strong>Outcome:</strong> Inclusive e-commerce platform</p>
-          </div>
-          <div class="mt-4 flex gap-4">
-            <a
-              href="#"
-              target="_blank"
-              class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"
-              ><i class="fab fa-github"></i> GitHub</a
-            >
-            <a
-              href="https://example.com/hearme"
-              target="_blank"
-              class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"
-              ><i class="fas fa-external-link-alt"></i> Live Demo</a
-            >
-          </div>
-          <!-- Comment Section -->
-          <div class="comment-section">
-            <div class="comment-list"></div>
-            <div class="comment-input">
-              <input type="text" placeholder="Add a comment..." />
-              <button>Add</button>
-            </div>
-          </div>
-        </div>
+<!-- Contract Auditing Tool -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="https://101blockchains.com/wp-content/uploads/2023/12/top-smart-contracts-auditing-tools.png" alt="Contract Auditing Tool" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">Contract Auditing Tool</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Automated smart contract auditing platform identifying vulnerabilities and optimizing gas usage.</p>
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> Solidity, Hardhat, Ethers.js</p>
+      <p><strong>Key Features:</strong> Security auditing, Gas optimization, Compliance check</p>
+      <p><strong>Role:</strong> Smart Contract Developer</p>
+      <p><strong>Outcome:</strong> Safer and optimized contracts</p>
+    </div>
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="#" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
     </div>
-    <!-- ================= FOOTER SECTION ================= -->
-    <footer
-      class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-200 py-16 px-6 md:px-12"
-      style="margin-top: 4rem"
-    >
-      <!-- Footer Container -->
-      <div
-        class="flex flex-col md:flex-row md:justify-between gap-12 md:gap-8 mb-8"
-      >
-        <!-- Brand / Logo -->
-        <div class="text-center md:text-left">
-          <h2
-            class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500"
-          >
-            Sampada<span class="font-extrabold">Tiwari</span>
-          </h2>
-          <p class="text-gray-400 mt-1 text-sm md:text-base">
-            Data Scientist • Leader • Creator
-          </p>
-        </div>
-
-        <!-- Quick Links -->
-        <div class="text-center md:text-left">
-          <h3 class="text-cyan-400 text-lg font-semibold mb-3">Quick Links</h3>
-          <ul
-            class="flex flex-wrap justify-center md:justify-start gap-3 md:gap-2"
-          >
-            <li>
-              <a href="#about" class="hover:text-cyan-400 transition-colors"
-                >About</a
-              >
-            </li>
-            <li>
-              <a href="#skills" class="hover:text-cyan-400 transition-colors"
-                >Skills</a
-              >
-            </li>
-            <li>
-              <a
-                href="#experience"
-                class="hover:text-cyan-400 transition-colors"
-                >Experience</a
-              >
-            </li>
-            <li>
-              <a href="#projects" class="hover:text-cyan-400 transition-colors"
-                >Projects</a
-              >
-            </li>
-            <li>
-              <a
-                href="#testimonials"
-                class="hover:text-cyan-400 transition-colors"
-                >Testimonials</a
-              >
-            </li>
-            <li>
-              <a href="#contact" class="hover:text-cyan-400 transition-colors"
-                >Contact</a
-              >
-            </li>
-          </ul>
-        </div>
-
-        <!-- Social Media -->
-        <div class="text-center md:text-left">
-          <h3 class="text-cyan-400 text-lg font-semibold mb-3">Follow Me</h3>
-          <div class="flex justify-center md:justify-start gap-4 text-2xl">
-            <a
-              href="https://linkedin.com/in/sampada"
-              target="_blank"
-              class="hover:text-cyan-400 transform hover:scale-125 transition-all"
-              ><i class="fab fa-linkedin"></i
-            ></a>
-            <a
-              href="https://github.com/sampada"
-              target="_blank"
-              class="hover:text-cyan-400 transform hover:scale-125 transition-all"
-              ><i class="fab fa-github"></i
-            ></a>
-            <a
-              href="https://twitter.com/sampada"
-              target="_blank"
-              class="hover:text-cyan-400 transform hover:scale-125 transition-all"
-              ><i class="fab fa-twitter"></i
-            ></a>
-            <a
-              href="mailto:sampada@example.com"
-              class="hover:text-cyan-400 transform hover:scale-125 transition-all"
-              ><i class="fas fa-envelope"></i
-            ></a>
-          </div>
-        </div>
+  </div>
+</div>
+
+
+<!-- HearMe Platform -->
+<div class="project-card relative group rounded-2xl overflow-hidden shadow-lg cursor-pointer transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
+  <div class="relative h-48 overflow-hidden rounded-t-2xl">
+    <img src="https://i.ytimg.com/vi/crAHR64_C48/maxresdefault.jpg" alt="HearMe Platform" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover:opacity-70"></div>
+  </div>
+  <div class="p-5 bg-[#0f172a]">
+    <h3 class="text-2xl font-bold gradient-text mb-2 transition-colors duration-500 group-hover:text-pink-400">HearMe Platform</h3>
+    <p class="text-gray-400 mb-3 line-clamp-3">Responsive e-commerce platform for the deaf and mute community, designed with accessibility and intuitive navigation.</p>
+    <div class="text-gray-300 text-sm space-y-1">
+      <p><strong>Technologies:</strong> React, Tailwind CSS, Accessibility API</p>
+      <p><strong>Key Features:</strong> Accessibility-focused, Intuitive navigation</p>
+      <p><strong>Role:</strong> Frontend Developer</p>
+      <p><strong>Outcome:</strong> Inclusive e-commerce platform</p>
+    </div>
+    <div class="mt-4 flex gap-4">
+      <a href="#" target="_blank" class="text-blue-400 hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fab fa-github"></i> GitHub</a>
+      <a href="https://example.com/hearme" target="_blank" class="text-green-400 hover:text-green-600 flex items-center gap-1 transition-colors"><i class="fas fa-external-link-alt"></i> Live Demo</a>
+    </div>
+     <!-- Comment Section -->
+    <div class="comment-section">
+      <div class="comment-list"></div>
+      <div class="comment-input">
+        <input type="text" placeholder="Add a comment..." />
+        <button>Add</button>
       </div>
+    </div>
+  </div>
+</div>
 
-      <!-- Bottom Bar -->
-      <div
-        class="border-t border-gray-700 pt-4 text-center text-sm text-gray-500"
-      >
-        © 2025 Sampada Tiwari • All Rights Reserved
+</div>
+<!-- ================= FOOTER SECTION ================= -->
+<footer class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-200 py-16 px-6 md:px-12" style="margin-top: 4rem;">
+
+  <!-- Footer Container -->
+  <div class="flex flex-col md:flex-row md:justify-between gap-12 md:gap-8 mb-8">
+
+    <!-- Brand / Logo -->
+    <div class="text-center md:text-left">
+      <h2 class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">
+        Sampada<span class="font-extrabold">Tiwari</span>
+      </h2>
+      <p class="text-gray-400 mt-1 text-sm md:text-base">Data Scientist • Leader • Creator</p>
+    </div>
+
+    <!-- Quick Links -->
+    <div class="text-center md:text-left">
+      <h3 class="text-cyan-400 text-lg font-semibold mb-3">Quick Links</h3>
+      <ul class="flex flex-wrap justify-center md:justify-start gap-3 md:gap-2">
+        <li><a href="about.html" class="hover:text-cyan-400 transition-colors">About</a></li>
+        <li><a href="skills.html" class="hover:text-cyan-400 transition-colors">Skills</a></li>
+        <li><a href="experience.html" class="hover:text-cyan-400 transition-colors">Experience</a></li>
+        <li><a href="project.html" class="hover:text-cyan-400 transition-colors">Projects</a></li>
+        <li><a href="experience.html#testimonials" class="hover:text-cyan-400 transition-colors">Testimonials</a></li>
+        <li><a href="contact.html" class="hover:text-cyan-400 transition-colors">Contact</a></li>
+      </ul>
+    </div>
+
+    <!-- Social Media -->
+    <div class="text-center md:text-left">
+      <h3 class="text-cyan-400 text-lg font-semibold mb-3">Follow Me</h3>
+      <div class="flex justify-center md:justify-start gap-4 text-2xl">
+        <a href="https://linkedin.com/in/sampada" target="_blank" class="hover:text-cyan-400 transform hover:scale-125 transition-all"><i class="fab fa-linkedin"></i></a>
+        <a href="https://github.com/sampada" target="_blank" class="hover:text-cyan-400 transform hover:scale-125 transition-all"><i class="fab fa-github"></i></a>
+        <a href="https://twitter.com/sampada" target="_blank" class="hover:text-cyan-400 transform hover:scale-125 transition-all"><i class="fab fa-twitter"></i></a>
+        <a href="mailto:sampada@example.com" class="hover:text-cyan-400 transform hover:scale-125 transition-all"><i class="fas fa-envelope"></i></a>
       </div>
-    </footer>
-    <!-- Tailwind JS for Mobile Menu Toggle -->
-  <script src="js/project.js"></script>
-  </body>
+    </div>
+
+  </div>
+
+  <!-- Bottom Bar -->
+  <div class="border-t border-gray-700 pt-4 text-center text-sm text-gray-500">
+    © 2025 Sampada Tiwari • All Rights Reserved
+  </div>
+
+</footer>
+<!-- Tailwind JS for Mobile Menu Toggle -->
+<script>
+    // Theme Toggle with localStorage
+        const toggleBtn = document.getElementById('themeToggle');
+        const body = document.body;
+
+        // Load saved theme
+        if (localStorage.getItem('theme') === 'light') {
+            body.classList.add('light');
+            toggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
+        }
+
+        toggleBtn.addEventListener('click', () => {
+            body.classList.toggle('light');
+            const isLight = body.classList.contains('light');
+            toggleBtn.innerHTML = isLight ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
+            localStorage.setItem('theme', isLight ? 'light' : 'dark');
+        });
+  const menuBtn = document.getElementById('menu-btn');
+  const mobileMenu = document.getElementById('mobile-menu');
+
+  menuBtn.addEventListener('click', () => {
+    mobileMenu.classList.toggle('hidden');
+  });
+   // Comment Section Functionality
+  document.querySelectorAll('.project-card').forEach(card => {
+    const input = card.querySelector('.comment-input input');
+    const button = card.querySelector('.comment-input button');
+    const list = card.querySelector('.comment-list');
+
+    function createComment(text) {
+      const div = document.createElement('div');
+      div.classList.add('comment');
+
+      const p = document.createElement('p');
+      p.textContent = text;
+      p.contentEditable = true;
+      p.style.outline = 'none';
+      div.appendChild(p);
+
+      const likeBtn = document.createElement('button');
+      likeBtn.innerHTML = '<i class="fas fa-heart"></i>';
+      let liked = false;
+      likeBtn.addEventListener('click', () => {
+        liked = !liked;
+        likeBtn.style.color = liked ? 'red' : '#6c5ce7';
+      });
+      div.appendChild(likeBtn);
+
+      const delBtn = document.createElement('button');
+      delBtn.innerHTML = '<i class="fas fa-trash"></i>';
+      delBtn.addEventListener('click', () => div.remove());
+      div.appendChild(delBtn);
+
+      list.appendChild(div);
+    }
+
+    button.addEventListener('click', () => {
+      if(input.value.trim() !== '') {
+        createComment(input.value);
+        input.value = '';
+      }
+    });
+
+    input.addEventListener('keypress', e => {
+      if(e.key === 'Enter' && input.value.trim() !== '') {
+        createComment(input.value);
+        input.value = '';
+      }
+    });
+  });
+</script>
+
+</body>
 </html>
