html {
  scroll-behavior: smooth;
}

.active {
  color: #1d4ed8; /* Example: Tailwind's blue-600 */
  font-weight: 600; /* Tailwind's font-semibold */
  text-decoration: underline solid #1d4ed8;
}

.hero {
  margin: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  animation: changeBackground 20s infinite;
}

@keyframes changeBackground {
  0% {
    background-image: url("public/images/hero-image-2.jpg");
  }
  33% {
    background-image: url("public/images/hero-image-3.jpg");
  }
  66% {
    background-image: url("public/images/hero-image-4.jpg");
  }
  100% {
    background-image: url("public/images/hero-image-2.jpg");
  }
}

#packages {
  background-color: rgba(181, 181, 255, 0.1); /* Transparent background */
  background-image: repeating-radial-gradient(
      circle at 0 0,
      transparent 0,
      rgba(229, 229, 247, 0.2) 34px
    ),
    repeating-linear-gradient(rgba(68, 76, 247, 0.33), rgba(68, 76, 247, 0.33));
}

#contact {
  background-image: url("public/images/contact.jpg");
}