/* ==========================================================================

   PULSE ELECTRO - CORE DESIGN SYSTEM & STYLESHEET

   Domain: pulseelectro.in

   Theme: High-Tech Cyberpunk & Electro Dark Mode

   ========================================================================== */

:root {

  --bg-dark: #070b12;

  --bg-card: rgba(13, 23, 38, 0.7);

  --bg-card-hover: rgba(18, 32, 54, 0.85);

  --bg-glass: rgba(10, 16, 26, 0.75);

  --border-glass: rgba(0, 229, 255, 0.15);

  --border-glow: rgba(0, 229, 255, 0.4);

  

  --primary-cyan: #00e5ff;

  --primary-blue: #0077ff;

  --primary-purple: #7928ca;

  --accent-green: #00ff88;

  --accent-amber: #ffaa00;

  --accent-danger: #ff3366;

  

  --text-main: #f0f6fc;

  --text-muted: #8b949e;

  --text-dim: #57606a;

  

  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  

  --shadow-neon: 0 0 20px rgba(0, 229, 255, 0.25);

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);

  --radius-sm: 8px;

  --radius-md: 14px;

  --radius-lg: 20px;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

/* ==========================================================================
   LIGHT MODE COMPLETE DESIGN SYSTEM & CONTRAST OVERHAUL
   ========================================================================== */
body.light-theme {
  --bg-dark: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.98);
  --border-glass: #cbd5e1;
  --border-glow: #0284c7;
  
  --primary-cyan: #0284c7;
  --primary-blue: #2563eb;
  --primary-purple: #7c3aed;
  --accent-green: #16a34a;
  --accent-amber: #d97706;
  --accent-danger: #dc2626;
  
  --text-main: #0f172a;
  --text-muted: #334155;
  --text-dim: #475569;
  
  --shadow-neon: 0 4px 20px rgba(2, 132, 199, 0.15);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
  color: #0f172a !important;
}

body.light-theme .gradient-text {
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.light-theme .header {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .nav-link {
  color: #1e293b !important;
  font-weight: 600;
}

body.light-theme .nav-link:hover {
  color: #0284c7 !important;
}

body.light-theme .glass-card,
body.light-theme .service-card,
body.light-theme .project-card,
body.light-theme .about-card,
body.light-theme .contact-info-card,
body.light-theme .dashboard-card,
body.light-theme .simulator-box,
body.light-theme .gallery-header-bar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

body.light-theme .project-title,
body.light-theme .service-title {
  color: #0f172a !important;
  font-weight: 700;
}

body.light-theme .project-desc,
body.light-theme .service-desc,
body.light-theme .section-subtitle,
body.light-theme p {
  color: #334155 !important;
}

/* Sections rhythm in Light Mode */
body.light-theme #projects {
  background: #f1f5f9 !important;
}

body.light-theme #about {
  background: #f8fafc !important;
}

/* Stats Strip in Light Mode */
body.light-theme .stats-strip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .stat-number {
  color: #0284c7 !important;
  font-weight: 800;
}

body.light-theme .stat-label {
  color: #475569 !important;
  font-weight: 600;
}

/* Badges & Tags in Light Mode */
body.light-theme .section-tag {
  background: #e0f2fe !important;
  border: 1px solid #7dd3fc !important;
  color: #0369a1 !important;
  font-weight: 700;
}

body.light-theme .project-badge {
  background: #f0f9ff !important;
  border: 1px solid #0284c7 !important;
  color: #0369a1 !important;
  font-weight: 700;
}

body.light-theme .tag {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600;
}

body.light-theme .service-icon {
  background: #e0f2fe !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
}

/* Form Controls in Light Mode */
body.light-theme .form-control {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .form-control:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
}

body.light-theme .form-label {
  color: #1e293b !important;
  font-weight: 600;
}

/* Buttons in Light Mode */
body.light-theme .btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

body.light-theme .btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
}

body.light-theme .btn-outline {
  border: 1px solid #0284c7 !important;
  color: #0284c7 !important;
  background: transparent !important;
}

body.light-theme .btn-outline:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
}

body.light-theme .btn-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Tables in Light Mode */
body.light-theme .data-table {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .data-table th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-bottom: 2px solid #cbd5e1 !important;
  font-weight: 700;
}

