/* ============================================================
   RESET & ROOT VARIABLES (Includes Dark/Light Mode)
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

:root {
  /* Dark Mode Colors (Default) */
  --bg-primary: #000;
  --bg-secondary: #020617;
  --bg-card: #0b1120;
  --bg-input: #020617;
  --text-primary: #fff;
  --text-secondary: #bdbdbd;
  --text-muted: #94a3b8;
  --border-color: #1e293b;
  --circle-bg: #111;
  --shadow-color: rgba(62, 227, 50, 0.55);
  --animated-gradient: linear-gradient(270deg, #3EE332, #3F5EFB, #FC466B, #3EE332);
}

/* ===== LIGHT MODE OVERRIDES ===== */
.light-mode {
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --border-color: #cbd5e1;
  --circle-bg: #e2e8f0;
  --shadow-color: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   GLOBAL STYLES
   ============================================================ */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
    font-family: 'Inter', sans-serif; 

  transition: background 0.3s ease, color 0.3s ease;
}

.gradient-animated {
  font-weight: bold;
  background: var(--animated-gradient);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5%;
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s ease, border-color 0.3s ease;
}

nav h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-item {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding: 6px 0;
  transition: color 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--animated-gradient);
  background-size: 600% 600%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.nav-item:hover::after {
  transform: scaleX(1);
  animation: gradientMove 6s ease infinite;
}

.nav-item:hover {
  background: var(--animated-gradient);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 6s ease infinite;
}

#theme-toggle {
  font-size: 1.2rem;
  padding: 0 4px;
}

.nav-cv {
  font-size: 0.8rem;
  padding: 6px 14px;
  margin-left: 4px;
  top: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.cv-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              var(--animated-gradient) border-box;
  background-size: 600% 600%;
  animation: gradientMove 8s ease infinite;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.cv-btn i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.cv-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 22px var(--shadow-color);
  background-color: #3EE332;
  color: #fff;
}

.hire-btn {
  margin-left: 15px;
  background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
              linear-gradient(270deg, #FC466B, #3F5EFB) border-box;
}

/* ============================================================
   HERO SECTION (Compact)
   ============================================================ */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 5%;
  gap: 40px;
}

.hero-text {
  max-width: 55%;
  flex: 1;
}

.hero-text h1 {
  font-size: 2.8rem;
  margin-bottom: 12px;
  line-height: 1.2;
  color: var(--text-primary);
}

.hero-text .subtitle {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.dynamic-text {
  font-weight: bold;
  background: var(--animated-gradient);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 8s ease infinite;
}

.hero-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 10px;
  line-height: 1.7;
  max-width: 600px;
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 1.3rem;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
              var(--animated-gradient) border-box;
  background-size: 600% 600%;
  animation: gradientMove 8s ease infinite;
  transition: all 0.3s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 12px 20px var(--shadow-color);
}

.hero-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid transparent;
  background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
              var(--animated-gradient) border-box;
  background-size: 600% 600%;
  animation: gradientMove 8s ease infinite;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ============================================================
   ABOUT SECTION (Compact)
   ============================================================ */
/* ============================================================
   ABOUT SECTION (Image Left | Text + Skills + Stats Right)
   ============================================================ */

.about {
    padding: 60px 5%;
    background: var(--bg-primary);
    transition: background 0.3s ease;
}

