.all-services .underline-base {

  position: relative;

  display: inline-block;

  padding-bottom: 4px;

  font-weight: bold;

}



.all-services .underline-base::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 4px;

  height: 4px;

  width: 20px;

  border-radius: 0;

}



.underline-blue::after {
  background-color: var(--grad-color-1);
}

.underline-purple::after {
  background-color: var(--grad-color-2);
}

.underline-violet::after {
  background-color: var(--grad-color-3);
}

.underline-cyan::after {
  background-color: var(--grad-color-1);
}



.all-services .card {

  padding: 32px;

}

.icon {
  background-color: #fafafa;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon img {
  max-width: 24px;
  max-height: 24px;
}

.icon img {
  transition: transform 0.3s ease;
}

.icon:hover img {
  transform: scale(1.2);
}

.card-link-wrapper:hover .icon img {
  transform: scale(1.2);
}

@media (max-width: 991.98px) {

  .scroll-row {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    gap: 12px;

    scroll-snap-type: x proximity;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .scroll-row::-webkit-scrollbar {

    display: none;

  }



  .scroll-row>[class*="col-"] {

    flex: 0 0 88%;

    scroll-snap-align: start;

    padding: 4px;

  }

  
  .all-services .card {
    padding: 24px;
}

}

.card-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* apply transition on the card */
.card-link-wrapper .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover effect */
.card-link-wrapper:hover .card {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  /* optional elevation effect */
}