@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

.mds-section{
  --mds-card-bg:#fdfbf9;
  --mds-card-bg-hover:#001c38;
  --mds-divider:#dde0e3;
  --mds-divider-thickness:2px;

  --mds-num:#7d8892;
  --mds-num-hover:#fdfbf9;
  --mds-title:#0a131a;
  --mds-title-hover:#fdfbf9;
  --mds-desc:#404f5d;
  --mds-desc-hover:#fdfbf9;

  --mds-accent:#0083ce;
  --mds-accent-hover:#55aee8;

  --mds-bullet:#7d8892;
  --mds-bullet-hover:#a3afba;
  --mds-dot:#0083ce;
  --mds-dot-hover:#55aee8;

  --mds-icon-bg:#d9e6f5;
  --mds-icon-bg-hover:#1a3552;
  --mds-icon-color:#0083ce;
  --mds-icon-color-hover:#55aee8;
  --mds-icon-size:22px;
  --mds-icon-wrap:52px;
  --mds-icon-radius:3px;

  --mds-badge-bg:#d9e6f5;
  --mds-badge-bg-hover:#1a3552;
  --mds-badge-color:#0083ce;
  --mds-badge-color-hover:#55aee8;

  --mds-card-padding:3rem 2.5rem;
  --mds-card-radius:0px;
  --mds-card-gap:1.2rem;

  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
}
.mds-section *,
.mds-section *::before,
.mds-section *::after{box-sizing:border-box;}

.mds-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--mds-divider-thickness);
  background:var(--mds-divider);
  border:var(--mds-divider-thickness) solid var(--mds-divider);
  border-radius:var(--mds-card-radius);
  overflow:hidden;
}

.mds-card{
  background:var(--mds-card-bg);
  padding:var(--mds-card-padding);
  display:flex;flex-direction:column;gap:var(--mds-card-gap);
  text-decoration:none;color:inherit;
  transition:background 0.3s ease;
  cursor:pointer;
  position:relative;
}
.mds-card.mds-hover-on:hover{background:var(--mds-card-bg-hover);}
.mds-card.mds-hover-on:hover .mds-num{color:var(--mds-num-hover);}
.mds-card.mds-hover-on:hover .mds-title{color:var(--mds-title-hover);}
.mds-card.mds-hover-on:hover .mds-desc{color:var(--mds-desc-hover);}
.mds-card.mds-hover-on:hover .mds-link{color:var(--mds-accent-hover);}
.mds-card.mds-hover-on:hover .mds-link-line{background:var(--mds-accent-hover);}
.mds-card.mds-hover-on:hover .mds-link-line.mds-link-extends{width:var(--mds-link-line-width-hover, 40px);}
.mds-card.mds-hover-on:hover .mds-bullets li{color:var(--mds-bullet-hover);}
.mds-card.mds-hover-on:hover .mds-bullets li::before{background:var(--mds-dot-hover);}
.mds-card.mds-hover-on:hover .mds-badge{background:var(--mds-badge-bg-hover);color:var(--mds-badge-color-hover);}

/* Icon wrap — `color` cascades to all children; icons using currentColor follow it. */
.mds-section .mds-icon-wrap{
  width:var(--mds-icon-wrap);
  height:var(--mds-icon-wrap);
  border-radius:var(--mds-icon-radius);
  background:var(--mds-icon-bg);
  color:var(--mds-icon-color) !important;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.3s ease,color 0.3s ease;
}
.mds-section .mds-icon-wrap svg{
  width:var(--mds-icon-size);
  height:var(--mds-icon-size);
}
.mds-section .mds-icon-wrap i,
.mds-section .mds-icon-wrap i::before{
  font-size:var(--mds-icon-size);
  color:var(--mds-icon-color) !important;
}
/* Force fill/stroke on the SVG itself (except when explicitly none/transparent — outline icons stay hollow). */
.mds-section .mds-icon-wrap svg:not([fill="none"]):not([fill="transparent"]){fill:currentColor !important;}
.mds-section .mds-icon-wrap svg[stroke]:not([stroke="none"]):not([stroke="transparent"]){stroke:currentColor !important;}
/* And on every shape inside that has its own fill/stroke (overrides hardcoded hex colors in custom SVGs). */
.mds-section .mds-icon-wrap svg [fill]:not([fill="none"]):not([fill="transparent"]){fill:currentColor !important;}
.mds-section .mds-icon-wrap svg [stroke]:not([stroke="none"]):not([stroke="transparent"]){stroke:currentColor !important;}
/* Hover */
.mds-section .mds-card.mds-hover-on:hover .mds-icon-wrap{
  background:var(--mds-icon-bg-hover);
  color:var(--mds-icon-color-hover) !important;
}
.mds-section .mds-card.mds-hover-on:hover .mds-icon-wrap i,
.mds-section .mds-card.mds-hover-on:hover .mds-icon-wrap i::before{
  color:var(--mds-icon-color-hover) !important;
}

/* Number row (with optional badge) */
.mds-num-row{display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap;}
.mds-num{
  font-family:"Poppins",sans-serif;
  font-size:0.85rem;
  color:var(--mds-num);
  letter-spacing:0.08em;
  transition:color 0.3s ease;
}
.mds-badge{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-size:0.65rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--mds-badge-bg);color:var(--mds-badge-color);
  padding:0.2rem 0.6rem;border-radius:2px;width:fit-content;
  transition:background 0.3s ease,color 0.3s ease;
}
.mds-badge svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.5;}

.mds-title{
  font-family:"Poppins",sans-serif;
  font-size:1.5rem;
  font-weight:500;
  margin:0;
  color:var(--mds-title);
  transition:color 0.3s ease;
}
.mds-desc{
  font-size:0.92rem;line-height:1.7;
  color:var(--mds-desc);
  margin:0;
  transition:color 0.3s ease;
}

.mds-bullets{
  list-style:none;margin:0.5rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:0.4rem;
}
.mds-bullets li{
  font-size:0.85rem;
  color:var(--mds-bullet);
  display:flex;align-items:flex-start;gap:0.6rem;
  transition:color 0.3s ease;
}
.mds-bullets li::before{
  content:'';display:block;
  width:4px;height:4px;border-radius:50%;
  background:var(--mds-dot);
  flex-shrink:0;margin-top:0.55rem;
  transition:background 0.3s ease;
}

.mds-link{
  display:flex;align-items:center;gap:0.5rem;
  font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--mds-accent);
  margin-top:auto;padding-top:1rem;
  transition:color 0.3s ease;
}
.mds-link-line{
  display:inline-block;
  width:var(--mds-link-line-width, 24px);
  height:1px;
  background:var(--mds-accent);
  transition:width 0.3s ease,background 0.3s ease;
}

/* Reveal animation */
.mds-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.mds-reveal.mds-visible{opacity:1;transform:translateY(0);}
.mds-d1{transition-delay:.08s;}
.mds-d2{transition-delay:.16s;}
.mds-d3{transition-delay:.24s;}
.mds-d4{transition-delay:.32s;}
.mds-d5{transition-delay:.40s;}
.mds-d6{transition-delay:.48s;}
.mds-d7{transition-delay:.56s;}
.mds-d8{transition-delay:.64s;}

@media (prefers-reduced-motion:reduce){
  .mds-section *{transition:none !important;animation:none !important;}
  .mds-reveal{opacity:1;transform:none;}
}