.about-container {
    display: flex;
    align-items: flex-start; /* Top se align */
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== LEFT: Image ===== */
.about-image {
    flex: 0 0 280px;
    text-align: center;
    position: sticky;
    top: 100px; /* Scroll ke saath thoda stick */
}

.about-image img {
    width: 100%;
    max-width: 280px;
    border-radius: 18px;
    border: 3px solid transparent;
    background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
                var(--animated-gradient) border-box;
    background-size: 600% 600%;
    animation: gradientMove 8s ease infinite;
    display: block;
    transition: transform 0.3s ease;
}

.about-image img:hover {
    transform: scale(1.03);
}

/* ===== RIGHT: Content (Text + Skills + Stats) ===== */
.about-content {
    flex: 1;
}

/* Text */
.about-text h2 {
    font-size: 2rem;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.about-text p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

/* Skills (Right Column) */
.about-skills {
    margin-top: 25px;
}

.about-skills h3 {
    margin-bottom: 14px;
    font-size: 1.3rem;
    color: var(--text-primary);
}
/* ============================================================
   SKILL TAGS (Gap Kam + Gradient Border Button Style)
   ============================================================ */

.skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Pehle 10px tha, ab 6px (gap kam) */
    justify-content: flex-start; /* Left se start */
    
}

.skill-list span {
  display: inline-block;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid transparent;
 background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
              linear-gradient(270deg, #FC466B, #3F5EFB) border-box;
  animation: gradientMove 8s ease infinite;
  transition: all 0.3s ease;
  cursor: pointer;
  
}

/* Hover par thoda effect */
.skill-list span:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(22, 202, 9, 0.2);
    color: var(--text-primary);
}

/* Light Mode */
.light-mode .skill-list span {
    background: linear-gradient(#ffffff, #ffffff) padding-box,
                var(--animated-gradient) border-box;
}
.skill-list span:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(62, 227, 50, 0.15);
}

/* Stats (Right Column) */
.about-stats {
    display: flex;
    gap: 35px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
}

.stat h4 {
    font-size: 1.7rem;
    color: var(--text-primary);
}

.stat p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ============================================================
   RESPONSIVE - Mobile (Image Upar, Sab Neeche)
   ============================================================ */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .about-image {
        flex: 0 0 auto;
        width: 200px;
        position: static; /* Sticky hatao mobile par */
    }

    .about-image img {
        max-width: 200px;
    }

    .about-content {
        text-align: center;
    }

    .about-text p {
        font-size: 0.9rem;
    }

    .skill-list {
        justify-content: center;
    }

    .about-stats {
        justify-content: center;
        gap: 25px;
    }

    .stat h4 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .about {
        padding: 40px 5%;
    }

    .about-image {
        width: 160px;
    }

    .about-image img {
        max-width: 160px;
    }

    .about-text h2 {
        font-size: 1.6rem;
    }

    .about-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat h4 {
        font-size: 1.3rem;
    }
}
/* ============================================================
   SKILLS SECTION (Compact)
   ============================================================ */
.skills-section {
  padding: 50px 5%;
  background: var(--bg-primary);
  transition: background 0.3s ease;
}

.skills-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.skills-title span {
  background: linear-gradient(270deg, #00ff7f, #00e5ff, #7cffcb, #00ff7f);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.skills-wrapper {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.skills-left {
  flex: 1;
  min-width: 280px;
}

.skills-right {
  flex: 1;
  min-width: 280px;
}

.skills-left h3,
.skills-right h3 {
  margin-bottom: 25px;
  display: inline-block;
  padding-bottom: 6px;
  position: relative;
  color: var(--text-primary);
}

.skills-left h3::after,
.skills-right h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--animated-gradient);
  background-size: 600% 600%;
  animation: gradientMove 8s ease infinite;
}

.skill-bar-item {
  margin-bottom: 20px;
  position: relative;
}

.skill-bar-item small {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--text-secondary);
}

.bar {
  height: 6px;
  background: var(--circle-bg);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 5px;
  transition: background 0.3s ease;
}

.fill {
  height: 100%;
  background: #0cdb1d;
  box-shadow: 0 0 12px rgba(0, 255, 127, 0.3);
  width: 0;
  transition: width 1.5s ease;
  border-radius: 10px;
}

.circle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.circle-box {
  text-align: center;
  position: relative;
}

.circle-box svg {
  transform: rotate(-90deg);
}

.circle-box circle {
  fill: none;
  stroke-width: 4;
}

.circle-box circle:first-child {
  stroke: var(--circle-bg);
  transition: stroke 0.3s ease;
}

.circle-box circle:last-child {
  stroke: #1cde12;
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  transition: stroke-dashoffset 1.5s ease;
}