body.light-theme .data-table td {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

body.light-theme .admin-tab-btn {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .admin-tab-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* Sidebar Nav in Light Mode */
body.light-theme .sidebar-nav {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .sidebar-btn {
  color: #334155 !important;
  background: transparent;
}

body.light-theme .sidebar-btn:hover,
body.light-theme .sidebar-btn.active {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
}

/* Mobile Bottom Navigation Bar in Light Mode */
body.light-theme .mobile-app-nav-bar {
  background: rgba(255, 255, 255, 0.97) !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07) !important;
}

body.light-theme .mobile-app-nav-item {
  color: #475569 !important;
}

body.light-theme .mobile-app-nav-item.active,
body[data-mobile-app-mode="true"].light-theme .mobile-app-nav-item:hover {
  color: #0284c7 !important;
}

/* Footer in Light Mode */
body.light-theme .footer {
  background: #0f172a !important;
  color: #f8fafc !important;
}

body.light-theme .footer p,
body.light-theme .footer a {
  color: #94a3b8 !important;
}

body.light-theme .footer h4 {
  color: #38bdf8 !important;
}

/* Targeted Light Mode Overrides for Hardcoded Inline Dark Styles */
body.light-theme [style*="background: rgba(4, 8, 15"],
body.light-theme [style*="background:rgba(4, 8, 15"],
body.light-theme [style*="background: rgba(4,8,15"],
body.light-theme [style*="background:rgba(4,7,13"],
body.light-theme [style*="background: rgba(4,7,13"],
body.light-theme [style*="background:rgba(13,23,38"],
body.light-theme [style*="background: rgba(13,23,38"],
body.light-theme [style*="background:rgba(7,11,18"],
body.light-theme [style*="background: rgba(7,11,18"],
body.light-theme [style*="background: #070b12"],
body.light-theme [style*="background:#070b12"],
body.light-theme [style*="background: #09101c"],
body.light-theme [style*="background:#09101c"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Light Mode Overrides for Hardcoded White Text (preserving buttons & badges) */
body.light-theme [style*="color:#fff"]:not(.btn):not(.badge):not(#callTypeIcon):not(.pulse-orb):not(#audioCallAvatar *):not(#lightboxCategory):not(.dark-theme-logo):not(.hero-logo-dark):not(.chat-bubble.sent *),
body.light-theme [style*="color: #fff"]:not(.btn):not(.badge):not(#callTypeIcon):not(.pulse-orb):not(#audioCallAvatar *):not(#lightboxCategory):not(.dark-theme-logo):not(.hero-logo-dark):not(.chat-bubble.sent *),
body.light-theme [style*="color:#FFFFFF"]:not(.btn):not(.badge):not(#callTypeIcon):not(.pulse-orb):not(#audioCallAvatar *):not(#lightboxCategory):not(.dark-theme-logo):not(.hero-logo-dark):not(.chat-bubble.sent *),
body.light-theme [style*="color: #FFFFFF"]:not(.btn):not(.badge):not(#callTypeIcon):not(.pulse-orb):not(#audioCallAvatar *):not(#lightboxCategory):not(.dark-theme-logo):not(.hero-logo-dark):not(.chat-bubble.sent *) {
  color: #0f172a !important;
}

/* Modals in Light Mode */
body.light-theme #projectModal .glass-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme #projectModal h4,
body.light-theme #projectModal #modalCategory {
  color: #0284c7 !important;
}

body.light-theme #projectModal #modalDesc {
  color: #334155 !important;
}

body.light-theme #galleryLightboxModal .modal-overlay {
  background: rgba(15, 23, 42, 0.8) !important;
}

/* Technical Simulator Screen Display (Retains high-contrast dark console) */
.sim-screen {
  background: #04070d !important;
  border: 1px solid var(--primary-cyan) !important;
  color: var(--primary-cyan) !important;
}

.sim-screen p {
  color: #94a3b8 !important;
}

body.light-theme .sim-screen {
  background: #04070d !important;
  border-color: #0284c7 !important;
  color: #00e5ff !important;
}

body.light-theme .sim-screen * {
  color: inherit;
}

/* ==========================================================================
   CHAT SECTION COMPLETE COLOR COMBINATION (LIGHT & DARK MODES)
   ========================================================================== */
/* Light Mode Chat Overrides */
body.light-theme .chat-container {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .chat-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme .chat-header h2,
body.light-theme .chat-header h3,
body.light-theme .chat-header div {
  color: #0f172a !important;
}

body.light-theme .chat-header .chat-subtext {
  color: #475569 !important;
}

body.light-theme .chat-messages {
  background: #f1f5f9 !important;
}

/* Sent Bubble (User) - High-tech gradient with crisp white text */
body.light-theme .chat-bubble.sent {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25) !important;
}

body.light-theme .chat-bubble.sent * {
  color: #ffffff !important;
}

body.light-theme .chat-bubble.sent .chat-sender-name {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

body.light-theme .chat-bubble.sent .chat-meta {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Received Bubble (Admin / Agent) - Crisp white card with dark slate text */
body.light-theme .chat-bubble.received {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .chat-bubble.received .chat-sender-name {
  color: #0284c7 !important;
  font-weight: 700;
}

body.light-theme .chat-bubble.received div {
  color: #0f172a !important;
}

body.light-theme .chat-bubble.received .chat-meta {
  color: #64748b !important;
}

/* Chat Input Bar in Light Mode */
body.light-theme .chat-input-area {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

body.light-theme .chat-input-area .form-control {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .chat-input-area .btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
}

body.light-theme .chat-input-area .btn-outline {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

/* Admin Chat Window & Controls in Light Mode */
body.light-theme #adminChatBoxContainer {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme #adminChatUserName {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme #adminChatUserName span,
body.light-theme #adminChatUserName strong {
  color: #0f172a !important;
}

body.light-theme .admin-chat-thread-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

body.light-theme .admin-chat-thread-btn:hover {
  background: #f1f5f9 !important;
}

body.light-theme .admin-chat-thread-btn.active {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

/* Attachment and Call Cards in Light Mode */
body.light-theme .chat-attachment-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme .chat-attachment-box a {
  color: #0284c7 !important;
}

body.light-theme .chat-incoming-call-box {
  background: #f0f9ff !important;
  border: 1px solid #7dd3fc !important;
  color: #0369a1 !important;
}


/* Reset & Base */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

  font-size: 16px;

}

body {

  background-color: var(--bg-dark);

  color: var(--text-main);

  font-family: var(--font-main);

  line-height: 1.6;

  overflow-x: hidden;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  background-image: 

    radial-gradient(circle at 15% 15%, rgba(0, 119, 255, 0.12) 0%, transparent 40%),

    radial-gradient(circle at 85% 85%, rgba(0, 229, 255, 0.08) 0%, transparent 45%),

    linear-gradient(to bottom, #070b12, #0a0f1d);

  background-attachment: fixed;

}

/* Custom Scrollbar */

::-webkit-scrollbar {

  width: 8px;

}

::-webkit-scrollbar-track {

  background: var(--bg-dark);

}

::-webkit-scrollbar-thumb {

  background: rgba(0, 229, 255, 0.25);

  border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--primary-cyan);

}

/* Typography & Utilities */

a {

  color: var(--primary-cyan);

  text-decoration: none;

  transition: var(--transition);

}

a:hover {

  color: #fff;

  text-shadow: 0 0 8px var(--primary-cyan);

}

h1, h2, h3, h4, h5, h6 {

  font-weight: 700;

  line-height: 1.2;

  color: #fff;

}

.gradient-text {

  background: linear-gradient(135deg, #ffffff 0%, var(--primary-cyan) 50%, var(--primary-blue) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.neon-glow {

  text-shadow: 0 0 15px rgba(0, 229, 255, 0.6);

}

.container {

  width: 90%;

  max-width: 1240px;

  margin: 0 auto;

  padding: 0 15px;

}

.section {

  padding: 90px 0;

  position: relative;

}

.section-header {

  text-align: center;

  margin-bottom: 60px;

}

.section-tag {

  display: inline-block;

  padding: 6px 16px;

  border-radius: 30px;

  background: rgba(0, 229, 255, 0.08);

  border: 1px solid rgba(0, 229, 255, 0.3);

  color: var(--primary-cyan);

  font-family: var(--font-mono);

  font-size: 0.85rem;

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 12px;

}

.section-title {

  font-size: 2.5rem;

  margin-bottom: 15px;

}

.section-subtitle {

  color: var(--text-muted);

  font-size: 1.1rem;

  max-width: 650px;

  margin: 0 auto;

}

/* Glassmorphism Card */

.glass-card {

  background: var(--bg-card);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid var(--border-glass);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-card);

  transition: var(--transition);

  overflow: hidden;

}

.glass-card:hover {

  background: var(--bg-card-hover);

  border-color: var(--border-glow);

  box-shadow: var(--shadow-neon), var(--shadow-card);

  transform: translateY(-5px);

}

/* Buttons */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 12px 28px;

  border-radius: var(--radius-sm);

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  border: none;

  transition: var(--transition);

  outline: none;

}

.btn-primary {

  background: linear-gradient(135deg, var(--primary-cyan), var(--primary-blue));

  color: #070b12;

  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);

}

.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 25px rgba(0, 229, 255, 0.5);

  color: #000;

}

.btn-outline {

  background: transparent;

  color: var(--text-main);

  border: 1px solid var(--border-glow);

}

.btn-outline:hover {

  background: rgba(0, 229, 255, 0.1);

  border-color: var(--primary-cyan);

  color: var(--primary-cyan);

  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);

}

.btn-danger {

  background: var(--accent-danger);

  color: #fff;

}

.btn-danger:hover {

  background: #e02454;

}

.btn-sm {

  padding: 8px 16px;

  font-size: 0.88rem;

}

/* Header & Navbar */

.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background: rgba(7, 11, 18, 0.85);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border-glass);

  transition: var(--transition);

}

.nav-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 80px;

}

