/* Copy Animation */
.base-color {
  color: hsl(var(--main)) !important;
}

.copyInput {
  display: inline-block;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: #fff;
  background-color: #FF7000;
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}




.cookies-card {
  width: 520px;
  padding: 30px;
  color: #1E2337;
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all .5s;
  background: #d1d1d1;
  border-radius: 5px;
}

.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6e6f70;
  color: #fff;
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
}

.cookies-btn {
  color: #363636;
  text-decoration: none;
  padding: 10px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
}

.cookies-btn:hover {
  color: #363636;
}


@media (max-width: 767px) {
  .cookies-card {
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 14px;
    padding: 15px;
  }
}




.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: '';
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #1a1a1a transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: '';
  font-family: 'Line Awesome Free';
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: #ea5455;
}

.input-popup p.success::before {
  content: "\f058";
  color: #28c76f;
}

label.required:after {
  content: '*';
  color: #DC3545 !important;
  margin-left: 2px;
}

.dashboard-body .table .btn.btn-sm {
  padding: 8px;
  font-size: 15px;
  border-radius: 4px;
}

.dashboard-body .btn--lg {
  padding: 15px 25px;
}

.badge--pending,
.badge--warning,
.badge--success,
.badge--primary,
.badge--danger,
.badge--dark {
  border-radius: 999px;
  padding: 2px 15px;
  position: relative;
  border-radius: 999px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
}

.badge--warning {
  background-color: rgba(255, 159, 67, 0.1);
  border: 1px solid #ff9f43;
  color: #ff9f43;
}

.badge--success {
  background-color: rgba(40, 199, 111, 0.1);
  border: 1px solid #28c76f;
  color: #28c76f;
}

.badge--danger {
  background-color: rgba(234, 84, 85, 0.1);
  border: 1px solid #ea5455;
  color: #ea5455;
}

.badge--primary {
  background-color: rgba(115, 103, 240, 0.1);
  border: 1px solid #4634ff;
  color: #4634ff;
}

.badge--dark {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #000000;
  color: #000000;
}


.show-filter {
  display: none;
}

.alert.kyc-alert {
  background: #ffecb5 !important;
  border: #ff9f43;
}


@media(max-width:767px) {
  .responsive-filter-card {
    display: none;
    transition: none;
  }

  .show-filter {
    display: block;
  }
}



/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%)
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #ced4da !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 0;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: .3s;
}

.select2-container--default .select2-selection--single {
  border-color: #ced4da !important;
  border-width: 1px !important;
  border-radius: .375rem !important;
  padding: .375rem .75rem !important;
  height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 8px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
  transform: rotate(-180deg);
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f1f1f1 !important;
  color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #0099ff !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
  border-width: 1px !important;
  border-radius: .375rem !important;
}


.gateway-card {
  padding: 15px;
}

.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: #0099ff;
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: #fff;
}

.payment-system-list {
  --thumb-width: 100px;
  --thumb-height: 40px;
  --radio-size: 12px;
  --border-color: #cccccf59;
  --hover-border-color: #0099ff;
  background-color: #fff;
  border-radius: 5px;
  height: 100%;

}


.payment-system-list.is-scrollable {
  max-height: min(388px, 70vh);
  overflow-x: auto;
  padding-block: 4px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;

}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: #0099ff;
  border-radius: 10px;
}

.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px;
  border: 1px solid #fff;
  border-top-color: var(--border-color);
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.payment-item:first-child {
  border-top-color: #fff;
  border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
  border-left: 3px solid var(--hover-border-color);
  border-radius: 0px;
}

.payment-item__check {
  border: 3px solid transparent;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border: 3px solid #0099ff;
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width))
}

.payment-item__check {
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid #0099ff;
  display: inline-block;
  border-radius: 100%;

}

.payment-item__name {
  padding-left: 10px;
  width: calc(100% - var(--radio-size));
  transition: all 0.3s;
}

.payment-item__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  text-align: right;
  padding-left: 10px;

  &:has(.text) {
    width: fit-content;
  }
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
}


.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid var(--border-color);
  border-radius: 5px;

  .deposit-info__input-group-text {
    align-self: center;
    padding-left: 5px;
  }

}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 35px;
  text-align: right;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;

}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 600;
}

.payment-item__btn {
  border: 0;
  border-block: 1px solid var(--border-color);
  border-bottom: 0;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-weight: 500;
}

.payment-item:hover+.payment-item__btn {
  border-top-color: #fff;
}

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}

.adjust-height .payment-system-list.is-scrollable {
  max-height: 461px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}




.btn--primary {
  background-color: #0099ff !important;
}


.btn--primary:hover,
.btn--primary:focus,
.btn--primary:focus-visible {
  background-color: #063862 !important;

}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  background-color: #0099ff !important;
  color: #fff !important;
  opacity: 0.5;
}

.btn-outline--danger:disabled {
  background-color: hsl(var(--danger)) !important;
  opacity: 0.5;
}

.btn--primary {
  background-color: #0099ff !important;
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary:focus-visible {
  background-color: #063862 !important;
}

.select2 .selection {
  width: 100% !important;
  height: 46px;
}






























/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Nunito+Sans:wght@300;400;600&display=swap');

/* ===== ROOT VARIABLES ===== */
:root {
  --black: #000000;
  --deep-black: #030303;
  --crimson: #8b0000;
  --crimson-light: #c0392b;
  --crimson-glow: #ff0000;
  --gold: #c9a84c;
  --gold-light: #f0d080;
  --gold-glow: #ffd700;
  --dark-surface: #0a0a0a;
  --dark-card: #0d0d0d;
  --border-gold: rgba(201,168,76,0.25);
  --border-crimson: rgba(139,0,0,0.35);
  --text-light: #e8e0d0;
  --text-muted: #7a7a72;
}

/* ===== BODY ===== */
body {
  background-color: var(--deep-black) !important;
  color: var(--text-light) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  background-image:
    radial-gradient(ellipse at 15% 40%, rgba(139,0,0,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 20%, rgba(201,168,76,0.04) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='40,4 76,22 76,58 40,76 4,58 4,22' stroke='%23c9a84c' stroke-opacity='0.03' stroke-width='0.5' fill='none'/%3E%3Cpolygon points='40,14 66,27 66,53 40,66 14,53 14,27' stroke='%238b0000' stroke-opacity='0.03' stroke-width='0.5' fill='none'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-attachment: fixed !important;
}

/* ===== SACRED GEOMETRY OVERLAY ===== */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image:
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='60' cy='60' r='50' fill='none' stroke='%23c9a84c' stroke-opacity='0.025' stroke-width='0.5'/%3E%3Cpolygon points='60,10 110,35 110,85 60,110 10,85 10,35' fill='none' stroke='%238b0000' stroke-opacity='0.025' stroke-width='0.5'/%3E%3Cline x1='60' y1='10' x2='60' y2='110' stroke='%23c9a84c' stroke-opacity='0.015' stroke-width='0.3'/%3E%3Cline x1='10' y1='60' x2='110' y2='60' stroke='%23c9a84c' stroke-opacity='0.015' stroke-width='0.3'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.7 !important;
}

/* ===== PRELOADER ===== */
div.preloader {
  background: #000000 !important;
}

/* ===== OVERLAYS ===== */
div.body-overlay,
div.sidebar-overlay {
  background: rgba(0,0,0,0.85) !important;
}

/* ===========================
   HEADER & NAVBAR
=========================== */
header#header,
header.header,
header.header.fixed-header {
  background: rgba(0,0,0,0.97) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 0 40px rgba(139,0,0,0.15),
    0 2px 0 rgba(201,168,76,0.2) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

nav.navbar.navbar-expand-xl.navbar-light {
  background: transparent !important;
}

/* Logo */
a.navbar-brand.logo img {
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.4)) !important;
  transition: filter 0.3s ease !important;
}

a.navbar-brand.logo img:hover {
  filter: drop-shadow(0 0 20px rgba(201,168,76,0.7)) !important;
}

/* Nav Links */
.navbar-nav .nav-link,
.navbar-nav a {
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.navbar-nav .nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--crimson), var(--gold)) !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}

.navbar-nav .nav-link:hover::after {
  width: 70% !important;
}

.navbar-nav .nav-link:hover {
  color: var(--gold-light) !important;
  text-shadow: 0 0 12px rgba(255,215,0,0.4) !important;
}

/* Navbar Toggler */
button.navbar-toggler.header-button {
  border: 1px solid var(--border-gold) !important;
  background: transparent !important;
  padding: 6px 10px !important;
}

button.navbar-toggler.header-button i.las.la-bars {
  color: var(--gold) !important;
  font-size: 22px !important;
}

/* Get Started Button in Navbar */
header .btn,
header a.btn,
.navbar a[href*="register"],
.navbar a[href*="login"] {
  background: linear-gradient(135deg, #6b0000, #a02020) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  padding: 10px 22px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 18px rgba(139,0,0,0.35) !important;
  transition: all 0.3s ease !important;
}

header .btn:hover,
header a.btn:hover {
  box-shadow: 0 0 30px rgba(255,0,0,0.45) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Mobile Nav Menu */
div.navbar-collapse {
  background: rgba(0,0,0,0.98) !important;
  border: 1px solid var(--border-gold) !important;
  border-top: none !important;
  padding: 10px 0 !important;
}

/* ===========================
   SCROLL TO TOP
=========================== */
a.scroll-top {
  background: linear-gradient(135deg, #8b0000, #c0392b) !important;
  border: 1px solid var(--gold) !important;
  box-shadow: 0 0 20px rgba(139,0,0,0.5) !important;
  color: var(--gold-light) !important;
  transition: all 0.3s ease !important;
}

a.scroll-top:hover {
  box-shadow: 0 0 40px rgba(255,0,0,0.6) !important;
  transform: translateY(-3px) !important;
}

/* ===========================
   BANNER SECTION
=========================== */
section.banner-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139,0,0,0.18) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 60%, rgba(201,168,76,0.07) 0%, transparent 50%),
    linear-gradient(180deg, #000000 0%, #040000 60%, #080000 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

section.banner-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

section.banner-section h1,
section.banner-section h2,
section.banner-section h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--text-light) !important;
  text-shadow: 0 0 30px rgba(201,168,76,0.2) !important;
}

