@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Open+Sans:wght@400;500;600;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-heading {
  font-family: 'Montserrat', sans-serif;
}

.font-body {
  font-family: 'Open Sans', sans-serif;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(28, 28, 30, 0.88) 0%,
    rgba(26, 122, 201, 0.75) 50%,
    rgba(26, 122, 201, 0.4) 100%
  );
}

.hero-gradient-right {
  background: linear-gradient(
    135deg,
    rgba(28, 28, 30, 0.85) 0%,
    rgba(26, 122, 201, 0.6) 100%
  );
}

.donate-gradient {
  background: linear-gradient(135deg, #F5891F 0%, #f59e0b 50%, #F5891F 100%);
}

.card-hover {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

.program-card-top {
  height: 6px;
  border-radius: 12px 12px 0 0;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #1A7AC9;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: #1C1C1E;
  transition: all 0.3s ease;
}

.hamburger-open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.quote-mark {
  font-size: 6rem;
  line-height: 1;
  opacity: 0.15;
  font-family: 'Georgia', serif;
}

.counter-number {
  font-variant-numeric: tabular-nums;
}

.stagger-fade-in > * {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerFadeIn 0.6s ease forwards;
}

.stagger-fade-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.6s; }

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

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 137, 31, 0.3); }
  50% { box-shadow: 0 0 40px rgba(245, 137, 31, 0.6); }
}

.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .parallax-bg {
    background-attachment: scroll;
  }

  .reveal {
    transform: translateY(15px);
  }

  .quote-mark {
    font-size: 4rem;
  }
}

.border-epic-blue { border-color: #1A7AC9; }
.border-epic-orange { border-color: #F5891F; }
.border-epic-teal { border-color: #2BBCB0; }
.border-epic-purple { border-color: #8B3CB8; }

.text-epic-blue { color: #1A7AC9; }
.text-epic-orange { color: #F5891F; }
.text-epic-teal { color: #2BBCB0; }
.text-epic-purple { color: #8B3CB8; }
.text-epic-dark { color: #1C1C1E; }

.bg-epic-blue { background-color: #1A7AC9; }
.bg-epic-orange { background-color: #F5891F; }
.bg-epic-teal { background-color: #2BBCB0; }
.bg-epic-purple { background-color: #8B3CB8; }
.bg-epic-dark { background-color: #1C1C1E; }

.hover\:bg-blue-700:hover { background-color: #1a6bb3; }
.hover\:bg-orange-600:hover { background-color: #e07d10; }
.hover\:text-epic-blue:hover { color: #1A7AC9; }
.hover\:text-white:hover { color: #ffffff; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
  display: inline-block;
}