.card {
  outline: 1px solid var(--bs-secondary) !important;
  width: 400px;
  height: 550px;
}

#advanced-card {
  height: 600px;
}

.d-grid button {
  padding: 0.5rem 0.5rem;
}

.d-grid button:hover,
.d-grid button:active,
.d-grid button:visited {
  background: var(--bs-primary);
  cursor: default;
}

#animate-btn {
  animation: wiggle 300ms 2s 8 ease-out;
}

@media (max-width: 1230px) {
  .card {
    width: 350px;
    height: 550px;
  }
  .features {
    margin-bottom: 0.375rem !important;
  }
}
@media (max-width: 1080px) {
  .card {
    width: 300px;
    height: 550px;
  }
  .card-body {
    padding: 0.5rem !important;
  }
  li div {
    font-size: 0.8rem;
  }
}
@media (max-width: 930px) {
  .col-md-4 {
    display: flex;
    justify-content: center;
  }
  .card {
    width: 300px;
    height: 600px;
  }
  .card-title {
    font-size: 1.5rem;
  }
  .badge {
    font-size: 0.75rem;
  }
  .d-grid button {
    font-size: 0.875rem;
    padding: 0.25rem;
  }
  div a {
    padding: 0.375rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
}
@media (max-width: 767px) {
  #mobile-row {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  #mobile-title {
    margin-top: 0rem !important;
    font-size: 2.25rem !important;
  }
  .col-md-4 {
    display: flex;
    justify-content: center;
    padding: 0 !important;
  }
  .card {
    width: 80%;
    margin-bottom: 1.25rem;
    padding: 0.5rem !important;
  }
  .card-title {
    font-size: 2rem;
  }
  .badge {
    font-size: 1rem;
  }
  li div {
    font-size: 0.875rem;
  }
  .d-grid button {
    font-size: 1rem;
    padding: 0.5rem;
  }
  div a {
    padding: 0.5rem 1.5rem !important;
    font-size: 1rem !important;
    margin-bottom: 1rem;
  }
}
@keyframes wiggle {
  0% {
    transform: rotateZ(0);
  }
  50% {
    transform: rotateZ(-4deg);
  }
  100% {
    transform: rotateZ(4deg);
  }
}