/* ARIDES SERVICE ARROW POLISH V1 */

.service-arrow {
  position: relative;
  overflow: hidden;

  color: transparent !important;
  font-size: 0 !important;

  border: 1px solid rgba(16,160,88,.22);

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 42%
    ),
    linear-gradient(
      180deg,
      #29cb73 0%,
      #18b968 58%,
      #12a95d 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.34) inset,
    0 -1px 0 rgba(0,90,46,.16) inset,
    0 6px 12px rgba(16,169,91,.16) !important;
}

.service-arrow::before {
  content: "➜";

  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-size: 15px;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 1px 0 rgba(0,80,40,.15);

  transform: translateX(0);
  transition: transform .14s ease;
}

.service-arrow:hover::before {
  transform: translateX(1px);
}

.service-arrow:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.38) inset,
    0 -1px 0 rgba(0,90,46,.14) inset,
    0 8px 16px rgba(16,169,91,.22) !important;
}

.service-arrow:active::before {
  transform: translateX(0);
}