.btn {
  margin-top: 2vh;
  background-color: var(--white);
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-speed) ease;
}

.btn:hover {
  background-color: var(--secondary-color);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-hero {
  font-size: 1.1rem;
  border: 2px solid var(--white); /* окремий стиль для кнопки в hero */
  background-color: var(--secondary-color);
  color: var(--white);
  padding: 0.7rem 1.4rem;
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease,
              transform var(--transition-speed) ease;
}

.btn-hero:hover {
  background-color: var(--white);
  color: var(--secondary-color);
  border-color: var(--white);
  transform: translateY(-2px);
}