@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");
:root {
  --primary-color: #3b82f6;
  --primary-dark: #2563eb;
  --primary-darker: #1e3a8a;
  --primary-light: #60a5fa;
  --bg-dark: #1f2937;
  --text-light: #e5e7eb;
  --text-white: #ffffff;
  --transition-default: all 0.3s ease-in-out;
  --shadow-color: rgba(59, 130, 246, 0.3);
  --shadow-color-intense: rgba(59, 130, 246, 0.5);
  --secondary-color: rgba(0, 98, 255, 0.749);
  --red-shadow: 0 0 15px rgba(255, 69, 69, 0.5);
  --red-shadow-intense: 0 0 25px rgba(255, 69, 69, 0.7);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
}

.gradient-bg {
  background: var(--primary-darker);
}

.card-base {
  transition: var(--transition-default);
  background-color: var(--bg-dark);
}

.card-hover:hover,
.card-glow:hover,
.about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px var(--shadow-color);
}

.card-hover:hover {
  background-color: var(--primary-dark);
}

.card-hover:hover h3 {
  color: var(--text-white);
}

.card-hover:hover p {
  color: var(--text-light);
}

.card-glow,
.about-card {
  box-shadow: 0 0 15px var(--red-shadow);
}

.card-glow:hover,
.about-card:hover {
  box-shadow: 0 0 25px var(--red-shadow-intense);
}

.about-card {
  background: var(--secondary-color);
}

.hero-text {
  text-shadow: 0 0 10px var(--shadow-color-intense);
}

.initiative-text {
  background: linear-gradient(90deg, var(--text-white), var(--text-white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 1.2em;
}