section.banner-section p {
  color: var(--text-muted) !important;
  line-height: 1.9 !important;
}

/* Banner highlighted/marked text */
section.banner-section mark,
section.banner-section .highlight {
  background: linear-gradient(135deg, var(--crimson), #a02020) !important;
  color: var(--gold-light) !important;
  padding: 2px 10px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 18px rgba(139,0,0,0.45) !important;
}

/* Banner subtitle text */
section.banner-section > div p,
section.banner-section .container p {
  color: var(--text-muted) !important;
}

/* Banner Buttons */
section.banner-section .btn-primary,
section.banner-section a.btn-primary {
  background: linear-gradient(135deg, #8b0000, #c0392b) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  padding: 13px 30px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 18px rgba(139,0,0,0.4) !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

section.banner-section .btn-primary:hover {
  box-shadow: 0 0 35px rgba(255,0,0,0.55) !important;
  transform: translateY(-2px) !important;
}

section.banner-section .btn-outline-primary,
section.banner-section a.btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--gold) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  padding: 13px 30px !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

section.banner-section .btn-outline-primary:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: var(--gold-glow) !important;
  box-shadow: 0 0 20px rgba(201,168,76,0.25) !important;
}

/* Banner stats (1000+ Happy Customer) */
section.banner-section [class*="count"],
section.banner-section h4,
section.banner-section h5 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-glow) !important;
  text-shadow: 0 0 15px rgba(255,215,0,0.4) !important;
}

/* ===========================
   CLIENT SECTION
=========================== */
div.client.section-bg.py-60 {
  background: rgba(5,5,5,0.98) !important;
  border-top: 1px solid var(--border-gold) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  position: relative !important;
}

div.client.section-bg.py-60 img {
  filter: brightness(0.3) sepia(1) saturate(0.3) !important;
  opacity: 0.5 !important;
  transition: all 0.3s ease !important;
}

div.client.section-bg.py-60 img:hover {
  filter: brightness(0.7) sepia(0.3) saturate(1.5) !important;
  opacity: 0.9 !important;
}

/* ===========================
   ABOUT SECTION
=========================== */
section.about.pt-170.pb-85 {
  background:
    radial-gradient(ellipse at 5% 50%, rgba(139,0,0,0.07) 0%, transparent 55%),
    linear-gradient(180deg, #040000 0%, #000000 100%) !important;
  position: relative !important;
}

section.about h2,
section.about h3,
section.about h4 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 18px rgba(201,168,76,0.25) !important;
}

section.about p {
  color: var(--text-muted) !important;
  line-height: 1.9 !important;
}

/* Section heading label e.g "About Us" */
section.about .section-heading,
div.section-heading {
  position: relative !important;
}

section.about .section-heading h6,
section.about .section-heading span,
div.section-heading h6,
div.section-heading span {
  color: var(--crimson-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* About content inner */
div.about__content,
div.about-item {
  color: var(--text-muted) !important;
}

/* About item icons */
div.about-item__icon {
  background: linear-gradient(135deg, rgba(139,0,0,0.3), rgba(201,168,76,0.1)) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 15px rgba(139,0,0,0.2) !important;
}

div.about-item__icon i,
div.about-item__icon img {
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.5)) !important;
}

/* ===========================
   FEATURES SECTION
=========================== */
section.features.pt-85.pb-85 {
  background:
    radial-gradient(ellipse at 95% 50%, rgba(139,0,0,0.07) 0%, transparent 55%),
    linear-gradient(180deg, #000000 0%, #040000 100%) !important;
  position: relative !important;
}

section.features h2,
section.features h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 18px rgba(201,168,76,0.25) !important;
}

section.features p {
  color: var(--text-muted) !important;
  line-height: 1.8 !important;
}

/* Features Items Cards */
div.features-item.section-bg {
  background: linear-gradient(145deg, #0d0d0d, #080000) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  padding: 40px 22px !important;
  transition: all 0.4s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

div.features-item.section-bg::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

div.features-item.section-bg:hover::before {
  opacity: 1 !important;
}

div.features-item.section-bg:hover {
  border-color: rgba(201,168,76,0.45) !important;
  box-shadow:
    0 0 25px rgba(139,0,0,0.2),
    0 0 50px rgba(201,168,76,0.08) !important;
  transform: translateY(-5px) !important;
}

div.features-item.section-bg h4,
div.features-item.section-bg h5 {
  font-family: 'Cinzel', serif !important;
  color: var(--text-light) !important;
}

div.features-item.section-bg p {
  color: var(--text-muted) !important;
}

div.features-item.section-bg i,
div.features-item.section-bg img {
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.4)) !important;
}

/* ===========================
   PRICE PLAN SECTION
=========================== */
div.price-plan.pt-85.pb-170 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(139,0,0,0.09) 0%, transparent 70%),
    linear-gradient(180deg, #040000 0%, #000000 100%) !important;
  position: relative !important;
}

div.price-plan h2,
div.price-plan h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 18px rgba(201,168,76,0.25) !important;
}

div.price-plan p {
  color: var(--text-muted) !important;
}

/* Section Heading Style Center */
div.section-heading.style-center.text-center h2,
div.section-heading.style-center.text-center h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 18px rgba(201,168,76,0.25) !important;
}

div.section-heading.style-center.text-center p {
  color: var(--text-muted) !important;
}

div.section-heading.style-center.text-center span,
div.section-heading.style-center.text-center h6 {
  color: var(--crimson-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 3px !important;
}

/* Price Cards */
div.price-plan .card,
div.price-plan [class*="price-card"],
div.price-plan [class*="plan-item"],
div.price-plan [class*="plan-card"] {
  background: linear-gradient(160deg, #0d0d0d, #060000) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  transition: all 0.4s ease !important;
  color: var(--text-light) !important;
}

div.price-plan .card:hover,
div.price-plan [class*="plan-item"]:hover {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 35px rgba(139,0,0,0.25),
    0 0 70px rgba(201,168,76,0.08) !important;
  transform: translateY(-6px) !important;
}

/* Active / Featured Plan */
div.price-plan .card.active,
div.price-plan [class*="active"],
div.price-plan [class*="popular"] {
  background: linear-gradient(160deg, #100000, #060000) !important;
  border: 1px solid var(--gold) !important;
  box-shadow: 0 0 40px rgba(139,0,0,0.35) !important;
}

/* Price Amount */
div.price-plan [class*="price"],
div.price-plan .amount,
div.price-plan h2[class*="price"],
div.price-plan h3[class*="price"] {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-glow) !important;
  text-shadow: 0 0 18px rgba(255,215,0,0.45) !important;
}

/* Price Plan Buttons */
div.price-plan .btn,
div.price-plan a.btn {
  background: linear-gradient(135deg, #8b0000, #c0392b) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

div.price-plan .btn:hover {
  box-shadow: 0 0 28px rgba(255,0,0,0.45) !important;
  transform: translateY(-2px) !important;
}

/* Plan list items */
div.price-plan li,
div.price-plan ul li {
  color: var(--text-muted) !important;
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
  padding: 8px 0 !important;
}

div.price-plan li i {
  color: var(--gold) !important;
}

/* ===========================
   COUNTER AREA
=========================== */
div.counter-area.section-bg.py-60 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(139,0,0,0.18) 0%, rgba(201,168,76,0.04) 40%, transparent 70%),
    linear-gradient(135deg, #080000 0%, #000000 50%, #040000 100%) !important;
  border-top: 1px solid var(--border-crimson) !important;
  border-bottom: 1px solid var(--border-crimson) !important;
  position: relative !important;
  overflow: hidden !important;
}

div.counter-area.section-bg.py-60 h2,
div.counter-area.section-bg.py-60 h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 20px rgba(201,168,76,0.4) !important;
}

div.counter-area [class*="count"],
div.counter-area .odometer,
div.counter-area h4 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-glow) !important;
  font-size: 48px !important;
  text-shadow:
    0 0 20px rgba(255,215,0,0.55),
    0 0 40px rgba(255,215,0,0.25) !important;
  animation: glowPulse 3s ease-in-out infinite !important;
}

div.counter-area sup,
div.counter-area [class*="suffix"],
div.counter-area span[class*="k"],
div.counter-area span[class*="m"] {
  color: var(--crimson-light) !important;
  text-shadow: 0 0 12px rgba(255,0,0,0.4) !important;
}

div.counter-area p,
div.counter-area label,
div.counter-area span.label {
  color: var(--text-muted) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ===========================
   TESTIMONIALS SECTION
=========================== */
section.testimonials.pt-170.pb-85 {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(201,168,76,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #000000 0%, #040000 100%) !important;
  position: relative !important;
}

section.testimonials h2,
section.testimonials h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 18px rgba(201,168,76,0.25) !important;
}

section.testimonials p {
  color: var(--text-muted) !important;
}

/* Testimonial Card Wrapper */
div.testimonials-card {
  background: transparent !important;
}

/* Testimonial Item */
div.testimonial-item {
  background: linear-gradient(145deg, #0d0d0d, #080000) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  padding: 32px !important;
  position: relative !important;
  transition: all 0.4s ease !important;
}

div.testimonial-item::before {
  content: '\201C' !important;
  position: absolute !important;
  top: 8px !important;
  left: 18px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 70px !important;
  color: rgba(201,168,76,0.08) !important;
  line-height: 1 !important;
}

div.testimonial-item:hover {
  border-color: rgba(201,168,76,0.4) !important;
  box-shadow:
    0 0 25px rgba(139,0,0,0.18),
    0 0 50px rgba(201,168,76,0.07) !important;
}

div.testimonial-item p {
  color: var(--text-muted) !important;
  font-style: italic !important;
  line-height: 1.8 !important;
}

div.testimonial-item h5,
div.testimonial-item h6,
div.testimonial-item strong,
div.testimonial-item [class*="name"] {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
}

div.testimonial-item small,
div.testimonial-item [class*="role"],
div.testimonial-item [class*="position"] {
  color: var(--crimson-light) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
}

/* Stars */
div.testimonial-item i.fa-star,
div.testimonial-item [class*="star"] {
  color: var(--gold-glow) !important;
  text-shadow: 0 0 8px rgba(255,215,0,0.5) !important;
}

/* Slick Dots */
.slick-dots li button::before {
  color: var(--gold) !important;
  opacity: 0.5 !important;
}

.slick-dots li.slick-active button::before {
  color: var(--gold-glow) !important;
  opacity: 1 !important;
  text-shadow: 0 0 8px var(--gold-glow) !important;
}

/* ===========================
   BLOG SECTION (Homepage)
=========================== */
section.blog.py-60 {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(139,0,0,0.07) 0%, transparent 50%),
    linear-gradient(180deg, #040000 0%, #000000 100%) !important;
  position: relative !important;
}

section.blog h2,
section.blog h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
}

div.section-heading {
  color: var(--text-muted) !important;
}

/* Blog Item */
div.blog-item {
  background: var(--dark-card) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
}

div.blog-item:hover {
  border-color: rgba(201,168,76,0.4) !important;
  box-shadow: 0 0 25px rgba(139,0,0,0.18) !important;
  transform: translateY(-4px) !important;
}

/* Blog Item Thumb */
div.blog-item__thumb {
  overflow: hidden !important;
}

div.blog-item__thumb img {
  transition: transform 0.5s ease !important;
  filter: brightness(0.8) !important;
}

div.blog-item:hover div.blog-item__thumb img {
  transform: scale(1.05) !important;
  filter: brightness(0.9) !important;
}

/* Blog Item Content */
div.blog-item__content {
  background: linear-gradient(160deg, #0d0d0d, #060000) !important;
  padding: 30px 20px !important;
}

div.blog-item__content h4,
div.blog-item__content h5,
div.blog-item__content h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--text-light) !important;
  transition: color 0.3s ease !important;
}

