:root {
  --website-color: #253a8e;
  --website-gradient-color: #0b379d;
  --website-color-rgb: 37, 58, 142;
  --website-gradient-rgb: 11, 55, 157;
  --website-color-dark: #18255b;
  --website-color-darker: #101a3e;
  --website-color-light: #c6cce2;
  --website-color-soft: #e5e7f1;
  --website-gradient-dark: #08276e;
  --website-gradient-light: #b6c3e2;
  --primary: #253a8e;
  --secondary: #0b379d;
  --gradient-main: linear-gradient(135deg, #253a8e 0%, #0b379d 100%);
  --gradient-soft: linear-gradient(135deg, #e5e7f1, #b6c3e2);
}

/* Admin panel */
#navbar,
#topnav .topbar-main,
.navbar-custom,
.header-bg,
.sd-home-topbar,
.services-modern-topbar,
.recharge-report-legacy-topbar,
.ledger-modern-topbar,
.manage-modern-topbar,
.kyc-modern-topbar,
.change-pass-legacy-topbar,
.electricity-legacy-topbar,
.aeps-slip-topbar {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
}

/* Public website */
body .gradient-text {
  background: var(--gradient-main) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body .bg-\[var\(--primary\)\],
body a.bg-\[var\(--primary\)\],
body button.bg-\[var\(--primary\)\] {
  background: var(--website-color) !important;
}

body .border-\[var\(--primary\)\] {
  border-color: var(--website-color) !important;
}

body .text-\[var\(--primary\)\] {
  color: var(--website-color) !important;
}

body .glass-panel:hover,
body .hover\:shadow-\[0_0_40px_var\(--primary\)\]:hover {
  box-shadow: 0 0 40px rgba(21, 92, 255, .28) !important;
}

.top-header,
.dropbtn,
.button2,
.dropdown-content a:hover,
header .btn,
header button,
.banner .part-text a.banner-btn,
.about .part-text a.str-btn,
.price .single-price .part-foot a.price-btn,
.back-to-top-btn a {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
  border-color: var(--website-color) !important;
}

.navbar .nav-link:hover,
.navbar .dropdown-item:hover,
.headercolor,
.banner .part-text h1 span,
.about .part-text span.subtitle,
.section-title span {
  color: var(--website-color) !important;
}

.headerwrapper,
.header-left,
.leftpanel,
.leftpanelinner,
.sidebar-left,
.sidebar-menu {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
}

#sidebar,
#main-container #sidebar,
#sidebar.navbar-collapse {
  --sd-sidebar-bg: var(--website-color);
  --sd-sidebar-mid: var(--website-gradient-dark);
  --sd-sidebar-end: var(--website-gradient-color);
  --sd-sidebar-active: var(--website-color);
  --sd-sidebar-active-2: var(--website-gradient-light);
  background: linear-gradient(180deg, var(--website-color) 0%, var(--website-gradient-dark) 52%, var(--website-gradient-color) 100%) !important;
}

#sidebar:before {
  background: linear-gradient(180deg, var(--website-color) 0%, var(--website-gradient-dark) 52%, var(--website-gradient-color) 100%) !important;
}

body {
  --sd-page-primary: var(--website-color);
  --sd-page-primary-2: var(--website-color-light);
  --sd-primary: var(--website-color);
  --sd-primary-rgb: var(--website-color-rgb);
  --primary-color: var(--website-color);
  --theme-color: var(--website-color);
}

#sidebar .nav-list > li.active > a,
#sidebar .nav-list > li > a:hover,
.sd-report-btn,
.btn-primary,
button.btn-primary,
input.btn-primary,
.pagination > .active > a,
.pagination > .active > span {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
  border-color: var(--website-color) !important;
}

a,
.text-primary,
#main-content .page-title h1,
.sd-dashboard-hero a,
.sidebar-nav-list a.active,
.sidebar-nav-list a:hover,
.navigation-menu > li > a:hover,
.navigation-menu > li > a:focus,
.navigation-menu > li > a:active,
.nav-bracket > li > a:hover,
.nav-bracket > li.active > a,
.nav-bracket > li.active > a:hover,
.nav-bracket > li.active > a:focus {
  color: var(--website-color) !important;
}

.box.box-blue .box-title,
.label-primary,
.badge-primary,
.bg-primary,
.sidebar-app-card,
.wallet-card,
.service-card-icon,
.app-primary-action,
.addmoney-but,
.btn.primary,
.btn-success,
.login-form .btn,
.register-form .btn {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
  border-color: var(--website-color) !important;
}

/* App and retailer panels */
.header-bg-1,
.mobile-page-header,
.dashboard-card-primary,
.home-service-card.active,
.sidebar-brand,
.sidebar-modal-header,
.profile-wallet-card,
.bottom-navbar .active,
.swiper-pagination-bullet-active {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
}

.header-bg:before,
.preloader:before,
.appbar-action-bar:hover,
.appbar-area.is-sticky .appbar-action-bar,
.indexlogin-section,
.login-section .main-btn,
.resetpass-modal .main-btn,
.form-section .login-but,
.login-but,
.tab-selector-list li.active button {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
  background-image: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
}

.indexlogin-section:after {
  background: radial-gradient(circle, var(--website-color-light) 0 30%, transparent 32%) !important;
}

.login-but:before {
  background: rgba(255, 255, 255, .18) !important;
}

.appbar-area.is-sticky .appbar-action-item a,
.appbar-area.is-sticky .appbar-option-item a,
.add-balance a,
.page-header-title h3 i,
.page-header-action a i,
.authentication-link a {
  color: var(--website-color) !important;
}

.feature-card,
.monthly-bill-card,
.user-card,
.notification-card a,
.tab-selector-list li button {
  box-shadow: 0 2px 0 0 var(--website-color) !important;
}

.main-btn,
.bg-main,
.form-card-upload,
.scroll-top,
.owl-carousel .owl-nav button,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  background-color: var(--website-color) !important;
  border-color: var(--website-color) !important;
}

