.over-ons button, 
.diensten button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.over-ons button:hover, 
.diensten button:hover {
  background-color: var(--black);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#offertebtn {
  transition: all 0.3s ease;
}

#offertebtn:hover {
  background-color: var(--green); 
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(72, 183, 71, 0.3);
}

#offertebtn:active {
  transform: scale(0.98); 
}

/* ============ Diensten sectie Home ============ */

.animate-on-scroll {
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); 
  will-change: transform, opacity;
}

.fade-in-left {
  transform: translateX(-50px);
}

.fade-in-right {
  transform: translateX(50px);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateX(0);
}