/* Button Styles */
.button {
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.8rem 2rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Primary Button */
.button.primary {
  background-color: var(--secondary-color);
  color: #fff;
}

.button.primary:hover,
.button.primary:focus {
  background-color: #FFBC73; /* A yellow color from the image */
  color: var(--secondary-color);
}

/* Secondary Button */
.button.secondary {
  background-color: #fff;
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.button.secondary:hover,
.button.secondary:focus {
  background-color: var(--secondary-color);
  color: #fff;
}

.button.primary + .button.secondary {
    margin: 1rem 0 0;
}

@media (min-width: 769px) {
    .button.primary + .button.secondary {
      margin: 0 0 0 1rem;
  }
  
  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(59,115,159,0.15), 0px 8px 6px -4px rgba(25, 72, 98, 0.25);
  }
}