From caf30d011a782c8f8eb535a52448e61d88a4bd8a Mon Sep 17 00:00:00 2001
From: Sanchita2802 <sanchitamisar@gmail.com>
Date: Thu, 9 Oct 2025 15:12:21 +0530
Subject: [PATCH] Change UI

---
 index.html |   12 +-
 style.css  | 1552 ++++++----------------------------------------------
 2 files changed, 184 insertions(+), 1380 deletions(-)
diff --git a/index.html b/index.html
index 664d30346..bc9bf9af4 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Morgan Taylor - Full-Stack Developer & AI Enthusiast specializing in MERN stack, AI applications, and modern web animations">
+    <meta name="description" content="Sanchita Misar - Full-Stack Developer & AI Enthusiast specializing in MERN stack, AI applications, and modern web animations">
     <title>Morgan Taylor - Full-Stack Developer</title>
     <link rel="preload" href="style.css" as="style">
     <link rel="preload" href="script.js" as="script">
@@ -31,7 +31,7 @@
     <header id="header">
         <nav>
             <div class="logo" onclick="scrollToSection('home')" aria-label="Home">
-                <span class="logo-text">MorganTaylor</span>
+                <span class="logo-text">Sanchita</span>
                 <span class="logo-dot"></span>
             </div>
             <ul class="nav-links" id="navLinks">
@@ -54,7 +54,7 @@
             <div class="hero-content">
                 <div class="hero-text">
                     <h1 class="hero-title">
-                        <span class="title-line">Hi, I'm <span class="highlight">Morgan Taylor</span></span>
+                        <span class="title-line">Hi, I'm <span class="highlight">Sanchita Misar</span></span>
                     </h1>
                     <h2 class="hero-subtitle">Full-Stack Developer & AI Enthusiast</h2>
                     <p class="hero-description">Computer Science student passionate about creating innovative web solutions using MERN stack, AI applications for climate change, healthcare, and agriculture. I love building interactive experiences with modern animations and cutting-edge technology.</p>
@@ -94,7 +94,7 @@ <h2 class="hero-subtitle">Full-Stack Developer & AI Enthusiast</h2>
                 <h2 class="section-title">About Me</h2>
                 <div class="about-content">
                     <div class="about-text">
-                        <p>I'm a passionate Computer Science student from MET BKC IOE, Nashik, with a strong focus on full-stack web development and artificial intelligence applications. My journey in tech has been driven by curiosity and a desire to solve real-world problems through innovative solutions.</p>
+                        <p>I'm a passionate Computer Science student from K. K. Wagh Institute of Engineering Education and Research, Nashik, with a strong focus on full-stack web development and artificial intelligence applications. My journey in tech has been driven by curiosity and a desire to solve real-world problems through innovative solutions.</p>
                         <p>I specialize in the MERN stack and have experience building interactive web applications with advanced animations, AI-powered features, and responsive designs. I'm particularly interested in applying technology to address challenges in climate change, healthcare, and agriculture.</p>
                         <p>When I'm not coding, you'll find me exploring new web animation techniques, researching AI applications, or working on personal projects that push the boundaries of what's possible with modern web technologies.</p>
                         <div class="about-stats">
@@ -282,7 +282,7 @@ <h3>Let's Connect</h3>
             <div class="footer-content">
                 <div class="footer-logo">
                     <div class="logo" onclick="scrollToSection('home')" aria-label="Home">
-                        <span class="logo-text">Morgan Taylor</span>
+                        <span class="logo-text">Sanchita Misar</span>
                         <span class="logo-dot"></span>
                     </div>
                     <p>Full-Stack Developer & AI Enthusiast</p>
@@ -296,7 +296,7 @@ <h3>Let's Connect</h3>
                 </div>
             </div>
             <div class="footer-bottom">
-                <p>&copy; 2025 Morgan Taylor. Crafted with passion for innovation.</p>
+                <p>&copy; 2025 Sanchita Misar. Crafted with passion for innovation.</p>
                 <p>Computer Science Student | Full-Stack Developer | AI Enthusiast</p>
             </div>
         </div>