.brand-logo {

  display: flex;

  align-items: center;

  gap: 12px;

  height: 50px;

}

.brand-logo img {

  height: 100%;

  width: auto;

}

.nav-links {

  display: flex;

  align-items: center;

  gap: 30px;

  list-style: none;

}

.nav-link {

  color: var(--text-muted);

  font-weight: 500;

  font-size: 0.95rem;

}

.nav-link:hover, .nav-link.active {

  color: var(--primary-cyan);

}

.nav-actions {

  display: flex;

  align-items: center;

  gap: 15px;

}

/* Hero Section */

.hero-section {

  padding-top: 160px;

  padding-bottom: 100px;

  position: relative;

  overflow: hidden;

}

.hero-grid {

  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 50px;

  align-items: center;

}

.hero-content h1 {

  font-size: 3.5rem;

  margin-bottom: 20px;

  letter-spacing: -0.5px;

}

.hero-content p {

  font-size: 1.2rem;

  color: var(--text-muted);

  margin-bottom: 35px;

  max-width: 90%;

}

.hero-buttons {

  display: flex;

  gap: 18px;

  flex-wrap: wrap;

}

.hero-visual {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}

.pulse-orb {

  width: 320px;

  height: 320px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(0,229,255,0.25) 0%, rgba(0,119,255,0.1) 60%, transparent 80%);

  border: 1px solid var(--border-glow);

  box-shadow: 0 0 50px rgba(0, 229, 255, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  animation: pulseGlow 4s infinite ease-in-out;

}

