/* Base Swiper Styles */
.swiper {
  width: 100%;
  height: auto;
}

.swiper-slide {
  background: transparent;
  display: flex;
  align-items: center;
}

/* Grid Layout */
.slider-grid {
  overflow-x: hidden;
}

@media (min-width: 991px) {
  .slider-grid {
    min-height: 560px;
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "image header"
      "image steps"
      "image controls";
    gap: 16px;
    padding-bottom: 55px;
    max-width: 100%;
  }

  .slider-grid>div:nth-child(1) {
    grid-area: image;
    overflow: visible;
    width: 100%;
    min-width: 0;
  }

  .slider-grid>div:nth-child(2) {
    grid-area: header;
  }

  .slider-grid>div:nth-child(3) {
    grid-area: steps;
    overflow: visible;
    width: 100%;
    min-width: 0;
  }

  .slider-grid>div:nth-child(4) {
    grid-area: controls;
  }
}

/* Swiper Thumbs Styles */
.steps-swiper-thumbs {
  width: 100%;
  height: auto;
}

@media (min-width: 991px) {
  .steps-swiper-thumbs {
    display: flex;
    align-items: center;
    min-height: 400px;
  }
}

.steps-swiper-thumbs .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.steps-swiper-thumbs .swiper-slide img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

/* Main Swiper Styles */
.steps-swiper-main {
  width: 100%;
  max-width: 100%;
}

/* Step Card Status Elements */
.step-card-status-line-global {
  pointer-events: none;
}

/* Active Slide Styling */
.steps-swiper-main .swiper-slide-thumb-active .step-card img,
.steps-swiper-main .swiper-slide-thumb-active .step-card h2,
.steps-swiper-main .swiper-slide-thumb-active .step-card h3 {
  opacity: 1 !important;
}

.steps-swiper-main .swiper-slide-thumb-active .step-card .step-card-status-circle {
  background-color: #9147ff;
  box-shadow: 0 0 0 2px #9147ff, 0 0 0 7px #fff, 0 0 0 9px #9147ff;
}

@media (max-width: 990px) {

  .steps-swiper-main .swiper-slide-active .step-card img,
  .steps-swiper-main .swiper-slide-active .step-card h2,
  .steps-swiper-main .swiper-slide-active .step-card h3 {
    opacity: 1 !important;
  }

  .steps-swiper-main .swiper-slide-active .step-card .step-card-status-circle {
    background-color: #9147ff;
    box-shadow: 0 0 0 2px #9147ff, 0 0 0 7px #fff, 0 0 0 9px #9147ff;
  }

  .steps-swiper-main .swiper-slide-active .step-card .step-card-status-line {
    background-color: #9147ff;
  }
}

/* Pagination Styles */
.steps-swiper-pagination {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 44px;
  height: 44px;
  margin: 0 16px;
  position: static;
}

.steps-swiper-pagination .swiper-pagination-bullet {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  margin: 0 4px !important;
  background: transparent !important;
  opacity: 1 !important;
}