diff --git a/style.css b/style.css
index 6826186ae..b54b4dd19 100644
--- a/style.css
+++ b/style.css
@@ -1,1397 +1,201 @@
-
-#skills {
-    position: relative;
-    overflow: hidden;
-}
-
-.skills-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent);
-    opacity: 0.1;
-    z-index: -1;
-    animation: gradientShift 8s ease infinite;
-    background-size: 400% 400%;
-}
-
-@keyframes gradientShift {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-}
 :root {
-    --primary: #3498db;
-    --primary-dark: #2980b9;
-    --secondary: #2ecc71;
-    --secondary-dark: #27ae60;
-    --accent: #e74c3c;
-    --accent-dark: #c0392b;
-    --text: #e0e0e0;
-    --text-light: #b0b0b0;
-    --text-dark: #888;
-    --bg: #0a0a0a;
-    --bg-light: #1a1a2e;
-    --bg-lighter: #2a2a3e;
-    --shadow: rgba(0, 0, 0, 0.3);
-    --gradient: linear-gradient(135deg, var(--primary), var(--secondary),));
-    --gradient-dark: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
+  --primary: #fb61ca;
+  --primary-dark: #bc329c;
+  --secondary: #19c197;
+  --accent: #ffffff;
+  --heading-color: #cd1ac3;
+  --text: #fff;
+  --bg: #000;
+  --border-color: #333;
+  --gradient-pink: linear-gradient(135deg, #fb61ca 0%, #cd1ac3 100%);
+  --diamond-size: 20px;
+  --diamond-border: 3px solid #cd1ac3;
+}
+/* Reset and Base Styles */
+*, *:before, *:after {
+  margin: 0; padding: 0; box-sizing: border-box;
 }
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
 body {
-    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    overflow-x: hidden;
-    line-height: 1.6;
-}
-
-
-.loading-screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-    z-index: 1;
-    transition: opacity 0.5s ease, visibility 0.5s ease;
-}
-
-.loading-screen.fade-out {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.loading-animation {
-    text-align: center;
-}
-
-.loading-ring {
-    width: 60px;
-    height: 60px;
-    border: 4px solid rgba(52, 152, 219, 0.2);
-    border-top: 4px solid var(--primary);
-    border-radius: 50%;
-    animation: spin 0s linear infinite;;
-    animation: fadeInUp 1s ease-out forwards; animation: fadeInUp;
-    margin: 0 auto 20px;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-
-.cursor-dot, .cursor-outline {
-    position: fixed;
-    top: 0;
-    left: 0;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    z-index: 9999;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.5s ease;
-}
-
-.cursor-dot {
-    width: 8px;
-    height: 8px;
-    background: var(--primary);
-}
-
-.cursor-outline {
-    width: 40px;
-    height: 40px;
-    border: 2px solid var(--primary);
-    transition: all 0.2s ease-out;
-}
-
-body:hover .cursor-dot,
-body:hover .cursor-outline {
-    opacity: 1;
-}
-
-#particles-js {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1;
-}
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-
-header {
-    position: fixed;
-    width: 100%;
-    padding: 20px 50px;
-    background: rgba(10, 10, 10, 0.95);
-    backdrop-filter: blur(10px);
-    z-index: 1000;
-    border-bottom: 2px solid rgba(52, 152, 219, 0.3);
-    transition: all 0.3s ease;
-}
-
-.header-scrolled {
-    padding: 15px 50px;
-    background: rgba(10, 10, 10, 0.98);
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-}
-
-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.logo-text {
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.logo-dot {
-    width: 8px;
-    height: 8px;
-    background: var(--secondary);
-    border-radius: 50%;
-    margin-left: 5px;
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-.logo:hover {
-    transform: scale(1.05);
-}
-
-.nav-links {
-    display: flex;
-    gap: 30px;
-    list-style: none;
-}
-
-.nav-links a {
-    color: var(--text);
-    text-decoration: none;
-    font-size: 16px;
-    font-weight: 500;
-    position: relative;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-
-.nav-links a::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -5px;
-    left: 0;
-    background: var(--gradient);
-    transition: width 0.3s ease;
-}
-
-.nav-links a:hover::after,
-.nav-links a.active::after {
-    width: 100%;
-}
-
-.nav-links a:hover,
-.nav-links a.active {
-    color: var(--primary);
-    transform: translateY(-2px);
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Inter', sans-serif;
+  line-height: 1.7;
+  min-height: 100vh;
+  transition: background 1s;
+}
+a, button {
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.3s;
+}
+h1, h2, h3, h4 {
+  color: var(--heading-color);
+  font-family: 'Inter', sans-serif;
+  font-weight: 700;
+  letter-spacing: 1px;
 }
-
-.mobile-menu {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
-}
-
-.mobile-menu span {
-    width: 25px;
-    height: 3px;
-    background: var(--primary);
-    margin: 3px 0;
-    transition: 0.3s;
-}
-
-
-.hero {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 50px;
-    position: relative;
-    overflow: hidden;
-}
-
-.hero-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 1200px;
-    width: 100%;
-    gap: 50px;
-}
-
-.hero-text {
-    flex: 1;
-    z-index: 1;
-    opacity: 0;
-    transform: translateY(50px);
-    animation: fadeInUp 1s ease-out forwards;
-}
-
-@keyframes fadeInUp {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.hero-title {
-    font-size: 56px;
-    margin-bottom: -20px;
-    line-height: 1.2;
-}
-
-.title-line {
-    display: block;
+.section-title {
+  font-size: 2.75rem;
+  margin: 1.5em auto;
+  padding-bottom: 0.6em;
+  border-bottom: 4px solid var(--heading-color);
+  text-align: center;
 }
-
 .highlight {
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    position: relative;
-}
-
-.highlight::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 3px;
-    background: var(--gradient);
-    transform: scaleX(0);
-    transform-origin: left;
-    animation: expandWidth 1.5s ease forwards 0.5s;
-}
-
-@keyframes expandWidth {
-    to {
-        transform: scaleX(1);
-    }
-}
-
-.hero-subtitle {
-    font-size: 32px;
-    color: var(--primary);
-    margin-bottom: 20px;
-    font-weight: 600;
+  color: var(--primary);
+  background: var(--gradient-pink);
+  padding: 0.1em 0.5em;
+  border-radius: 8px;
 }
-
-.hero-description {
-    font-size: 18px;
-    line-height: 1.6;
-    margin-bottom: 30px;
-    color: var(--text-light);
-    max-width: 600px;
-}
-
-.cta-buttons {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
+nav {
+  background: rgba(0,0,0,0.9);
+  position: fixed; width: 100%;
+  top:0; left:0; z-index:999;
+  border-bottom: 1px solid var(--border-color);
+}
+.logo-text { color: var(--heading-color); font-weight: 700; }
+.logo-dot { display: inline-block; width: 8px; height: 8px; background: var(--secondary); border-radius: 50%; margin-left: 5px;}
+ul.nav-links {
+  list-style: none; display: flex; gap: 2.2em; align-items: center;
+}
+.nav-links a { color: var(--accent); padding: 1em 0; }
+.nav-links a:hover, .nav-links a.active { color: var(--primary);}
+.home, .about, .skills, .projects, .contact { padding: 100px 0 50px; min-height: 100vh;}
+.container { max-width: 1000px; margin: auto; padding: 0 24px; }
+
+.hero-title { font-size: 3rem; }
+.hero-subtitle { font-size: 2rem; color: var(--primary);}
+.hero-description { color: var(--accent); font-size: 1.15rem; max-width: 500px;}
+.cta-buttons { 
+  display: flex; gap: 30px; margin-top: 2em;
 }
-
 .cta-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    padding: 15px 40px;
-    border-radius: 50px;
-    font-weight: 600;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    border: none;
-    font-size: 16px;
-    text-decoration: none;
-}
-
-.cta-button.primary {
-    background: var(--gradient);
-    color: white;
-}
-
-.cta-button.secondary {
-    background: transparent;
-    border: 2px solid var(--primary);
-    color: var(--primary);
-}
-
-.cta-button::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.cta-button:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-.cta-button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4);
-}
-
-.cta-button.secondary:hover {
-    background: var(--gradient);
-    color: white;
-}
-
-.hero-visual {
-    flex: 1;
-    position: relative;
-    height: 400px;
-}
-
-.floating-shapes {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.shape {
-    position: absolute;
-    border-radius: 50%;
-    background: var(--gradient);
-    opacity: 0.7;
-    filter: blur(20px);
-    animation: float 6s ease-in-out infinite;
-}
-
-.shape-1 {
-    width: 100px;
-    height: 100px;
-    top: 20%;
-    left: 10%;
-    animation-delay: 0s;
-}
-
-.shape-2 {
-    width: 150px;
-    height: 150px;
-    top: 50%;
-    right: 10%;
-    animation-delay: 2s;
-}
-
-.shape-3 {
-    width: 80px;
-    height: 80px;
-    bottom: 20%;
-    left: 30%;
-    animation-delay: 4s;
-}
-
-@keyframes float {
-    0%, 100% {
-        transform: translate(0, 0) scale(1);
-    }
-    50% {
-        transform: translate(-20px, 20px) scale(1.1);
-    }
-}
-
-.scroll-indicator {
-    position: absolute;
-    bottom: 30px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    color: var(--text-light);
-    font-size: 14px;
-    opacity: 0;
-    animation: fadeIn 1s ease forwards 1.5s;
-}
-
-@keyframes fadeIn {
-    to {
-        opacity: 1;
-    }
-}
-
-.scroll-arrow {
-    width: 2px;
-    height: 30px;
-    background: var(--primary);
-    position: relative;
-}
-
-.scroll-arrow::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 10px;
-    height: 10px;
-    border-right: 2px solid var(--primary);
-    border-bottom: 2px solid var(--primary);
-    transform: translateX(-50%) rotate(45deg);
-    animation: bounce 2s infinite;
-}
-
-@keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateX(-50%) rotate(45deg) translateY(0);
-    }
-    40% {
-        transform: translateX(-50%) rotate(45deg) translateY(-10px);
-    }
-    60% {
-        transform: translateX(-50%) rotate(45deg) translateY(-5px);
-    }
-}
-
-
-section {
-    padding: 100px 0;
-}
-
-.section-title {
-    font-size: 42px;
-    text-align: center;
-    margin-bottom: 60px;
-    position: relative;
-    color: var(--text);
-}
-
-.section-title::after {
-    content: '';
-    position: absolute;
-    bottom: -15px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 4px;
-    background: var(--gradient);
-    border-radius: 2px;
-}
-
-
-.about-content {
-    display: flex;
-    align-items: center;
-    gap: 60px;
-}
-
-.about-text {
-    flex: 1;
-}
-
-.about-text p {
-    margin-bottom: 20px;
-    font-size: 18px;
-    line-height: 1.6;
-    color: var(--text-light);
-}
-
-.about-stats {
-    display: flex;
-    gap: 30px;
-    margin-top: 40px;
-}
-
-.stat {
-    text-align: center;
-}
-
-.stat-number {
-    display: block;
-    font-size: 42px;
-    font-weight: bold;
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 5px;
-}
-
-.stat-label {
-    font-size: 16px;
-    color: var(--text-light);
-}
-
-.about-image {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.profile-container {
-    position: relative;
-    width: 300px;
-    height: 300px;
-}
-
-.profile-ring {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background: conic-gradient(var(--primary), var(--secondary), var(--primary));
-    padding: 10px;
-    animation: rotate 10s linear infinite;
-}
-
-.profile-ring-inner {
-    width: 100%;
-    height: 100%;
-    background: var(--bg-light);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.profile-initials {
-    font-size: 150px;
-    font-weight: bold;
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-
-.profile-glow {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 320px;
-    height: 320px;
-    background: var(--primary);
-    border-radius: 50%;
-    filter: blur(40px);
-    opacity: 0.3;
-    z-index: -1;
-    animation: pulse 3s ease-in-out infinite;
-}
-
-@keyframes rotate {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-
+  padding: 15px 36px;
+  border: none;
+  border-radius: 11px;
+  font-weight: 600;
+  font-size: 1.1em;
+  transition: background 0.3s, transform 0.2s;
+  background: var(--gradient-pink);
+  color: var(--bg);
+  box-shadow: 0 6px 22px rgba(245, 97, 202, 0.22)
+}
+.cta-button.secondary { background: var(--secondary); color: var(--bg);}
+.cta-button:hover { transform: translateY(-4px) scale(1.03);}
+.about-content { display: flex; gap: 45px; }
+.about-text { flex: 1; color: var(--text);}
 .skills-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 30px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
+  gap: 2rem;
+  margin: 2em 0;
 }
-
 .skill-card {
-    background: var(--bg-light);
-    padding: 40px 30px;
-    border-radius: 20px;
-    text-align: center;
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-    border: 1px solid rgba(52, 152, 219, 0.1);
+  background: var(--bg);
+  border-radius: 17px;
+  box-shadow: 0 4px 24px rgba(245, 97, 202, 0.13);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2px solid var(--border-color);
+  transition: transform 0.5s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s;
+}
+.skill-card:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 8px 39px rgba(245, 97, 202, 0.28);}
+.skill-icon img { width: 45px; height: 45px; filter: drop-shadow(0 1px 6px var(--primary)); margin-bottom: 9px;}
+.skill-card h3 { margin: 0.6em 0 0; font-size: 1.24em; color: var(--heading-color);}
+.animate-skill { animation: skillFade 1.8s cubic-bezier(.24,.64,.41,.97) forwards; opacity:0;}
+@keyframes skillFade {
+  0% { opacity:0; transform: translateY(30px);}
+  100% { opacity:1; transform: translateY(0);}
 }
-
-.skill-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 5px;
-    background: var(--gradient);
-    transform: scaleX(0);
-    transform-origin: left;
-    transform-origin: right;
-    transition: transform 0.3s ease;
-}
-
-.skill-card:hover::before {
-    transform: scaleX(1);
-}
-
-.skill-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
-}
-
-.skill-icon {
-    width: 80px;
-    height: 80px;
-    margin: 0 auto 20px;
-    background: rgba(52, 152, 219, 0.1);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--primary);
-}
-.skill-icon { color: red !important; }
-
-
-.skill-card h3 {
-    font-size: 24px;
-    margin-bottom: 15px;
-    color: var(--text);
-}
-
-.skill-card p {
-    color: var(--text-light);
-    margin-bottom: 20px;
-    transition: transform 0.3s
-}
-.skill-card:hover { transform: scale(1.1) }
-.skill-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: center;
-}
-
-.skill-tagss {
-    background: rgba(52, 152, 219, 0.1);
-    color: var(--primary);
-    padding: 5px 15px;
-    border-radius: 20px;
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-}
-
-.skill-tag:hover {
-    background: var(--primary);
-    color: white;
-    transform: translateY(-2px);
-}
-
-
 .projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 30px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
