.service-type-button {
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  color: #a8a8a8;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 2;
  margin-bottom: -6px;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.service-type-button .service-icon-container svg {
  width: 40px;
  height: 40px;
}

.service-type-button:hover svg {
  color: #2d68ff;
}

.service-type-button:hover {
  background: #202020; /* Slightly darker than #282828 to prevent it from getting "too white" */
  color: #eff5f2 !important;
  font-weight: 600 !important;
  box-shadow: 
    0px 16px 24px rgba(0, 0, 0, 0.4),
    0px 2.15px 0.5px rgba(0, 0, 0, 0.15), 
    0px 5px 1.5px rgba(8, 8, 8, 0.1),
    0px 6px 4px rgba(8, 8, 8, 0.1), 
    0px 6px 13px rgba(8, 8, 8, 0.08),
    0px 24px 24px rgba(8, 8, 8, 0.05),
    inset 1px 2px 8px rgba(253, 253, 253, 0.03); /* Subtle internal drop shadow */
}

/* 4. FIXED GLASS-MORPHIC BORDER OVERLAY */
.service-type-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px; /* Emulates thin outer vector line */
  background: linear-gradient(
    to right,
    rgba(253, 253, 253, 0.1) 0%,
    rgba(253, 253, 253, 0.02) 40%,
    rgba(253, 253, 253, 0.02) 60%,
    rgba(253, 253, 253, 0.1) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  
  /* Added these missing properties to allow opacity animation */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-type-button:hover::before {
  opacity: 1; /* Turn on fully on hover to reveal the dynamic border glow */
}

/* 5. SLIDING UP ARROW STYLING */
.service-type-button::after {
  content: url("https://natanasrat.com/wp-content/uploads/2026/06/guidance_up-arrow-2.svg");
  position: absolute;
  right: 18px;
  top: 50%; /* Center alignment correction from 60% */
  transform: translateY(-50%) translateX(10px);
  width: 24px; /* Scaled down slightly so it doesn't look clumsy next to text */
  height: 24px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 3;
  display: block;
  filter: brightness(0) invert(1);
}

.service-type-button:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .service-type-button {
    padding: 12px 15px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .service-type-button {
    padding: 10px 12px;
    font-size: 16px;
  }
}