.title {
  font-size: 36px;
  text-align: center;
}

.subtext {
  font-size: 20px;
  text-align: center;
}

.packages-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 400px;
  height: 300px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: transform 0.3s ease;
  background: linear-gradient(145deg, #f9f9f9, #e6e6e6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;


  &:hover {
    cursor: pointer;
    filter: brightness(1.05);
    box-shadow:
      0 0 8px rgba(1, 141, 223, 0.6),
      0 0 16px rgba(47, 202, 132, 0.5),
      0 0 24px rgba(159, 228, 63, 0.4);
    transition: 250ms ease-in-out;
  }
}

.plus {
  background: linear-gradient(145deg, #eece9f, #ddf59c);
  scale: 1.02;
  height: 350px;
}

.plus-button {
  background: linear-gradient(145deg, #a4acee, #1387aa);
}


.old-price {
  text-decoration: line-through;
  font-size: 14px;
  color: var(--accent);
}

.price-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 450px) {
  .packages-wrapper{
    padding: 20px 0px;
  }

  .card{
    height: 380px;
  }
}