+  gap: 2.5em;
+  margin-top: 1.2em;
 }
-
 .project-card {
-    background: var(--bg-light);
-    border-radius: 20px;
-    overflow: hidden;
-    transition: all 0.3s ease;
-    border: 1px solid rgba(52, 152, 219, 0.1);
-}
-
-.project-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
-}
-
-.project-image {
-    height: 200px;
-    background: var(--bg-lighter);
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.project-icon {
-    font-size: 60px;
-}
-
-.project-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(10, 10, 10, 0.9);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 90;
-    opacity:1;
-    transition: all 0.3s ease;
-}
-
-.project-card:hover .project-overlay {
-    opacity: 1;
-}
-
-.project-links {
-    display: flex;
-    gap: 15px;
-}
-
-.project-link {
-    padding: 10px 20px;
-    background: var(--gradient);
-    color: white;
-    text-decoration: none;
-    border-radius: 50px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-}
-
-.project-link:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
-}
-
-.project-content {
-    padding: 30px;
-}
-
-.project-content h3 {
-    font-size: 24px;
-    margin-bottom: 15px;
-    color: var(--text);
-}
-
-.project-content p {
-    color: var(--text-light);
-    margin-bottom: 20px;
+  background: var(--bg);
+  border-radius: 19px;
+  box-shadow: 0 5px 17px rgba(245, 97, 202, 0.15);
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2px solid var(--border-color);
+  transition: transform 0.4s, box-shadow 0.3s;
+}
+.project-card:hover {transform: scale(1.03); box-shadow: 0 12px 52px rgba(245,97,202,0.19);}
+.project-icon img { width: 42px; height: 42px; margin-bottom: 12px;}
+.project-content h3 { color: var(--primary); margin-bottom: 0.7em;}
+.project-content p { color: var(--text); font-size: 1rem;}
+.contact-box {
+  background: var(--bg);
+  border-radius: 20px;
+  box-shadow: 0 5px 18px rgba(245,97,202,0.17);
+  padding: 2.2em;
+  max-width: 500px;
+  margin: auto;
 }