div.blog-item__content h4:hover,
div.blog-item__content h5:hover {
  color: var(--gold-light) !important;
}

div.blog-item__content p {
  color: var(--text-muted) !important;
  line-height: 1.8 !important;
}

div.blog-item__content a {
  color: var(--gold) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

div.blog-item__content a:hover {
  color: var(--gold-glow) !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.35) !important;
}

/* Blog meta (date icon) */
div.blog-item__content i,
div.blog-item__content [class*="meta"] {
  color: var(--crimson-light) !important;
}

/* ===========================
   BLOG DETAILS PAGE
   section.blog-detials.py-120
=========================== */
section.blog-detials.py-120 {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(139,0,0,0.07) 0%, transparent 55%),
    linear-gradient(180deg, #000000 0%, #040000 100%) !important;
  position: relative !important;
}

/* Blog Details Main Content */
div.blog-details {
  background: transparent !important;
}

div.blog-details__thumb img {
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  filter: brightness(0.85) !important;
}

div.blog-details__content {
  background: linear-gradient(160deg, #0d0d0d, #060000) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  padding: 30px 20px !important;
  color: var(--text-muted) !important;
}

div.blog-details__content h3.blog-details__title,
div.blog-details__content h3,
div.blog-details__content h2 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  text-shadow: 0 0 15px rgba(201,168,76,0.2) !important;
}

div.blog-details__content p,
div.blog-details__desc p {
  color: var(--text-muted) !important;
  line-height: 1.9 !important;
}

div.blog-details__desc {
  color: var(--text-muted) !important;
}

/* Share section */
div.blog-details__share {
  border-top: 1px solid var(--border-gold) !important;
  padding-top: 15px !important;
}

h5.social-share__title {
  font-family: 'Cinzel', serif !important;
  color: var(--text-light) !important;
  letter-spacing: 2px !important;
}

ul.social-list {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 10px !important;
}

ul.social-list li a {
  background: linear-gradient(135deg, #0d0d0d, #080000) !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--gold) !important;
  width: 35px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

ul.social-list li a:hover {
  background: linear-gradient(135deg, #8b0000, #c0392b) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 15px rgba(139,0,0,0.4) !important;
  color: var(--gold-light) !important;
}

/* Blog Sidebar */
div.blog-sidebar-wrapper {
  background: transparent !important;
}

div.blog-sidebar {
  background: linear-gradient(160deg, #0d0d0d, #060000) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  padding: 20px !important;
}

h5.blog-sidebar__title {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  letter-spacing: 2px !important;
  border-bottom: 1px solid var(--border-gold) !important;
  padding-bottom: 10px !important;
  margin-bottom: 15px !important;
}

/* Latest Blog in Sidebar */
div.latest-blog {
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
  padding: 10px 0 !important;
  transition: all 0.3s ease !important;
}

div.latest-blog:hover {
  padding-left: 5px !important;
}

div.latest-blog img {
  border: 1px solid var(--border-gold) !important;
  border-radius: 3px !important;
  filter: brightness(0.75) !important;
}

div.latest-blog a,
div.latest-blog h6,
div.latest-blog span {
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  transition: color 0.3s ease !important;
}

div.latest-blog a:hover {
  color: var(--gold-light) !important;
}

/* ===========================
   ACCOUNT / LOGIN / REGISTER
   section.account.py-120
=========================== */
section.account.py-120 {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139,0,0,0.12) 0%, transparent 65%),
    linear-gradient(180deg, #000000 0%, #040000 100%) !important;
  min-height: 100vh !important;
}

/* Account Form Card */
div.account-form {
  background: linear-gradient(160deg, #0d0d0d, #060000) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  padding: 30px 20px !important;
  position: relative !important;
  box-shadow:
    0 0 40px rgba(139,0,0,0.15),
    0 0 80px rgba(201,168,76,0.06) !important;
}

div.account-form::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

/* Account Form Content (title area) */
div.account-form__content {
  border-bottom: 1px solid var(--border-gold) !important;
  padding-bottom: 15px !important;
  margin-bottom: 20px !important;
}

div.account-form__content h3,
div.account-form__content h4 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  letter-spacing: 2px !important;
}

div.account-form__content p {
  color: var(--text-muted) !important;
}

/* Form Groups */
div.form-group,
div.form--group {
  margin-bottom: 16px !important;
}

div.form-group label,
div.form--group label {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* Form Inputs */
div.account-form input[type="text"],
div.account-form input[type="email"],
div.account-form input[type="password"],
div.account-form textarea,
div.account-form select,
div.form-group input,
div.form--group input,
div.col-sm-12.form-group input,
div.col-md-6.form-group input {
  background: rgba(10,10,10,0.9) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 2px !important;
  color: var(--text-light) !important;
  padding: 12px 16px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

div.account-form input:focus,
div.form-group input:focus,
div.form--group input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 15px rgba(201,168,76,0.2) !important;
  background: rgba(15,5,5,0.95) !important;
  outline: none !important;
  color: var(--text-light) !important;
}

div.account-form input::placeholder,
div.form-group input::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
}

/* Password eye icon */
div.account-form .toggle-password,
div.account-form [class*="eye"],
div.account-form [class*="toggle"] {
  color: var(--gold) !important;
  cursor: pointer !important;
}

/* Sign In / Sign Up Button */
div.account-form .btn,
div.account-form button[type="submit"],
div.account-form input[type="submit"] {
  background: linear-gradient(135deg, #8b0000, #c0392b) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 14px 20px !important;
  border-radius: 2px !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 20px rgba(139,0,0,0.35) !important;
  cursor: pointer !important;
}

div.account-form .btn:hover,
div.account-form button[type="submit"]:hover {
  box-shadow: 0 0 35px rgba(255,0,0,0.5) !important;
  transform: translateY(-2px) !important;
}

/* OR Divider */
div.account-form [class*="or"],
div.account-form .or-text {
  color: var(--text-muted) !important;
  position: relative !important;
  text-align: center !important;
  margin: 15px 0 !important;
}

/* Social Login Buttons (Google, Facebook, LinkedIn) */
div.account-form .btn-outline-google,
div.account-form .btn-outline-facebook,
div.account-form .btn-outline-linkedin,
div.account-form [class*="social"] .btn,
div.account-form a[href*="google"],
div.account-form a[href*="facebook"],
div.account-form a[href*="linkedin"] {
  background: transparent !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--text-muted) !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
  font-size: 12px !important;
}

div.account-form a[href*="google"]:hover,
div.account-form a[href*="facebook"]:hover,
div.account-form a[href*="linkedin"]:hover {
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  box-shadow: 0 0 15px rgba(201,168,76,0.2) !important;
}

/* Forgot Password / Sign Up links */
p.have-account__text,
div.have-account {
  color: var(--text-muted) !important;
  text-align: center !important;
  margin-top: 15px !important;
}

p.have-account__text a,
div.have-account a {
  color: var(--gold) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1px !important;
}

p.have-account__text a:hover,
div.have-account a:hover {
  color: var(--gold-glow) !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.3) !important;
}

/* Checkbox */
div.account-form input[type="checkbox"] {
  accent-color: var(--crimson) !important;
  width: 16px !important;
  height: 16px !important;
}

div.account-form label a {
  color: var(--gold) !important;
}

/* ===========================
   PLANS PAGE
   (uses same div.price-plan.pt-85.pb-170 - already covered above)
   + FAQ section on plans page
=========================== */

/* ===========================
   FAQ SECTION
   div.faq.pt-85.pb-85
=========================== */
div.faq.pt-85.pb-85 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(139,0,0,0.07) 0%, transparent 65%),
    linear-gradient(180deg, #000000 0%, #040000 100%) !important;
  position: relative !important;
}

div.faq h2,
div.faq h3 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
}

div.faq p {
  color: var(--text-muted) !important;
}

div.faq a {
  color: var(--crimson-light) !important;
  transition: color 0.3s ease !important;
}

div.faq a:hover {
  color: var(--gold) !important;
}

/* Accordion */
div.accordion.custom--accordion {
  border: none !important;
}

