:root {
  --brand-primary: #18212B;
  --brand-accent: #D6A85A;
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 24, 33, 43;
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: #9A6A1E;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-focus-ring-color: rgba(214, 168, 90, 0.3);
}

body {
  accent-color: var(--brand-accent);
}

a {
  text-decoration-color: var(--brand-accent);
  text-underline-offset: 3px;
}

a:hover {
  color: #9A6A1E;
}

.prtf-header {
  background: var(--brand-primary);
  border-color: rgba(214, 168, 90, 0.28);
}

.prtf-header #links a:hover,
.prtf-header #links a:focus-visible {
  color: var(--brand-accent);
}

.logo-head img {
  width: 205px;
  max-height: 48px;
}

.mobile-nav {
  background-color: var(--brand-primary);
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible,
.mobile-nav .nav-dd-toggle:hover {
  color: var(--brand-accent);
}

.btn-main,
.btn-primary,
button.btn-primary,
input.btn-primary,
.verification-submit {
  border-color: var(--brand-primary);
  background-color: var(--brand-primary);
  color: #fff;
}

.btn-main:hover,
.btn-main:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
button.btn-primary:hover,
input.btn-primary:hover,
.verification-submit:hover,
.verification-submit:focus-visible {
  border-color: var(--brand-accent);
  background-color: var(--brand-accent);
  color: var(--brand-primary);
}

.btn-outline-primary {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

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

.photoshoot-tab ul li button.active {
  border-color: var(--brand-accent);
  background-color: var(--brand-accent) !important;
  color: var(--brand-primary);
}

.photoshoot-tab ul li button:hover,
.price,
.info-box i,
.social i:hover {
  color: var(--brand-primary);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 0.2rem rgba(214, 168, 90, 0.22);
}

.slot.active,
.pagination .active .page-link {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
}

footer {
  background-color: var(--brand-primary);
  border-top: 3px solid var(--brand-accent);
}

footer .main-box a:hover,
footer .ft-box p a:hover {
  background-color: transparent;
  color: var(--brand-accent);
}

footer .ft-box p a:hover {
  border-color: var(--brand-accent);
}

footer .copy-right {
  border-color: rgba(214, 168, 90, 0.45);
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.footer-social-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 168, 90, 0.65);
  border-radius: 50%;
  color: var(--brand-accent);
  font-size: 17px;
}

.team-hero .overlay {
  background: linear-gradient(90deg, rgba(24, 33, 43, 0.82), rgba(24, 33, 43, 0.2));
}

/* Admin dashboard theme */
.logo-header,
.logo-header[data-background-color="blue"],
.navbar-header,
.navbar-header[data-background-color="blue2"] {
  background: var(--brand-primary) !important;
}

.logo-header {
  border-bottom: 2px solid var(--brand-accent);
}

.logo-header .navbar-brand {
  max-width: 100%;
}

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

.sidebar .nav-primary > .nav-item.active > a:before {
  background: var(--brand-accent) !important;
}

.sidebar .nav-primary > .nav-item a:focus,
.sidebar .nav-primary > .nav-item.active > a {
  background: rgba(214, 168, 90, 0.1);
}

.btn-primary,
.btn-primary:focus {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:active {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
  color: var(--brand-primary);
}

.text-primary,
.page-item.active .page-link {
  color: var(--brand-primary) !important;
}

.page-item.active .page-link {
  border-color: var(--brand-primary);
  background-color: var(--brand-primary);
  color: #fff !important;
}

@media (max-width: 575.98px) {
  .logo-head img {
    width: 175px;
  }
}