.services-cards-container {
  display: flex;
  flex-direction: row;
  height: auto;
  overflow-x: scroll;
  scrollbar-width: none;
  padding-right: 60px;
  padding-left: 172px;
  margin-left: -172px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: #333;
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-weight: var(--e-global-typography-text-font-weight);
}

.services-cards-container:active {
  cursor: grabbing;
}

.services-cards-container::-webkit-scrollbar {
  display: none;
}

.active-cards {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.services-cards {
  background: linear-gradient(
      180deg,
      rgba(248, 235, 236, 0) 0%,
      #f8ebec 79.69%,
      #f8ebec 100%
    ),
    url("https://devscripta.com.br/wp-content/uploads/2021/08/tempBG1.webp");
  background-size: cover !important;
  background-position: top !important;
  display: flex;
  align-items: flex-end;
  min-width: 172px;
  height: 240px;
  padding: 1rem;
  border-radius: 18px;
  margin: 0 0.5rem;
  scrollbar-width: none;
}

.services-cards::-webkit-scrollbar {
  display: none;
}

.services-cards:first-child {
  margin-left: 0;
}

.services-cards:last-child {
  margin-right: 0;
  background-image: none;
  background: #f8ebec;
  background: url("https://devscripta.com.br/wp-content/uploads/2021/08/palceholders-servicos.png");
  background-size: cover !important;
  background-position: top !important;
}

.service-cards-title {
  /*height: 25%;*/
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  color: var(--e-global-color-text);
  pointer-events: none;
  line-height: 2rem;
  padding: 1rem;
}

/*NAV ARROWS*/

.slide-nav-buttons-services-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-nav-buttons-services-content .button-right-services-content {
  cursor: pointer;
}

.button-right-services-content svg path {
  transition: all 0.3s ease-in-out;
}

.button-right-services-content:hover svg path {
  fill: #d088b1;
}

.button-right-services-content:hover svg path + path {
  fill: #fff;
}

.slide-nav-buttons-services-content .button-left-services-content {
  margin-right: 10px;
  cursor: pointer;
}

.button-left-services-content svg {
  transform: rotate(-180deg);
}

.button-left-services-content svg path {
  transition: all 0.3s ease-in-out;
}

.button-left-services-content:hover svg path {
  fill: #d088b1;
}

.button-left-services-content:hover svg path + path {
  fill: #fff;
}

@media (min-width: 1280px) and (max-width: 1366px){
  .service-cards-title{
    line-height: 20px;
  }
}


@media (max-width: 767px) {
  .service-cards-title {
    line-height: 4rem;
  }
}