:root {
  --kallu:rgb(19, 155, 239);
  --lemon: rgb(238, 238, 26);
  --aqua: #70E4EF;
  --royal-purple: #BC7AF9;
  --navy: #1B1F3B;
  --white: #FFFFFF;
}

.cards-bg {
  background-color: white;
  padding: 52px 0;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(235, 242, 247, 0.916);
  margin-bottom: 4px;
}
.cards-headline {
  text-align: center;
  color: var(--navy);
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 18px;
  text-shadow: 0 2px 10px rgba(188,122,249,0.10);
}
.cards-subtext {
  text-align: center;
  color: var(--navy);
  font-size: 1.2rem;
  margin-bottom: 54px;
}
.cards-subheadings{
color: var(--navy)
}
.cards-wrapper {
  display: flex;
  gap: 36px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.service-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 1px 4px 36px rgba(21, 37, 164, 0.14);
  padding: 36px 24px 32px 24px;
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--aqua);
  transition: box-shadow 0.2s, transform 0.2s;
}
.service-card.primary-card {
  border: 2.5px solid var(--royal-purple);
}
.service-card:hover {
  box-shadow: 0 12px 50px rgba(188,122,249,0.19);
  transform: translateY(-8px) scale(1.03);
}
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 24px;
  color: var(--white);
}
.button {
  background: var(--kallu);
  color: var(--navy);
  border: none;
  padding: 13px 32px;
  border-radius: 36px;
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 0 3px 12px rgba(42, 17, 186, 0.15);
  cursor: pointer;
  margin-top: 18px;
  transition: background 0.2s, color 0.2s;
}
.button:hover, .button.primary-btn:hover {
  background: var(--aqua);
  color: var(--white);
}
.service-card ul {
  padding-left: 18px;
  text-align: left;
  margin-top: 9px;
  margin-bottom: 0;
  color: #090909;
}
.service-card h2 { margin-bottom: 6px; color: var(--navy); }
@media (max-width: 1100px) {
  .cards-wrapper { flex-direction: column; gap: 32px; align-items: center; }
}