/* DARK BLUE - YELLOW - WHITE THEME FOR 92SIXER HOMEPAGE ONLY */

/* ============================================
   ROOT VARIABLES - DARK BLUE THEME
   ============================================ */
:root {
    --primary-bg: #0a1628 !important;
    --secondary-bg: #0f1d32 !important;
    --accent-yellow: #ffd700 !important;
    --text-white: #ffffff !important;
    --text-light: #e0e0e0 !important;
    --border-color: #ffd700 !important;
}

/* ============================================
   BODY & MAIN BACKGROUND
   ============================================ */
body.landing-page {
    background-color: var(--primary-bg) !important;
    color: var(--text-white) !important;
}

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

/* ============================================
   WHITE BACKGROUNDS - CHANGE TO DARK BLUE
   ============================================ */
.bg-white {
    background-color: var(--secondary-bg) !important;
    color: var(--text-white) !important;
}

/* Navbar collapse */
.collapse.navbar-collapse.bg-white {
    background-color: var(--secondary-bg) !important;
}

/* Features section */
.sptb.section.bg-white {
    background-color: var(--secondary-bg) !important;
}

/* ============================================
   TRANSPARENT BACKGROUNDS
   ============================================ */
.bg-primary-transparent {
    background-color: rgba(10, 22, 40, 0.8) !important;
    border: 1px solid var(--accent-yellow) !important;
}

.bg-secondary-transparent {
    background-color: rgba(15, 29, 50, 0.8) !important;
    border: 1px solid var(--accent-yellow) !important;
}

.bg-success-transparent {
    background-color: rgba(10, 22, 40, 0.8) !important;
    border: 1px solid var(--accent-yellow) !important;
}

.bg-danger-transparent {
    background-color: rgba(10, 22, 40, 0.8) !important;
    border: 1px solid var(--accent-yellow) !important;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background-color: var(--secondary-bg) !important;
    border: 1px solid var(--accent-yellow) !important;
    color: var(--text-white) !important;
}

.card-body {
    background-color: transparent !important;
    color: var(--text-white) !important;
}

.card-body.text-dark {
    color: var(--text-white) !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */
.text-default {
    color: var(--text-light) !important;
}

.text-dark {
    color: var(--text-white) !important;
}

.text-white {
    color: var(--text-white) !important;
}

/* Primary text - Yellow */
.text-primary {
    color: var(--accent-yellow) !important;
}

.text-secondary {
    color: var(--accent-yellow) !important;
}

.text-success {
    color: #00ff88 !important;
}

.text-danger {
    color: #ff4757 !important;
}

/* ============================================
   HEADINGS
   ============================================ */
h1, h2, h3, h4, h5, h6,
.fw-bold, .fw-semibold {
    color: var(--accent-yellow) !important;
}

/* Specific headings that should be white */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
    color: var(--text-white) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    background-color: var(--accent-yellow) !important;
    border-color: var(--accent-yellow) !important;
    color: var(--primary-bg) !important;
}

.btn-primary:hover {
    background-color: #ffed4e !important;
    border-color: #ffed4e !important;
    color: var(--primary-bg) !important;
}

.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--accent-yellow) !important;
    color: var(--accent-yellow) !important;
}

.btn-outline-primary:hover {
    background-color: var(--accent-yellow) !important;
    color: var(--primary-bg) !important;
}

.btn-primary-gradient {
    background: linear-gradient(135deg, var(--accent-yellow) 0%, #ffed4e 100%) !important;
    color: var(--primary-bg) !important;
    border: none !important;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.hor-header.header {
    background-color: var(--primary-bg) !important;
    border-bottom: 1px solid var(--accent-yellow) !important;
}

.app-sidebar {
    background-color: var(--secondary-bg) !important;
}

.side-menu {
    background-color: var(--secondary-bg) !important;
}

.side-menu li a {
    color: var(--text-white) !important;
}

.side-menu li a:hover {
    color: var(--accent-yellow) !important;
}

/* ============================================
   STATISTICS CARDS
   ============================================ */
.services-statistics .card {
    background: linear-gradient(135deg, var(--secondary-bg) 0%, rgba(255, 215, 0, 0.1) 100%) !important;
    border: 2px solid var(--accent-yellow) !important;
}

.counter-icon {
    background-color: rgba(255, 215, 0, 0.2) !important;
    border: 2px solid var(--accent-yellow) !important;
}

.counter-icon i {
    color: var(--accent-yellow) !important;
}

/* ============================================
   FEATURES CARDS
   ============================================ */
.main-features {
    background-color: var(--secondary-bg) !important;
    border: 1px solid var(--accent-yellow) !important;
}

.main-features:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3) !important;
}

