/* CMS Service Cards - Homepage */
.cms-service-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 32px 28px 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cms-service-card h3 {
  font-size: 22px;
  margin-bottom: 4px;
  color: #1b3b5b;
}

.cms-service-card p {
  margin-bottom: 0;
}

/* Hover lift */
.cms-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-out;
}

/* Base service icon blob */
.cms-service-icon {
  width: 64px;
  height: 64px;
  opacity: 0.9;
  display: inline-block;
}

/* =======================================================
   SERVICE ICON BLOBS – BASE SET
   (your existing styles, left as-is)
   ======================================================= */

/* Assessments – lavender blob */
.cms-service-icon-assessment {
  background: #b8abf6; /* lavender */
  border-radius: 45% 55% 60% 40%;
}

/* Courses & events – peach blob */
.cms-service-icon-event {
  background: #ffcea5; /* peach */
  border-radius: 60% 40% 50% 70%;
}

/* Ongoing support – pink blob */
.cms-service-icon-support {
  background: #fabdbd; /* pink */
  border-radius: 55% 65% 45% 70%;
}

/* =======================================================
   VARIANTS – SAME COLOURS, NEW SHAPES
   Use these to add visual variety across the site.
   ======================================================= */

/* ---------- Assessments (lavender) variants ---------- */
/* Slightly taller, more organic blob */
.cms-service-icon-assessment-alt {
  background: #b8abf6;
  border-radius: 65% 45% 55% 35%;
}

/* Squishier, more horizontal blob */
.cms-service-icon-assessment-alt2 {
  background: #b8abf6;
  border-radius: 35% 70% 40% 65%;
}

/* ---------- Courses & events (peach) variants ---------- */
/* Softer, almost pill-like but still blobby */
.cms-service-icon-event-alt {
  background: #ffcea5;
  border-radius: 50% 60% 55% 45%;
}

/* More asymmetric / playful */
.cms-service-icon-event-alt2 {
  background: #ffcea5;
  border-radius: 70% 35% 60% 40%;
}

/* ---------- Ongoing support (pink) variants ---------- */
/* Slightly chunkier top, softer base */
.cms-service-icon-support-alt {
  background: #fabdbd;
  border-radius: 60% 55% 40% 65%;
}

/* More “droplet” style */
.cms-service-icon-support-alt2 {
  background: #fabdbd;
  border-radius: 40% 75% 55% 45%;
}

.cms-events-card {
  margin: 0 auto;
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
  border-top: 4px solid transparent;
  border-radius: 20px;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #b8abf6, #ffcea5) border-box;
  width: 100%;
}