@keyframes pulseGlow {

  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(0, 229, 255, 0.2); }

  50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(0, 229, 255, 0.5); }

}

/* Live Stats Strip */

.stats-strip {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 20px;

  margin-top: 50px;

  padding: 25px;

  background: rgba(13, 23, 38, 0.5);

  border: 1px solid var(--border-glass);

  border-radius: var(--radius-md);

}

.stat-item {

  text-align: center;

}

.stat-number {

  font-size: 2rem;

  font-weight: 800;

  color: var(--primary-cyan);

  font-family: var(--font-mono);

}

.stat-label {

  font-size: 0.85rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 1px;

}

/* Services Grid */

.services-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 30px;

}

.service-card {

  padding: 35px;

  position: relative;

}

.service-icon {

  width: 60px;

  height: 60px;

  border-radius: 12px;

  background: rgba(0, 229, 255, 0.1);

  border: 1px solid var(--border-glow);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  color: var(--primary-cyan);

  margin-bottom: 22px;

}

.service-title {

  font-size: 1.35rem;

  margin-bottom: 12px;

}

.service-desc {

  color: var(--text-muted);

  font-size: 0.95rem;

}

/* Featured Projects Section */

.projects-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  gap: 35px;

}

.project-card {

  display: flex;

  flex-direction: column;

  height: 100%;

}

.project-img-wrapper {

  height: 220px;

  width: 100%;

  position: relative;

  overflow: hidden;

  background: #09121d;

  display: flex;

  align-items: center;

  justify-content: center;

}

.project-img-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: var(--transition);

}

.project-card:hover .project-img-wrapper img {

  transform: scale(1.06);

}

.project-badge {

  position: absolute;

  top: 15px;

  right: 15px;

  padding: 4px 12px;

  background: rgba(7, 11, 18, 0.85);

  border: 1px solid var(--primary-cyan);

  border-radius: 20px;

  font-size: 0.75rem;

  font-family: var(--font-mono);

  color: var(--primary-cyan);

}

.project-body {

  padding: 30px;

  flex: 1;

  display: flex;

  flex-direction: column;

}

.project-title {

  font-size: 1.4rem;

  margin-bottom: 10px;

}

.project-desc {

  color: var(--text-muted);

  font-size: 0.95rem;

  margin-bottom: 20px;

  flex: 1;

}

.project-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 20px;

}

.tag {

  background: rgba(255, 255, 255, 0.05);

  padding: 4px 10px;

  border-radius: 4px;

  font-size: 0.8rem;

  color: var(--text-muted);

  font-family: var(--font-mono);

}

/* About Section & Kerala Info */

.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: center;

}

.about-card {

  padding: 40px;

}

.contact-info-card {

  padding: 40px;

  background: linear-gradient(145deg, rgba(13, 23, 38, 0.8), rgba(7, 15, 26, 0.9));

  border: 1px solid var(--border-glow);

}

.contact-item {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 22px;

}

.contact-icon {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(0, 229, 255, 0.1);

  border: 1px solid var(--border-glass);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary-cyan);

  font-size: 1.2rem;

}

/* Forms & Auth */

.auth-wrapper {

  min-height: calc(100vh - 160px);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px 0;

}

.auth-card {

  width: 100%;

  max-width: 480px;

  padding: 40px;

}

