/* PRIMARY BUTTON */

.button-primary, .button-secondary {
  width: max-content;
  height: 48px;
  display: inline-block;
  transition: background-color 0.2s ease-out;
  background-color: var(--color-base-red-500);
  padding: 12px 40px;
  border-radius: 33px;
  border: none;
  cursor: pointer;
  font-family: "Inter";
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: var(--colour-white);
  text-decoration: none;
}
.button-primary:visited {
  background-color: var(--color-base-red-500);
  color: var(--colour-white);
}
.button-primary:hover {
  background-color: var(--hovered-button-colour);
  color: var(--colour-white);
}
.button-primary:focus-visible {
  background-color: var(--hovered-button-colour);
  outline: 4px solid var(--button-border-colour);
}
.button-primary:disabled {
  background-color: var(--disabled-button-colour);
  color: var(--font-gray);
}
.button-primary_mobile {
  margin-right: 0;
}
@media only screen and (min-width: 1280px) {
  .button-primary_mobile {
    display: none;
  }
}
.button-primary_desktop {
  display: none;
}
@media only screen and (min-width: 1280px) {
  .button-primary_desktop {
    display: initial;
  }
}


.button-secondary, .button-secondary:visited {
  background-color: var(--colour-white);
  color: var(--color-base-red-500);
}
.button-secondary:hover {
  background-color: var(--color-base-red-500);
  color: var(--colour-white);
}
.button-secondary:focus-visible {
  background-color: var(--hovered-button-colour);
  color: var(--colour-white);
  outline: 4px solid var(--button-border-colour);
}
.button-secondary:disabled {
  background-color: var(--disabled-button-colour);
  color: var(--font-gray);
}

@media only screen and (max-width: 490px) {
  #masthead .button-primary{
font-size: 12px;
padding: 12px 16px;
}
}