.circle-box span {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.circle-box p {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ============================================================
   PROJECTS SECTION (Compact)
   ============================================================ */
.projects-section {
  padding: 50px 5%;
  background: var(--bg-primary);
  transition: background 0.3s ease;
}

.projects-header {
  text-align: center;
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.projects-header h2 {
  font-size: 2.5rem;
  margin-bottom: 25px;
  color: var(--text-primary);
}

.filter-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  font-family: 'Poppins', sans-serif;
}

.filter-btn .count {
  margin-left: 5px;
  opacity: 0.6;
  font-size: 0.75rem;
}

.filter-btn:hover,
.filter-btn.active {
  border-color: transparent;
  background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
              var(--animated-gradient) border-box;
  background-size: 600% 600%;
  animation: gradientMove 8s ease infinite;
  color: var(--text-primary);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 30px auto 0;
}

.project-card {
  display: block;
  animation: fadeIn 0.5s ease forwards;
  background: var(--bg-card);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: #3EE332;
  box-shadow: 0 10px 30px var(--shadow-color);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-img {
  position: relative;
  height: 180px;
  background: var(--circle-bg);
  overflow: hidden;
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-overlay a {
  color: #fff;
  font-size: 1.4rem;
  transition: color 0.3s ease;
}

.project-overlay a:hover {
  color: #3EE332;
}

.project-info {
  padding: 18px;
}

.project-info h3 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.project-info p {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.tags span {
  font-size: 0.7rem;
  background: var(--bg-secondary);
  padding: 3px 10px;
  border-radius: 4px;
  margin-right: 4px;
  color: #3EE332;
  border: 1px solid var(--border-color);
}

/* ============================================================
   CONTACT SECTION (Compact)
   ============================================================ */
.contact-section {
  padding: 50px 5%;
  background: var(--bg-primary);
  transition: background 0.3s ease;
}

.contact-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-header h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.contact-header p {
  color: var(--text-secondary);
}

.contact-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-form {
  flex: 2;
  background: var(--bg-card);
  padding: 30px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.input-group {
  margin-bottom: 18px;
}

.input-group input,
.input-group textarea {
  width: 100%;
  padding: 12px 15px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.input-group input:focus,
.input-group textarea:focus {
  border-color: #3EE332;
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--bg-card);
  padding: 18px;
  border-radius: 15px;
  border: 1px solid var(--border-color);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.info-item i {
  font-size: 1.3rem;
}

.info-item h4 {
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--text-primary);
}

.info-item p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================================
   FOOTER (Compact)
   ============================================================ */
.simple-footer {
  padding: 30px 5%;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  text-align: center;
  margin-top: 40px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo h3 {
  font-size: 1.3rem;
  letter-spacing: 1px;
}

.footer-socials-simple {
  display: flex;
  gap: 20px;
}

.footer-socials-simple a {
  color: var(--text-muted);
  font-size: 1.2rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-socials-simple a:hover {
  color: #3EE332;
  transform: translateY(-3px);
}

.copyright {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 5px;
}

/* ============================================================
   RESPONSIVE (Mobile)
   ============================================================ */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    padding: 12px 5%;
    gap: 10px;
  }

  .nav-right {
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .nav-item {
    font-size: 0.85rem;
  }

  .nav-cv {
    margin-left: 0;
    width: auto;
    padding: 5px 12px;
  }

  .hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 30px 5%;
    gap: 20px;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-description {
    max-width: 100%;
    margin: 0 auto;
  }

  .hero-image {
    width: 160px;
    height: 160px;
  }

  .social-links {
    justify-content: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hire-btn {
    margin-left: 0;
  }

  .about-container {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .about-image img {
    width: 160px;
  }

  .about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    justify-items: center;
  }

  .skills-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .contact-wrapper {
    flex-direction: column;
    gap: 25px;
  }

  .contact-form,
  .contact-info {
    width: 100%;
  }

  .input-group input,
  .input-group textarea {
    font-size: 16px;
  }

  .cv-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .about-stats {
    grid-template-columns: 1fr;
  }

  .hero-image {
    width: 140px;
    height: 140px;
  }

  .hero-text h1 {
    font-size: 1.6rem;
  }

  .skills-title {
    font-size: 1.8rem;
  }

  .projects-header h2 {
    font-size: 1.8rem;
  }

  .contact-header h2 {
    font-size: 1.8rem;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .contact-form {
    padding: 15px;
  }
}
/* ============================================================
   CURSOR GLOW EFFECT
   ============================================================ */
#cursor-glow {
  position: fixed;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 227, 50, 0.15) 0%, rgba(63, 94, 251, 0.08) 40%, transparent 70%);
  pointer-events: none; /* Mouse clicks ko pass-through karne ke liye */
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Light mode mein cursor glow thoda dark ho jayega */
.light-mode #cursor-glow {
  background: radial-gradient(circle, rgba(62, 227, 50, 0.25) 0%, rgba(63, 94, 251, 0.15) 40%, transparent 70%);
}

/* ============================================================
   GLASSMORPHISM STYLES (Overriding existing cards)
   ============================================================ */
/* Navbar ko glass effect */
nav {
  background: rgba(2, 6, 23, 0.7) !important; /* Dark mode semi-transparent */
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.light-mode nav {
  background: rgba(255, 255, 255, 0.75) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

/* Project Cards ko glass effect */
.project-card {
  background: rgba(11, 17, 32, 0.6) !important; /* Dark mode glass */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.light-mode .project-card {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

/* Contact Form & Info Items ko glass effect */
.contact-form,
.info-item {
  background: rgba(11, 17, 32, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.light-mode .contact-form,
.light-mode .info-item {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

/* About Image ko glass effect */
.about-image img {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  background: rgba(11, 17, 32, 0.4) padding-box,
              var(--animated-gradient) border-box !important;
  background-size: 600% 600% !important;
  animation: gradientMove 8s ease infinite !important;
}

/* Skills badges (pills) ko glass effect */
.skill-list span {
  background: rgba(11, 17, 32, 0.5) padding-box,
              var(--animated-gradient) border-box !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.light-mode .skill-list span {
  background: rgba(255, 255, 255, 0.6) padding-box,
              var(--animated-gradient) border-box !important;
}

/* Social buttons ko glass effect */
.social-btn {
  background: rgba(11, 17, 32, 0.4) padding-box,
              var(--animated-gradient) border-box !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.light-mode .social-btn {
  background: rgba(255, 255, 255, 0.5) padding-box,
              var(--animated-gradient) border-box !important;
}

/* ============================================================
   BACK TO TOP BUTTON (Glassmorphism + Gradient Border)
   ============================================================ */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
                var(--animated-gradient) border-box;
    background-size: 600% 600%;
    animation: gradientMove 8s ease infinite;
    color: var(--text-primary);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px) scale(0.8);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Button visible hone par */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Hover effect */
#back-to-top:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 0 30px var(--shadow-color);
    background-color: rgba(62, 227, 50, 0.15);
}

/* Light mode mein thoda soft */
.light-mode #back-to-top {
    background: rgba(255, 255, 255, 0.8) padding-box,
                var(--animated-gradient) border-box !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.light-mode #back-to-top:hover {
    box-shadow: 0 0 30px rgba(62, 227, 50, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
    #back-to-top {
        bottom: 20px;
        right: 20px;
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }
}

/* ============================================================
   3D TILT EFFECT ON PROJECT CARDS
   ============================================================ */
.project-card {
    transition: transform 0.15s ease-out, 
                box-shadow 0.3s ease, 
                border-color 0.3s ease;
    will-change: transform;
    transform-style: preserve-3d;
    /* Background already glass hai, bas yeh ensure karein */
}

/* Hover par border aur shadow pehle se hai, bas usko maintain rakhein */
.project-card:hover {
    border-color: #3EE332;
    box-shadow: 0 10px 30px var(--shadow-color);
}

/* Card ke andar ke elements ko thoda 3D depth dein (optional) */
.project-card .project-img {
    transform: translateZ(20px);
    transition: transform 0.3s ease;
}

.project-card .project-info {
    transform: translateZ(10px);
    transition: transform 0.3s ease;
}

/* Hover par image aur text thoda aur upar uth jaye (extra depth) */
.project-card:hover .project-img {
    transform: translateZ(30px) scale(1.02);
}

.project-card:hover .project-info {
    transform: translateZ(15px);
}
/* ============================================================
   3D TILT + MOUSE REFLECTION GLOW (Project Cards)
   ============================================================ */

/* Project card ko relative banana zaroori hai taaki ::before sahi position le */
.project-card {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative; /* Ye pehle se set hai, but ensure kar raha hu */
    overflow: hidden;  /* Glow effect card ke bahar na jaye isliye */
}

/* Yeh hai wo glow effect jo mouse ke hisaab se move karega */
.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(62, 227, 50, 0.2), transparent 70%);
    pointer-events: none; /* Zaroori: Taaki glow ke upar click ho sake */
    border-radius: 15px;
    z-index: 1;
    opacity: 0; /* Default hidden */
    transition: opacity 0.4s ease;
}

/* Hover karne par hi glow dikhe */
.project-card:hover::before {
    opacity: 1;
}

/* Thoda extra: Card ke andar ke content ko glow ke upar rakhna (z-index) */
.project-card .project-img,
.project-card .project-info {
    position: relative;
    z-index: 2;
}

/* ============================================================
   CUSTOM CURSOR (Dot + Ring)
   ============================================================ */

/* 👇 Default cursor ko poora chhupao */
body {
    cursor: none;
}

/* Dot (Chhoti ball jo cursor ka exact position follow karegi) */
#custom-cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #3EE332; /* Neon Green */
    border-radius: 50%;
    pointer-events: none; /* Clicks pass through */
    z-index: 99999; /* Sab se upar */
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, background 0.3s ease;
    box-shadow: 0 0 15px rgba(62, 227, 50, 0.6);
}

/* Ring (Badi hollow circle jo thoda delay se follow karegi) */
#custom-cursor-ring {
    position: fixed;
    width: 35px;
    height: 35px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* ===== Hover Effects: Jab link/button par cursor jaye ===== */

/* Link ya button par ring thodi badi ho jaye aur dot chhoti */
a:hover ~ #custom-cursor-ring,
button:hover ~ #custom-cursor-ring,
.cv-btn:hover ~ #custom-cursor-ring,
.social-btn:hover ~ #custom-cursor-ring,
.project-card:hover ~ #custom-cursor-ring {
    width: 45px;
    height: 45px;
    border-color: #3EE332;
    background: rgba(62, 227, 50, 0.08);
}

a:hover ~ #custom-cursor-dot,
button:hover ~ #custom-cursor-dot,
.cv-btn:hover ~ #custom-cursor-dot,
.social-btn:hover ~ #custom-cursor-dot,
.project-card:hover ~ #custom-cursor-dot {
    transform: translate(-50%, -50%) scale(0.4);
    background: #ffffff;
}

/* ⚠️ NOTE: Kyunki elements fixed position mein hain, "~" (sibling) selector kaam nahi karega agar yeh siblings nahi hain.
   Isliye hum isko JS ke through handle karenge ya CSS mein better approach yeh hai ki hum "hover" state ko JS se handle karein.
   BUT, agar aap chahein toh JS wala code (neeche diya hai) automatically handle kar lega.
   Agar aap sirf CSS se karna chahein toh upar wale rules hata kar neeche wala JS use karein.
*/

/* Alternative: Agar JS se hover handle karte hain toh yeh CSS sirf default states ke liye hai, 
   aur JS class toggle karega. Isliye main neeche JS wala approach de raha hu jo zyada reliable hai.
   Phir bhi, default styles ke liye yeh upar wala code theek hai, lekin hover wala part JS mein karenge. */

/* 👇 Isko JS wale code ke saath use karne ke liye CSS classes */
#custom-cursor-dot.hover-effect {
    transform: translate(-50%, -50%) scale(0.4);
    background: #ffffff;
}

#custom-cursor-ring.hover-effect {
    width: 50px;
    height: 50px;
    border-color: #3EE332;
    background: rgba(62, 227, 50, 0.12);
}

/* Light Mode mein colors adjust */
.light-mode #custom-cursor-dot {
    background: #3F5EFB; /* Bright blue */
    box-shadow: 0 0 15px rgba(63, 94, 251, 0.6);
}

.light-mode #custom-cursor-ring {
    border-color: rgba(0, 0, 0, 0.3);
}

.light-mode #custom-cursor-ring.hover-effect {
    border-color: #3F5EFB;
    background: rgba(63, 94, 251, 0.1);
}

.light-mode #custom-cursor-dot.hover-effect {
    background: #000;
}

/* Mobile par custom cursor chhupao (kyunki touch device par mouse nahi hota) */
@media (max-width: 768px) {
    #custom-cursor-dot,
    #custom-cursor-ring {
        display: none;
    }
    body {
        cursor: auto; /* Default cursor wapas laao */
    }
}
/* ============================================================
   COPY EMAIL BUTTON & TOAST NOTIFICATION
   ============================================================ */