.form-group {

  margin-bottom: 22px;

}

.form-label {

  display: block;

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 8px;

  font-weight: 500;

}

.form-control {

  width: 100%;

  padding: 12px 16px;

  border-radius: var(--radius-sm);

  background: rgba(7, 11, 18, 0.6);

  border: 1px solid var(--border-glass);

  color: #fff;

  font-size: 1rem;

  font-family: var(--font-main);

  transition: var(--transition);

}

.form-control:focus {

  outline: none;

  border-color: var(--primary-cyan);

  box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);

}

textarea.form-control {

  resize: vertical;

  min-height: 100px;

}

/* Alerts */

.alert {

  padding: 12px 18px;

  border-radius: var(--radius-sm);

  margin-bottom: 20px;

  font-size: 0.92rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.alert-success {

  background: rgba(0, 255, 136, 0.15);

  border: 1px solid rgba(0, 255, 136, 0.4);

  color: #00ff88;

}

.alert-error, .alert-danger {

  background: rgba(255, 51, 102, 0.15);

  border: 1px solid rgba(255, 51, 102, 0.4);

  color: #ff3366;

}

/* Client Portal & Dashboard */

.dashboard-layout {

  display: grid;

  grid-template-columns: 320px 1fr;

  gap: 30px;

  min-height: 700px;

  margin-top: 30px;

}

.sidebar-nav {

  padding: 25px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.sidebar-btn {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  border-radius: var(--radius-sm);

  color: var(--text-muted);

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

  background: transparent;

  border: 1px solid transparent;

  width: 100%;

  text-align: left;

}

.sidebar-btn:hover, .sidebar-btn.active {

  background: rgba(0, 229, 255, 0.1);

  color: var(--primary-cyan);

  border-color: var(--border-glass);

}

.dashboard-main {

  padding: 30px;

}

/* ==========================================================================
   CHAT COMPONENT (DARK MODE BASE + FULLSCREEN MODE)
   ========================================================================== */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 600px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #090e17;
  border: 1px solid var(--border-glass);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-header {
  padding: 16px 20px;
  background: #0d1726;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #05080f;
  scroll-behavior: smooth;
}

.chat-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  position: relative;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.chat-bubble.sent {
  align-self: flex-end;
  background: linear-gradient(135deg, #0077ff 0%, #0052cc 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(0, 119, 255, 0.35);
}

.chat-bubble.sent .chat-sender-name {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.chat-bubble.sent .chat-meta {
  color: rgba(255, 255, 255, 0.75);
}

.chat-bubble.received {
  align-self: flex-start;
  background: #111a28;
  border: 1px solid rgba(0, 229, 255, 0.2);
  color: #f0f6fc;
  border-bottom-left-radius: 4px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

.chat-bubble.received .chat-sender-name {
  color: var(--primary-cyan);
  font-weight: 700;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.chat-bubble.received .chat-meta {
  color: #8b949e;
}

.chat-meta {
  font-size: 0.72rem;
  margin-top: 6px;
  text-align: right;
  font-family: var(--font-mono);
}

.chat-input-area {
  padding: 14px 18px;
  background: #0d1726;
  border-top: 1px solid var(--border-glass);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Fullscreen Chat Mode (Desktop / System & Mobile Devices) */
body.chat-fullscreen-active {
  overflow: hidden !important;
}

.chat-container.chat-fullscreen,
#adminChatBoxContainer.chat-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  animation: chatFsEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes chatFsEnter {
  from {
    opacity: 0.8;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#adminChatBoxContainer.chat-fullscreen .chat-container {
  height: auto !important;
  flex: 1 !important;
  border-radius: 0 !important;
  border: none !important;
}

.chat-container.chat-fullscreen .chat-header,
#adminChatBoxContainer.chat-fullscreen #adminChatUserName {
  border-radius: 0 !important;
  padding: 14px 20px !important;
  flex-shrink: 0 !important;
  z-index: 2;
}

.chat-container.chat-fullscreen .chat-messages,
#adminChatBoxContainer.chat-fullscreen .chat-messages {
  flex: 1 !important;
  height: 100% !important;
  max-height: none !important;
  padding: 20px !important;
}

.chat-container.chat-fullscreen .chat-input-area,
#adminChatBoxContainer.chat-fullscreen .chat-input-area {
  border-radius: 0 !important;
  padding: 14px 20px !important;
  flex-shrink: 0 !important;
  z-index: 2;
}

.chat-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.2s ease;
  user-select: none;
}

.chat-fullscreen-btn:hover {
  transform: translateY(-1px);
}


/* Simulator Components */

.simulator-box {

  padding: 25px;

  background: #09101c;

  border: 1px solid var(--border-glow);

  border-radius: var(--radius-md);

  margin-top: 20px;

}

.sim-screen {

  background: #04070d;

  border: 1px solid var(--primary-cyan);

  border-radius: 8px;

  padding: 20px;

  font-family: var(--font-mono);

  color: var(--primary-cyan);

  min-height: 180px;

  margin-bottom: 20px;

  box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.15);

}

/* Admin Panel Tables & Content Control */

.admin-tabs {

  display: flex;

  gap: 10px;

  border-bottom: 1px solid var(--border-glass);

  margin-bottom: 30px;

  overflow-x: auto;

}

.admin-tab-btn {

  padding: 12px 24px;

  background: transparent;

  border: none;

  color: var(--text-muted);

  font-weight: 600;

  cursor: pointer;

  border-bottom: 2px solid transparent;

  white-space: nowrap;

}

.admin-tab-btn.active {

  color: var(--primary-cyan);

  border-bottom-color: var(--primary-cyan);

}

.table-responsive {

  width: 100%;

  overflow-x: auto;

}

.data-table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 15px;

}

.data-table th, .data-table td {

  padding: 14px 18px;

  text-align: left;

  border-bottom: 1px solid var(--border-glass);

}

.data-table th {

  background: rgba(13, 23, 38, 0.8);

  color: var(--primary-cyan);

  font-family: var(--font-mono);

  font-size: 0.85rem;

  text-transform: uppercase;

}

/* Footer */

.footer {

  margin-top: auto;

  background: rgba(5, 8, 14, 0.95);

  border-top: 1px solid var(--border-glass);

  padding: 50px 0 25px;

}

.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

  gap: 40px;

  margin-bottom: 40px;

}

