/*-----------------------------------*\
  #btn.css
\*-----------------------------------*/
/**
 * copyright 2022 codewithsadee
 */
.btn.btn-primary, .btn.btn-secondary, .btn.btn-tertiary {
  background-color: var(--orange-red);
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  text-transform: uppercase;
  max-width: max-content;
  letter-spacing: 2px;
  padding: 10px 22px;
  box-shadow: 6px 6px 0 -1px var(--shadow-color, var(--jet));
  transition: var(--transition-1); }

.btn:is(:hover, :focus-visible) {
  background-color: var(--hover-bg, var(--jet));
  box-shadow: 5px 5px 0 -2px var(--hover-shadow-color, var(--orange-red)); }

.btn-primary,
.btn.btn-secondary {
  --bs-btn-color: var(--white); }

.btn.btn-secondary {
  background-color: var(--jet);
  --shadow-color: var(--orange-red);
  --hover-bg: var(--orange-red);
  --hover-shadow-color: var(--jet); }

.btn.btn-tertiary {
  --bs-btn-color: var(--jet);
  color: var(--jet);
  background-color: var(--maximum-yellow-red);
  --bs-btn-bg: var(--maximum-yellow-red);
  --shadow-color: var(--orange-red);
  --hover-bg: var(--orange-red);
  --hover-shadow-color: var(--maximum-yellow-red); }

.btn-tertiary:is(:hover, :focus-visible) {
  color: var(--white); }
