/* ==================== BLOCK: BUTTON ==================== */
.section-button {
  margin: 24px 0px !important;
}

/* Button size modifiers */
.btn-size-small {
  display: inline-block;
  padding: 8px 20px !important;
  font-size: var(--text-size-small) !important;
  min-width: 140px !important;
  line-height: 20px !important;
  text-decoration: none;
  font-weight: 600;
}

.btn-size-medium {
  display: inline-block;
  padding: 12px 20px !important;
  font-size: var(--text-size-body) !important;
  min-width: 200px !important;
  line-height: 22.4px !important;
  text-decoration: none;
  font-weight: 600;
}

.btn-size-large {
  display: inline-block;
  padding: 18px 44px !important;
  font-size: 18px !important;
  min-width: 240px !important;
  line-height: 26px !important;
  text-decoration: none;
  font-weight: 600;
}

/* Button style modifiers */
.btn-highlight.btn-style-primary {
  background-color: #ee3024 !important;
  color: #ffffff !important;
  border-color: #ee3024 !important;
  text-align: center;
}

.btn-highlight.btn-style-primary:hover {
  background-color: #d02318 !important;
  border-color: #d02318 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(238, 48, 36, 0.35);
}

.btn-highlight.btn-style-dark-red {
  background-color: #b30009 !important;
  color: #ffffff !important;
  border-color: #a11b15 !important;
  text-align: center;
}

.btn-highlight.btn-style-dark-red:hover {
  background-color: #83140f !important;
  border-color: #83140f !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(161, 27, 21, 0.35);
}

.btn-highlight.btn-style-solid-grey {
  background-color: #808083 !important;
  color: #ffffff !important;
  border-color: #808083 !important;
  text-align: center;
}

.btn-highlight.btn-style-solid-grey:hover {
  background-color: #656568 !important;
  border-color: #656568 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(128, 128, 131, 0.35);
}

.btn-highlight.btn-style-white-red-border {
  background-color: #ffffff !important;
  color: #121216 !important;
  border: 2px solid #ee3024 !important;
  text-align: center;
}

.btn-highlight.btn-style-white-red-border:hover {
  background-color: #ee3024 !important;
  color: #ffffff !important;
  border-color: #ee3024 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(238, 48, 36, 0.25);
}

.btn-highlight.btn-style-grey-red-border {
  background-color: #b6b6b6 !important;
  color: #121216 !important;
  border: 2px solid #ee3024 !important;
  text-align: center;
}

.btn-highlight.btn-style-grey-red-border:hover {
  background-color: #ee3024 !important;
  color: #ffffff !important;
  border-color: #ee3024 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(238, 48, 36, 0.25);
}

.btn-highlight.btn-style-dark-grey {
  background-color: #808083 !important;
  color: #ffffff !important;
  border-color: #808083 !important;
  text-align: center;
}

.btn-highlight.btn-style-dark-grey:hover {
  background-color: #333335 !important;
  border-color: #333335 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(74, 74, 77, 0.35);
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .btn-size-small {
    padding: 8px 18px !important;
    font-size: var(--text-size-small) !important;
    min-width: 130px !important;
  }
  .btn-size-medium {
    padding: 10px 18px !important;
    font-size: 15px !important;
    min-width: 150px !important;
  }
  .btn-size-large {
    padding: 16px 36px !important;
    font-size: 17px !important;
    min-width: 220px !important;
  }
}
@media (max-width: 767.98px) {
  .section-button {
    margin: 20px 0 !important;
  }
  .btn-size-small {
    padding: 8px 16px !important;
    font-size: 12px !important;
    min-width: 120px !important;
    line-height: 18px !important;
  }
  .btn-size-medium {
    padding: 10px 18px !important;
    font-size: var(--text-size-small) !important;
    min-width: 140px !important;
    line-height: 20px !important;
  }
  .btn-size-large {
    padding: 14px 28px !important;
    font-size: var(--text-size-body) !important;
    min-width: 200px !important;
    line-height: 22px !important;
  }
}