.sidebar-nav-list a.active,
.sidebar-nav-list a:hover,
.notify-item.notify-all,
.dropdown-item.notify-all,
.topbar-main .notification-list > a:hover {
  color: var(--website-color) !important;
}

.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--website-color) !important;
  box-shadow: 0 0 0 0.18rem rgba(var(--website-color-rgb), .14) !important;
}

/* Broad frontend theme binding */
.btn-primary,
.btn-subscribe,
.btn-secondary:hover,
.btn-info,
.btn-blue,
.primary-btn,
.default-btn,
.starter-btn:hover,
.banner-btn,
.str-btn,
.price-btn,
.main-btn.main-btn-primary,
.main-btn:hover,
.main-btn-link:hover,
.login-but,
.submit-dt,
.submit-otp,
.model-button.success-button,
.page-header-action a:hover i,
.tab-selector-list li.active button,
.tab-selector-list li button:hover,
.notification-card a:hover,
.setting-list ul li.setting-toggle-btn button,
.inbox-compose-item .form-group button,
.language-input input:checked ~ label:before,
.input-checkbox input:checked ~ label:before,
.scroll-top,
.back-to-top-btn a,
.owl-carousel .owl-nav button,
.about-slider .prevArrow:hover,
.about-slider .nextArrow:hover {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
  background-color: var(--website-color) !important;
  border-color: var(--website-color) !important;
}

.btn-outline-primary,
.starter-btn,
.price-btn:hover,
.banner-btn:hover,
.str-btn:hover,
.page-header-action a i,
.add-balance a,
.setting-list ul li i,
.monthly-bill-card,
.feature-card,
.user-card,
.notification-card a,
.service-card,
.single-price,
.journey-box .journey-imgBox .imgBox-inside,
.tab-selector-list li button {
  border-color: var(--website-color) !important;
  box-shadow: 0 2px 0 0 var(--website-color) !important;
}

.text-primary,
.color-primary,
.theme-color,
.main-color,
.section-title span,
.section-title h2 span,
.navigation .navbar .active,
.navigation .navbar .active.dropdown-item,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.header .mainmenu .navbar .navbar-nav .nav-item .nav-link:hover,
.header .mainmenu .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover,
.header .mainmenu .navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover,
.banner .part-text h1 span,
.about .part-text span,
.about .part-text h2 span,
.about .part-text a.str-btn:hover,
.service-title a:hover,
.single-service:hover h3,
.single-service:hover i,
.price .single-price .part-head h3,
.price .single-price .part-body ul li i,
.page-header-title h3 i,
.page-nav-link-item ul li i,
.page-nav-link-item ul li a:hover,
.setting-list ul li a:hover,
.setting-list ul li i,
.authentication-link a,
.appbar-area.is-sticky .appbar-action-item a,
.appbar-area.is-sticky .appbar-option-item a,
.form-section .phone-book,
.form-section .arrow-down,
.form-section .view-plans,
.sidebar-nav-list a.active,
.sidebar-nav-list a:hover,
.services-header-title h1,
.services-header-title i,
.home-service-card i,
.home-service-card:hover h4,
.sd-dashboard-hero a,
.sd-dashboard-hero h2,
.sd-transfer-breadcrumb a,
.sd-bank-register-crumb span,
.sd-service-setup-crumb span,
.pagination > li > a,
.pagination > li > span {
  color: var(--website-color) !important;
}

.bg-primary,
.bg-main,
.bg-blue,
.bg-theme,
.section-shape,
.app-header .app-header-bg,
.header.header-fixed,
.header.header-2 .container:after,
.banner,
.how-to-start,
.call-to-action,
.footer,
.single-feature .part-icon,
.service-icon,
.service-card-icon,
.monthly-bill-thumb,
.transaction-info-thumb,
.user-setting-thumb,
.user-setting-thumb label,
.form-card-upload,
.text-details blockquote,
.text-details table thead tr,
.payment-uploaded-action li:hover,
.page-loader,
.preloader:before,
.header-bg:before {
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color)) !important;
  background-color: var(--website-color) !important;
}

.bg-soft-primary,
.option-card-violet,
.feature-card-blue .feature-card-thumb,
.monthly-bill-card-blue .monthly-bill-thumb,
.user-card-thumb,
.setting-list ul li i,
.notification-card-thumb,
.page-header-action a i,
.add-balance a,
.form-text-box:before,
#step1 > .form-text-box:before,
.login-but:before {
  background: var(--website-color-soft) !important;
  color: var(--website-color) !important;
}

.border-primary,
.navigation .navbar .active.dropdown-item::before,
.form-control:focus,
.input-group:focus-within,
.search-form-group:focus-within,
.payment-card:hover,
.sd-dashboard-card:hover,
.box.box-blue,
.table-bordered,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color: var(--website-color) !important;
}

.shadow-primary,
.login-but,
.main-btn,
.sd-report-btn,
.sd-dashboard-card:hover,
.indexlogin-contain,
.glass-panel:hover {
  box-shadow: 0 16px 34px rgba(var(--website-color-rgb), .18) !important;
}

.sd-theme-settings-panel {
  padding: 10px 12px;
  color: #fff;
}

.sd-theme-settings-panel label {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sd-theme-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sd-theme-settings-row input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  background: transparent;
}

.sd-theme-settings-row button {
  flex: 1;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--website-color), var(--website-gradient-color));
}