.footer-bottom {

  text-align: center;

  padding-top: 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  color: var(--text-dim);

  font-size: 0.88rem;

}

/* Responsive Media Queries */

@media (max-width: 992px) {

  .hero-grid, .about-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .hero-content p {

    margin: 0 auto 35px;

  }

  .hero-buttons {

    justify-content: center;

  }

  .dashboard-layout {

    grid-template-columns: 1fr;

  }

  .footer-grid {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 768px) {

  .nav-links {

    display: none;

  }

  .hero-content h1 {

    font-size: 2.4rem;

  }

  .section-title {

    font-size: 1.8rem;

  }

}

/* ==========================================================================

   MOBILE APPLICATION MODE (Triggers on Mobile Screens <= 768px when enabled)

   Does NOT alter PC / Laptop Desktop view (> 768px)

   ========================================================================== */

.mobile-app-nav-bar {

  display: none;

}

@media (max-width: 768px) {

  body[data-mobile-app-mode="true"] {

    padding-bottom: 75px !important;

  }

  body[data-mobile-app-mode="true"] .grid-2,

  body[data-mobile-app-mode="true"] .grid-3,

  body[data-mobile-app-mode="true"] .grid-4,

  body[data-mobile-app-mode="true"] .services-grid {

    grid-template-columns: 1fr !important;

  }

  body[data-mobile-app-mode="true"] .container {

    padding-left: 15px !important;

    padding-right: 15px !important;

  }

  body[data-mobile-app-mode="true"] .hero-content h1 {

    font-size: 2.1rem !important;

    line-height: 1.25 !important;

  }

  body[data-mobile-app-mode="true"] .hero-buttons {

    flex-direction: column !important;

    width: 100% !important;

  }

  body[data-mobile-app-mode="true"] .hero-buttons .btn {

    width: 100% !important;

    text-align: center !important;

    padding: 12px 20px !important;

  }

  body[data-mobile-app-mode="true"] .mobile-app-nav-bar {

    display: flex !important;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    height: 65px;

    background: rgba(7, 11, 18, 0.96);

    backdrop-filter: blur(16px);

    border-top: 1px solid var(--border-glow);

    z-index: 99999;

    justify-content: space-around;

    align-items: center;

    box-shadow: 0 -5px 25px rgba(0, 229, 255, 0.25);

  }

  body[data-mobile-app-mode="true"] .mobile-app-nav-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

    font-size: 0.72rem;

    text-decoration: none;

    font-weight: 600;

    gap: 2px;

    flex: 1;

    height: 100%;

  }

  body[data-mobile-app-mode="true"] .mobile-app-nav-item.active,

  body[data-mobile-app-mode="true"] .mobile-app-nav-item:hover {

    color: var(--primary-cyan);

  }

  body[data-mobile-app-mode="true"] .mobile-app-nav-icon {

    font-size: 1.25rem;

  }

}

/* Audio Call Live Pulsing Visualizer Ring */

@keyframes audioPulseRing {

  0% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 229, 255, 0.6); }

  50% { transform: scale(1.08); box-shadow: 0 0 50px rgba(0, 229, 255, 0.95); }

  100% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 229, 255, 0.6); }

}

.pulse-audio-ring {

  animation: audioPulseRing 1.6s infinite ease-in-out;

}

