/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background 0.3s, color 0.3s;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background: #f8f9fa;
  color: #333;
}

/* Dark Mode */
body.dark {
  background: #111827;
  color: #f9fafb;
}

body.dark .hero { background: linear-gradient(135deg, #111827, #1f2937); }
body.dark .card, body.dark .skill-card { background: #1f2937; color: #f9fafb; }
body.dark .skill-card p {
  color: #d1d5db; /* light gray for readability */
}

body.dark section h2 {
  color: #f9fafb; /* section headers readable in dark mode */
}

/* Optional: lighten skill icons a bit */
body.dark .skill-card i {
  color: #60a5fa;
}

body.dark .about { background: #1f2937; }
body.dark .contact { background: #000; }

/* Toggle Button */
#theme-toggle {
  position: fixed;       /* stays at top-right */
  top: 2px;              /* slightly up */
  right: 15px;           /* distance from right edge */
  padding: 0.4rem 0.8rem;  /* size of button */
  border: none;
  border-radius: 20px;
  background: #3b82f6;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 1000;
  transition: 0.3s;
}

#theme-toggle:hover {
  background: #2563eb;
}

/* Dark mode for top nav */
body.dark .top-nav {
  background: #1f2937;  /* match other dark sections */
  box-shadow: 0 2px 8px rgba(0,0,0,0.5); /* optional: slightly darker shadow for contrast */
}

body.dark .top-nav .nav-left li a {
  background: #3b82f6;  /* links stay blue */
  color: #fff;
}

body.dark .top-nav .nav-left li a:hover {
  background: #2563eb;
}

body.dark .top-nav #theme-toggle {
  background: #3b82f6;
  color: #fff;
}

body.dark .top-nav #theme-toggle:hover {
  background: #2563eb;
}

body.dark .hamburger {
  background: #3b82f6;
  color: #fff;
}

body.dark .hamburger:hover {
  background: #2563eb;
}


/* Top Navigation */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between; /* left links, right toggle */
  align-items: center;            /* vertically centers everything */
  padding: 0.5rem 2rem;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* Left side: nav links */
.nav-left ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.7rem;
}

.nav-left li a {
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background: #3b82f6;
  color: #ffffff;
  font-size: 0.9rem;
  transition: 0.3s;
}

.nav-left li a:hover {
  background: #2563eb;
}

/* Right side: toggle + hamburger */
.nav-right {
  display: flex;
  align-items: center; /* vertically centers toggle with nav links */
  gap: 0.5rem;
}

/* Hamburger button (hidden on desktop) */
.hamburger {
  display: none;
  font-size: 1.8rem;       /* bigger and easier to tap */
  background: none;
  border: none;
  cursor: pointer;
  color: #3b82f6;
  z-index: 3000;           /* make sure it’s above nav and menu */
  position: relative;       /* needed for z-index to work */
}

/* Mobile menu adjustments */
@media (max-width: 768px) {

  /* Hamburger button */
  .hamburger {
    display: flex;
    position: fixed;
    top: 12px;          /* move it down into the nav bar */
    left: 15px;
    font-size: 1.2rem;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    background: #3b82f6;
    color: #fff;
    cursor: pointer;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    border: none;
  }

  .hamburger:hover {
    background: #2563eb;
  }

  /* Dark mode toggle button on mobile only */
  #theme-toggle {
    top: 12px;          /* same vertical alignment as hamburger */
    right: 15px;        /* keep distance from right edge */
  }

  .nav-left ul {
    display: none;
    position: fixed;
    top: 50px;          /* keep below nav */
    left: 0;
    flex-direction: column;
    background: #fff;
    padding: 1rem;
    border-radius: 0 0 8px 8px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 2000;
  }

  .nav-left ul.show {
    display: flex;
  }
  .nav-left ul li {
    margin-bottom: 0.30rem; /* adjust value for more or less space */
  }

  .nav-left ul li:last-child {
    margin-bottom: 0; /* prevents extra gap at bottom */
  }
}

 /* ← ADD THE DARK MODE RULES HERE */
  body.dark .nav-left ul {
    background: #1f2937;
  }

  body.dark .nav-left ul li a {
    background: #3b82f6;
    color: #fff;
  }

  body.dark .nav-left ul li a:hover {
    background: #2563eb;
  }