/* Email Wrapper - Flex layout to align text and button */
.email-copy-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Email text */
#email-address {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    word-break: break-all;
    cursor: pointer;
    transition: color 0.3s ease;
}

#email-address:hover {
    color: #3EE332;
}

/* Copy Button */
.copy-email-btn {
    background: none;
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: var(--bg-card);
    flex-shrink: 0;
}

.copy-email-btn:hover {
    border-color: #3EE332;
    color: #3EE332;
    box-shadow: 0 0 15px rgba(62, 227, 50, 0.2);
    transform: translateY(-2px);
}

/* Light mode hover */
.light-mode .copy-email-btn:hover {
    border-color: #3F5EFB;
    color: #3F5EFB;
    box-shadow: 0 0 15px rgba(63, 94, 251, 0.2);
}

/* ===== TOAST NOTIFICATION ("Copied! ✅") ===== */
#toast-message {
    position: fixed;
    bottom: 90px; /* Back-to-top button ke upar */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 12px 28px;
    border-radius: 12px;
    border: 1px solid #3EE332;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 99999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}

#toast-message.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

#toast-message i {
    margin-right: 10px;
    color: #3EE332;
}

/* Light mode toast */
.light-mode #toast-message {
    background: rgba(255, 255, 255, 0.9);
    border-color: #3F5EFB;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.light-mode #toast-message i {
    color: #3F5EFB;
}