div.accordion-item {
  background: linear-gradient(160deg, #0d0d0d, #060000) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 3px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}

div.accordion-item:hover {
  border-color: rgba(201,168,76,0.4) !important;
}

h5.accordion-header button.accordion-button,
button.accordion-button,
button.accordion-button.collapsed {
  background: linear-gradient(135deg, #0d0d0d, #060000) !important;
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  border: none !important;
  padding: 25px 24px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

button.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #100000, #060000) !important;
  color: var(--gold-light) !important;
  box-shadow: none !important;
}

button.accordion-button::after {
  filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg) !important;
  opacity: 0.7 !important;
}

button.accordion-button:not(.collapsed)::after {
  filter: invert(0.8) sepia(1) saturate(5) hue-rotate(5deg) !important;
  opacity: 1 !important;
}

div.accordion-body {
  background: rgba(5,0,0,0.8) !important;
  border-top: 1px solid var(--border-crimson) !important;
}

p.accordion-body__desc {
  color: var(--text-muted) !important;
  line-height: 1.9 !important;
}

/* ===========================
   ABOUT PAGE
   section.about.pt-170.pb-85
   (already covered) +
   client + faq sections
=========================== */

/* ===========================
   CONTACT PAGE
   div.contact.pt-120.pb-60
=========================== */
div.contact.pt-120.pb-60 {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(139,0,0,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #000000 0%, #040000 100%) !important;
}

div.contact h2,
div.contact h3,
div.contact h4 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
}

div.contact p {
  color: var(--text-muted) !important;
  line-height: 1.9 !important;
}

div.contact [class*="info"] i,
div.contact [class*="contact"] i {
  color: var(--gold) !important;
}

div.contact [class*="info"] span,
div.contact [class*="address"],
div.contact [class*="phone"],
div.contact [class*="email"] {
  color: var(--text-muted) !important;
}

/* Contact Form uses div.account-form - already covered above */

/* Contact textarea */
div.account-form textarea,
div.contact textarea {
  background: rgba(10,10,10,0.9) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 2px !important;
  color: var(--text-light) !important;
  padding: 12px 16px !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
  resize: vertical !important;
  min-height: 120px !important;
}

div.account-form textarea:focus,
div.contact textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 15px rgba(201,168,76,0.2) !important;
  outline: none !important;
}

div.account-form textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
}

/* ===========================
   FOOTER
=========================== */
footer.footer-area {
  background: linear-gradient(180deg, #040000 0%, #000000 100%) !important;
  border-top: 1px solid var(--border-gold) !important;
  position: relative !important;
}

footer.footer-area::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

/* Footer top content */
div.pb-60.pt-60 {
  border-bottom: 1px solid var(--border-gold) !important;
}

footer.footer-area h4,
footer.footer-area h5,
footer.footer-area h6 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-light) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

footer.footer-area p {
  color: var(--text-muted) !important;
  line-height: 1.8 !important;
}

footer.footer-area a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  display: block !important;
  margin-bottom: 6px !important;
}

footer.footer-area a:hover {
  color: var(--gold-light) !important;
  padding-left: 6px !important;
  text-shadow: 0 0 8px rgba(201,168,76,0.3) !important;
}

/* Quick Link heading */
footer.footer-area [class*="quick"],
footer.footer-area [class*="link"] h5 {
  color: var(--gold-light) !important;
}

/* Contact info items */
footer.footer-area [class*="contact"] i,
footer.footer-area [class*="info"] i {
  color: var(--crimson-light) !important;
}

footer.footer-area [class*="contact"] span,
footer.footer-area [class*="info"] span {
  color: var(--text-muted) !important;
}

/* Bottom Footer */
div.bottom-footer {
  background: rgba(0,0,0,0.6) !important;
  border-top: 1px solid var(--border-gold) !important;
}

div.footer-bottom-inner {
  padding: 35px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

div.footer-bottom-inner p,
div.footer-bottom-inner span {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

div.footer-bottom-inner a {
  color: var(--gold) !important;
  display: inline !important;
  padding: 0 !important;
}

div.footer-bottom-inner a:hover {
  color: var(--gold-glow) !important;
  padding-left: 0 !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.3) !important;
}

/* Social Icons in Footer Bottom */
div.footer-bottom-inner [class*="social"] a,
div.footer-bottom-inner i {
  color: var(--text-muted) !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  padding: 0 5px !important;
}

div.footer-bottom-inner [class*="social"] a:hover,
div.footer-bottom-inner i:hover {
  color: var(--gold-light) !important;
  text-shadow: 0 0 10px rgba(201,168,76,0.4) !important;
  transform: translateY(-2px) !important;
}

/* ===========================
   GENERAL UTILITY OVERRIDES
=========================== */

/* All headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
}

/* All paragraphs */
p {
  color: var(--text-muted) !important;
}

/* All links */
a {
  color: var(--gold) !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--gold-glow) !important;
}

/* Section BG utility */
.section-bg {
  background: #050505 !important;
}

/* General cards */
.card {
  background: var(--dark-card) !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--text-light) !important;
}

.card-body {
  background: var(--dark-card) !important;
}

/* Buttons Global */
.btn-primary {
  background: linear-gradient(135deg, #8b0000, #c0392b) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  border-radius: 2px !important;
}

.btn-primary:hover {
  box-shadow: 0 0 25px rgba(255,0,0,0.45) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--gold) !important;
  font-family: 'Cinzel', serif !important;
  border-radius: 2px !important;
}

.btn-outline-primary:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
}

