body {
  font-family: 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fdfdfd;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Hero Section */
.hero {
  height: 100vh;
  background: linear-gradient(to right, #4954c9, #02cccc);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: fadeIn 1s ease;
}

.hero-content h1 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-content p {
  font-size: 1.5rem;
  color: #555;
}

.hero-content {
  animation: heroFadeUp 1.2s ease forwards;
  opacity: 0;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  opacity: 0.85;
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}  

#heroParticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* behind text */
}


/* Back Button */
.back-home-sticky {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: var(--accent-color);
  color: #fff;
  font-size: 1.4rem;
  padding: 10px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 999;
}

.back-home-sticky:hover {
  background-color: #ff4e4e;
  transform: scale(1.1);
}

/* DARK MODE support */
body.dark-mode .back-home-sticky {
  background-color: #1c1c1c;
  color: #fff;
}





/* DARK MODE STYLING FOR PROJECT PAGES */
body.dark-mode {
background-color: #121212;
color: #f0f0f0;
}

/* Hero Section in Dark Mode */
body.dark-mode .hero {
background: linear-gradient(to right, #2c5a5270, #4d315f73)
}

/* Project Sections in Dark Mode */
body.dark-mode .project-section {
background: #1a1a1a;
color: #eeeeee;
}

/* Collaborators Section in Dark Mode */
body.dark-mode .collaborators {
background: #1e1e1e;
color: #f0f0f0;
}

/* Progress bar color (optional) */
body.dark-mode #progress-bar {
background: #00bcd4;
}

body.dark-mode .hero-title {
color: #ffffff; /* Pure white title in dark mode */
text-shadow: 0 2px 8px rgba(0,0,0,0.6); /* Slight black shadow for readability */
}

body.dark-mode .hero-subtitle {
color: #dddddd; /* Slightly softer white for subtitle */
text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

body.dark-mode .text h2 {
color: #dddddd; /* Slightly softer white for subtitle */
text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

body.dark-mode .text p {
color: #dddddd; /* Slightly softer white for subtitle */
text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}





/* Dark Mode Toggle Button */
#darkModeToggle {
position: fixed;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
z-index: 1000;
}

#modeIcon {
pointer-events: none;
}

/* Ripple effect for dark mode switch */
#ripple {
position: fixed;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
transform: scale(0);
opacity: 0;
pointer-events: none;
z-index: 999;
transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}


/* Flashlight Effect */
body.dark-mode::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: radial-gradient(circle at var(--cursorX) var(--cursorY), rgba(255,255,255,0.08) 0%, transparent 15%);
z-index: 998;
}


/* Audio Controls */
.audio-controls {
position: fixed;
bottom: 20px;
left: 20px;
display: flex;
align-items: center;
background: var(--accent-color);
padding: 8px 15px;
border-radius: 50px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
z-index: 999;
}

/* Mute/Unmute Button */
#audioToggle {
background: none;
border: none;
font-size: 1.5rem;
color: var(--primary-text-color);
cursor: pointer;
outline: none;
}

/* Slider Wrapper */
.slider-wrapper {
overflow: hidden;
width: 0;
opacity: 0;
transition: width 0.4s ease, opacity 0.4s ease, margin-left 0.4s ease;
margin-left: 0;
}

/* Expand slider on hover */
.audio-controls:hover .slider-wrapper {
width: 120px;
opacity: 1;
margin-left: 15px;
}

/* Volume Slider Styling */
#volumeSlider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #ddd;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: background 0.3s ease;
}

#volumeSlider:hover {
background: #bbb;
}






/* Project Sections */
.project-section {
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
padding: 120px 20px;
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
max-width: 70%;
margin: auto;
flex-wrap: wrap;
}

.project-section.left .text {
order: 1;
text-align: left;
}

.project-section.left .image {
order: 2;
}

.project-section.right .text {
order: 2;
text-align: right;
}

.project-section.right .image {
order: 1;
}

.text {
flex: 1 1 45%;
min-width: 300px;
padding: 20px;
}

.text h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #222;
}

.text p {
font-size: 1.2rem;
line-height: 1.8;
color: #555;
}

.image {
flex: 1 1 45%;
min-width: 300px;
display: flex;
align-items: center;
justify-content: center;
}

.image img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
object-fit: cover;
}

/* Fade-in when in view */
.project-section.fade-in {
opacity: 1;
transform: translateY(0);
}





/*Progress Bar*/
#progress-bar {
position: fixed;
top: 0;
left: 0;
height: 8px;
background: linear-gradient(to right, #74ebd5, #ACB6E5);
width: 0%;
z-index: 1000;
transition: width 0.25s ease-out;
}



/* Achievements */
.achievements {
  padding: 100px 20px;
  background: #f5f5f5;
  text-align: center;
}

.achievements h2 {
  font-size: 2.8rem;
  margin-bottom: 40px;
  color: var(--primary-text-color);
}

.achievement-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.achievement {
  background: #ffffff;
  padding: 30px 20px;
  width: 250px;
  border-radius: 20px;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: popIn 1s ease forwards;
}

.achievement:hover {
  transform: translateY(-8px);
  box-shadow: 0px 12px 25px rgba(0,0,0,0.15);
}

.achievement h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: var(--primary-text-color);
}

.achievement p {
  font-size: 1rem;
  opacity: 0.8;
}

/* Pop-in Animation */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* DARK MODE: Achievements Section */
body.dark-mode .achievements {
  background-color: #121212;
}

body.dark-mode .achievements h2 {
  color: #ffffff;
}

body.dark-mode .achievement {
  background-color: #1e1e1e;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .achievement h3 {
  color: #ffffff;
}

body.dark-mode .achievement p {
  color: #cccccc;
}




/* Fade-in Animation */
@keyframes fadeIn {
from {
  opacity: 0;
  transform: translateY(-10px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}


/* Github Button */
.github-button {
text-align: center;
margin: 50px 0;
}

.github-button a {
display: inline-block;
padding: 12px 25px;
font-size: 1.2rem;
font-weight: 600;
background: var(--accent-color);
color: #818181;
text-decoration: none;
border-radius: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: background 0.3s ease, transform 0.3s ease;
}

.github-button a:hover {
background: #0077cc; /* darker hover */
transform: translateY(-3px);
}


/* Back Home Button */
.back-home {
text-align: center;
margin: 50px 0;
}

.back-home a {
font-size: 1.2rem;
text-decoration: none;
color: var(--primary-text-color);
transition: color 0.3s ease;
}

.back-home a:hover {
color: var(--accent-color);
}