/* Mobile responsive */
@media (max-width: 480px) {
    #toast-message {
        font-size: 0.85rem;
        padding: 10px 20px;
        bottom: 80px;
        white-space: normal;
    }
    .email-copy-wrapper {
        gap: 8px;
    }
}
/* ============================================================
   VISIT TIMER (Footer)
   ============================================================ */

.footer-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Thoda animate ho jaaye hover par */
}

.footer-timer i {
    font-size: 0.85rem;
    color: #3EE332;
}

#visit-timer {
    font-family: 'Montserrat', monospace;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 45px;
    text-align: center;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
}

/* Hover par thoda glow effect */
.footer-timer:hover {
    border-color: #3EE332;
    box-shadow: 0 0 20px rgba(62, 227, 50, 0.15);
    transform: translateY(-2px);
}

/* Light Mode */
.light-mode .footer-timer {
    background: rgba(255, 255, 255, 0.7);
    border-color: #cbd5e1;
}

.light-mode .footer-timer:hover {
    border-color: #3F5EFB;
    box-shadow: 0 0 20px rgba(63, 94, 251, 0.15);
}

.light-mode #visit-timer {
    color: #0f172a;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .footer-timer {
        font-size: 0.8rem;
        padding: 4px 12px;
    }
    #visit-timer {
        font-size: 0.85rem;
        min-width: 35px;
    }
}
/* ============================================================
   VOICE COMMAND BUTTON (Mic)
   ============================================================ */