/* Read More links */
a[href*="blog"],
a[class*="read"],
a[class*="more"] {
  color: var(--gold) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

/* ===========================
   ANIMATIONS
=========================== */
@keyframes glowPulse {
  0%, 100% {
    text-shadow:
      0 0 15px rgba(255,215,0,0.4),
      0 0 30px rgba(255,215,0,0.2);
  }
  50% {
    text-shadow:
      0 0 25px rgba(255,215,0,0.7),
      0 0 50px rgba(255,215,0,0.35),
      0 0 80px rgba(139,0,0,0.2);
  }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.2); }
  50% { box-shadow: 0 0 40px rgba(201,168,76,0.5), 0 0 60px rgba(139,0,0,0.2); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Apply animations */
div.price-plan .card.active,
div.price-plan [class*="popular"] {
  animation: borderGlow 3s ease-in-out infinite !important;
}

section.banner-section h1,
section.banner-section h2 {
  animation: fadeInUp 0.8s ease forwards !important;
}












/* ===========================
   FIX 1: LOGO - REMOVE GLOW/SHADOW
=========================== */
a.navbar-brand.logo img {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

a.navbar-brand.logo img:hover {
  filter: none !important;
  box-shadow: none !important;
}

/* ===========================
   FIX 2: BLOG ITEM - REMOVE GOLD GLOW
   on blog-item__content hover
=========================== */
div.blog-item:hover {
  border-color: rgba(201,168,76,0.2) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

div.blog-item__content h4,
div.blog-item__content h5,
div.blog-item__content h3 {
  text-shadow: none !important;
}

div.blog-item__content h4:hover,
div.blog-item__content h5:hover {
  color: var(--gold-light) !important;
  text-shadow: none !important;
}

/* Blog item content border glow - remove */
div.blog-item__content {
  box-shadow: none !important;
}

/* ===========================
   FIX 3: LOGIN / REGISTER / CONTACT
   Fix input fields spacing & size
=========================== */

/* Reduce section padding */
section.account.py-120 {
  padding: 40px 0 !important;
}

/* Account form overall */
div.account-form {
  padding: 25px 20px !important;
}

/* Fix the row inside form - remove excess gap */
div.account-form form div.row,
div.account-form .row {
  margin: 0 !important;
  row-gap: 0 !important;
  gap: 0 !important;
}

/* Fix col spacing */
div.col-sm-12.form-group,
div.col-md-6.form-group,
div.col-sm-12,
div.col-md-6,
div.form-group.col-12 {
  padding-left: 6px !important;
  padding-right: 6px !important;
  margin-bottom: 0 !important;
}

/* Form group - tighten spacing */
div.form-group,
div.form--group {
  margin-bottom: 8px !important;
  padding: 0 !important;
}

/* Label */
div.form-group label,
div.form--group label,
div.account-form label {
  margin-bottom: 3px !important;
  font-size: 11px !important;
  display: block !important;
}

/* Input fields - proper height */
div.account-form input[type="text"],
div.account-form input[type="email"],
div.account-form input[type="password"],
div.account-form input[type="number"],
div.account-form select,
div.account-form textarea,
div.form-group input,
div.form--group input,
div.col-sm-12.form-group input,
div.col-md-6.form-group input,
section.account input:not([type="hidden"]):not([type="checkbox"]),
section.account select,
section.account textarea {
  height: 42px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
  background: rgba(8,0,0,0.9) !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--text-light) !important;
  border-radius: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Textarea specific */
div.account-form textarea,
section.account textarea {
  height: 90px !important;
  resize: vertical !important;
}

/* Password wrapper / eye icon container */
div.account-form .input-group,
div.account-form [class*="password-wrapper"],
div.account-form [class*="input-wrap"] {
  margin-bottom: 0 !important;
}

/* Remove large margin on col-sm-12 inside form */
div.account-form div.col-sm-12 {
  margin: 0 !important;
  padding: 3px 6px !important;
}

/* pb-2 utility class override inside forms */
div.account-form div.col-sm-12.pb-2 {
  padding-bottom: 4px !important;
}

/* Fix gy-4 row gap inside account form */
div.row.justify-content-center.gy-4 {
  --bs-gutter-y: 0.5rem !important;
}

/* Checkbox row */
div.account-form div[class*="col-sm-12"]:has(input[type="checkbox"]) {
  margin: 6px 0 !important;
}

/* Submit button tighter */
div.account-form .btn,
div.account-form button[type="submit"],
div.account-form input[type="submit"] {
  margin-top: 10px !important;
  padding: 11px 20px !important;
  height: auto !important;
}

/* Have account text */
p.have-account__text,
div.have-account {
  margin-top: 10px !important;
  font-size: 13px !important;
}

/* Social login buttons spacing */
div.account-form div[class*="col-sm-12"]:has(a[href*="google"]),
div.account-form div[class*="col-sm-12"]:has(a[href*="facebook"]) {
  margin: 5px 0 !important;
}

/* OR text spacing */
div.account-form div.col-sm-12:empty,
div.account-form div.col-sm-12 hr {
  margin: 5px 0 !important;
}

/* ===========================
   FIX 4: CONTACT FORM spacing
=========================== */
div.contact.pt-120.pb-60 {
  padding-top: 50px !important;
  padding-bottom: 40px !important;
}

div.contact div.account-form {
  padding: 20px !important;
}

div.contact div.account-form div.form-group,
div.contact div.account-form div.form--group {
  margin-bottom: 8px !important;
}

div.contact div.account-form input,
div.contact div.account-form textarea,
div.contact div.account-form select {
  height: 42px !important;
  padding: 8px 12px !important;
}

/* ===========================
   FIX 5: BLOG DETAILS
   col-xl-9 content area glow fix
=========================== */
div.col-xl-9.col-lg-8 {
  box-shadow: none !important;
}

div.blog-details__content {
  box-shadow: none !important;
}

div.blog-details__title,
h3.blog-details__title {
  text-shadow: none !important;
}

/* ===========================
   FIX 6: ABOUT ITEM ICON
   Remove purple/glow background
=========================== */
div.about-item__icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

div.about-item__icon img {
  filter: none !important;
}

/* ===========================
   FIX 7: NAVBAR color text
   visible on dark bg
=========================== */
nav.navbar.navbar-expand-xl.navbar-light {
  color: var(--text-light) !important;
}

















/* ===========================
   FIX 1: REMOVE ALL SECTION BORDERS
=========================== */

/* Remove borders from all sections/divs */
section.about.pt-170.pb-85,
section.features.pt-85.pb-85,
section.blog.py-60,
section.testimonials.pt-170.pb-85,
section.blog-detials.py-120,
div.price-plan.pt-85.pb-170,
div.counter-area.section-bg.py-60,
div.client.section-bg.py-60,
div.faq.pt-85.pb-85,
div.contact.pt-120.pb-60,
section.account.py-120 {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
}

/* Remove borders from cards and feature items */
div.features-item.section-bg,
div.blog-item,
div.blog-item__content,
div.blog-details__content,
div.blog-details__thumb img,
div.testimonial-item,
div.price-plan .card,
div.account-form,
div.blog-sidebar,
div.latest-blog {
  border: none !important;
  outline: none !important;
}

/* Remove accordion borders */
div.accordion-item {
  border: none !important;
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
}

/* Remove footer borders */
footer.footer-area,
div.bottom-footer,
div.pb-60.pt-60,
div.footer-bottom-inner {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Remove hover borders */
div.features-item.section-bg:hover,
div.blog-item:hover,
div.testimonial-item:hover,
div.price-plan .card:hover {
  border: none !important;
}























/* ===========================
   FIX 1: BLOG DETAILS CONTENT
   Remove border & yellow shadow
   Keep only a simple line
=========================== */

div.blog-details__content {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 30px 0 !important;
}

div.blog-details__content:hover {
  border: none !important;
  box-shadow: none !important;
}

/* The simple bottom line separator */
div.blog-details__share {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
}

/* Remove any glow from blog details */
div.blog-details,
div.blog-details__thumb,
section.blog-detials.py-120 {
  box-shadow: none !important;
  border: none !important;
}






/* ===========================
   FIX 2: SOCIAL LIST LINKS
   Style matching blog post
   (dark square buttons with gold icon)
=========================== */






/* Social list items */
ul.social-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

ul.social-list li.social-list__item {
  margin: 0 !important;
  padding: 0 !important;
}


a.social-list__link.flex-center {
  width: 35px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-radius: 3px !important;
  color: var(--gold) !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

a.social-list__link.flex-center:hover {
  background: var(--crimson) !important;
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

/* Share This title */
h5.social-share__title {
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  font-size: 14px !important;
}









.footer-social  {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.footer-social a i {
  margin: 0 !important;
  padding: 0 !important;
}


.footer-social a i{
  width: 35px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-radius: 3px !important;
  color: var(--gold) !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.footer-social a i:hover {
  background: var(--crimson) !important;
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}













































































/* ============================================
   THE LIGHT - DARK MYSTICAL THEME (FIXED)
   NO PRELOADER INTERFERENCE
   ============================================ */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* === CSS VARIABLES === */
:root {
  --gold-primary: #c9a84c;
  --gold-bright: #f0c040;
  --gold-glow: #ffd700;
  --gold-light: #fff3b0;
  --gold-dark: #7a5c00;
  --crimson-deep: #8b0000;
  --crimson-primary: #c0392b;
  --crimson-bright: #e74c3c;
  --black-deep: #000000;
  --black-card: #0a0505;
  --black-surface: #0f0808;
  --text-primary: #e8e0d0;
  --text-muted: #6b5a3e;
  --border-gold: rgba(201, 168, 76, 0.3);
  --border-crimson: rgba(192, 57, 43, 0.4);
  --glow-gold: 0 0 20px rgba(201,168,76,0.5), 0 0 40px rgba(201,168,76,0.25);
  --glow-crimson: 0 0 20px rgba(192,57,43,0.5), 0 0 40px rgba(192,57,43,0.25);
}

/* === ANIMATIONS === */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(201,168,76,0.2); border-color: rgba(201,168,76,0.3); }
  50% { box-shadow: 0 0 20px rgba(201,168,76,0.5); border-color: rgba(201,168,76,0.7); }
}

@keyframes shimmerLine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes sacredRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =============================================
   BODY - DARK BACKGROUND WITH SACRED GEOMETRY
   ============================================= */

body {
  background-color: #000000 !important;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(139,0,0,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgba(139,0,0,0.04) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  color: #e8e0d0 !important;
  font-family: 'Nunito Sans', sans-serif !important;
}

/* Sacred geometry subtle background pattern */
body > .dashboard {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cdefs%3E%3Cstyle%3E.l%7Bfill:none;stroke:%23c9a84c;stroke-opacity:.04;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='l' points='250,20 480,440 20,440' stroke-width='1'/%3E%3Cpolygon class='l' points='250,480 20,60 480,60' stroke-width='1'/%3E%3Ccircle class='l' cx='250' cy='250' r='220' stroke-width='.8'/%3E%3Ccircle class='l' cx='250' cy='250' r='140' stroke-width='.8'/%3E%3Ccircle class='l' cx='250' cy='250' r='60' stroke-width='.8'/%3E%3Cline class='l' x1='250' y1='0' x2='250' y2='500' stroke-width='.5'/%3E%3Cline class='l' x1='0' y1='250' x2='500' y2='250' stroke-width='.5'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  background-repeat: repeat;
}

/* =============================================
   PRELOADER — COMPLETELY UNTOUCHED
   DO NOT STYLE .preloader AT ALL
   ============================================= */
/* .preloader { } — intentionally left empty */


/* =============================================
   SIDEBAR
   ============================================= */

.sidebar-menu {
  background: linear-gradient(180deg,
    rgba(4,2,2,0.98) 0%,
    rgba(8,3,3,0.98) 60%,
    rgba(4,2,2,0.99) 100%
  ) !important;
  border-right: 1px solid rgba(201,168,76,0.25) !important;
  box-shadow: 4px 0 35px rgba(0,0,0,0.8), inset -1px 0 0 rgba(201,168,76,0.15) !important;
  position: relative;
  z-index: 100;
}

/* Top shimmer line on sidebar */
.sidebar-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-primary) 30%,
    var(--crimson-primary) 50%,
    var(--gold-primary) 70%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: shimmerLine 4s ease infinite;
  pointer-events: none;
}

/* Logo area */
.sidebar-logo {
  padding: 18px 12px !important;
  border-bottom: 1px solid rgba(201,168,76,0.2) !important;
  text-align: center;
}

.sidebar-logo img {
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.7)) !important;
  animation: subtleFloat 6s ease-in-out infinite;
  transition: filter 0.3s ease;
}

.sidebar-logo img:hover {
  filter: drop-shadow(0 0 22px rgba(255,215,0,0.95)) !important;
}

/* Nav list */
.sidebar-menu-list {
  padding: 12px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.sidebar-menu-list__item {
  margin: 2px 8px !important;
  border-radius: 7px;
}

.sidebar-menu-list__link {
  color: #d4c8b0 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 11px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  text-decoration: none !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  transition: all 0.35s ease !important;
  position: relative !important;
}

.sidebar-menu-list__link:hover {
  background: linear-gradient(135deg,
    rgba(139,0,0,0.28),
    rgba(201,168,76,0.08)
  ) !important;
  color: var(--gold-bright) !important;
  border-color: rgba(201,168,76,0.35) !important;
  box-shadow: 0 0 18px rgba(201,168,76,0.18) !important;
  text-shadow: 0 0 8px rgba(201,168,76,0.7) !important;
  transform: translateX(3px) !important;
  text-decoration: none !important;
}

/* Active state */
.sidebar-menu-list__item.active > .sidebar-menu-list__link {
  background: linear-gradient(135deg,
    rgba(139,0,0,0.45),
    rgba(201,168,76,0.15)
  ) !important;
  color: var(--gold-glow) !important;
  border-color: rgba(201,168,76,0.45) !important;
  box-shadow: 0 0 22px rgba(201,168,76,0.28) !important;
  text-shadow: 0 0 12px rgba(255,215,0,0.9) !important;
}

/* Sidebar icons */
.sidebar-menu-list__link i {
  color: var(--gold-primary) !important;
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.5)) !important;
  transition: all 0.3s ease !important;
  font-size: 15px !important;
  min-width: 18px;
  text-align: center;
}

.sidebar-menu-list__link:hover i {
  color: var(--gold-glow) !important;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.9)) !important;
  transform: scale(1.15) !important;
}

/* Submenu */
.sidebar-submenu {
  background: rgba(0,0,0,0.5) !important;
  border-left: 2px solid rgba(201,168,76,0.2) !important;
  margin-left: 18px !important;
  border-radius: 0 0 6px 6px !important;
}

.sidebar-submenu a {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
  letter-spacing: 1px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  transition: all 0.3s ease !important;
  display: block !important;
  text-decoration: none !important;
}

.sidebar-submenu a:hover {
  color: var(--gold-primary) !important;
  text-shadow: 0 0 8px rgba(201,168,76,0.6) !important;
  text-decoration: none !important;
}

/* Sidebar bottom copyright */
.sidebar-bottom {
  border-top: 1px solid rgba(201,168,76,0.18) !important;
  padding: 14px 12px !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1px !important;
  text-align: center;
}

.sidebar-bottom a {
  color: var(--gold-primary) !important;
  font-family: 'Cinzel Decorative', cursive !important;
  text-shadow: 0 0 8px rgba(201,168,76,0.5) !important;
  text-decoration: none !important;
}

/* =============================================
   DASHBOARD HEADER
   ============================================= */

.dashboard-header {
  background: linear-gradient(135deg,
    rgba(4,2,2,0.97) 0%,
    rgba(10,4,4,0.97) 100%
  ) !important;
  border-bottom: 1px solid rgba(201,168,76,0.22) !important;
  box-shadow:
    0 3px 25px rgba(0,0,0,0.75),
    0 1px 0 rgba(201,168,76,0.2) !important;
  position: relative;
  z-index: 50;
}

