/* Opt-in Service Collection presentation. Legacy query views are untouched. */
.mydev-service-collection--expertise {
  display: grid;
  grid-template-columns: repeat(var(--mydev-service-columns, 5), minmax(0, 1fr));
  gap: 16px;
  border-block-end: 0 !important;
}
.mydev-service-collection--expertise .mydev-expertise-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 200px;
  padding: 24px 18px;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--mydev-color-on-inverse, #c9d4e8) 28%, transparent);
  border-radius: 13px;
  color: var(--mydev-color-on-inverse, #fff);
  background: linear-gradient(145deg, rgba(19,35,61,.96), rgba(11,20,35,.96));
  box-shadow: 0 22px 55px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.02);
  text-decoration: none;
  transition: border-color 420ms ease, background 420ms ease, box-shadow 420ms ease;
}
.mydev-service-collection--expertise .mydev-expertise-card.is-active {
  border-color: color-mix(in srgb, var(--mydev-color-accent, #ff6224) 76%, transparent);
  background: linear-gradient(145deg, rgba(37,52,79,.98), rgba(13,24,42,.98));
  box-shadow: 0 22px 60px rgba(0,0,0,.34), 0 0 32px color-mix(in srgb, var(--mydev-color-accent, #ff6224) 13%, transparent), inset 3px 0 var(--mydev-color-accent, #ff6224);
}
.mydev-expertise-card:focus-visible { outline: 2px solid var(--mydev-color-accent, #ff6224); outline-offset: 4px; }
.mydev-expertise-card__icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,212,232,.15);
  border-radius: 50%;
  color: var(--mydev-color-accent, #ff6224);
  background: #0c1729;
  box-shadow: inset 0 0 16px rgba(61,111,191,.12);
  transition: border-color 420ms ease, box-shadow 420ms ease, transform 420ms ease;
}
.mydev-expertise-card__icon svg { width: 24px; height: 24px; }
.mydev-expertise-card.is-active .mydev-expertise-card__icon { border-color: color-mix(in srgb, var(--mydev-color-accent, #ff6224) 65%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--mydev-color-accent, #ff6224) 24%, transparent); transform: rotate(8deg) scale(1.06); }
.mydev-service-collection--expertise .mydev-service-card__body { display: grid; min-width: 0; padding: 0; block-size: auto; gap: 0; }
.mydev-service-collection--expertise .mydev-service-card__title { margin: 5px 0 4px; font-family: var(--mydev-font-heading); font-size: 1.4rem; font-weight: var(--mydev-font-weight-heading,400); line-height: 1.2; letter-spacing: normal; color: inherit; }
.mydev-service-collection--expertise .mydev-service-card__summary { margin: 0; font-size: .9375rem; line-height: 1.55; color: #c4cede; }
.mydev-expertise-card__arrow { display: flex; align-items: center; width: 17px; height: 28.9px; margin-block-start: auto; color: rgba(201,212,232,.5); transition: color 300ms ease, transform 300ms ease; }
.mydev-expertise-card__arrow svg { width: 17px; height: 17px; }
.mydev-expertise-card.is-active .mydev-expertise-card__arrow { color: var(--mydev-color-accent, #ff6224); transform: translate(2px,-2px); }
@media (max-width: 1024px) { .mydev-service-collection--expertise .mydev-expertise-card { min-height: 180px; } }
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-page-12 .mydev-service-collection--expertise { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .elementor-page-12 .mydev-service-collection--expertise > .mydev-expertise-card { grid-column: span 2; }
  .elementor-page-12 .mydev-service-collection--expertise > .mydev-expertise-card:nth-child(4) { grid-column: 2 / span 2; }
  .elementor-page-12 .mydev-service-collection--expertise > .mydev-expertise-card:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 767px) {
  .mydev-service-collection--expertise .mydev-expertise-card { min-height: 0; flex-direction: row; align-items: center; }
  .mydev-expertise-card__arrow { margin: auto 0 auto auto; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) { .mydev-expertise-card, .mydev-expertise-card__icon, .mydev-expertise-card__arrow { transition: none !important; transform: none !important; } }