#voice-command-btn {
    font-size: 1.2rem;
    padding: 0 4px;
    transition: all 0.3s ease;
}

/* Jab mic active ho (listening state) */
#voice-command-btn.listening {
    color: #ff3b3b !important;
    -webkit-text-fill-color: #ff3b3b !important;
    animation: pulse-mic 1.2s ease-in-out infinite;
}

@keyframes pulse-mic {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Voice status toast ke liye extra styling (optional) */
.voice-toast {
    border-color: #3F5EFB !important;
}

.voice-toast i {
    color: #3F5EFB !important;
}

.light-mode .voice-toast {
    border-color: #3F5EFB !important;
}

/* Active state mein mic red glow */
#voice-command-btn.listening::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: rgba(255, 59, 59, 0.2);
    filter: blur(8px);
    z-index: -1;
    animation: pulse-glow 1.2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(0.8); }
}
/* ============================================================
   GLOBAL TEXT SIZE REDUCTION
   ============================================================ */

/* Hero Heading */
.hero-text h1 {
    font-size: 2.4rem !important;    /* Pehle 2.8rem tha */
}

/* Hero Description */
.hero-description {
    font-size: 0.85rem !important;   /* Pehle 0.9rem tha */
}

/* Section Headings (About, Skills, Projects, Contact) */
.about-text h2,
.skills-title,
.projects-header h2,
.contact-header h2 {
    font-size: 2.2rem !important;    /* Pehle 2.5-2.8rem tha */
}

