/* GENERAL */

.back-button {
  padding-left: 25px;
  margin-bottom: 2.4rem;
}

.back-button span:last-child,
.back-button span:last-child {
  padding-left: 25px;
}

.back-button:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(/assets/public/get-started/images/caret-left.svg) no-repeat 100% / 100%;
}

.central-container {
  padding-top: 5.2rem;
}

.step-wrapper {
  max-width: 650px;
  margin: 0 auto;
}

section {
  background: transparent;
}

.step-wrapper .title {
  text-align: center;
  margin-bottom: 20px;
  color: var(--color-blue-900);
}

.step-wrapper .sub-title {
  text-align: center;
  margin-bottom: 64px;
  color: var(--color-gray-800);
}

/* ANSWERS */

.answer-cards {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.answer {
  display: flex;
  gap: 2.4rem;
  width: 100%;
  padding: 0.8rem;
  padding-right: 3.2rem;
  border-radius: var(--radius-primary);
  cursor: pointer;
  align-items: stretch;
  text-decoration: none;
  background: var(--color-white);
}

.answer .icon-wrapper {
  border-radius: var(--radius-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 82px;
  min-width: 82px;
  height: 82px;
}

.answer .text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.answer .answer-title {
  color: var(--color-blue-900);
}

.answer .answer-caption {
  color: var(--color-gray-800);
  font: var(--font-sm-button);
}

.answer .answer-button {
  margin-left: auto;
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 20rem;
  border: 1px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.answer .answer-button img {
  width: 20px;
}

.answer:hover .answer-button {
  background: var(--color-gray-50);
}

.answer:nth-child(1) .icon-wrapper {
  background: linear-gradient(2.15deg, #2273b5 1.81%, #61b7e7 98.19%);
}
.answer:nth-child(2) .icon-wrapper {
  background: linear-gradient(188.94deg, #ffbd8e 6.8%, #af4e12 93.2%);
}
.answer:nth-child(3) .icon-wrapper {
  background: linear-gradient(180deg, #d3524a 0%, #6d2a26 100%);
}
.answer:nth-child(4) .icon-wrapper {
  background: linear-gradient(360deg, #0d835a 0.3%, #75d8b5 99.7%);
}

/* LABS */

.lab-cards {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lab {
  display: flex;
  gap: 1.2rem;
  width: 100%;
  padding: 2.2rem 3.2rem;
  border-radius: var(--radius-primary);
  cursor: pointer;
  align-items: stretch;
  text-decoration: none;
  background: var(--color-white);
}

.lab .lab-title {
  color: var(--color-blue-900);
  align-self: center;
}

.lab .lab-button {
  margin-left: auto;
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 20rem;
  border: 1px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.lab .lab-button img {
  width: 20px;
}

.lab:hover {
  background: linear-gradient(324.66deg, #61b7e7 -1.55%, #2273b5 100%);
}

.lab:hover .lab-title {
  color: var(--color-white);
}

.lab:hover .lab-button {
  border: 1px solid var(--color-white);
  background: color-mix(in srgb, var(--color-white) 20%, transparent);
}

.lab:hover .lab-button img {
  filter: brightness(0) invert(1);
}

/* SPECIALTY CARE */

.specialty-care-cards {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.specialty-care {
  display: flex;
  gap: 2.4rem;
  width: 100%;
  padding: 0.8rem;
  padding-right: 3.2rem;
  border-radius: var(--radius-primary);
  cursor: pointer;
  align-items: stretch;
  text-decoration: none;
  background: var(--color-white);
}

.specialty-care:nth-child(1) {
  background: linear-gradient(270deg, #5ac29d 35%, #21946c 100%);
}
.specialty-care:nth-child(2) {
  background: linear-gradient(270deg, #cabff5 0%, #583ba1 100%);
}
.specialty-care:nth-child(3) {
  background: linear-gradient(270deg, #9ab7dd 0%, #5277af 100%);
}
.specialty-care:nth-child(4) {
  background: linear-gradient(270deg, #7D88EB 0%, #202B8F 100%);
}

.specialty-care .icon-wrapper {
  border-radius: var(--radius-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 82px;
  min-width: 82px;
  height: 82px;
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
}

.specialty-care .text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.specialty-care .specialty-care-title {
  color: var(--color-white);
}

.specialty-care .specialty-care-caption {
  color: var(--color-white);
  font: var(--font-sm-button);
}

.specialty-care .specialty-care-button {
  margin-left: auto;
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 20rem;
  border: 1px solid var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.specialty-care .specialty-care-button img {
  width: 20px;
  filter: brightness(0) invert(1);
}

.specialty-care:hover .specialty-care-button {
  background: color-mix(in srgb, var(--color-white) 20%, transparent);
}

@media all and (max-width: 500px) {
  .central-container {
    padding-top: 3.2rem;
  }

  .step-wrapper .sub-title {
    margin-bottom: 24px;
  }

  .answer-cards,
  .lab-cards,
  .specialty-care-cards {
    gap: 4px;
  }

  .answer,
  .lab,
  .specialty-care {
    gap: 12px;
  }

  .answer,
  .specialty-care {
    padding-right: 1.6rem;
  }

  .lab {
    padding: 1.6rem 2rem;
  }


  .answer .text-wrapper,
  .specialty-care .text-wrapper {
    gap: 2px;
  }

  .answer .answer-caption,
  .specialty-care .specialty-care-caption {
    font: var(--font-caption);
  }

  .answer .answer-button,
  .lab .lab-button,
  .specialty-care .specialty-care-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .answer .answer-button img,
  .lab .lab-button img,
  .specialty-care .specialty-care-button img {
    width: 14px;
  }
}