-
-.project-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.project-tag {
-    background: rgba(52, 152, 219, 0.1);
-    color: var(--primary);
-    padding: 5px 15px;
-    border-radius: 20px;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-
-.contact-content {
-    display: flex;
-    gap: 60px;
-    align-items: flex-start;
-}
-
-.contact-info {
-    flex: 1;
-}
-
-.contact-info h3 {
-    font-size: 32px;
-    margin-bottom: 20px;
-    color: var(--text);
-}
-
-.contact-info p {
-    color: var(--text-light);
-    margin-bottom: 40px;
-    font-size: 18px;
-}
-
-.contact-details {
-    margin-bottom: 40px;
-}
-
-.contact-item {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    margin-bottom: 25px;
-}
-
-.contact-icon {
-    width: 50px;
-    height: 50px;
-    background: rgba(52, 152, 219, 0.1);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--primary);
-}
-
-.contact-text span:first-child {
-    display: block;
-    font-weight: 600;
-    margin-bottom: 5px;
-}
-
-.contact-text span:last-child {
-    color: var(--text-light);
-}
-
-.social-links {
-    display: flex;
-    gap: 15px;
-}
-
-.social-links a {
-    width: 50px;
-    height: 50px;
-    background: rgba(52, 152, 219, 0.1);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--primary);
-    transition: all 0.3s ease;
-    transition: none;
-}
-
-.social-links a:hover {
-    background: var(--gradient);
-    color: white;
-    transform: translateY(-5px);
-}
-
 .contact-form {
-    flex: 1;
-    background: var(--bg-light);
-    padding: 40px;
-    border-radius: 20px;
-    border: 1px solid rgba(52, 152, 219, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 1.7em;
 }
-
 .form-group {
-    margin-bottom: 25px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 10px;
-    font-weight: 500;
-    color: var(--text);
-}
-
-.form-group input,
-.form-group textarea {
-    width: 100%;
-    padding: 15px 20px;
-    background: var(--bg-lighter);
-    border: 1px solid rgba(52, 152, 219, 0.2);
-    border-radius: 10px;
-    color: var(--text);
-    font-size: 16px;
-    transition: all 0.3s ease;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
-}
-
-.form-group textarea {
-    min-height: 150px;
-    resize: vertical;
-}
-
-.submit-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    padding: 15px 40px;
-    background: var(--gradient);
-    color: white;
-    border: none;
-    border-radius: 50px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 16px;
-}
-
-.submit-button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4);
-}
-
-
-footer {
-    background: var(--bg-light);
-    padding: 60px 0 30px;
-    border-top: 1px solid rgba(52, 152, 219, 0.1);
-}
-
-.footer-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 40px;
-}
-
-.footer-logo p {
-    color: var(--text-light);
-    margin-top: 10px;
-}
-
-.footer-links {
-    display: flex;
-    gap: 30px;
-}
-
-.footer-links a {
-    color: var(--text-light);
-    text-decoration: none;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-
-.footer-links a:hover {
-    color: var(--primary);
-    transform: translateY(-2px);
-}
-
-.footer-bottom {
-    text-align: center;
-    padding-top: 30px;
-    border-top: 1px solid rgba(52, 152, 219, 0.1);
-    color: var(--text-light);
-    font-size: 14px;
-}
-
-.footer-bottom p:first-child {
-    margin-bottom: 10px;
-}
-
-
-.back-to-top {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    width: 50px;
-    height: 50px;
-    background: var(--gradient);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-    z-index: 100;
-}
-
-.back-to-top.visible {
-    opacity: 1;
-    visibility: visible;
-}
-
-.back-to-top:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4);
-}
-
-
-@media "max-width: 1024px":{
-    .hero-title {
-        font-size: 48px;
-    }
-    
-    .hero-subtitle {
-        font-size: 28px;
-    }
-    
-    .about-content {
-        flex-direction: column;
-        text-align: center;
-    }
-    
-    .contact-content {
-        flex-direction: column;
-    }
-}
-
-@media "max-width: 768px": {
-    header {
-        padding: 15px 20px;
-    }
-    
-    .header-scrolled {
-        padding: 10px 20px;
-    }
-    
-    .nav-links {
-        position: fixed;
-        top: 70px;
-        left: 0;
-        width: 100%;
-        background: var(--bg);
-        flex-direction: column;
-        align-items: center;
-        padding: 20px 0;
-        gap: 20px;
-        transform: translateY(-100%);
-        opacity: 0;
-        visibility: hidden;
-        transition: all 0.3s ease;
-        border-bottom: 2px solid rgba(52, 152, 219, 0.3);
-    }
-    
-    .nav-links.active {
-        transform: translateY(0);
-        opacity: 1;
-        visibility: visible;
-    }
-    
-    .mobile-menu {
-        display: flex;
-    }
-    
-    .mobile-menu.active span:nth-child(1) {
-        transform: rotate(45deg) translate(5px, 5px);
-    }
-    
-    .mobile-menu.active span:nth-child(2) {
-        opacity: 0;
-    }
-    
-    .mobile-menu.active span:nth-child(3) {
-        transform: rotate(-45deg) translate(7px, -6px);
-    }
-    
-    .hero {
-        padding: 0 20px;
-    }
-    
-    .hero-content {
-        flex-direction: column;
-        text-align: center;
-    }
-    
-    .hero-title {
-        font-size: 36px;
-    }
-    
-    .hero-subtitle {
-        font-size: 24px;
-    }
-    
-    .cta-buttons {
-        justify-content: center;
-    }
-    
-    .about-stats {
-        flex-direction: column;
-        gap: 20px;
-    }
-    
-    .footer-content {
-        flex-direction: column;
-        gap: 30px;
-        text-align: center;
-    }
-    
-    .footer-links {
-        justify-content: center;
-    }
-}
-
-@media ('max-width: 480px") {
-    .hero-title {
-        font-size: 32px;
-    }
-    
-    .hero-subtitle {
-        font-size: 20px;
-    }
-    
-    .cta-button {
-        width: 100%;
-        justify-content: center;
-    }
-    
-    .section-title {
-        font-size: 32px;
-    }
-    
-    .projects-grid,
-    .skills-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .contact-form {
-        padding: 30px 20px;
-    }
-}
-.skill-visualization {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-    gap: 20px;
-    margin-top: 40px;
-}
-
-.skill-icon-3d {
-    width: 80px;
-    height: 80px;
-    background: var(--bg-light);
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-
-.skill-icon-3d::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-    transition: left 0.5s;
-}
-
-.skill-icon-3d:hover::before {
-    left: 100%;
-}
-
-.skill-icon-3d:hover {
-    transform: translateY(-10px) scale(1.1);
-    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3);
-}
-.timeline {
-    position: relative;
-    max-width: 800px;
-    margin: 50px auto;
-}
-
-.timeline::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 4px;
-    height: 100%;
-    background: var(--gradient);
-}
-
-.timeline-item {
-    margin: 40px 0;
-    opacity: 0;
-    transform: translateY(50px);
-    transition: all 0.6s ease;
-}
-
-.timeline-item.animate-in {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.timeline-content {
-    background: var(--bg-light);
-    padding: 25px;
-    border-radius: 15px;
-    position: relative;
-    width: 45%;
-    border: 1px solid rgba(52, 152, 219, 0.2);
-}
-
-.timeline-item:nth-child(odd) .timeline-content {
-    margin-left: 55%;
-}
-
-.timeline-item:nth-child(even) .timeline-content {
-    margin-right: 55%;
-}
-.code-showcase {
-    background: #1e1e1e;
-    border-radius: 10px;
-    padding: 20px;
-    margin: 20px 0;
-    position: relative;
-    overflow: hidden;
-}
-
-.code-line {
-    display: block;
-    margin: 5px 0;
-    opacity: 0;
-    transform: translateX(-20px);
-    animation: typeIn 0.5s ease forwards;
-}
-
-@keyframes typeIn {
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-.code-cursor {
-    display: inline-block;
-    width: 2px;
-    height: 1.2em;
-    background: var(--primary);
-    margin-left: 2px;
-    animation: blink 1s infinite;
-}
-
-@keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-}
-.project-card {
-    perspective: 1000px;
-    height: 400px;
-}
-
-.project-card-inner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    transform-style: preserve-3d;
-    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.project-card:hover .project-card-inner {
-    transform: rotateY(180deg);
-}
-
-.project-card-front,
-.project-card-back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-    border-radius: 20px;
-    background: var(--bg-light);
-    overflow: hidden;
-}
-
-.project-card-back {
-    transform: rotateY(180deg);
-    padding: 30px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    background: var(--gradient-dark);
-}
-
-.tech-stack {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 20px 0;
-}
-
-.tech-item {
-    background: rgba(255, 255, 255, 0.2);
-    padding: 5px 12px;
-    border-radius: 15px;
-    font-size: 12px;
-    color: white;
-}
-.skill-level {
-    margin-top: 15px;
-}
-
-.skill-progress {
-    height: 6px;
-    background: var(--bg-lighter);
-    border-radius: 10px;
-    overflow: hidden;
-    position: relative;
-}
-
-.skill-progress-bar {
-    height: 100%;
-    background: var(--gradient);
-    border-radius: 10px;
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 1.5s ease-out;
+  position: relative;
+  margin-bottom: 1em;
+}
+.input-icon {
+  position: absolute;
+  left: 13px;    top: 50%; transform: translateY(-50%);
+  width: 24px; height: 24px;
+  display: flex; align-items: center; justify-content: center;
+}
+.input-icon img { width: 22px; height: 22px;  opacity: 0.72;}
+input, textarea {
+  width: 100%; padding: 12px 12px 12px 45px;
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 1.07em;
+}
+textarea { min-height: 120px; resize: vertical;}
+input:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(251,97,202,0.17);}
+button.cta-button { margin-top: 0.8em;}
+footer { background: var(--bg); color: var(--text); text-align: center; padding: 2em 0;}
+/* Diamond Cursor Styles */
+.cursor-dot, .cursor-outline {
+  pointer-events: none; position: fixed;
+  top: 0; left: 0; z-index: 9999;
+  transform: translate(-50%, -50%) rotate(45deg);
 }
-
-.skill-card.animate-in .skill-progress-bar {
-    transform: scaleX(1);
+.cursor-dot {
+  width: var(--diamond-size); height: var(--diamond-size);
+  background: var(--secondary);
+  border-radius: 3px;
+  border: var(--diamond-border);
+  transition: transform 0.12s;
 }
-
-.skill-percentage {
-    position: absolute;
-    right: 0;
-    top: -20px;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--primary);
+.cursor-outline {
+  width: calc(var(--diamond-size) * 2); height: calc(var(--diamond-size) * 2);
+  border: var(--diamond-border);
+  border-radius: 8px;
+  background: none;
+  transition: border-color 0.22s, width 0.22s, height 0.22s;
+}
+/* Pink Headings */
+h1, h2, h3, .section-title { color: var(--heading-color); }
+/* Responsive */
+@media (max-width: 900px) {
+  .about-content { flex-direction: column; gap: 30px;}
+  .skills-grid, .projects-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 600px) {
+  header { padding: 10px 0; }
+  .section-title { font-size: 2em; }
+  .hero-title { font-size: 2em;}
 }
