:root {
  --background: 0 0% 99%;
  --foreground: 0 0% 8%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;
  --primary: 0 85% 42%;
  --primary-foreground: 0 0% 100%;
  --blue: 0 0% 10%;
  --blue-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 8%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --border: 0 0% 88%;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
.display-font {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
}

.bg-background { background-color: hsl(var(--background)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-blue { background-color: hsl(var(--blue)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-blue { color: hsl(var(--blue)); }
.text-blue-foreground { color: hsl(var(--blue-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }

.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-primary-foreground\/70 { color: hsl(var(--primary-foreground) / 0.7); }
.text-primary-foreground\/80 { color: hsl(var(--primary-foreground) / 0.8); }

.opacity-15 { opacity: 0.15; }

.animate-fade-up {
  animation: fadeUp 0.7s ease-out forwards;
  opacity: 0;
}

.animate-fade-up-delay-1 {
  animation: fadeUp 0.7s ease-out 0.15s forwards;
  opacity: 0;
}

.animate-fade-up-delay-2 {
  animation: fadeUp 0.7s ease-out 0.3s forwards;
  opacity: 0;
}

.animate-fade-up-delay-3 {
  animation: fadeUp 0.7s ease-out 0.45s forwards;
  opacity: 0;
}

.service-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.check-item svg:last-child {
  transform: rotate(0deg);
}

.check-item.open svg:last-child {
  transform: rotate(180deg);
}

#coverage-map .leaflet-control-attribution {
  font-size: 10px;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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