/* Component Styles */

/* Hero Buttons */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  font-family: var(--font-primary);
  font-weight: 700;
  border-radius: 15px;
  transition: all var(--transition-base);
  cursor: pointer;
  text-decoration: none;
}

@media (min-width: 992px) {
  .btn-hero {
    width: auto;
  }
}

@media (min-width: 1600px) {
  .btn-hero {
    padding: 20px 25px;
  }
}

.btn-hero--outline {
  border: 1.5px solid var(--color-yellow);
  color: var(--color-yellow);
  background-color: transparent;
}

.btn-hero--outline:hover {
  background-color: var(--color-yellow);
  color: var(--color-blue);
}

.btn-hero--filled {
  border: 1.5px solid var(--color-yellow);
  background-color: var(--color-yellow);
  color: var(--color-blue);
}

.btn-hero--filled:hover {
  background-color: #fdb03b99;
}