/* Make top nav taller on mobile */
@media (max-width: 768px) {
  .top-nav {
    padding: 1rem 1rem;   /* increase top/bottom padding */
    min-height: 43px;     /* optional: ensures consistent height */
  }

  /* Optional: slightly adjust toggle and hamburger positions if needed */
  #theme-toggle {
    top: 2px;            /* nudges toggle down to sit nicely in taller nav */
  }

  .hamburger {
    top: 2px;            /* same for hamburger */
  }
}


/* Hero Section */
.hero {
  text-align: center;
  padding: 6rem 2rem 4rem;
  background: linear-gradient(135deg, #1f2937, #111827);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* spacing between lines */
  position: relative;
  overflow: hidden;
}

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

/* Floating logo with glow */
.hero-logo {
  display: block;
  margin: 0 auto 1.5rem auto;
  max-width: 300px;
  height: auto;
  opacity: 0;
  transform: scale(0.9);
  filter: drop-shadow(0 0 10px #3b82f6);
  animation: fadeInLogo 1s forwards 0.2s, floatLogo 6s ease-in-out infinite;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.hero-logo:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 25px #3b82f6);
}

@keyframes fadeInLogo {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
}

/* Hero text */
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: fadeInUp 1s forwards 0.5s;
}

.hero-subtitle {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: #e5e7eb;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: fadeInUp 1s forwards 0.8s;
}

.hero-tagline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #9ca3af;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: fadeInUp 1s forwards 1.1s;
}

/* Scroll down arrow */
.scroll-down {
  font-size: 2rem;
  color: #3b82f6;
  margin-top: 2rem;
  opacity: 0;
  animation: fadeInUp 1s forwards 1.4s, bounce 2s infinite 1.4s;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

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

/* Optional: particle overlay for depth */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  animation: moveParticles 30s linear infinite;
}

@keyframes moveParticles {
  0% { background-position: 0 0; }
  100% { background-position: 1000px 1000px; }
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 200px;
    margin-bottom: 1rem;
  }
}




/* Section Headings - Unified */
section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #111827;
  font-weight: 600;
}

section h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin: 0.5rem auto 2rem auto;
  background-color: #3b82f6;
  border-radius: 2px;
}

/* Projects / Labs */
.projects, .skills {
  padding: 3rem 2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card, .skill-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s, box-shadow 0.3s;
  min-height: 320px; /* ensures all cards are same height */
}

.card:hover, .skill-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* About Me Section */
.about#about {
  text-align: center;
  margin: 3rem auto;
  max-width: 800px;
  padding: 2rem 1.5rem;
  background: #f3f4f6;   /* light card background */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  color: #374151;        /* text color for light mode */
}

.about#about h2 {
  margin-bottom: 1rem;
}

.about#about p {
  line-height: 1.6;
  font-size: 1rem;
}

.about#about a {
  color: #4f46e5;
  text-decoration: none;
}

.about#about a:hover {
  text-decoration: underline;
}

/* Dark Mode for About Me Card */
body.dark .about#about {
  background: #1f2937;   /* dark card background */
  color: #f9fafb;        /* light text color */
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

body.dark .about#about a {
  color: #60a5fa;        /* links stay visible in dark mode */
}



/* Skills Section */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

.skill-card {
  text-align: center;
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background: #f3f4f6;
  transition: transform 0.3s, box-shadow 0.3s;
}

.skill-card i {
  margin-bottom: 0.5rem;
  font-size: 2rem;
  color: #3b82f6;
}

.skill-card h3 {
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

.skill-card p {
  font-size: 0.95rem;
  color: #4b5563;
}

/* Contact Section */
.contact {
  padding: 2rem;
  text-align: center;
  background: #111827;
  color: #fff;
}

.contact a {
  color: #3b82f6;
  text-decoration: none;
}

/* Remove bullets and center list items */
.contact ul {
  list-style: none;       /* removes bullets */
  padding: 0;             /* removes default left padding */
  margin: 1rem 0 0 0;     /* optional: spacing above list */
  display: flex;          /* makes items inline */
  justify-content: center;/* centers the items */
  gap: 1.5rem;            /* spacing between items */
}

.contact li {
  margin: 0;              /* reset any default margin */
}


/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Tweaks */
@media (max-width: 600px) {
  .card, .skill-card {
    min-height: auto;
  }
}