/* ==========================================================================

   SEPARATE DEVICE VISIBILITY CONTROLS (Mobile Phone <=768px vs PC/Laptop >768px)

   ========================================================================== */

.hidden-device-all {

  display: none !important;

}

@media (max-width: 768px) {

  .hide-on-mobile {

    display: none !important;

  }

}

@media (min-width: 769px) {

  .hide-on-desktop {

    display: none !important;

  }

}

/* WhatsApp Floating Button */

.whatsapp-float {

  position: fixed;

  width: 60px;

  height: 60px;

  bottom: 40px;

  right: 40px;

  background-color: #25d366;

  color: #FFF;

  border-radius: 50px;

  text-align: center;

  font-size: 30px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

}

.whatsapp-float:hover {

  transform: scale(1.1);

  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.5);

}

/* Adjust for Mobile App View Mode Bottom Navigation Bar */

@media (max-width: 768px) {

  body.mobile-app-mode .whatsapp-float {

    bottom: 90px; /* Above the bottom nav bar */

    right: 20px;

    width: 50px;

    height: 50px;

  }

  body:not(.mobile-app-mode) .whatsapp-float {

    bottom: 20px;

    right: 20px;

    width: 50px;

    height: 50px;

  }

}

@media (max-width: 768px) {

  /* Enhance overall mobile touch friendliness */

  body[data-mobile-app-mode="true"] {

    font-size: 15px; /* Slightly larger base font for readability */

  }

  

  body[data-mobile-app-mode="true"] .btn {

    padding: 12px 20px;

    width: 100%;

    margin-bottom: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

  }

  

  body[data-mobile-app-mode="true"] .stats-strip {

    grid-template-columns: 1fr 1fr; /* 2 columns for stats on mobile */

    gap: 15px;

    padding: 15px;

  }

  

  body[data-mobile-app-mode="true"] .glass-card {

    padding: 20px; /* Reduce padding on cards to save space */

  }

  

  body[data-mobile-app-mode="true"] .section-title {

    font-size: 1.6rem;

    line-height: 1.3;

  }

  

  body[data-mobile-app-mode="true"] input, 

  body[data-mobile-app-mode="true"] select, 

  body[data-mobile-app-mode="true"] textarea {

    font-size: 16px; /* Prevents iOS Safari from zooming in on focus */

  }

}

/* WhatsApp Floating Button */

.whatsapp-float {

  position: fixed;

  width: 60px;

  height: 60px;

  bottom: 40px;

  right: 40px;

  background-color: #25d366;

  color: #FFF;

  border-radius: 50px;

  text-align: center;

  font-size: 30px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

}

.whatsapp-float:hover {

  transform: scale(1.1);

  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.5);

}

/* ==========================================================================

   TOTAL MOBILE CSS REVAMP (Triggers on Mobile Screens <= 768px)

   ========================================================================== */

