.card {
  border-radius: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.25rem;
}

.badge {
  font-size: 0.75rem;
  padding: 0.4em 0.6em;
  border-radius: 0.5rem;
}

ul li::marker {
  color: #0d6efd; /* Bootstrap primary color */
}

.btn-outline-primary:hover {
  background-color: #e7f1ff;
}

.service-card{
    border: 2px solid #e2e8f0;
}

.service-card .badge{
        padding: 5px 12px;
    color: #868686;
    text-align: left;
    border: 1px solid #c1c1c1;
    width: fit-content;
    border-radius: 1rem;
    background: #a0a0a026;
}

.service-card .card-title{
    font-size: 1.1rem;
}

.service-card .annual-cost-para{
      --bs-text-opacity: 1;
    color: var(--color-primary) !important;
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    padding: 1rem 0rem;
}

.service-card span svg{
  color: green;
  margin-right: 10px;
}
.service-card .text-secondary{
  font-size: .875rem;
    text-decoration: none;
    margin-bottom: 1rem !important;
    color: #9CA3AF;
}
.service-card .btn{
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.service-card .bi-check2-circle{
  color: green;
  margin-right: 10px;
}

.service-section .toggle-btn{
  /* background-color: var(--color-primary); */
  border-color: var(--color-primary);
  color: var(--color-primary)
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
  color: white !important;
  background-color: var(--color-primary);
}

.pagination a{
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.active>.page-link, .page-link.active{
  background: var(--color-primary);
}