/* WebDesign Resell carousel (17 slides) */
.service-card--webdesign {
  padding: 0;
  overflow: hidden;
}
.service-card__webdesign-slider {
  background:
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(201, 162, 39, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, #1e3a5f 0%, var(--navy) 100%);
  padding: 1.25rem 1.25rem 1rem;
  text-align: center;
}
.webdesign-slider-heading {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.service-card__webdesign-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.service-card__webdesign-inner {
  padding: 1.25rem 1.5rem 1.5rem;
}
.webdesign-carousel {
  position: relative;
}
.webdesign-carousel__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.webdesign-carousel__viewport {
  overflow: hidden;
  border-radius: 0.5rem;
}
.webdesign-carousel__track {
  display: flex;
  width: 1700%;
  animation: webdesign-autoplay 60s infinite ease-in-out;
  transition: transform 0.5s var(--ease);
}
.webdesign-carousel:hover .webdesign-carousel__track {
  animation-play-state: paused;
}
.webdesign-carousel__slide {
  flex: 0 0 calc(100% / 17);
  margin: 0;
  padding: 0 0.35rem;
  box-sizing: border-box;
}
.webdesign-browser-frame {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.webdesign-browser-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.webdesign-carousel__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  max-width: 22rem;
  margin-inline: auto;
}
.webdesign-carousel__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.webdesign-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}
.webdesign-carousel__hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}
#wds-1:checked ~ .webdesign-carousel__nav label[for="wds-1"],
#wds-2:checked ~ .webdesign-carousel__nav label[for="wds-2"],
#wds-3:checked ~ .webdesign-carousel__nav label[for="wds-3"],
#wds-4:checked ~ .webdesign-carousel__nav label[for="wds-4"],
#wds-5:checked ~ .webdesign-carousel__nav label[for="wds-5"],
#wds-6:checked ~ .webdesign-carousel__nav label[for="wds-6"],
#wds-7:checked ~ .webdesign-carousel__nav label[for="wds-7"],
#wds-8:checked ~ .webdesign-carousel__nav label[for="wds-8"],
#wds-9:checked ~ .webdesign-carousel__nav label[for="wds-9"],
#wds-10:checked ~ .webdesign-carousel__nav label[for="wds-10"],
#wds-11:checked ~ .webdesign-carousel__nav label[for="wds-11"],
#wds-12:checked ~ .webdesign-carousel__nav label[for="wds-12"],
#wds-13:checked ~ .webdesign-carousel__nav label[for="wds-13"],
#wds-14:checked ~ .webdesign-carousel__nav label[for="wds-14"],
#wds-15:checked ~ .webdesign-carousel__nav label[for="wds-15"],
#wds-16:checked ~ .webdesign-carousel__nav label[for="wds-16"],
#wds-17:checked ~ .webdesign-carousel__nav label[for="wds-17"] {
  background: #e8c547;
  transform: scale(1.25);
}
#wds-1:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(0); }
#wds-2:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 1)); }
#wds-3:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 2)); }
#wds-4:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 3)); }
#wds-5:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 4)); }
#wds-6:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 5)); }
#wds-7:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 6)); }
#wds-8:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 7)); }
#wds-9:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 8)); }
#wds-10:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 9)); }
#wds-11:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 10)); }
#wds-12:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 11)); }
#wds-13:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 12)); }
#wds-14:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 13)); }
#wds-15:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 14)); }
#wds-16:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 15)); }
#wds-17:checked ~ .webdesign-carousel__viewport .webdesign-carousel__track { animation: none; transform: translateX(calc(-100% / 17 * 16)); }
@keyframes webdesign-autoplay {
  0%, 5.29% { transform: translateX(0); }
  5.88%, 11.17% { transform: translateX(calc(-100% / 17 * 1)); }
  11.76%, 17.06% { transform: translateX(calc(-100% / 17 * 2)); }
  17.65%, 22.94% { transform: translateX(calc(-100% / 17 * 3)); }
  23.53%, 28.82% { transform: translateX(calc(-100% / 17 * 4)); }
  29.41%, 34.71% { transform: translateX(calc(-100% / 17 * 5)); }
  35.29%, 40.59% { transform: translateX(calc(-100% / 17 * 6)); }
  41.18%, 46.47% { transform: translateX(calc(-100% / 17 * 7)); }
  47.06%, 52.35% { transform: translateX(calc(-100% / 17 * 8)); }
  52.94%, 58.24% { transform: translateX(calc(-100% / 17 * 9)); }
  58.82%, 64.12% { transform: translateX(calc(-100% / 17 * 10)); }
  64.71%, 70% { transform: translateX(calc(-100% / 17 * 11)); }
  70.59%, 75.88% { transform: translateX(calc(-100% / 17 * 12)); }
  76.47%, 81.76% { transform: translateX(calc(-100% / 17 * 13)); }
  82.35%, 87.65% { transform: translateX(calc(-100% / 17 * 14)); }
  88.24%, 93.53% { transform: translateX(calc(-100% / 17 * 15)); }
  94.12%, 99.41% { transform: translateX(calc(-100% / 17 * 16)); }
  100% { transform: translateX(calc(-100% / 17 * 16)); }
}
@media (prefers-reduced-motion: reduce) {
  .webdesign-carousel__track {
    animation: none;
  }
}
@media (min-width: 56rem) {
  .service-card--webdesign {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
  }
  .service-card__webdesign-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
  }
  .service-card__webdesign-inner {
    padding: 1.5rem;
  }
}
.service-card__cta--split {
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 30rem) {
  .service-card__cta--split {
    grid-template-columns: 1fr 1fr;
  }
}