/* Empat layanan Mawardi Institute: tepat setelah statistik Tentang Kami. */
.services-showcase.section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:65px 0 74px;
  background:radial-gradient(ellipse at 98% 90%,rgba(218,168,253,.28),transparent 22%),
             radial-gradient(ellipse at -8% 67%,rgba(238,218,254,.40),transparent 25%),
             linear-gradient(180deg,#fff 0%,#fff 70%,#fcf8ff 100%);
}
.services-showcase::before,.services-showcase::after {
  content:"";
  position:absolute;
  pointer-events:none;
  width:420px;height:420px;
  border-radius:50%;
  z-index:-1;
  opacity:.6;
  background:repeating-radial-gradient(circle at center,transparent 0 17px,#dbb4fb47 19px 30px,transparent 32px 49px);
}
.services-showcase::before{left:-325px;bottom:-210px}
.services-showcase::after{right:-335px;bottom:-210px}
.services-showcase .container{position:relative;z-index:1}
.services-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:25px;
  margin-bottom:26px;
}
.services-heading-copy{min-width:0;max-width:890px}
.services-heading .eyebrow {font-weight:800;color:#80639b;letter-spacing:.24em;margin-bottom:13px;font-size:11px}
.services-heading h2 {
  color:#3b0b73;
  font-family:'KoHo',sans-serif;
  font-size:clamp(30px,3.05vw,43px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.055em;
  margin:0 0 11px;
}
.services-heading p {
  color:#716682;
  font-size:clamp(13px,1.13vw,15px);
  line-height:1.6;
  font-weight:500;
  margin:0;
  max-width:880px;
}
.services-all-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  gap:12px;
  min-height:43px;
  padding:11px 24px;
  border-radius:999px;
  background:linear-gradient(105deg,#7220c4,#ae24e4);
  color:#fff;
  font-size:13px;
  font-weight:800;
  box-shadow:0 8px 17px rgba(100,33,179,.15);
  transition:transform .2s,box-shadow .2s;
}
.services-all-link:hover{transform:translateY(-2px);box-shadow:0 12px 21px rgba(100,33,179,.23)}
.services-all-link svg{flex-shrink:0}
.services-showcase-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:17px;
  align-items:stretch;
}
.services-showcase-card {
  --service-accent:#a522e5;
  --service-tint:#f9f3ff;
  --service-border:#c384f4;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:388px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1.3px solid var(--service-border);
  border-radius:14px;
  background:linear-gradient(165deg,#fff 0%,var(--service-tint) 85%);
  box-shadow:0 9px 24px rgba(57,16,113,.065);
  transition:transform .22s ease,box-shadow .22s ease;
}
.services-showcase-card:hover {transform:translateY(-5px);box-shadow:0 15px 32px rgba(57,16,113,.15)}
.services-theme-blue{--service-accent:#3885ef;--service-tint:#f0f6ff;--service-border:#b8cfff}
.services-theme-mint{--service-accent:#09b990;--service-tint:#edfcf7;--service-border:#9fe8d3}
.services-theme-orange{--service-accent:#ff9a24;--service-tint:#fff7ed;--service-border:#fbd9aa}
.services-card-body {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:242px;
  padding:21px 23px 8px;
}
.services-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:14px}
.services-icon {
  width:55px;
  height:55px;
  flex:0 0 55px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:11px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--service-accent) 75%,white),var(--service-accent));
  box-shadow:0 7px 13px color-mix(in srgb,var(--service-accent) 19%,transparent);
}
.services-icon svg{stroke-width:2.1}
.services-card-number {
  font-size:37px;
  font-weight:800;
  font-family:'KoHo',sans-serif;
  color:var(--service-accent);
  opacity:.11;
  line-height:1;
  letter-spacing:-.045em;
}
.services-showcase-card h3 {
  font-family:'KoHo',sans-serif;
  font-size:clamp(18px,1.66vw,23px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.044em;
  color:#350a69;
  margin:0 0 7px;
  overflow-wrap:anywhere;
}
.services-showcase-card p {
  font-size:clamp(12px,1.04vw,14px);
  font-weight:500;
  color:#625574;
  line-height:1.42;
  margin:0 0 13px;
  overflow-wrap:anywhere;
}
.services-card-link {
  display:flex;
  align-items:center;
  gap:9px;
  color:#541389;
  font-weight:800;
  font-size:12px;
  margin-top:auto;
  padding-bottom:6px;
  width:max-content;
  max-width:100%;
}
.services-card-link>svg{transition:transform .2s}
.services-card-link:hover>svg{transform:translateX(4px)}
.services-link-circle {
  width:29px;height:29px;
  border-radius:50%;
  display:grid;place-items:center;
  flex:0 0 29px;
  background:var(--service-accent);
  color:#fff;
}
.services-card-photo {
  position:relative;
  z-index:1;
  height:146px;
  flex:0 0 146px;
  overflow:hidden;
  background:var(--service-tint);
}
.services-card-photo::before {
  content:"";
  position:absolute;
  z-index:2;
  left:0;right:0;top:0;height:42px;
  background:linear-gradient(180deg,var(--service-tint),transparent);
  pointer-events:none;
}
.services-card-photo img {width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s ease}
.services-showcase-card:hover .services-card-photo img{transform:scale(1.055)}
/* Foto kegiatan terlihat lebih utuh pada area bawah kartu. */
.services-theme-violet .services-card-photo img{object-position:center 42%}
.services-theme-blue .services-card-photo img{object-position:center 45%}
@media(max-width:1100px){
  .services-showcase.section{padding:45px 0 57px}
  .services-showcase-grid{gap:12px}
  .services-card-body{padding:18px 17px 7px;min-height:246px}
  .services-card-photo{height:129px;flex-basis:129px}
  .services-showcase-card{min-height:375px}
  .services-showcase-card p{font-size:12.5px}
  .services-showcase-card h3{font-size:19px}
}
@media(max-width:820px){
  .services-heading{align-items:flex-start;gap:15px;flex-wrap:wrap}
  .services-heading h2{font-size:clamp(29px,4.4vw,38px)}
  .services-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .services-showcase-card{min-height:390px}
  .services-card-body{min-height:235px;padding:21px 22px 9px}
  .services-card-photo{height:155px;flex-basis:155px}
  .services-showcase-card h3{font-size:23px}
  .services-showcase-card p{font-size:14px}
}
@media(max-width:560px){
  .services-showcase.section{padding:40px 0 47px}
  .services-heading{margin-bottom:22px}
  .services-heading h2{font-size:31px}
  .services-heading p{font-size:14px}
  .services-all-link{font-size:12px;min-height:41px;padding:10px 20px}
  .services-showcase-grid{grid-template-columns:1fr;gap:17px}
  .services-showcase-card{min-height:0;border-radius:15px}
  .services-card-body{min-height:0;padding:21px 22px 12px}
  .services-card-top{margin-bottom:12px}
  .services-showcase-card h3{font-size:23px}
  .services-showcase-card p{font-size:14px;line-height:1.54;margin-bottom:16px}
  .services-card-photo{height:176px;flex-basis:176px}
  .services-card-link{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .services-showcase-card,.services-all-link,.services-card-link>svg,.services-card-photo img{transition:none}
}