.primary-btn {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s ease, background-image 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  background-color: var(--btn-primary-bg);
  background-image: var(--btn-primary-bg-image, none);
  color: var(--btn-primary-text);
  border-style: solid;
  border-width: var(--btn-primary-border-width);
  border-color: var(--btn-primary-border);
  font-size: var(--btn-primary-font-size);
  border-radius: var(--btn-primary-radius);
  padding: var(--btn-primary-padding);
  margin: var(--btn-primary-margin);
}

.primary-btn:hover {
  background-color: var(--btn-primary-bg-hover, var(--btn-primary-bg));
  background-image: var(--btn-primary-bg-image-hover, var(--btn-primary-bg-image, none));
  color: var(--btn-primary-text-hover, var(--btn-primary-text));
  border-color: var(--btn-primary-border-hover, var(--btn-primary-border));
}

.secondary-btn {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s ease, background-image 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  background-color: var(--btn-secondary-bg);
  background-image: var(--btn-secondary-bg-image, none);
  color: var(--btn-secondary-text);
  border-style: solid;
  border-width: var(--btn-secondary-border-width);
  border-color: var(--btn-secondary-border);
  font-size: var(--btn-secondary-font-size);
  border-radius: var(--btn-secondary-radius);
  padding: var(--btn-secondary-padding);
  margin: var(--btn-secondary-margin);
}

.secondary-btn:hover {
  background-color: var(--btn-secondary-bg-hover, var(--btn-secondary-bg));
  background-image: var(--btn-secondary-bg-image-hover, var(--btn-secondary-bg-image, none));
  color: var(--btn-secondary-text-hover, var(--btn-secondary-text));
  border-color: var(--btn-secondary-border-hover, var(--btn-secondary-border));
}

/* =====================================================
   ELEMENTOR BUTTON TYPES
===================================================== */

.elementor-button-primary.elementor-widget-button .elementor-button {
  background-color: var(--btn-primary-bg) !important;
  background-image: var(--btn-primary-bg-image, none) !important;
  color: var(--btn-primary-text) !important;
  border-style: solid !important;
  border-width: var(--btn-primary-border-width) !important;
  border-color: var(--btn-primary-border) !important;
  font-size: var(--btn-primary-font-size) !important;
  border-radius: var(--btn-primary-radius) !important;
  padding: var(--btn-primary-padding) !important;
}

.elementor-button-primary.elementor-widget-button .elementor-button:hover,
.elementor-button-primary.elementor-widget-button .elementor-button:focus {
  background-color: var(--btn-primary-bg-hover, var(--btn-primary-bg)) !important;
  background-image: var(--btn-primary-bg-image-hover, var(--btn-primary-bg-image, none)) !important;
  color: var(--btn-primary-text-hover, var(--btn-primary-text)) !important;
  border-color: var(--btn-primary-border-hover, var(--btn-primary-border)) !important;
}

.elementor-button-secondary.elementor-widget-button .elementor-button {
  background-color: var(--btn-secondary-bg) !important;
  background-image: var(--btn-secondary-bg-image, none) !important;
  color: var(--btn-secondary-text) !important;
  border-style: solid !important;
  border-width: var(--btn-secondary-border-width) !important;
  border-color: var(--btn-secondary-border) !important;
  font-size: var(--btn-secondary-font-size) !important;
  border-radius: var(--btn-secondary-radius) !important;
  padding: var(--btn-secondary-padding) !important;
}

.elementor-button-secondary.elementor-widget-button .elementor-button:hover,
.elementor-button-secondary.elementor-widget-button .elementor-button:focus {
  background-color: var(--btn-secondary-bg-hover, var(--btn-secondary-bg)) !important;
  background-image: var(--btn-secondary-bg-image-hover, var(--btn-secondary-bg-image, none)) !important;
  color: var(--btn-secondary-text-hover, var(--btn-secondary-text)) !important;
  border-color: var(--btn-secondary-border-hover, var(--btn-secondary-border)) !important;
}
