@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@400;500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #0d3d5c; }
a { text-decoration: none; color: inherit; }

h1, h2 { font-family: 'Playfair Display', serif; margin-bottom: 1rem; }
p { max-width: 600px; margin-bottom: 1.5rem; line-height: 1.6; }

section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-in-out;
}
section.visible { opacity: 1; transform: translateY(0); }

@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
body {
  background: linear-gradient(45deg, #0d3d5c, #1a5f8a, #4a9bbf, #0d3d5c);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
}

#hero {
  background-image: url('ocean.jpg'); /* make sure ocean.jpg is in the same folder as your HTML */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
}

/* Deep teal overlay — pulls from the wave colors in your photo */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 60, 55, 0.40);
  z-index: 0;
}

/* Lift all hero content above the overlay */
#hero * {
  position: relative;
  z-index: 1;
}

#hero h1 { 
  font-size: 2.5rem; 
  color: #ffffff; 
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

#hero p { 
  font-size: 1.2rem; 
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

#hero .cta-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1.5px solid rgba(255,255,255,0.7);
  color: #fff;
  border-radius: 30px;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.1);
  transition: background 0.3s, color 0.3s;
}

#hero .cta-btn:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

#about { background: #f4fafd; color: #0d3d5c; }
#about img {
  width: 200px; height: 200px;
  border-radius: 50%; margin-top: 1rem;
  object-fit: cover;
  border: 3px solid #4a9bbf;
  box-shadow: 0 0 0 6px #9dd0e828;
}

#experience { background: #dff0f8; color: #0d3d5c; }
.experience-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.card {
  background: #fff; padding: 1.5rem;
  border-radius: 10px;
  border: 0.5px solid #b8d8ee;
  box-shadow: 0 5px 15px rgba(74,155,191,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(74,155,191,0.2);
}

#projects { background: #f4fafd; color: #0d3d5c; }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.project-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  border-top: 3px solid #1a5f8a;
  box-shadow: 0 5px 15px rgba(74,155,191,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(74,155,191,0.2);
}
.project-card img { width: 100%; height: 150px; object-fit: cover; }
.project-card .project-info { padding: 1rem; }

#volunteer { background: #dff0f8; color: #0d3d5c; padding: 2rem 1rem; }
.volunteer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
#volunteer ul { text-align: left; margin-top: 1rem; padding-left: 1.2rem; }
#volunteer li { margin-bottom: 0.8rem; line-height: 1.5; }
#volunteer h3 {
  text-align: center; margin-bottom: 1rem;
  font-weight: 600; font-family: 'Playfair Display', serif; color: #1a5f8a;
}

#contact { background: linear-gradient(135deg, #0d3d5c, #1a5f8a); color: #e8f4fb; }
.contact-icons { display: flex; justify-content: center; gap: 20px; font-size: 2.2rem; margin-top: 1rem; }
.contact-icons a { color: #9dd0e8; transition: color 0.3s, transform 0.3s; }
.contact-icons a:hover { transform: translateY(-5px); }
.contact-icons a[href*="linkedin"] { color: #0077b5; }
.contact-icons a[href*="github"] { color: #9dd0e8; }
.contact-icons a[href*="joinhandshake"] { color: #f47c20; }

footer { padding: 1rem; text-align: center; font-size: 0.9rem; background: #0d3d5c; color: #4a9bbf; }