/* Bottom accent line */
.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--crimson-primary) 25%,
    var(--gold-primary) 50%,
    var(--crimson-primary) 75%,
    transparent 100%
  );
  pointer-events: none;
}

.dashboard-header__inner {
  padding: 11px 22px !important;
  background: transparent !important;
  color: var(--text-primary) !important;
}

/* Header left title text */
.dashboard-header__left {
  color: var(--gold-primary) !important;
  font-family: 'Cinzel Decorative', cursive !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-shadow:
    0 0 15px rgba(201,168,76,0.7),
    0 0 30px rgba(201,168,76,0.3) !important;
  text-transform: uppercase !important;
}

/* New Plan button */
.btn-outline--base {
  background: transparent !important;
  border: 2px solid var(--crimson-primary) !important;
  color: var(--gold-primary) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  padding: 7px 18px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  transition: all 0.35s ease !important;
  box-shadow: 0 0 12px rgba(192,57,43,0.35) !important;
}

.btn-outline--base:hover {
  background: linear-gradient(135deg,
    var(--crimson-primary),
    rgba(139,0,0,0.75)
  ) !important;
  color: var(--gold-bright) !important;
  border-color: var(--gold-primary) !important;
  box-shadow: var(--glow-crimson), var(--glow-gold) !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.9) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* User info button */
.user-info__button {
  background: rgba(8,5,5,0.8) !important;
  border: 1px solid rgba(201,168,76,0.28) !important;
  color: var(--gold-primary) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  padding: 7px 13px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.user-info__button:hover {
  background: rgba(139,0,0,0.25) !important;
  border-color: var(--gold-primary) !important;
  box-shadow: var(--glow-gold) !important;
  color: var(--gold-bright) !important;
}

/* Hamburger bar icon */
.dashboard-body__bar-icon {
  color: var(--gold-primary) !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
}

.dashboard-body__bar-icon:hover {
  color: var(--gold-glow) !important;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.9)) !important;
}

.dashboard-body__bar-icon i,
.dashboard-body__bar-icon .fas {
  color: var(--gold-primary) !important;
  font-size: 19px !important;
  filter: drop-shadow(0 0 5px rgba(201,168,76,0.6)) !important;
}

/* User dropdown menu */
.user-info-dropdown {
  background: linear-gradient(
    135deg,
    rgba(4,2,2,0.99),
    rgba(12,4,4,0.99)
  ) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-top: 2px solid var(--crimson-primary) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,0.9),
    var(--glow-gold) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.user-info-dropdown li a {
  color: var(--text-primary) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11.5px !important;
  letter-spacing: 1.3px !important;
  padding: 11px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
}

.user-info-dropdown li a:hover {
  background: linear-gradient(135deg,
    rgba(139,0,0,0.35),
    rgba(201,168,76,0.08)
  ) !important;
  color: var(--gold-glow) !important;
  text-shadow: 0 0 8px rgba(255,215,0,0.7) !important;
  padding-left: 24px !important;
  text-decoration: none !important;
}

.user-info-dropdown li a i {
  color: var(--gold-primary) !important;
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.5)) !important;
}

/* =============================================
   DASHBOARD BODY
   ============================================= */

.dashboard-body {
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 22px !important;
}

/* =============================================
   WIDGET CARDS
   ============================================= */

.dashboard-widget {
  background: linear-gradient(
    135deg,
    rgba(7,3,3,0.96) 0%,
    rgba(11,5,5,0.96) 100%
  ) !important;
  border: 1px solid rgba(201,168,76,0.28) !important;
  border-radius: 11px !important;
  padding: 18px !important;
  box-shadow:
    0 6px 28px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(201,168,76,0.08) !important;
  transition: all 0.38s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: goldPulse 5s ease-in-out infinite;
}

/* Top shimmer on card */
.dashboard-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold-primary),
    var(--crimson-primary),
    var(--gold-primary),
    transparent
  );
  opacity: 0.5;
  pointer-events: none;
}

.dashboard-widget:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(201,168,76,0.6) !important;
  box-shadow:
    0 14px 45px rgba(0,0,0,0.85),
    0 0 25px rgba(201,168,76,0.2),
    0 0 50px rgba(139,0,0,0.1),
    inset 0 1px 0 rgba(201,168,76,0.15) !important;
  animation: none !important;
}

/* Widget label text (Total Credit, My Plan etc.) */
.dashboard-widget p,
.dashboard-widget .widget-title,
.dashboard-widget .label {
  color: var(--gold-primary) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* Widget amount/value */
.dashboard-widget h3,
.dashboard-widget h4,
.dashboard-widget h5,
.dashboard-widget .value,
.dashboard-widget strong {
  color: var(--crimson-bright) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 15px rgba(231,76,60,0.7),
    0 0 30px rgba(192,57,43,0.35) !important;
  letter-spacing: 1px !important;
}

/* Widget icons */
.dashboard-widget img {
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.55)) !important;
  transition: all 0.3s ease !important;
}

.dashboard-widget:hover img {
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.85)) !important;
  transform: scale(1.08) !important;
}

/* =============================================
   FORMS & INPUTS
   ============================================= */

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: rgba(5,2,2,0.9) !important;
  border: 1px solid rgba(201,168,76,0.28) !important;
  color: var(--text-primary) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  border-radius: 6px !important;
  padding: 9px 13px !important;
  transition: all 0.3s ease !important;
}

input:not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
  background: rgba(8,3,3,0.95) !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.18), var(--glow-gold) !important;
  color: var(--gold-light) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

/* =============================================
   BUTTONS
   ============================================= */

.btn-base,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg,
    var(--crimson-primary) 0%,
    var(--crimson-deep) 50%,
    var(--crimson-primary) 100%
  ) !important;
  border: 1px solid rgba(201,168,76,0.45) !important;
  color: var(--gold-bright) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  transition: all 0.38s ease !important;
  box-shadow: var(--glow-crimson) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-base:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg,
    var(--crimson-bright) 0%,
    var(--crimson-primary) 100%
  ) !important;
  box-shadow: var(--glow-crimson), var(--glow-gold) !important;
  transform: translateY(-2px) !important;
  color: var(--gold-glow) !important;
  border-color: var(--gold-primary) !important;
}

/* =============================================
   TABLES
   ============================================= */

table {
  background: transparent !important;
}

thead th {
  background: rgba(139,0,0,0.22) !important;
  color: var(--gold-primary) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10.5px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid rgba(201,168,76,0.25) !important;
  padding: 11px 14px !important;
}

tbody tr {
  background: rgba(7,3,3,0.75) !important;
  transition: background 0.3s ease !important;
  border-bottom: 1px solid rgba(201,168,76,0.07) !important;
}

tbody tr:hover {
  background: linear-gradient(135deg,
    rgba(139,0,0,0.18),
    rgba(201,168,76,0.06)
  ) !important;
}

tbody td {
  color: var(--text-primary) !important;
  padding: 11px 14px !important;
  border: none !important;
  font-size: 13px !important;
}

/* =============================================
   SCROLLBAR
   ============================================= */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.4);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--crimson-primary),
    var(--gold-dark)
  );
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    var(--crimson-bright),
    var(--gold-primary)
  );
}

/* =============================================
   HEADINGS & LINKS
   ============================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif !important;
  color: var(--gold-primary) !important;
}

a {
  color: var(--gold-primary) !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

a:hover {
  color: var(--gold-glow) !important;
  text-shadow: 0 0 8px rgba(255,215,0,0.7) !important;
  text-decoration: none !important;
}

/* =============================================
   BADGES
   ============================================= */

.badge {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  border-radius: 3px !important;
}

.badge-success, .text-success { color: #00e676 !important; }
.badge-danger, .text-danger { color: var(--crimson-bright) !important; }
.badge-warning, .text-warning { color: var(--gold-bright) !important; }

/* =============================================
   MODAL
   ============================================= */

.modal-content {
  background: linear-gradient(135deg,
    rgba(4,2,2,0.99),
    rgba(12,5,5,0.99)
  ) !important;
  border: 1px solid rgba(201,168,76,0.28) !important;
  border-top: 3px solid var(--crimson-primary) !important;
  box-shadow:
    0 28px 75px rgba(0,0,0,0.95),
    var(--glow-gold) !important;
  color: var(--text-primary) !important;
}

.modal-header {
  background: linear-gradient(135deg,
    rgba(139,0,0,0.25),
    rgba(201,168,76,0.08)
  ) !important;
  border-bottom: 1px solid rgba(201,168,76,0.22) !important;
}

.modal-title {
  color: var(--gold-primary) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 12px rgba(201,168,76,0.6) !important;
}

.modal-footer {
  border-top: 1px solid rgba(201,168,76,0.2) !important;
  background: rgba(4,2,2,0.6) !important;
}

/* =============================================
   ALERTS / NOTICES
   ============================================= */

.alert {
  background: linear-gradient(135deg,
    rgba(25,8,5,0.92),
    rgba(12,4,4,0.92)
  ) !important;
  border: 1px solid var(--border-crimson) !important;
  border-left: 4px solid var(--crimson-primary) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

/* =============================================
   PAGINATION
   ============================================= */

.page-link {
  background: rgba(5,2,2,0.9) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  color: var(--gold-primary) !important;
  transition: all 0.3s ease !important;
}

.page-link:hover {
  background: rgba(139,0,0,0.35) !important;
  color: var(--gold-glow) !important;
}

.page-item.active .page-link {
  background: var(--crimson-primary) !important;
  border-color: var(--gold-primary) !important;
  color: var(--gold-bright) !important;
}

/* =============================================
   HR DIVIDERS
   ============================================= */

hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,168,76,0.4),
    rgba(192,57,43,0.4),
    transparent
  ) !important;
  opacity: 0.6 !important;
  margin: 18px 0 !important;
}

/* =============================================
   TEXT SELECTION
   ============================================= */

::selection {
  background: rgba(192,57,43,0.38);
  color: var(--gold-bright);
}

/* =============================================
   MOBILE RESPONSIVE
   ============================================= */

