.navbar-brand > img {
	max-width: 200px;
}

:root {
  --clickspay-primary: #821c5f;
  --clickspay-primary-hover: #6f1852;
  --clickspay-secondary: #0d283d;
  --clickspay-primary-soft: #f4e8ef;
}

a {
  color: var(--clickspay-primary);
}

a:hover {
  color: var(--clickspay-primary-hover);
}

.text-primary,
.text-danger {
  color: var(--clickspay-primary) !important;
}

.bg-primary,
.bg-danger {
  background-color: var(--clickspay-primary) !important;
}

.badge-soft {
  background-color: var(--clickspay-primary-soft) !important;
  color: var(--clickspay-primary) !important;
}

.btn-primary,
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--clickspay-primary);
  --bs-btn-border-color: var(--clickspay-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--clickspay-primary-hover);
  --bs-btn-hover-border-color: var(--clickspay-primary-hover);
  --bs-btn-focus-shadow-rgb: 130, 28, 95;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--clickspay-primary-hover);
  --bs-btn-active-border-color: var(--clickspay-primary-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--clickspay-primary);
  --bs-btn-disabled-border-color: var(--clickspay-primary);
  background-color: var(--clickspay-primary);
  border-color: var(--clickspay-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--clickspay-primary-hover);
  border-color: var(--clickspay-primary-hover);
  color: #fff;
}

.shadow-danger-xlg {
  box-shadow: 0 1rem 3rem rgba(130, 28, 95, 0.22) !important;
}

.btn-outline-primary,
.btn-outline-danger {
  border-color: var(--clickspay-primary);
  color: var(--clickspay-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--clickspay-primary);
  border-color: var(--clickspay-primary);
  color: #fff;
}

.navbar-light .navbar-nav .nav-item:hover > .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link[aria-expanded="true"],
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: var(--clickspay-primary) !important;
}

.footer.bg-gray-900 {
  background-color: var(--clickspay-secondary) !important;
}

@media only screen and (max-width: 991px) {
  .navbar-brand > img {
    max-width: 110px !important;
  }
}