/* ==========================================================================
   GENESIS DANCE STUDIO - MASTER FUTURISTIC CYBER-STUDIO DESIGN SYSTEM
   High Contrast | Neon Glowing Accents | Deep Obsidian & Cyan Theme
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700;800&display=swap');

:root {
    --djp-bg: #070913;
    --djp-bg-darker: #04060c;
    --djp-surface: #0e1428;
    --djp-surface-light: #161e38;
    --djp-surface-glass: rgba(14, 20, 40, 0.85);
    --djp-surface-glass-card: rgba(14, 20, 40, 0.72);
    --djp-cyan: #00f2fe;
    --djp-cyan-bright: #38bdf8;
    --djp-cyan-glow: rgba(0, 242, 254, 0.4);
    --djp-purple: #a855f7;
    --djp-purple-bright: #c084fc;
    --djp-purple-glow: rgba(168, 85, 247, 0.4);
    --djp-gold: #facc15;
    --djp-gold-bright: #fef08a;
    --djp-gold-glow: rgba(250, 204, 21, 0.35);
    --djp-rose: #f43f5e;
    --djp-green: #34d399;
    --djp-text: #f8fafc;
    --djp-text-bright: #ffffff;
    --djp-text-body: #e2e8f0;
    --djp-muted: #cbd5e1;
    --djp-subtle: #94a3b8;
    --djp-border: rgba(255, 255, 255, 0.12);
    --djp-border-cyan: rgba(0, 242, 254, 0.35);
    --djp-border-purple: rgba(168, 85, 247, 0.35);
    --djp-heading-font: 'Bebas Neue', sans-serif;
    --djp-display-font: 'Rajdhani', sans-serif;
    --djp-tech-font: 'Orbitron', sans-serif;
    --djp-body-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --djp-radius-lg: 20px;
    --djp-radius-md: 14px;
    --djp-radius-sm: 8px;
    --djp-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* Bootstrap 5 Theme Overrides */
    --bs-body-bg: #070913;
    --bs-body-color: #f8fafc;
    --bs-body-color-rgb: 248, 250, 252;
    --bs-secondary-color: #cbd5e1;
    --bs-tertiary-color: #94a3b8;
    --bs-heading-color: #ffffff;
    --bs-border-color: rgba(255, 255, 255, 0.12);
    --bs-link-color: #00f2fe;
    --bs-link-hover-color: #38bdf8;
}