@media (max-width: 991px) {
  .sidebar-menu {
    box-shadow:
      8px 0 50px rgba(0,0,0,0.92),
      4px 0 18px rgba(201,168,76,0.1) !important;
  }

  .dashboard-body {
    padding: 14px !important;
  }
}

@media (max-width: 576px) {
  .dashboard-header__inner {
    padding: 9px 13px !important;
  }

  .btn-outline--base {
    font-size: 10px !important;
    padding: 6px 11px !important;
    letter-spacing: 1px !important;
  }

  .dashboard-widget h3,
  .dashboard-widget h4 {
    font-size: 17px !important;
  }
}





























































/* =============================================
   FIX WHITE/LIGHT BACKGROUNDS - ALL PAGES
   Targets exact classes seen in DevTools
   ============================================= */

/* === MAIN DASHBOARD BODY AREA === */
.dashboard-body {
  background-color: #000000 !important;
  background-image: none !important;
  color: #e8e0d0 !important;
}

/* === DASHBOARD RIGHT PANEL === */
.dashboard__right {
  background-color: #000000 !important;
  background-image: none !important;
}

/* === CMN SECTION (Deposit page wrapper) === */
.cmn-section {
  background-color: #000000 !important;
  background-image: none !important;
}

/* === CONTAINER & ROW WRAPPERS === */
.dashboard-body .container {
  background-color: transparent !important;
}

.dashboard-body .row {
  background-color: transparent !important;
}

/* === COL-LG-9 (Deposit form column) === */
.dashboard-body .col-lg-9,
.dashboard-body .col-lg-8,
.dashboard-body .col-lg-6,
.dashboard-body .col-12 {
  background-color: transparent !important;
}

/* === CARD / CUSTOM CARD === */
.card,
.custom--card {
  background: linear-gradient(
    135deg,
    rgba(7, 3, 3, 0.97) 0%,
    rgba(12, 5, 5, 0.97) 100%
  ) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  border-radius: 12px !important;
  color: #e8e0d0 !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(201, 168, 76, 0.08) !important;
}

.card-body {
  background: transparent !important;
  color: #e8e0d0 !important;
}

.card-header {
  background: linear-gradient(
    135deg,
    rgba(139, 0, 0, 0.3),
    rgba(201, 168, 76, 0.08)
  ) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.22) !important;
  color: #c9a84c !important;
}

/* === DEPOSIT PAGE SPECIFIC === */
/* Deposit header banner */
.dashboard-body .btn-group,
.dashboard-body > div > .row > div {
  background-color: transparent !important;
}

/* Deposit form inner area */
.deposit-form,
.deposit-wrapper,
[class*="deposit"] {
  background: rgba(7, 3, 3, 0.95) !important;
  border: 1px solid rgba(201, 168, 76, 0.25) !important;
  border-radius: 10px !important;
  color: #e8e0d0 !important;
}

/* === DASHBOARD TABLE HEADER (History pages) === */
.dashboard-table__header {
  background: linear-gradient(
    135deg,
    rgba(139, 0, 0, 0.25),
    rgba(80, 0, 0, 0.2)
  ) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
  color: #c9a84c !important;
  padding: 10px 20px !important;
}

/* === TABLE RESPONSIVE WRAPPER === */
.table-responsive {
  background: rgba(5, 2, 2, 0.9) !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  border-radius: 8px !important;
}

/* === TABLE ITSELF === */
.table,
table {
  background: transparent !important;
  color: #e8e0d0 !important;
}

.table thead th {
  background: rgba(139, 0, 0, 0.22) !important;
  color: #c9a84c !important;
  border-bottom: 2px solid rgba(201, 168, 76, 0.25) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}

.table tbody tr {
  background: rgba(7, 3, 3, 0.75) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.07) !important;
  transition: background 0.3s ease !important;
}

.table tbody tr:hover {
  background: linear-gradient(
    135deg,
    rgba(139, 0, 0, 0.2),
    rgba(201, 168, 76, 0.06)
  ) !important;
}

.table tbody td {
  color: #e8e0d0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
  padding: 11px 14px !important;
  vertical-align: middle !important;
  background: transparent !important;
}

/* === INPUT GROUP (Referral link box) === */
.input-group {
  background: transparent !important;
}

.input-group input,
.input-group .form-control {
  background: rgba(5, 2, 2, 0.92) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  color: #c9a84c !important;
  border-radius: 6px 0 0 6px !important;
}

.input-group-text,
.input-group .btn {
  background: rgba(139, 0, 0, 0.5) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  color: #c9a84c !important;
}

.input-group-text:hover,
.input-group .btn:hover {
  background: rgba(192, 57, 43, 0.7) !important;
  color: #ffd700 !important;
}

/* === FORM CONTROLS GLOBALLY === */
.form-control,
.form-select {
  background: rgba(5, 2, 2, 0.92) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  color: #e8e0d0 !important;
  border-radius: 6px !important;
}

.form-control:focus,
.form-select:focus {
  background: rgba(8, 3, 3, 0.97) !important;
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18) !important;
  color: #f0c040 !important;
  outline: none !important;
}

.form-control::placeholder {
  color: rgba(201, 168, 76, 0.4) !important;
}

/* === FORM LABELS === */
.form--label,
label {
  color: #c9a84c !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* === FORM GROUP WRAPPER === */
.form-group {
  background: transparent !important;
}

/* === TRANSFER BALANCE PAGE === */
/* Row justify content center wrapper */
.dashboard-body .row.justify-content-center {
  background: transparent !important;
}

/* Transfer form card */
.dashboard-body .col-lg-6 .card,
.dashboard-body .col-md-8 .card,
.dashboard-body [class*="col"] .card {
  background: linear-gradient(
    135deg,
    rgba(7, 3, 3, 0.97),
    rgba(12, 5, 5, 0.97)
  ) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
}

/* USD currency labels in transfer */
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  background: rgba(80, 0, 0, 0.5) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  color: #c9a84c !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

/* === OPEN TICKET PAGE === */
/* Ticket tab buttons */
.dashboard-table__header .btn,
.dashboard-table__header a {
  background: rgba(139, 0, 0, 0.3) !important;
  border: 1px solid rgba(201, 168, 76, 0.3) !important;
  color: #c9a84c !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 5px !important;
  padding: 7px 16px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.dashboard-table__header .btn:hover,
.dashboard-table__header a:hover {
  background: rgba(192, 57, 43, 0.5) !important;
  color: #ffd700 !important;
  box-shadow: 0 0 15px rgba(192, 57, 43, 0.4) !important;
}

/* Ticket textarea */
textarea.form-control {
  background: rgba(5, 2, 2, 0.92) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  color: #e8e0d0 !important;
  border-radius: 6px !important;
  resize: vertical !important;
  min-height: 120px !important;
}

textarea.form-control:focus {
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18) !important;
  outline: none !important;
}

/* === SEARCH BAR (History pages) === */
.dashboard-body input[type="search"],
.dashboard-body input[type="text"],
.dashboard-body .search-form input {
  background: rgba(5, 2, 2, 0.92) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  color: #e8e0d0 !important;
}

/* Search button */
.dashboard-body .search-form button,
.dashboard-body .search-form .btn,
.dashboard-body [type="submit"].search-btn {
  background: rgba(139, 0, 0, 0.6) !important;
  border: 1px solid rgba(201, 168, 76, 0.3) !important;
  color: #c9a84c !important;
}

/* === DATA NOT FOUND TEXT === */
.dashboard-body td[colspan],
.no-data,
.data-not-found {
  color: rgba(201, 168, 76, 0.5) !important;
  text-align: center !important;
  padding: 30px !important;
  font-style: italic !important;
  letter-spacing: 1px !important;
}

/* === BOOTSTRAP OVERRIDES (light bg utilities) === */
.bg-white,
.bg-light {
  background-color: rgba(7, 3, 3, 0.95) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
}

/* === GENERAL WHITE BG KILLER === */
/* This catches any remaining white backgrounds */
.dashboard-body *:not(img):not(svg):not(canvas):not(iframe) {
  --bs-light: rgba(7, 3, 3, 0.9);
  --bs-white: rgba(7, 3, 3, 0.9);
}

/* Specific white bg override */
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
  background-color: rgba(7, 3, 3, 0.95) !important;
}

/* === SCROLLABLE SECTIONS === */
.scroll,
[class*="scroll"] {
  background: transparent !important;
}

























/* =========================================================
   DEPOSIT / WITHDRAW "PAYMENT SYSTEM" SECTION - PRO CLEAN UI
   Targets: .payment-system-list, .deposit-info__title/__input
   Goal: ONE premium card, minimal borders, better spacing
   ========================================================= */

/* 1) Remove any previous "global form frame" you added earlier
      ONLY for deposit/withdraw forms (prevents double borders) */
.dashboard-body .cmn-section form.deposit-form,
.dashboard-body .cmn-section form.withdraw-form,
.dashboard-body .cmn-section form[action*="/deposit"],
.dashboard-body .cmn-section form[action*="/withdraw"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) The main white box you selected: .payment-system-list.p-3
      Make it the ONLY card (clean + pro) */
.dashboard-body .payment-system-list{
  background: linear-gradient(145deg, rgba(10,4,4,.92), rgba(18,6,6,.92)) !important;
  border: 1px solid rgba(201,168,76,.16) !important;   /* one subtle border */
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.65) !important;
  padding: 24px !important; /* overrides bootstrap p-3 */
}

/* kill random inner borders/outlines that create the “too many borders” look */
.dashboard-body .payment-system-list,
.dashboard-body .payment-system-list *{
  outline: none !important;
}
.dashboard-body .payment-system-list *{
  box-shadow: none;
}