/* About Text */
.about-text p {
    font-size: 0.85rem !important;
}

/* Skill Badges */
.skill-list span {
    font-size: 0.75rem !important;
    padding: 4px 12px !important;
}

/* Skill Bar Labels */
.skill-bar-item span {
    font-size: 0.85rem !important;
}

/* Circle Professional Skills */
.circle-box span {
    font-size: 0.8rem !important;
}
.circle-box p {
    font-size: 0.75rem !important;
}

/* Contact Form Labels */
.contact-header p {
    font-size: 0.85rem !important;
}

/* Info Item Text */
.info-item p {
    font-size: 0.8rem !important;
}
.info-item h4 {
    font-size: 0.95rem !important;
}
/* ============================================================
   FIX: Section Headings Navbar ke Peeche Chhupne Se Bachao
   ============================================================ */

/* Har section ko navbar ki height ke barabar margin de do */
#home,
#about,
#skills,
#projects,
#contact {
    scroll-margin-top: 75px; /* Navbar ki height ke hisaab se (approx 70-75px) */
}

/* Agar navbar ka height different hai toh value adjust karein */
/* Mobile par thoda kam */
@media (max-width: 768px) {
    #home,
    #about,
    #skills,
    #projects,
    #contact {
        scroll-margin-top: 65px;
    }
}
/* ============================================================
   REACTION SYSTEM (❤️ 👍 💡 👎) + FLOATING HEARTS
   ============================================================ */

.reaction-section {
    padding: 40px 5% 60px;
    background: var(--bg-primary);
    transition: background 0.3s ease;
}

.reaction-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.reaction-container h3 {
    font-size: 1.8rem;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.reaction-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* Grid */
.reaction-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Each Reaction Item (Button) */
.reaction-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 80px;
    user-select: none;
    position: relative;
}

.reaction-item:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: #3EE332;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.reaction-item:active {
    transform: scale(0.92);
}

/* Click effect (pop animation) */
.reaction-item.pop {
    animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Emoji */
.reaction-emoji {
    font-size: 2.2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.reaction-item:hover .reaction-emoji {
    transform: scale(1.15) rotate(-5deg);
}

/* Label */
.reaction-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Count Number */
.reaction-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-primary);
    padding: 0 10px;
    border-radius: 20px;
    min-width: 24px;
    transition: all 0.3s ease;
}

.reaction-item:hover .reaction-count {
    color: #3EE332;
}

/* Light Mode */
.light-mode .reaction-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: #cbd5e1;
}

.light-mode .reaction-item:hover {
    border-color: #3F5EFB;
}

.light-mode .reaction-item:hover .reaction-count {
    color: #3F5EFB;
}

/* ===== FLOATING HEARTS ANIMATION ===== */
#floating-hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

.floating-heart {
    position: absolute;
    font-size: 2rem;
    animation: floatUp 2.5s ease-out forwards;
    opacity: 0;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-400px) scale(1.5) rotate(40deg);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .reaction-grid {
        gap: 12px;
    }

    .reaction-item {
        padding: 12px 16px;
        min-width: 60px;
    }

    .reaction-emoji {
        font-size: 1.8rem;
    }

    .reaction-count {
        font-size: 0.85rem;
    }

    .reaction-container h3 {
        font-size: 1.4rem;
    }
}

@media (max-width: 400px) {
    .reaction-item {
        padding: 10px 12px;
        min-width: 50px;
    }

    .reaction-emoji {
        font-size: 1.5rem;
    }

    .reaction-label {
        font-size: 0.65rem;
    }
}
h1, h2, h3 { font-family: 'Inter', sans-serif; font-weight: 700; }
/* Netlify Badge Hide */
[data-netlify-deploy-id],
.netlify-badge,
iframe[src*="netlify"],
#netlify-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}