/* Base Document Styles */
html, body {
    background-color: #070913 !important;
    color: #f8fafc !important;
    font-family: var(--djp-body-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.djp-shell {
    background: #070913 !important;
    color: #f8fafc !important;
    min-height: 100vh;
}

/* High-Contrast Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
    font-family: var(--djp-heading-font);
    letter-spacing: 1.5px;
    font-weight: 700;
}

h1, .h1 { font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.92; }
h2, .h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 0.95; }
h3, .h3 { font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.05; }
h4, .h4 { font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.15; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

/* Body text & Paragraphs */
p {
    color: #e2e8f0 !important;
    margin-bottom: 1.25rem;
}

p.lead, .lead {
    color: #cbd5e1 !important;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* ==========================================================================
   TEXT UTILITIES & HIGH CONTRAST COLORS (OVERRIDING BOOTSTRAP DARK DEFAULTS)
   ========================================================================== */

/* Overriding Bootstrap text-muted so it is crisp, readable silver instead of dark gray */
.text-muted {
    color: #cbd5e1 !important;
}

.text-secondary {
    color: #94a3b8 !important;
}

.text-white {
    color: #ffffff !important;
}

.text-light {
    color: #f1f5f9 !important;
}

.text-dark, .text-black, .text-body {
    color: #ffffff !important;
}

.text-success {
    color: #34d399 !important;
}

.text-cyan {
    color: #00f2fe !important;
}

/* Vivid Glowing Gradients that POP on Dark Backgrounds */
.text-gradient-cyan {
    background: linear-gradient(135deg, #00f2fe 0%, #38bdf8 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.45));
}

.text-gradient-purple {
    background: linear-gradient(135deg, #ffffff 0%, #e879f9 35%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.45));
}

.text-gradient-gold {
    background: linear-gradient(135deg, #ffffff 0%, #fef08a 40%, #facc15 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.45));
}

.text-gradient-rose {
    background: linear-gradient(135deg, #ffffff 0%, #fb7185 50%, #f43f5e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.45));
}

/* Typography Classes */
.font-heading {
    font-family: var(--djp-heading-font) !important;
}

.font-display {
    font-family: var(--djp-display-font) !important;
}

.font-tech {
    font-family: var(--djp-tech-font) !important;
}

.letter-spacing-1 { letter-spacing: 1px !important; }
.letter-spacing-2 { letter-spacing: 2px !important; }

/* ==========================================================================
   FUTURISTIC NAVBAR - STRICT SINGLE ROW LAYOUT
   ========================================================================== */
.djp-site-navbar {
    background: rgba(7, 9, 19, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 242, 254, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 242, 254, 0.08) !important;
    padding: 0.75rem 0 !important;
    transition: var(--djp-transition);
}

.djp-site-navbar > .container,
.djp-site-navbar > .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(1rem, 2.5vw, 3rem) !important;
    padding-right: clamp(1rem, 2.5vw, 3rem) !important;
}

.djp-site-navbar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-right: clamp(0.75rem, 1.8vw, 2rem) !important;
    padding: 0 !important;
}

.djp-site-logo {
    font-family: var(--djp-heading-font) !important;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.djp-nav-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: clamp(0.35rem, 1.1vw, 1.6rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
}

.djp-site-link {
    color: #cbd5e1 !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 700 !important;
    font-size: clamp(0.82rem, 0.95vw, 1rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    padding: 0.35rem clamp(0.3rem, 0.6vw, 0.65rem) !important;
    position: relative !important;
    white-space: nowrap !important;
    transition: var(--djp-transition) !important;
}

.djp-site-link:hover,
.djp-site-link.active {
    color: #00f2fe !important;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.6) !important;
}

.djp-site-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0.4rem;
    right: 0.4rem;
    height: 2px;
    background: #00f2fe;
    transform: scaleX(0);
    transition: var(--djp-transition);
}

.djp-site-link:hover::after,
.djp-site-link.active::after {
    transform: scaleX(1);
    box-shadow: 0 0 8px #00f2fe;
}

.djp-admin-cta {
    background: rgba(168, 85, 247, 0.15) !important;
    border: 1px solid rgba(168, 85, 247, 0.45) !important;
    color: #e879f9 !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 700 !important;
    padding: 0.35rem clamp(0.6rem, 0.9vw, 1.1rem) !important;
    border-radius: 50px !important;
    font-size: clamp(0.75rem, 0.85vw, 0.88rem) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: var(--djp-transition) !important;
}

.djp-admin-cta:hover {
    background: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6) !important;
}

/* Offcanvas Mobile Navigation */
.djp-mobile-nav {
    background: rgba(7, 9, 19, 0.98) !important;
    border-left: 1px solid rgba(0, 242, 254, 0.3) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================================================
   BUTTONS & CTAs
   ========================================================================== */
.btn-djp-glow, a.btn-djp-glow {
    background: linear-gradient(135deg, #00f2fe 0%, #0284c7 50%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 0.85rem 2rem !important;
    border-radius: 50px !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    box-shadow: 0 10px 25px rgba(0, 242, 254, 0.35), 0 0 15px rgba(139, 92, 246, 0.25) !important;
    transition: var(--djp-transition) !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-djp-glow:hover, a.btn-djp-glow:hover {
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(0, 242, 254, 0.55), 0 0 25px rgba(139, 92, 246, 0.4) !important;
}

.btn-djp-outline, a.btn-djp-outline {
    background: rgba(0, 242, 254, 0.06) !important;
    border: 1.5px solid rgba(0, 242, 254, 0.45) !important;
    color: #00f2fe !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 0.8rem 1.8rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--djp-transition) !important;
}

.btn-djp-outline:hover, a.btn-djp-outline:hover {
    background: rgba(0, 242, 254, 0.15) !important;
    border-color: #00f2fe !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 242, 254, 0.3) !important;
}

/* Bootstrap Button Overrides for Cyber Dark Theme */
.btn-outline-info {
    color: #00f2fe !important;
    border-color: rgba(0, 242, 254, 0.45) !important;
    background: rgba(0, 242, 254, 0.05) !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.btn-outline-info:hover {
    background: #00f2fe !important;
    color: #070913 !important;
    border-color: #00f2fe !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.5) !important;
}

.btn-outline-light {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.btn-outline-light:hover {
    background: #ffffff !important;
    color: #070913 !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
}

.btn-light {
    background: #00f2fe !important;
    color: #070913 !important;
    border: none !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1.8rem !important;
    border-radius: 50px !important;
}

.btn-light:hover {
    background: #ffffff !important;
    color: #070913 !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.6) !important;
}

/* ==========================================================================
   CARDS & PANELS (FIXING WHITE-ON-WHITE ISSUE COMPLETELY)
   ========================================================================== */

/* Overriding old light trainer cards */
.djp-trainer-card, .trainer-card {
    background: rgba(14, 20, 40, 0.75) !important;
    border: 1px solid rgba(0, 242, 254, 0.25) !important;
    border-radius: var(--djp-radius-lg) !important;
    padding: 2.2rem 1.8rem !important;
    text-align: center !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
    transition: var(--djp-transition) !important;
    color: #f8fafc !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.djp-trainer-card:hover, .trainer-card:hover {
    transform: translateY(-8px) !important;
    border-color: #00f2fe !important;
    box-shadow: 0 20px 50px rgba(0, 242, 254, 0.25), 0 0 25px rgba(0, 242, 254, 0.15) !important;
}

.trainer-avatar, .djp-trainer-avatar {
    width: 7.5rem !important;
    height: 7.5rem !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 auto 1.25rem !important;
    border: 3px solid #00f2fe !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.4), inset 0 0 10px rgba(0, 242, 254, 0.3) !important;
    transition: var(--djp-transition) !important;
}

.trainer-card:hover .trainer-avatar,
.djp-trainer-card:hover .djp-trainer-avatar {
    transform: scale(1.06) !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5) !important;
}

.trainer-tag {
    background: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid rgba(139, 92, 246, 0.45) !important;
    color: #c084fc !important;
    border-radius: 50px !important;
    padding: 0.35rem 0.95rem !important;
    font-family: var(--djp-display-font) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

/* Holographic Program Cards */
.holo-card, .djp-program-card, .program-card {
    background: rgba(14, 20, 40, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--djp-radius-lg) !important;
    overflow: hidden !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
    transition: var(--djp-transition) !important;
    color: #f8fafc !important;
}

.holo-card:hover, .djp-program-card:hover, .program-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 242, 254, 0.55) !important;
    box-shadow: 0 20px 50px rgba(0, 242, 254, 0.22), 0 0 20px rgba(0, 242, 254, 0.12) !important;
}

/* Bento Matrix Boxes */
.bento-box {
    background: rgba(14, 20, 40, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--djp-radius-lg) !important;
    padding: 2.2rem !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
    transition: var(--djp-transition) !important;
    color: #f8fafc !important;
    position: relative !important;
    overflow: hidden !important;
}

.bento-box:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.2) !important;
}

/* Badges */
.badge-cyan, .holo-badge {
    background: rgba(0, 242, 254, 0.12) !important;
    color: #00f2fe !important;
    border: 1px solid rgba(0, 242, 254, 0.4) !important;
    border-radius: 50px !important;
    padding: 0.35rem 0.85rem !important;
    font-family: var(--djp-display-font) !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.2) !important;
}

/* ==========================================================================
   CALL TO ACTION & FOOTER
   ========================================================================== */
.djp-cta-band {
    background: linear-gradient(135deg, rgba(14, 20, 40, 0.95) 0%, rgba(2, 132, 199, 0.25) 50%, rgba(139, 92, 246, 0.3) 100%) !important;
    border: 1px solid rgba(0, 242, 254, 0.35) !important;
    border-radius: var(--djp-radius-lg) !important;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.8rem, 4vw, 3.5rem) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 242, 254, 0.15) !important;
    backdrop-filter: blur(20px) !important;
}

.djp-section-kicker, .cyber-kicker {
    color: #00f2fe !important;
    font-family: var(--djp-display-font) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.45) !important;
}

/* Footer */
.djp-footer {
    background: #04060c !important;
    border-top: 1px solid rgba(0, 242, 254, 0.2) !important;
    color: #cbd5e1 !important;
    padding: 5rem 0 2.5rem !important;
}

.djp-footer a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    transition: var(--djp-transition);
}

.djp-footer a:hover {
    color: #00f2fe !important;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.5) !important;
}

.djp-footer h5, .djp-footer h6 {
    color: #ffffff !important;
    font-family: var(--djp-display-font) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Forms & Inputs across Admissions, Contact, Trial */
.form-control, .form-select {
    background: rgba(14, 20, 40, 0.85) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    color: #ffffff !important;
    border-radius: var(--djp-radius-sm) !important;
    padding: 0.75rem 1.1rem !important;
    transition: var(--djp-transition);
}

.form-control:focus, .form-select:focus {
    background: rgba(22, 30, 56, 0.95) !important;
    border-color: #00f2fe !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.4) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #94a3b8 !important;
}

.form-label {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    margin-bottom: 0.4rem !important;
}

/* WhatsApp Floating CTA */
.djp-whatsapp {
    background: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
}