/* 3) Make each info row clean and aligned (label left, field right) */
.dashboard-body .payment-system-list .deposit-info{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Remove any borders coming from inner wrappers */
.dashboard-body .payment-system-list .deposit-info__title,
.dashboard-body .payment-system-list .deposit-info__input{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Label column */
.dashboard-body .payment-system-list .deposit-info__title{
  flex: 0 0 42% !important;
}
.dashboard-body .payment-system-list .deposit-info__title p,
.dashboard-body .payment-system-list .deposit-info__title .text-has-icon{
  margin: 0 !important;
  color: rgba(201,168,76,.85) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* Field column */
.dashboard-body .payment-system-list .deposit-info__input{
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* 4) Inputs/selects inside this card (single subtle border, pro look) */
.dashboard-body .payment-system-list input,
.dashboard-body .payment-system-list select,
.dashboard-body .payment-system-list textarea,
.dashboard-body .payment-system-list .form-control,
.dashboard-body .payment-system-list .form-select{
  width: 100% !important;
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(201,168,76,.18) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #e8e0d0 !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

/* Focus state = premium glow, not multiple borders */
.dashboard-body .payment-system-list input:focus,
.dashboard-body .payment-system-list select:focus,
.dashboard-body .payment-system-list textarea:focus{
  background: rgba(0,0,0,.5) !important;
  border-color: rgba(201,168,76,.55) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.12) !important;
}

/* 5) Input-group (Amount $ 0.00): unify it as one clean control */
.dashboard-body .payment-system-list .input-group{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(201,168,76,.18) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.dashboard-body .payment-system-list .input-group > *{
  border: 0 !important;
  border-radius: 0 !important;
}
.dashboard-body .payment-system-list .input-group-text{
  background: rgba(139,0,0,.25) !important;
  color: rgba(201,168,76,.95) !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 12px 14px !important;
}
.dashboard-body .payment-system-list .input-group .form-control{
  background: transparent !important;
}

/* 6) Remove the heavy hr line and use a subtle divider */
.dashboard-body .payment-system-list hr{
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,168,76,.18),
    transparent
  ) !important;
  margin: 14px 0 !important;
  opacity: 1 !important;
}

/* 7) Crypto message / extra info blocks: softer, cleaner */
.dashboard-body .payment-system-list .crypto-message,
.dashboard-body .payment-system-list .hideInfo.crypto-message,
.dashboard-body .payment-system-list .info-text{
  background: transparent !important;
  border: 0 !important;
  color: rgba(232,224,208,.65) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  padding: 10px 0 0 !important;
  margin: 0 !important;
}

/* 8) Confirm button inside this card */
.dashboard-body .payment-system-list .btn--base,
.dashboard-body .payment-system-list .btn.btn--base.w-100{
  background: linear-gradient(135deg, #c0392b 0%, #8b0000 55%, #c0392b 100%) !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #f0c040 !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 28px rgba(139,0,0,.45) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.dashboard-body .payment-system-list .btn--base:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 35px rgba(192,57,43,.55) !important;
  filter: brightness(1.05) !important;
}

/* 9) Mobile layout: stack label + field nicely */
@media (max-width: 576px){
  .dashboard-body .payment-system-list{
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .dashboard-body .payment-system-list .deposit-info{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .dashboard-body .payment-system-list .deposit-info__title{
    flex: 0 0 auto !important;
  }

  .dashboard-body .payment-system-list .deposit-info__input{
    justify-content: stretch !important;
  }
}





































/* ================================
   TheLight Animations (CSS)
   ================================ */

/* Page fade-in / fade-out */
.tl-js body { opacity: 0; transition: opacity .35s ease; }
.tl-js.tl-ready body { opacity: 1; }
.tl-js.tl-leave body { opacity: 0; transition: opacity .18s ease; }

/* Reveal animation */
.tl-reveal{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: saturate(.92);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.22,.61,.36,1),
    filter .65s ease;
  transition-delay: var(--tl-delay, 0ms);
  will-change: opacity, transform;
}

.tl-in{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: saturate(1);
}

/* Subtle glow hover */
.tl-hover-glow{
  box-shadow:
    0 0 0 1px rgba(201,168,76,.18),
    0 0 18px rgba(201,168,76,.18) !important;
}
















/* Nature highlight */
.bg--green {
    background-color: #D4AF37 !important; /* Premium gold */
    color: #1a1a1a !important;           /* Soft dark (not pure black) */
    padding: 2px 8px !important;
    border-radius: 4px;
}

/* The Light Within: Awakening */
.bg--yellow {
    background-color: #D4AF37 !important; /* Premium gold */
    color: #1a1a1a !important;           /* Soft dark (not pure black) */
    font-size: 1.15rem !important;
    padding: 4px 10px !important;
    border-radius: 4px;
    font-weight: 600;
}














/* TheLight - copyable wallet box in deposit instructions */
.tl-paybox{
  margin: 14px 0;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(10,4,4,.92), rgba(0,0,0,.78));
  border: 1px solid rgba(201,168,76,.22);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
}

.tl-paybox__title{
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9a84c;
  font-size: 12px;
  margin-bottom: 8px;
}

.tl-paybox__row{
  display:flex;
  gap:10px;
  align-items: stretch;
}

.tl-paybox__input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(201,168,76,.18);
  background: rgba(0,0,0,.35);
  color: #e8e0d0;
  font-weight: 700;
}

.tl-paybox__input:focus{
  outline: none;
  border-color: rgba(201,168,76,.55);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

.tl-paybox__btn{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(201,168,76,.24);
  background: linear-gradient(135deg, rgba(192,57,43,.90), rgba(139,0,0,.90));
  color: #ffd700;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(139,0,0,.28);
  cursor: pointer;
  white-space: nowrap;
}

.tl-paybox__btn.is-copied{
  box-shadow: 0 0 0 3px rgba(201,168,76,.12), 0 18px 40px rgba(0,0,0,.35);
}

.tl-paybox__note{
  margin-top: 8px;
  color: rgba(232,224,208,.75);
  font-size: 12px;
}


















.tl-detail-modal .modal-header{
  border-bottom: 1px solid rgba(201,168,76,.14) !important;
}
.tl-detail-modal .table{
  color: #e8e0d0 !important;
}
.tl-detail-modal th{
  color: rgba(201,168,76,.9) !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
}
.tl-detail-modal td{
  color: rgba(232,224,208,.85) !important;
}











/* Put the agree checkbox and text on the same line */
.form--check.form-group{
  display: flex !important;
  align-items: flex-start !important; /* aligns nicely with multi-line text */
  gap: 10px !important;
}

/* Remove the big margin that pushes checkbox down */
.form--check.form-group .form-check-input{
  margin: 0 !important;
  margin-top: 3px !important; /* tiny tweak so it aligns with first line */
  flex: 0 0 auto !important;
}

/* Make the text block sit beside it */
.form--check.form-group .form-check-label{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* Ensure label + links wrap nicely */
.form--check.form-group .form-check-label label{
  margin: 0 !important;
  display: inline !important;
}

.form--check.form-group .form-check-label span{
  display: inline !important;
}

/* Mobile: keep it neat */
@media (max-width: 576px){
  .form--check.form-group{
    gap: 8px !important;
  }
}



















/* ===== ABOUT images: desktop = 2 images, mobile = 1 image ===== */

/* Always allow About images to be visible */
section.about .about__thumb,
section.about .about__thumb img{
  visibility: visible !important;
  opacity: 1 !important;
}

/* Desktop layout: show desktop set, hide mobile image */
.about__thumb--desktop{ display:block; position:relative; }
.about__thumb--mobile{ display:none; }

/* Shared image styling */
section.about .thelight-about-img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  border: 1px solid rgba(201,168,76,.22) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.65) !important;
  background: rgba(0,0,0,.25);
}

/* Primary (big) image */
section.about .thelight-about-img--primary{
  max-width: 720px;
  margin: 0 auto !important;
}

/* Secondary (floating) image on desktop */
section.about .thelight-about-img--secondary{
  position: absolute;
  right: -10px;
  bottom: -14px;
  width: min(42%, 320px) !important;
  transform: rotate(1.5deg);
  box-shadow: 0 22px 70px rgba(0,0,0,.75) !important;
}

/* Mobile: show ONLY mobile image, hide the desktop set */
@media (max-width: 767.98px){
  section.about .about__thumb--desktop{ display:none !important; }
  section.about .about__thumb--mobile{ display:block !important; }

  section.about .thelight-about-img--mobile{
    max-width: 520px;
    margin: 0 auto 16px !important;
  }

  /* Optional: make image appear above text on mobile (organized) */
  section.about .row.gy-4{
    display:flex !important;
    flex-direction:column !important;
  }
  section.about .row.gy-4 > .col-lg-6:first-child{ order: 2 !important; }
  section.about .row.gy-4 > .col-lg-6:last-child{ order: 1 !important; }
}










.banner-content__client .number span {
    color: #e53935 !important;
}














/* Collapsed description */
.features-item__desc {
  display: -webkit-box;
  -webkit-line-clamp: 6;          /* number of lines visible before "Read more" */
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;          /* keeps the paragraph breaks from the admin text */
}

/* Expanded description */
.features-item__desc.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Read more button */
.features-item__readmore {
  margin-top: 14px;
  padding: 8px 22px;
  background: transparent;
  color: #c9a24d;                 /* change to match your gold text colour */
  border: 1px solid #c9a24d;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
}
.features-item__readmore:hover {
  background: #c9a24d;
  color: #000;
}

/* Stop one expanded card from stretching the others */
.features .row.gy-4 { align-items: flex-start; }















/* Footer contact info */
html body .footer-area .footer-menu__item {
  margin-bottom: 14px;
}

html body .footer-area .footer-icon {
  align-items: center;
  gap: 12px;
}

/* icons: gold, inside a thin gold ring */
html body .footer-area .footer-icon i {
  color: #c9a24d !important;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid rgba(201, 162, 77, .45);
  border-radius: 50%;
  background: rgba(201, 162, 77, .08);
  transition: all .3s ease;
}

/* text: warm light colour so it is easy to read */
html body .footer-area .footer-icon span,
html body .footer-area .footer-icon a {
  color: #f0e6d0 !important;
  transition: color .3s ease;
}

/* hover: icon fills gold, text turns gold */
html body .footer-area .footer-icon:hover i {
  background: #c9a24d;
  color: #000 !important;
  box-shadow: 0 0 14px rgba(201, 162, 77, .45);
}
html body .footer-area .footer-icon:hover span,
html body .footer-area .footer-icon:hover a {
  color: #c9a24d !important;
}











/* About page: main picture fills its column and lines up with the frame */
html body .about__visual .about__thumb {
  position: relative !important;
  inset: auto !important;        /* clears any top / left / right / bottom offsets */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body .about__visual .about__thumb img {
  display: block;
  width: 100% !important;
  height: auto !important;
}













/* remove the gold frame behind the about picture */
html body .about__visual::before {
  display: none !important;
}