/* BTNS */

.btn {
  min-height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;

  position: relative;
  overflow: hidden;

  transition:
    transform .28s ease,
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.btn:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 28px rgba(75, 85, 99, .16);
}

.btn:active {
  transform: translateY(-3px);
}

.btn.primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.btn.primary:hover {
  background: var(--white);
  color: var(--green);
  border-color: var(--green);
}

.btn.outline {
  background: rgba(255, 255, 255, .8);
  color: var(--orange);
  border-color: rgba(36, 89, 166, .4);
}

.btn.outline:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  box-shadow: 0 14px 28px rgba(36, 89, 166, .22);
}

.btn.orange {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.btn.orange:hover {
  background: var(--white);
  color: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 14px 28px rgba(36, 89, 166, .22);
}

/* BTNS */