* { font-family: 'Inter', sans-serif; }
.volunteering-hero-bg { background: linear-gradient(135deg,#1a2940 0%,#2d3748 50%,#4a5568 100%); }
.timeline-container { position: relative; }
.timeline-line { position: absolute; left: 2rem; top:0; bottom:0; width:2px; background: linear-gradient(180deg,#4fc3f7,#667eea); }
.timeline-item { position: relative; padding-left:5rem; margin-bottom:3rem; }
.timeline-item::before { content:''; position:absolute; left:1.5rem; top:1rem; width:1rem; height:1rem; background: linear-gradient(135deg,#4fc3f7,#667eea); border-radius:50%; border:3px solid white; box-shadow:0 4px 12px rgba(79,195,247,0.3); z-index:2; }
.volunteer-card { transition: all 0.3s ease; border-left:4px solid transparent; }
.volunteer-card:hover { border-left-color:#4fc3f7; transform: translateX(8px); box-shadow:0 12px 30px rgba(0,0,0,0.1); }
.impact-stat { background: linear-gradient(135deg, rgba(79,195,247,0.1), rgba(102,126,234,0.1)); border:1px solid rgba(79,195,247,0.2); transition: all 0.3s ease; }
.impact-stat:hover { background: linear-gradient(135deg, rgba(79,195,247,0.15), rgba(102,126,234,0.15)); transform: translateY(-4px); box-shadow:0 8px 25px rgba(79,195,247,0.2); }
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background: linear-gradient(90deg,#4fc3f7,#667eea); transition: width 0.3s ease; }
.nav-link:hover::after { width:100%; }
.scroll-reveal { opacity:0; transform: translateY(30px); transition: all 0.6s ease; }
.scroll-reveal.revealed { opacity:1; transform: translateY(0); }
.organization-logo { width:60px; height:60px; background: linear-gradient(135deg,#4fc3f7,#667eea); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:bold; font-size:1.2rem; }