@media (max-width: 768px) {

  

  /* WhatsApp Button Adjustments */

  body[data-mobile-app-mode="true"] .whatsapp-float {

    bottom: 85px; /* Safely above the bottom nav bar */

    right: 15px;

    width: 50px;

    height: 50px;

  }

  body:not([data-mobile-app-mode="true"]) .whatsapp-float {

    bottom: 15px;

    right: 15px;

    width: 50px;

    height: 50px;

  }

  /* Global Body and Typography */

  body[data-mobile-app-mode="true"] {

    font-size: 15px;

    padding-bottom: 75px !important;

  }

  body[data-mobile-app-mode="true"] .container {

    padding-left: 15px !important;

    padding-right: 15px !important;

  }

  body[data-mobile-app-mode="true"] .section-title {

    font-size: 1.6rem !important;

    line-height: 1.25;

    margin-bottom: 15px;

  }

  body[data-mobile-app-mode="true"] .section-tag {

    font-size: 0.75rem;

    padding: 4px 12px;

    margin-bottom: 10px;

  }

  body[data-mobile-app-mode="true"] .section-subtitle {

    font-size: 0.95rem;

    line-height: 1.4;

  }

  /* Hero Section Mobile Restyling */

  body[data-mobile-app-mode="true"] .hero-section {

    padding: 60px 0 30px 0 !important;

    min-height: auto;

  }

  body[data-mobile-app-mode="true"] .hero-content h1 {

    font-size: 2.1rem !important;

    line-height: 1.2;

    margin-bottom: 15px;

  }

  body[data-mobile-app-mode="true"] .hero-content p {

    font-size: 1rem;

    margin-bottom: 25px;

  }

  /* Make Buttons Full Width & Touch Friendly */

  body[data-mobile-app-mode="true"] .hero-buttons {

    flex-direction: column !important;

    width: 100% !important;

    gap: 15px;

  }

  

  body[data-mobile-app-mode="true"] .hero-buttons .btn,

  body[data-mobile-app-mode="true"] .contact-info-card .btn {

    width: 100%;

    padding: 14px 20px;

    font-size: 1.05rem;

    display: flex;

    justify-content: center;

    align-items: center;

  }

  /* Stats Strip - 2x2 Grid instead of cramped row */

  body[data-mobile-app-mode="true"] .stats-strip {

    grid-template-columns: 1fr 1fr !important;

    gap: 15px;

    padding: 15px;

    margin-top: 30px;

    border-radius: 12px;

  }

  body[data-mobile-app-mode="true"] .stat-number {

    font-size: 1.6rem;

  }

  body[data-mobile-app-mode="true"] .stat-label {

    font-size: 0.75rem;

  }

  /* Cards Padding Reduction */

  body[data-mobile-app-mode="true"] .glass-card {

    padding: 20px !important;

    border-radius: 12px;

  }

  /* SWIPEABLE CAROUSELS for Services and Projects */

  body[data-mobile-app-mode="true"] .services-grid,

  body[data-mobile-app-mode="true"] .projects-grid {

    display: flex !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    scroll-snap-type: x mandatory;

    gap: 15px !important;

    padding-bottom: 20px !important; /* Space for scrollbar */

    margin-right: -15px; /* Bleed edge */

    padding-right: 15px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* Firefox hide scrollbar */

  }

  /* Hide scrollbar for Chrome/Safari */

  body[data-mobile-app-mode="true"] .services-grid::-webkit-scrollbar,

  body[data-mobile-app-mode="true"] .projects-grid::-webkit-scrollbar {

    display: none;

  }

  body[data-mobile-app-mode="true"] .service-card,

  body[data-mobile-app-mode="true"] .project-card {

    min-width: 85% !important; /* Shows peek of next card */

    max-width: 85% !important;

    scroll-snap-align: center;

    flex-shrink: 0;

  }

  /* About Section Flow */

  body[data-mobile-app-mode="true"] .about-grid {

    display: flex;

    flex-direction: column-reverse;

    gap: 25px;

  }

  /* Forms optimization */

  body[data-mobile-app-mode="true"] input, 

  body[data-mobile-app-mode="true"] select, 

  body[data-mobile-app-mode="true"] textarea {

    font-size: 16px !important; /* Prevents iOS Safari Zoom */

    padding: 12px 15px !important;

  }

}

/* ==========================================================================

   DYNAMIC 5-THEME SYSTEM

   ========================================================================== */

/* Theme 1: Cyberpunk (Default) - Uses default root variables */

/* Theme 2: Ocean */

body[data-theme="ocean"] {

  --primary-cyan: #00d2ff;

  --primary-blue: #3a7bd5;

  --primary-purple: #134e5e;

  --accent-green: #00ff88;

  --accent-amber: #ffb75e;

  --accent-danger: #ff416c;

}

body.light-theme[data-theme="ocean"] {

  --primary-cyan: #007bb5;

  --primary-blue: #1e3c72;

}

/* Theme 3: Forest */

body[data-theme="forest"] {

  --primary-cyan: #a8ff78;

  --primary-blue: #78ffd6;

  --primary-purple: #009245;

}

body.light-theme[data-theme="forest"] {

  --primary-cyan: #228b22;

  --primary-blue: #006400;

}

/* Theme 4: Sunset */

body[data-theme="sunset"] {

  --primary-cyan: #ff7e5f;

  --primary-blue: #feb47b;

  --primary-purple: #ff9966;

}

body.light-theme[data-theme="sunset"] {

  --primary-cyan: #d35400;

  --primary-blue: #c0392b;

}

/* Theme 5: Corporate */

body[data-theme="corporate"] {

  --primary-cyan: #56ccf2;

  --primary-blue: #2f80ed;

  --primary-purple: #3b5998;

}

body.light-theme[data-theme="corporate"] {

  --primary-cyan: #2980b9;

  --primary-blue: #2c3e50;

}

/* Fix Light Mode Body Background Image */

body.light-theme {

  background-image: none !important;

}

/* Universal Dynamic Logo Theme Switching */
body.light-theme .dark-theme-logo,
body.light-theme .dark-mode-logo,
body.light-theme .hero-logo-dark {
  display: none !important;
}

body.light-theme .light-theme-logo,
body.light-theme .light-mode-logo,
body.light-theme .hero-logo-light {
  display: block !important;
}

body:not(.light-theme) .light-theme-logo,
body:not(.light-theme) .light-mode-logo,
body:not(.light-theme) .hero-logo-light {
  display: none !important;
}

body:not(.light-theme) .dark-theme-logo,
body:not(.light-theme) .dark-mode-logo,
body:not(.light-theme) .hero-logo-dark {
  display: block !important;
}