.steps-swiper-pagination .swiper-pagination-bullet .progress {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.steps-swiper-pagination .swiper-pagination-bullet-active .progress {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Pagination Bullet Progress Animation */
.steps-swiper-pagination .swiper-pagination-bullet .progress {
  stroke-dasharray: 56.55;
  stroke-dashoffset: 56.55 !important;
  transform: rotate(-90deg);
  transform-origin: center;
}

.steps-swiper-pagination .swiper-pagination-bullet-active .progress {
  transition: stroke-dashoffset 5s linear;
  stroke-dashoffset: 0 !important;
}

/* Navigation Buttons */
.swiper-btn-prev,
.swiper-btn-next {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU9SURBVHgBtVlNiBRHFH7Vu7iQP+ZgyGE9DLunHOKMlwQ9mAnEuJAcZnMLCNFTQiCaRsgxu5tjQEZcAt5UFLy5Kyj+gqMHRS+OevC06wjjQdbD4B+suFO+r3tqp6anqruqd/aD3u7tru765tVX7716JWgDqFVlYfQtVaSgb/nfoiQq87nQPYA2H00RnxtC0s33H1E9XBRtyglBOTA/JStS0oxG0LfTRSZ/6s+rYpE84UV4/gdZ7Qiq8WWRhoOmEDR38LI46fqCE+HalCyOSDrBFq3Q5qDBhpgOL4tmVsMgq8H8XnkokHR/E8kCZfRxbK/8K6thqoVZAjP8y2fJEZ99QfT5BNHYJ/H/L5/3Dlcw8VnW9pztudgo2fI00VYmuW17TNiE1TdErQdEy3eIHl+jTKSRFnnIjn0cE8WBax/A2o0FPjL8g430AGFotkN01PYhWPLHmX6ikQUfEj25PTj8aDexi2g8MQJod+0I0bOHZAWTCw9eEUcT93qAN4D4yeJbv9kXHwogee8M0cpSTDoLEzuJdv/eT/zumfiwoM0jvUP3HqP6Uya74EIW5G4dd9OjDmgYx5d7YuKwvvqmhXQB7pTP36kb6xY+NiX3y/hhKlkM5bm//Wa+CbDyz//1rJ1m6Y5kH92Niut+GKHW1BiaHTZZ07fQB3RuQhBH1/gafxByyRJuvz8cnyGDYZGlBGml/5/+sXqdIs+vCinCnG39ampVrmpDdtqfLNyePuw20pgPAAIO3jFhpKuAoFaRBQ67VVuH6qMNz7wKQ7z7t1hS5Wp6W0zeVte92doiM0Q6G4xuMecImMn6hPAlq+ve5ceqPiIrm0kXaJUqAfu5iunptu29Dn3cV9L9XfjXTUovlntaRqAxIegwYfZrJdND9dKLJcpFFiTP/uH+/upr9tG342skUBYgsA0GCkhBzdalO5SLbB6PosI0ZGGZqCV4iSIZCCu8cuh0WIFFf2frpLFJAYSNFnaFHliG6ast/riQueLIgtSuocPNBggPLLl9LATdKZeUzA82AosU20bCK8u9608dOtcTF5D95X+rBlOxJZFjG9CEW2sk72JolZUnd5ITdNKY5cgLfC09uavX/4rBHXJJoA239tT0svKfyKBcl0FJS/vKQ2Vr+gjr4IzyQcCM66aHrUfxGdYaL5Ez8pLWUwFbZO0EVA/ev4sID+gYC0Wlo6zkxURaZWAg8fW+7Hd0P25NBcaYcFgXbZOOFWkAvhYW8AESHiwyESnvZSRPyAqVdVWfBpxHETHyw2tc37J1qqyMVNF3EsFSF+fS3SS+6ZLZsRxO4hwR5lVpnU/NZCPM1gvdnwItD8vH6mTxTTWprx+xNm2GlxJrOl7ohaaWpsCQx8fayOo5d8tSo+hoCuirS3Ax7oat6JesSWBS+a5CFPRlviKbskhoHLoidqh/+uoSrOUDtkKK+qAijQ4xWXDfJcEHOUze0nRvceBAFoWUvlXeQKmqxiVP1knN9gU49z2HB8tOiEwokiRzAMhn/CsmWRosb2FCtlJKVVwyC8O0UtU66Sk5G1jqFApRMbDqPwlBNCoGLqSXt6BbdgazyfvWcqsLaQB6xBBjSWUL4WoEnj1K9bOZZFMJ+5BWgLXVAURJzLJfuppGFsjc4+hqGqS9d4s80WbNziU1m4Tzpky3slmmTQCnjfU1ogMumzJe215MfH9XIkUaDpoIWKHHfl2ujcUaFw9HuB5nK3FloM0WbaxRpNU6eSIXYQXUuuhtVI2pMIkSJ9jQeZH0rVteJfCuZwMLhQ5y7w1u3X4ASFI33FCM6KkAAAAASUVORK5CYII=);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.swiper-btn-next {
  transform: rotate(-180deg);
}