:root {
  --app-font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "SF Pro";
  src: url("../fonts/sfpro.OTF") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--app-font-family) !important;
}

:root {
  --brand-primary: #fcad0c;
  --brand-secondary: #0cbdbf;
  --bs-primary: #fcad0c;
  --bs-secondary: #0cbdbf;
}

a,
.text-primary,
.text-primary a {
  color: var(--brand-primary) !important;
}

.text-secondary,
.text-secondary a {
  color: var(--brand-secondary) !important;
}

.bg-primary,
.bg-primary2,
.badge-primary,
.label-primary {
  background-color: var(--brand-primary) !important;
}

.bg-secondary,
.bg-secondary2,
.badge-secondary,
.label-secondary {
  background-color: var(--brand-secondary) !important;
}

.border-primary {
  border-color: var(--brand-primary) !important;
}

.border-secondary {
  border-color: var(--brand-secondary) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover,
.btn-primary.disabled,
.btn-primary[disabled],
.open > .dropdown-toggle.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary.disabled,
.btn-secondary[disabled],
.open > .dropdown-toggle.btn-secondary {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
}

.panel-primary {
  border-color: var(--brand-primary) !important;
}

.panel-primary > .panel-heading {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.panel-secondary {
  border-color: var(--brand-secondary) !important;
}

.panel-secondary > .panel-heading {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
}

.alert-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.alert-secondary {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
}

.bg-primary-gradient {
  background: linear-gradient(-45deg, #c78609, var(--brand-primary)) !important;
}

.bg-secondary-gradient {
  background: linear-gradient(-45deg, #078f90, var(--brand-secondary)) !important;
}

.logo-header[data-background-color="blue"],
.main-header[data-background-color] .navbar-header,
.navbar-header[data-background-color="blue2"],
.quick-actions.quick-actions-info a:hover .quick-actions-item {
  background: var(--brand-primary) !important;
}

.sidebar .nav.nav-primary > .nav-item.active > a:before,
.sidebar .nav.nav-primary > .nav-item a[data-toggle="collapse"][aria-expanded="true"]:before,
.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a {
  background: var(--brand-primary) !important;
}

.sidebar .nav.nav-primary > .nav-item.active a i,
.sidebar .nav.nav-primary > .nav-item a:focus i,
.sidebar .nav.nav-primary > .nav-item a:hover i {
  color: var(--brand-primary) !important;
}

.sidebar .nav.nav-secondary > .nav-item.active > a:before,
.sidebar .nav.nav-secondary > .nav-item a[data-toggle="collapse"][aria-expanded="true"]:before,
.sidebar.sidebar-style-2 .nav.nav-secondary > .nav-item.active > a {
  background: var(--brand-secondary) !important;
}

.sidebar .nav.nav-secondary > .nav-item.active a i,
.sidebar .nav.nav-secondary > .nav-item a:focus i,
.sidebar .nav.nav-secondary > .nav-item a:hover i {
  color: var(--brand-secondary) !important;
}

.navbar-bg {
  background-color: var(--brand-primary) !important;
}

.main-sidebar .sidebar-menu li.active a,
.main-sidebar .sidebar-menu li a:hover,
.main-sidebar .sidebar-menu li.active ul.dropdown-menu li a:hover {
  color: var(--brand-primary) !important;
}

.main-sidebar .sidebar-menu li.active a {
  background-color: rgba(252, 173, 12, 0.12) !important;
}

.custom-button,
.bg-theme,
.bg-theme-hover:hover {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.custom-button::before,
.custom-button::after,
.custom-button.active::before,
.custom-button.active::after {
  background: var(--brand-primary) !important;
}

.custom-button:hover,
.custom-button.active,
.price-item ul li .custom-button:hover,
.pricing-slider .owl-dots button.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.price-item.active .price-header,
.price-header.bg-secondary {
  background-color: var(--brand-secondary) !important;
}

.cate,
.section-header .cate,
.section-header .title span,
.footer-link li a:hover {
  color: var(--brand-primary) !important;
}

/* Tailwind-style utility fallbacks used on standalone auth pages */
.bg-red-600,
.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover {
  background-color: var(--brand-primary) !important;
}

.text-red-500,
.text-red-600,
.hover\:text-red-600:hover,
.hover\:text-red-700:hover,
.hover\:text-red-800:hover {
  color: var(--brand-primary) !important;
}

.focus\:ring-red-500:focus {
  --tw-ring-color: rgba(252, 173, 12, 0.5) !important;
}