/* ============================================
   PRICING CARDS
   ============================================ */
.pricing-card {
    background-color: var(--secondary-bg) !important;
    border: 2px solid var(--accent-yellow) !important;
}

.pricing-card .card-header {
    background-color: rgba(255, 215, 0, 0.1) !important;
    border-bottom: 1px solid var(--accent-yellow) !important;
    color: var(--accent-yellow) !important;
}

.tag.bg-primary {
    background-color: var(--accent-yellow) !important;
    color: var(--primary-bg) !important;
}

/* ============================================
   GATEWAYS SECTION
   ============================================ */
.gateways-section,
.bg-img {
    background-color: var(--secondary-bg) !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--accent-yellow) !important;
}

a:hover {
    color: var(--text-white) !important;
}

/* ============================================
   PARAGRAPHS & SPANS
   ============================================ */
p, span, div {
    color: var(--text-light) !important;
}

h1 span, h2 span, h3 span {
    color: var(--accent-yellow) !important;
}

/* ============================================
   ANIMATE HEADING
   ============================================ */
.animate-heading {
    color: var(--accent-yellow) !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary-bg) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-yellow) !important;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffed4e !important;
}

/* ============================================
   SELECTION
   ============================================ */
::selection {
    background: var(--accent-yellow) !important;
    color: var(--primary-bg) !important;
}

/* ============================================
   LOADER
   ============================================ */
.loader-img {
    filter: brightness(0) saturate(100%) invert(77%) sepia(67%) saturate(538%) hue-rotate(359deg) brightness(105%) contrast(101%) !important;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */
@media (max-width: 991px) {
    .responsive-navbar .navbar-collapse {
        background-color: var(--secondary-bg) !important;
    }
}

/* ============================================
   ADDITIONAL FIXES FOR BETTER CONTRAST
   ============================================ */

/* Ensure all text is readable on dark backgrounds */
.test-body, .text-body {
    color: var(--text-white) !important;
}

/* Fix for any remaining light elements */
.landing-top-header {
    background-color: var(--primary-bg) !important;
}

/* Footer if exists */
.footer {
    background-color: var(--primary-bg) !important;
    color: var(--text-white) !important;
    border-top: 1px solid var(--accent-yellow) !important;
}

/* Any remaining white backgrounds */
[class*="bg-white"] {
    background-color: var(--secondary-bg) !important;
}

/* Icons */
.fe {
    color: var(--accent-yellow) !important;
}

/* Box shadows for depth */
.box-shadow-primary {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3) !important;
}


/* ============================================
   FOOTER FIX - Copyright Text
   ============================================ */
.main-footer {
    background-color: var(--primary-bg) !important;
    color: var(--accent-yellow) !important;
    padding: 20px 0 !important;
    border-top: 2px solid var(--accent-yellow) !important;
}

.main-footer .row {
    background-color: transparent !important;
}

.main-footer .col-md-12,
.main-footer .col-sm-12 {
    background-color: transparent !important;
    color: var(--accent-yellow) !important;
}

/* Copyright text */
.main-footer div {
    color: var(--accent-yellow) !important;
    font-weight: 500 !important;
}

/* Year span */
.main-footer #year {
    color: var(--text-white) !important;
    font-weight: 600 !important;
}

/* Heart icon */
.main-footer .fa-heart {
    color: #ff4757 !important;
}

/* Links in footer - Yellow */
.main-footer a {
    color: var(--accent-yellow) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.main-footer a:hover {
    color: var(--text-white) !important;
    text-decoration: underline !important;
}

/* Demo footer and top footer */
.demo-footer {
    background-color: var(--primary-bg) !important;
    color: var(--accent-yellow) !important;
}

.top-footer {
    background-color: var(--secondary-bg) !important;
    color: var(--text-white) !important;
}