.services__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.75rem;
}

.services__title-heading {
  font-family: var(--calistoga);
  font-size: 1.875rem;
  display: flex;
  align-items: center;
  color: var(--roxo);
}

.services__title-heading::after {
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  margin-left: 0.8125rem;
  background-size: cover;
  background-image: var(--emoji-roxo);
}

.services__title-description {
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-right: 2rem;
}

.services__section {
  margin-bottom: 1.875rem;
}

.services__subtitle {
  font-family: var(--calistoga);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  color: var(--roxo);
  margin-bottom: 1rem;
}

.services__categories-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem;
}

.services__category {
  background: var(--branco);
  color: var(--almost-black);
  flex: 1 1 calc(33% - 20px);
  min-width: 15.625rem;
  padding: 1.5rem 2rem;
  border-radius: 0.625rem;
  box-shadow: 0 0.125rem 0.5rem rgba(var(--preto-rgb), 0.03);
  transition: background 0.5s ease-in-out, color 0.01s ease-in-out;
}

.services__category:hover {
  background: var(--roxo);
  color: var(--branco);
  box-shadow: 0 0.25rem 0.625rem rgba(var(--preto-rgb), 0.06);
}

.services__category-title {
  font-weight: var(--font-black);
  font-size: 1.125rem;
  margin-bottom: 0.625rem;
}

.services__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}

.services__list-item {
  width: 100%;
  padding: 1rem;
  border-radius: 0.625rem;
  background: var(--branco);
  box-shadow: 0 0.25rem 0.625rem rgba(var(--preto-rgb), 0.06);
  transition: color 0.3s ease-in-out;
}

.services__list-item:hover .services__list-summary {
  color: var(--roxo);
}

.services__list-item b {
  font-weight: var(--font-bold);
}

.services__list-item a {
  text-decoration: none;
}

.services__list-item a:hover {
  text-decoration: underline;
}

.services__list-item ul {
  list-style-type: disc;
  margin-left: 1.25rem;
}

.services__list-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: var(--font-bold);
}

.services__list-summary::-webkit-details-marker {
  display: none;
}

.services__list-summary::after {
  content: "\f107";
  font-family: var(--font-awesome);
  font-weight: var(--font-black);
  font-size: 1.5rem;
  color: var(--roxo);
}

.services__list-item[open] .services__list-summary::after {
  content: "\f106";
}

.services__list-description {
  margin-top: 1rem;
  line-height: 1.6;
}

.services__list-faq {
  width: 49%;
}

.services__list-faq .services__list-summary {
  font-size: 1rem;
}

.services__cta {
  background: var(--lilas);
  border-radius: 0.625rem;
  margin-bottom: 1.875rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.3125rem;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.services__cta-title {
  font-family: var(--calistoga);
  color: var(--almost-white);
  font-size: 1.5rem;
}

.services__cta-description {
  font-size: 1.1rem;
  font-weight: var(--font-semibold);
}

.services__cta-button {
  font-weight: var(--font-bold);
  background-color: var(--roxo);
  border: 0.0625rem solid var(--roxo);
  border-radius: 0.3125rem;
  text-transform: uppercase;
  padding: 0.625rem 1rem;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1.1rem;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  color: var(--almost-white);
}

.services__cta-button:hover {
  background-color: transparent;
  border: 0.0625rem solid var(--lilas);
}

@media (max-width: 768px) {
  .services__section {
    padding: 0 1.25rem;
  }

  .services__cta {
    width: 90%;
    margin: 0 auto 1.875rem;
    text-align: center;
  }

  .services__list-faq {
    width: 100%;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .services__cta {
    width: 95%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .services__section {
    padding: 0 1.25rem;
  }
  .services__cta {
    width: 95%;
    margin: 0 auto 1.875rem;
    text-align: center;
  }
  .services__list-faq {
    width: 100%;
  }
}