/* ========================================
   GLOBAL DARK MODE STYLES - BRAND COLORS
   ======================================== */


/* Brand Color Variables */
:root {
  /* Light Mode (Default) */
  --color-open-tab: #F3F1DE;
  --color-night-shift: #1C1C1C;
  --color-global-thread: #3D405B;
  --color-active: #80B29B;
  --color-task-force: #DF7A5F;
  --color-highlight: #DF7A5F;
}


/* Dark Mode Body */
body.dark-mode {
  background-color: #1C1C1C; /* Night Shift - NOT pure black */
  color: #F3F1DE; /* Open Tab - cream text */
}
/* ========== HERO SECTION ========== */
body.dark-mode .editorial-hero {
  background-color: transparent !important; /* Fully transparent - shows grid */
}


/* Remove any pseudo-element backgrounds that might be blocking */
body.dark-mode .editorial-hero > * {
  background-color: transparent !important;
}


/* ✅ CLEAN GRID ONLY - No dots pattern */
body.dark-mode .editorial-hero::before {
  background-image:
    linear-gradient(rgba(243, 241, 222, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 222, 0.08) 1px, transparent 1px) !important;
  opacity: 1 !important; /* Full visibility, controlled by the rgba values */
}


/* ✅ REMOVE DOTS - Make ::after transparent or hide it */
body.dark-mode .editorial-hero::after {
  display: none !important; /* Hide the radial-gradient dots completely */
}


/* OR if you want to keep it but make it invisible: */
/* body.dark-mode .editorial-hero::after {
  opacity: 0 !important;
} */


body.dark-mode .display-hero,
body.dark-mode .hero-description {
  color: #F3F1DE; /* Open Tab */
}


body.dark-mode .sub-headline {
  color: #80B29B !important; /* Task Force - orange */
}


body.dark-mode .rotating-word {
  color: #80B29B; /* Task Force - orange accent */
}


body.dark-mode .btn-register {
  background-color: #80B29B; /* Active Status - green */
  color: #1C1C1C; /* Night Shift text */
}


body.dark-mode .btn-register:hover {
  background-color: #80B29B; /* Task Force on hover */
  color: #F3F1DE; /* Open Tab text */
}


/* Video Gradient Shadow */
body.dark-mode .hero-image::before {
  background: linear-gradient(135deg, #80B29B 0%, #3D405B 100%) !important;
  border-color: rgba(243, 241, 222, 0.3) !important;
}


body.dark-mode .video-container {
  border-color: rgba(243, 241, 222, 0.3) !important;
  background-color: #2a2d3a !important;
}


body.dark-mode .hero-divider .divider-vertical,
body.dark-mode .hero-divider .divider-horizontal {
  background-color: rgba(243, 241, 222, 0.15); /* Subtle Open Tab */
}


/* ========== BENEFITS SECTION - UPDATED ========== */
body.dark-mode .benefits-section {
  background-color: #1C1C1C; /* Night Shift */
}


/* ✅ ADD - Animated Grid Background */
body.dark-mode .benefits-section::before {
  background-image:
    linear-gradient(rgba(243, 241, 222, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 222, 0.08) 1px, transparent 1px) !important;
}


body.dark-mode .benefits-section::after {
  background-image:
    radial-gradient(circle, rgba(243, 241, 222, 0.12) 1px, transparent 1px) !important;
  opacity: 0.15 !important;
}


body.dark-mode .benefit-item {
  background-color: #2a2d3a !important; /* Darker cards */
  border-color: rgba(128, 178, 155, 0.3) !important; /* Subtle green border */
}


body.dark-mode .benefit-item:hover {
  border-color: #80B29B !important;
  box-shadow: 8px 8px 0px rgba(128, 178, 155, 0.4) !important; /* Green shadow */
}


body.dark-mode .benefit-title {
  color: #F3F1DE !important; /* Open Tab */
}


body.dark-mode .benefit-text {
  color: rgba(243, 241, 222, 0.8); /* Open Tab - slightly transparent */
}


/* ========== INFINITE BANNER ========== */
body.dark-mode .infinite-banner {
  background-color: #80B29B; /* Global Thread - dark blue */
  border-top-color: rgba(243, 241, 222, 0.2);
  border-bottom-color: rgba(243, 241, 222, 0.2); 
}


body.dark-mode .banner-text {
  color: #F3F1DE; /* Open Tab */
}


/* ========== WHY TASKMASTERS (Carousel Section) ========== */
body.dark-mode .why-taskmasters {
  background-color: #3D405B; /* Global Thread - dark blue background */
}


body.dark-mode .section-title-large {
  color: #F3F1DE; /* Open Tab */
}


body.dark-mode .service-card {
  background-color: #1C1C1C !important; /* Night Shift - card background */
  border-color: rgba(128, 178, 155, 0.3) !important; /* Active Status - subtle green border */
}


body.dark-mode .service-card:hover {
  border-color: #80B29B !important; /* Active Status - full green on hover */
  box-shadow: 0 0 15px rgba(128, 178, 155, 0.3) !important; /* Green glow */
}


body.dark-mode .service-title {
  color: #F3F1DE; /* Open Tab */
}


body.dark-mode .service-description,
body.dark-mode .service-features li {
  color: rgba(243, 241, 222, 0.85); /* Open Tab - slightly transparent */
}


body.dark-mode .service-icon {
  color: #80B29B; /* Task Force - orange icons */
}


body.dark-mode .service-features li i {
  color: #80B29B; /* Active Status - green checkmarks */
}


/* ========== FOOTER ========== */
body.dark-mode .site-footer {
  background-color: #0d0f10; /* Darker than Night Shift */
  border-top-color: #80B29B; /* Task Force - orange accent */
}


body.dark-mode .footer-col h4 {
  color: #80B29B; /* Task Force */
}


body.dark-mode .footer-col h5,
body.dark-mode .footer-col p {
  color: #F3F1DE; /* Open Tab */
}


body.dark-mode .footer-col ul li a {
  color: rgba(243, 241, 222, 0.8); /* Open Tab - transparent */
}


body.dark-mode .footer-col ul li a:hover {
  color: #80B29B; /* Active Status - green hover */
}


body.dark-mode .footer-bottom p {
  color: rgba(243, 241, 222, 0.6); /* Open Tab - more transparent */
}


/* ========== SCROLL TOP BUTTON ========== */
body.dark-mode .scroll-top {
  background-color: #80B29B; /* Active Status - green */
}


body.dark-mode .scroll-top:hover {
  background-color: #80B29B; /* Task Force - orange on hover */
  transform: translateY(-3px) scale(1.05);
}


/* ========== SMOOTH TRANSITIONS ========== */
body,
.editorial-hero,
.benefits-section,
.infinite-banner,
.why-taskmasters,
.service-card,
.site-footer,
.btn-register,
.scroll-top {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ========== HOW TO GET STARTED SECTION (FIXED) ========== */
body.dark-mode .how-to-section {
  background-color: #3D405B !important;
  border-top-color: rgba(243, 241, 222, 0.2);
}


body.dark-mode .section-title {
  color: #F3F1DE !important;
}


body.dark-mode .section-description {
  color: rgba(243, 241, 222, 0.85) !important;
}


/* Step Buttons */
body.dark-mode .step-btn {
  border-color: rgba(243, 241, 222, 0.4) !important;
  color: #F3F1DE !important;
}


body.dark-mode .step-btn::before {
  background-color: #80B29B !important;
}


body.dark-mode .step-btn.active {
  border-color: #80B29B !important;
  color: #F3F1DE !important;
}


body.dark-mode .step-btn:hover {
  border-color: #80B29B !important;
}


/* Step Content Cards */
body.dark-mode .step-content {
  background-color: #1C1C1C !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}


body.dark-mode .step-content.active {
  background-color: #1C1C1C !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}


body.dark-mode .step-card-header {
  border-bottom-color: #80B29B !important;
}


/* ✅ ADD THIS - Catches the icon SVG/element */
body.dark-mode .step-number-badge svg,
body.dark-mode .step-number-badge i,
body.dark-mode .step-number-badge *[stroke],
body.dark-mode .step-number-badge *[fill] {
  stroke: #80B29B !important;
  fill: #80B29B !important;
  color: #80B29B !important;
}


body.dark-mode .step-number-text {
  color: #80B29B !important;
}


body.dark-mode .step-title-main {
  color: #F3F1DE !important;
}


body.dark-mode .step-subtitle {
  color: #F3F1DE !important;
}


body.dark-mode .step-description {
  color: rgba(243, 241, 222, 0.85) !important;
}


body.dark-mode .step-list li {
  color: rgba(243, 241, 222, 0.85) !important;
}


body.dark-mode .step-list li::before {
  color: #80B29B !important;
}


/* Registration Card */
body.dark-mode .registration-card {
  background-color: rgba(61, 64, 91, 0.3) !important;
  border-color: #80B29B !important;
}


body.dark-mode .registration-title {
  color: #F3F1DE !important;
}


body.dark-mode .form-field label {
  color: #F3F1DE !important;
}


body.dark-mode .form-field input,
body.dark-mode .form-field select {
  background-color: #2a2d3a !important;
  border-color: rgba(243, 241, 222, 0.3) !important;
  color: #F3F1DE !important;
}


body.dark-mode .form-field input::placeholder {
  color: rgba(243, 241, 222, 0.5);
}


body.dark-mode .requirement-bullets li {
  color: rgba(243, 241, 222, 0.85) !important;
}


body.dark-mode .requirement-bullets li::before {
  color: #80B29B !important;
}


/* Match Visualization */
body.dark-mode .match-center-node,
body.dark-mode .growth-node {
  color: #F3F1DE !important;
  border-color: #80B29B !important;
  background-color: #2a2d3a !important;
}


body.dark-mode .match-item {
  background-color: #2a2d3a !important;
  border-color: #80B29B !important;
  color: #F3F1DE !important;
}


body.dark-mode .growth-arrow {
  color: #80B29B !important;
}


body.dark-mode .benefit-dot {
  background-color: #80B29B !important;
}


/* ========== PARTNER SECTION - COMPLETE DARK MODE ========== */


/* Main Section */
/* Extended Grid for entire partner section */
body.dark-mode .partner-new-section {
  background-color: #1C1C1C !important;
}


body.dark-mode .partner-new-section::before {
  background-image: 
    linear-gradient(rgba(243, 241, 222, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 222, 0.06) 1px, transparent 1px) !important;
  opacity: 1 !important;
}



/* ========== HERO SECTION ========== */
body.dark-mode .partner-hero {
  background-color: #1C1C1C !important;
}


/* Grid Overlay */
body.dark-mode .hero-grid-overlay {
  background-image:
    linear-gradient(rgba(243, 241, 222, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 222, 0.08) 1px, transparent 1px) !important;
  opacity: 0.3 !important;
}


/* Floating Particles */
body.dark-mode .hero-particle {
  background: radial-gradient(circle, rgba(128, 178, 155, 0.3), transparent) !important;
}


/* Spotlight Effect */
body.dark-mode .hero-spotlight {
  background: radial-gradient(circle, rgba(128, 178, 155, 0.15), transparent 70%) !important;
}


/* Wave Effects */
body.dark-mode .wave-path-1 {
  fill: rgba(61, 64, 91, 0.3) !important; /* Global Thread */
}


body.dark-mode .wave-path-2 {
  fill: rgba(128, 178, 155, 0.2) !important; /* Green */
}


/* Hero Text */
body.dark-mode .partner-hero-left h1 {
  color: #F3F1DE !important; /* Open Tab */
}


body.dark-mode .partner-hero-left p {
  color: rgba(243, 241, 222, 0.85) !important;
}


/* Visual Diagram */
body.dark-mode .business-icon {
  background-color: rgba(128, 178, 155, 0.15) !important; /* Green tint */
}


body.dark-mode .business-grid {
  background-color: #80B29B !important; /* Green */
}


body.dark-mode .grid-cell {
  border-color: #1C1C1C !important;
}


body.dark-mode .business-label {
  color: #80B29B !important;
}


body.dark-mode .connection-line-horizontal {
  background-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .taskmasters-hub {
  background-color: rgba(61, 64, 91, 0.3) !important; /* Global Thread */
}


body.dark-mode .hub-circle {
  background-color: #3D405B !important; /* Global Thread */
  border-color: rgba(128, 178, 155, 0.4) !important;
}


body.dark-mode .tm-text,
body.dark-mode .hub-text {
  color: #80B29B !important; /* Green */
}


body.dark-mode .hub-label {
  color: #80B29B !important;
}


body.dark-mode .partnership-tagline {
  color: rgba(243, 241, 222, 0.6) !important;
}


/* VA Avatars - Keep colorful but adjust for dark mode */
body.dark-mode .va-avatar:nth-child(1),
body.dark-mode .va-avatar:nth-child(2) {
  background-color: #80B29B !important; /* Green */
  border-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .va-avatar:nth-child(3) {
  background-color: #FCD34D !important; /* Yellow */
  border-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .va-avatar:nth-child(4) {
  background-color: #EF4444 !important; /* Red */
  border-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .va-avatar:nth-child(5) {
  background-color: #8B5CF6 !important; /* Purple */
  border-color: rgba(243, 241, 222, 0.2) !important;
}


/* ========== TRUST FEATURES ========== */
body.dark-mode .trust-feature {
  background-color: #3D405B !important; /* Global Thread */
  border-color: rgba(128, 178, 155, 0.3) !important;
}


body.dark-mode .trust-feature:hover {
  border-color: #80B29B !important;
  box-shadow: 0 10px 30px rgba(128, 178, 155, 0.2) !important;
}


body.dark-mode .trust-feature h3 {
  color: #F3F1DE !important;
}


body.dark-mode .trust-feature p {
  color: rgba(243, 241, 222, 0.85) !important;
}


/* ========== COMPARISON SECTION - DARK MODE FIXED ========== */

/* Comparison Section Background */
body.dark-mode .comparison-editorial-section {
  background: #1C1C1C !important;
}

/* Section Header */
body.dark-mode .section-label {
  color: #F3F1DE !important;
}

body.dark-mode .section-headline {
  color: #80B29B !important;
}

/* Comparison Cards */
body.dark-mode .comparison-column {
  background: #2A2A2A !important;
  border: 2px solid #F3F1DE !important;
}

body.dark-mode .comparison-column:hover {
  box-shadow: 10px 10px 0 #80B29B !important;
}

/* Column Headers */
body.dark-mode .column-header {
  border-bottom: 2px solid #F3F1DE !important;
}

body.dark-mode .header-mark {
  border: 2px solid #F3F1DE !important;
}

body.dark-mode .mark-check {
  background: #80B29B !important;
}

body.dark-mode .mark-check::after {
  color: #1C1C1C !important;
}

body.dark-mode .mark-cross {
  background: #80B29B !important;
}

body.dark-mode .mark-cross::after {
  color: #1C1C1C !important;
}

body.dark-mode .column-title {
  color: #F3F1DE !important;
}

/* Column Content */
body.dark-mode .comparison-item {
  border-bottom: 1px solid #444 !important;
}

body.dark-mode .column-taskmasters .item-marker {
  color: #80B29B !important;
}

body.dark-mode .column-others .item-marker {
  color: #80B29B !important;
}

body.dark-mode .item-text h4 {
  color: #F3F1DE !important;
}

body.dark-mode .item-text p {
  color: #B8B8B8 !important;
}


/* ========== CTA SECTION ========== */
body.dark-mode .cta-redesign {
  background: #1C1C1C !important;
}


body.dark-mode .cta-main-block {
  background: #3D405B !important; /* Global Thread */
  border-color: rgba(243, 241, 222, 0.2) !important;
  box-shadow: 15px 15px 0 rgba(128, 178, 155, 0.15) !important;
}


body.dark-mode .cta-main-block:hover {
  box-shadow: 18px 18px 0 rgba(128, 178, 155, 0.25) !important;
}


body.dark-mode .cta-eyebrow {
  color: #80B29B !important;
}


body.dark-mode .cta-main-block h3 {
  color: #F3F1DE !important;
}


body.dark-mode .cta-main-block p {
  color: rgba(243, 241, 222, 0.85) !important;
}


/* CTA Button */
body.dark-mode .cta-btn-new {
  background: #80B29B !important;
  color: #1C1C1C !important;
  border-color: rgba(243, 241, 222, 0.3) !important;
}


body.dark-mode .cta-btn-new::before {
  background: #2a2d3a !important;
}


body.dark-mode .cta-btn-new:hover {
  background: #80B29B !important;
  color: #F3F1DE !important;
}


/* Guarantee Cards */
body.dark-mode .guarantee-card {
  background: #2a2d3a !important;
  border-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .guarantee-card::before {
  background: #80B29B !important;
}


body.dark-mode .guarantee-card:hover {
  border-color: #80B29B !important;
}


body.dark-mode .guarantee-icon {
  background: #80B29B !important;
  color: #1C1C1C !important;
}


body.dark-mode .guarantee-card:hover .guarantee-icon {
  background: #80B29B !important;
  color: #F3F1DE !important;
}


body.dark-mode .guarantee-card h4 {
  color: #F3F1DE !important;
}


/* ========== SCROLL PROGRESS BAR ========== */
body.dark-mode .scroll-progress {
  background: linear-gradient(90deg, #80B29B 0%, #80B29B 100%) !important;
}


/* CTA Section */
body.dark-mode .partner-cta-box {
  background-color: #3D405B !important; /* Global Thread */
}


body.dark-mode .cta-content-box {
  background-color: #1C1C1C !important; /* Night Shift */
}


body.dark-mode .cta-title {
  color: #F3F1DE !important;
}


body.dark-mode .cta-description {
  color: rgba(243, 241, 222, 0.85) !important;
}


body.dark-mode .cta-button {
  background-color: #80B29B !important; /* Green button */
  color: #1C1C1C !important;
}


body.dark-mode .cta-button:hover {
  background-color: #80B29B !important; 
  color: #F3F1DE !important;
}


body.dark-mode .guarantee-badge {
  color: #F3F1DE !important;
}


/* ========== ABOUT SECTION ========== */
body.dark-mode .about-new-section {
  background-color: #1C1C1C !important;
}


body.dark-mode .about-left {
  background-color: #3D405B !important;
}


body.dark-mode .about-header h1 {
  color: #F3F1DE !important;
}


body.dark-mode .about-header .subtitle {
  color: rgba(243, 241, 222, 0.7) !important;
}


body.dark-mode .founder-image {
  background-color: #2a2d3a !important;
  border: 2px solid rgba(128, 178, 155, 0.3) !important;
}


body.dark-mode .founder-image::before,
body.dark-mode .founder-image::after {
  background-color: rgba(128, 178, 155, 0.1) !important;
}


body.dark-mode .about-right {
  background-color: #1C1C1C !important;
}


body.dark-mode .about-meta {
  color: #80B29B !important;
}


body.dark-mode .about-title {
  color: #F3F1DE !important;
}


body.dark-mode .about-preview-text {
  color: rgba(243, 241, 222, 0.9) !important;
  border-left-color: #80B29B !important;
}


body.dark-mode .see-more-btn {
  background-color: #80B29B !important;
  color: #1C1C1C !important;
}


body.dark-mode .see-more-btn:hover {
  background-color: #80B29B !important;
  color: #F3F1DE !important;
}


/* ========== DARK MODE STYLES ========== */
body.dark-mode .contact-new-section {
  background-color: #1C1C1C !important;
  border-top-color: #F3F1DE !important;
}

body.dark-mode .contact-hero-left {
  border-right-color: #F3F1DE !important;
}

body.dark-mode .contact-hero-left h2 {
  color: #80B29B !important;
}

body.dark-mode .contact-hero-left > p {
  color: rgba(243, 241, 222, 0.75) !important;
}

body.dark-mode .contact-info-item {
  border-bottom-color: rgba(243, 241, 222, 0.15) !important;
}

body.dark-mode .contact-info-item:hover {
  border-bottom-color: #80B29B !important;
}

body.dark-mode .contact-info-content h4 {
  color: #F3F1DE !important;
}

body.dark-mode .contact-info-content p {
  color: rgba(243, 241, 222, 0.75) !important;
}

body.dark-mode .contact-info-content a {
  color: #80B29B !important;
}

body.dark-mode .contact-info-content a:hover {
  color: #80B29B !important;
}

body.dark-mode .contact-form-card h3 {
  color: #F3F1DE !important;
}

body.dark-mode .contact-form-card > p {
  color: rgba(243, 241, 222, 0.65) !important;
}

body.dark-mode .form-group-new {
  border-bottom-color: rgba(243, 241, 222, 0.2) !important;
}

body.dark-mode .form-group-new:hover {
  border-bottom-color: #80B29B !important;
}

body.dark-mode .form-group-new:focus-within {
  border-bottom-color: #F3F1DE !important;
}

body.dark-mode .form-group-new input,
body.dark-mode .form-group-new textarea {
  color: #F3F1DE !important;
}

body.dark-mode .form-group-new input::placeholder,
body.dark-mode .form-group-new textarea::placeholder {
  color: rgba(243, 241, 222, 0.4) !important;
}

body.dark-mode .contact-submit-btn {
  background-color: #F3F1DE !important;
  color: #1C1C1C !important;
}

body.dark-mode .contact-submit-btn::before {
  background: #80B29B !important;
}

body.dark-mode .contact-submit-btn:hover {
  color: #1C1C1C !important;
}

@media (max-width: 992px) {
  body.dark-mode .contact-hero-left {
    border-right: none !important;
    border-bottom-color: #F3F1DE !important;
  }
}


/* ========== FOOTER (ENHANCED) ========== */
body.dark-mode .site-footer {
  background-color: #3D405B !important; /* Global Thread - dark blue */
  border-top: 2px solid rgba(128, 178, 155, 0.2) !important; /* Subtle green top border */
}


body.dark-mode .footer-col h4 {
  color: #F3F1DE !important; /* Open Tab */
}


body.dark-mode .footer-col h5 {
  color: #80B29B !important; /* Active Status - green */
}


body.dark-mode .footer-col p {
  color: rgba(243, 241, 222, 0.8) !important;
}


body.dark-mode .footer-col ul li a {
  color: rgba(243, 241, 222, 0.8) !important;
}


body.dark-mode .footer-col ul li a:hover {
  color: #80B29B !important; /* Green hover */
}


body.dark-mode .footer-bottom {
  border-top-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .footer-bottom p {
  color: rgba(243, 241, 222, 0.6) !important;
}


/* ========== VA LANDING PAGE - COMPLETE DARK MODE ========== */

/* ================== GLOBAL DARK MODE ================== */
body.dark-mode {
  background-color: #1C1C1C !important; /* Night Shift */
  color: #F3F1DE !important; /* Open Tab */
}

body.dark-mode html {
  background-color: #1C1C1C !important;
}

/* ================== INTRO WRAPPER WITH ANIMATED GRID ================== */
body.dark-mode .intro-wrap {
  background: #1C1C1C !important; /* Night Shift */
}

/* Animated Grid - More subtle in dark mode */
body.dark-mode .intro-wrap::before {
  background-image:
    linear-gradient(rgba(243, 241, 222, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 222, 0.08) 1px, transparent 1px) !important;
}

body.dark-mode .intro-wrap::after {
  background-image:
    radial-gradient(circle, rgba(243, 241, 222, 0.12) 1px, transparent 1px) !important;
  opacity: 0.12 !important;
}

/* ================== HERO SECTION ================== */
body.dark-mode .editorial-hero {
  background-color: transparent !important;
}

/* Hero Text Elements */
body.dark-mode .sub-headline {
  color: #80B29B !important; /* Task Force - orange */
}

body.dark-mode .display-title {
  color: #F3F1DE !important; /* Open Tab - cream */
}

/* ============================================
   TASKMASTERS - DARK MODE (CLEAN GREEN)
   ============================================ */

/* ✅ Remove ALL animations and effects */
body.dark-mode .taskmasters::before {
  display: none !important;
}

body.dark-mode .taskmasters {
  color: #80B29B !important; /* Green - clean and simple */
  animation: none !important; /* No animations */
  text-shadow: none !important; /* No glow */
}

/* Hero Subtitle */
body.dark-mode .hero-subtitle {
  color: rgba(243, 241, 222, 0.85) !important;
}

/* Green text utility class */
body.dark-mode .text-green,
body.dark-mode .hero-subtitle .text-green {
  color: #80B29B !important; /* Active Status - green */
}

body.dark-mode .text-orange {
  color: #80B29B !important;
}

body.dark-mode .text-dark {
  color: #F3F1DE !important; /* Invert to light */
}

/* ================== CTA BUTTON ================== */
body.dark-mode .btn-login {
  background-color: #80B29B !important; /* Active Status - green */
  color: #1C1C1C !important; /* Night Shift text */
  border: 2px solid #80B29B !important;
}


body.dark-mode .btn-login:hover {
  background-color: #80B29B !important; /* Task Force - orange */
  border-color: #80B29B !important;
  color: #F3F1DE !important; /* Open Tab text */
  box-shadow: 5px 5px 0px rgba(128, 178, 155, 0.3) !important;
}


/* ================== HERO DIVIDER LINES ================== */
body.dark-mode .hero-divider {
  opacity: var(--scroll-progress, 0.4) !important;
}


body.dark-mode .divider-vertical,
body.dark-mode .divider-horizontal {
  background-color: rgba(243, 241, 222, 0.2) !important; /* Subtle cream */
}


body.dark-mode.scrolled .hero-divider {
  opacity: 0.6 !important;
}


/* ================== HERO IMAGE & VIDEO ================== */
/* Gradient Shadow behind video */
body.dark-mode .hero-image::before {
  background: linear-gradient(135deg, #80B29B 0%, #3D405B 100%) !important; /* Green to Global Thread */
  border-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .video-container {
  border-color: rgba(243, 241, 222, 0.2) !important;
  background-color: #2a2d3a !important; /* Darker than Global Thread */
}


body.dark-mode .hero-video {
  opacity: 0.9 !important; /* Slightly dimmed */
}


body.dark-mode .hero-image img {
  border-color: rgba(243, 241, 222, 0.2) !important;
}


css
/* ========== FEATURES SECTION - DARK MODE ========== */

body.dark-mode .features-section {
  background-color: transparent !important;
}




/* ✅ FEATURE CARDS */
body.dark-mode .feature-item {
  background-color: #3D405B !important; /* Global Thread - dark blue */
  border-color: rgba(128, 178, 155, 0.3) !important; /* Subtle green border */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .feature-item:hover {
  border-color: #80B29B !important; /* Active Status - bright green */
  box-shadow: 8px 8px 0px rgba(128, 178, 155, 0.4) !important; /* Green shadow */
  background-color: #2a2d3a !important; /* Slightly darker on hover */
}

/* ✅ RENAMED - Hero feature card styles */
body.dark-mode .feature-hero-card-title {
  color: #F3F1DE !important; /* Open Tab - cream */
}

body.dark-mode .feature-hero-card-text {
  color: rgba(243, 241, 222, 0.8) !important; /* Slightly transparent cream */
}

/* ================== FOOTER ================== */
body.dark-mode .site-footer {
  background-color: #3D405B !important; /* Global Thread */
  border-top: 2px solid rgba(128, 178, 155, 0.2) !important;
}


body.dark-mode .footer-col h4 {
  color: #F3F1DE !important; /* Open Tab */
}


body.dark-mode .footer-col h5 {
  color: #80B29B !important; /* Active Status - green */
}


body.dark-mode .footer-col p {
  color: rgba(243, 241, 222, 0.85) !important;
}


body.dark-mode .footer-col ul li a {
  color: rgba(243, 241, 222, 0.85) !important;
}


body.dark-mode .footer-col ul li a:hover {
  color: #80B29B !important; /* Green hover */
}


body.dark-mode .footer-bottom {
  border-top-color: rgba(243, 241, 222, 0.2) !important;
}


body.dark-mode .footer-bottom p {
  color: rgba(243, 241, 222, 0.6) !important;
}


/* ================== SCROLL TOP BUTTON ================== */
body.dark-mode .scroll-top {
  background-color: #80B29B !important; /* Active Status - green */
}


body.dark-mode .scroll-top:hover {
  background-color: #80B29B !important; /* Task Force - orange */
}


/* ================== SMOOTH TRANSITIONS ================== */
body.dark-mode,
body.dark-mode .intro-wrap,
body.dark-mode .editorial-hero,
body.dark-mode .features-section,
body.dark-mode .feature-item,
body.dark-mode .btn-login,
body.dark-mode .video-container,
body.dark-mode .site-footer {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease !important;
}


/* ================== RESPONSIVE ADJUSTMENTS ================== */
@media (max-width: 768px) {
  body.dark-mode .hero-image::before {
    opacity: 0.7 !important;
  }

  body.dark-mode .feature-item:hover {
    box-shadow: 6px 6px 0px rgba(128, 178, 155, 0.4) !important;
  }
}



/* ============================================
   HOW TO APPLY SECTION - DARK MODE (FIXED)
   ============================================ */

/* Main Section Background */
body.dark-mode .how-to-apply-section {
  background-color: #1C1C1C !important;
  border-top-color: rgba(243, 241, 222, 0.2) !important;
  border-bottom-color: rgba(243, 241, 222, 0.2) !important;
}

/* ========== LEFT HEADER - NO BOX, CLEAN TEXT ========== */
body.dark-mode .section-header {
  background: transparent !important; /* ✅ Remove cream box */
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .section-header:hover {
  box-shadow: none !important;
}

/* Remove Corner Accents */
body.dark-mode .section-header::before,
body.dark-mode .section-header::after {
  display: none !important;
}

/* Issue Label - VOL. 03 / GUIDE */
body.dark-mode .section-issue {
  color: rgba(243, 241, 222, 0.6) !important;
}

body.dark-mode .issue-vol {
  color: #80B29B !important;
}

body.dark-mode .issue-divider {
  color: #80B29B !important;
}

body.dark-mode .issue-section {
  color: #F3F1DE !important;
}

/* Header Text - Cream White */
body.dark-mode .section-header h2 {
  color: #F3F1DE !important; /* ✅ Cream white */
}

body.dark-mode .section-header p {
  color: rgba(243, 241, 222, 0.85) !important; /* ✅ Cream white */
}

/* Editorial Line - Golden Yellow */
body.dark-mode .section-header-line {
  background: #F2CC8F !important; /* ✅ Golden yellow */
}

/* Remove Floating Circles (if they exist) */
body.dark-mode .floating-circle {
  display: none !important;
}

/* ========== EDITORIAL TABS ========== */
body.dark-mode .editorial-tabs {
  border-bottom-color: rgba(243, 241, 222, 0.3) !important;
}

body.dark-mode .tab-button {
  color: #F3F1DE !important;
  border-right-color: rgba(243, 241, 222, 0.2) !important;
  background-color: transparent !important;
}

body.dark-mode .tab-button:hover {
  background-color: rgba(243, 241, 222, 0.08) !important;
}

body.dark-mode .tab-button.active {
  background-color: #3D405B !important; /* ✅ Dark blue instead of cream */
  color: #F3F1DE !important; /* ✅ Cream text */
}

body.dark-mode .tab-button.active::after {
  background-color: #F2CC8F !important; /* ✅ Golden yellow accent */
}

/* ========== CONTENT TEXT ========== */
body.dark-mode .content-text h3 {
  color: #F3F1DE !important;
}

body.dark-mode .content-text .intro-text {
  color: rgba(243, 241, 222, 0.85) !important;
}

/* Content List */
body.dark-mode .content-list li {
  color: rgba(243, 241, 222, 0.9) !important;
}

/* Arrow Bullets (→) */
body.dark-mode .content-list li::before {
  color: #F2CC8F !important; /* ✅ Golden yellow arrows */
}

/* Remove old icon styles if they exist */
body.dark-mode .content-list li i {
  display: none !important;
}

/* =====================================
   LOGO CAROUSEL SECTION - DARK MODE
   ===================================== */

/* ✅ GRADIENT BACKGROUND - Blue (top) to Black (bottom) */
body.dark-mode .logo-carousel-section {
  background: linear-gradient(180deg, #3D405B 0%, #1C1C1C 100%) !important; /* Top to bottom: Blue to Black */
  border-top-color: rgba(243, 241, 222, 0.2) !important;
  border-bottom-color: rgba(243, 241, 222, 0.2) !important;
}

/* Carousel Header */
body.dark-mode .carousel-label {
  color: var(--color-active); /* Green */
}

body.dark-mode .carousel-title {
  color: #F3F1DE !important;
}

/* ✅ REMOVE FADE EDGES IN DARK MODE */
body.dark-mode .logo-track-container::before,
body.dark-mode .logo-track-container::after {
  display: none !important; /* Hide fade edges completely */
}

/* Logo Items */
body.dark-mode .logo-item svg {
  filter: grayscale(40%) brightness(1.2) !important;
}

body.dark-mode .logo-item:hover svg {
  filter: grayscale(0%) brightness(1.3) drop-shadow(0 8px 20px rgba(242, 204, 143, 0.4)) !important; /* Golden glow */
}

body.dark-mode .logo-item p {
  color: #F3F1DE !important;
}

body.dark-mode .logo-item:hover p {
  color: #F2CC8F !important; /* Golden hover */
}




/* ========== SMOOTH TRANSITIONS ========== */
body.dark-mode .how-to-apply-section,
body.dark-mode .section-header,
body.dark-mode .tab-button,
body.dark-mode .content-text,
body.dark-mode .logo-carousel-section,
body.dark-mode .logo-item {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease !important;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 992px) {
  body.dark-mode .editorial-tabs {
    border-bottom: none !important;
    border-right: 2px solid rgba(243, 241, 222, 0.2) !important;
  }
  
  body.dark-mode .tab-button {
    border-right: none !important;
    border-bottom: 2px solid rgba(243, 241, 222, 0.2) !important;
  }
  
  body.dark-mode .tab-button:last-child {
    border-bottom: none !important;
  }
  
  body.dark-mode .tab-button.active::after {
    background-color: #F2CC8F !important; /* ✅ Golden yellow */
  }
}


/* ============================================
   CTA EDITORIAL V2 SECTION - DARK MODE
   ============================================ */


/* Main Section Background */
body.dark-mode .cta-editorial-v2 {
  background: #1C1C1C !important; /* Night Shift */
}


/* Grid Background - Lighter lines for dark mode */
body.dark-mode .editorial-grid {
  background-image: 
    linear-gradient(rgba(243, 241, 222, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 222, 0.08) 1px, transparent 1px) !important;
}


/* Geometric Frame Borders - Cream colored */
body.dark-mode .frame-border {
  border-color: rgba(243, 241, 222, 0.3) !important;
}


/* Vertical Divider - Cream colored */
body.dark-mode .cta-layout::after {
  background: rgba(243, 241, 222, 0.2) !important;
}


/* Main Headline - Cream text */
body.dark-mode .cta-headline {
  color: #F3F1DE !important; /* Open Tab */
}


/* Headline Accent - Keep green */
body.dark-mode .headline-accent {
  color: #80B29B !important; /* Active Status */
}


/* Description - Light cream */
body.dark-mode .cta-description {
  color: rgba(243, 241, 222, 0.85) !important;
}


/* Editorial Button - Green background */
body.dark-mode .cta-button-editorial {
  background: #80B29B !important; /* Active Status - green */
  color: #1C1C1C !important; /* Night Shift text */
}


/* Button Border */
body.dark-mode .cta-button-editorial::before {
  border-color: rgba(243, 241, 222, 0.4) !important;
}


/* Button Hover - Orange */
body.dark-mode .cta-button-editorial:hover {
  background: #80B29B !important; /* Task Force - orange */
  color: #F3F1DE !important; /* Open Tab text */
}


/* Bottom Border Line - Cream */
body.dark-mode .cta-bottom-line {
  background: rgba(243, 241, 222, 0.2) !important;
}


/* Responsive - Grid adjustment for mobile */
@media (max-width: 480px) {
  body.dark-mode .editorial-grid {
    background-image: 
      linear-gradient(rgba(243, 241, 222, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(243, 241, 222, 0.06) 1px, transparent 1px) !important;
  }
}

/* ========== PARTNER SECTION CTA - DARK MODE (COMPLETE) ========== */

/* Main CTA Section Background */
body.dark-mode .cta-editorial {
  background: #2d3042 !important; /* Global Thread - dark blue (matching your pattern) */
}

/* Title Box - Transparent background */
body.dark-mode .cta-title-box {
  background: transparent !important;
  border: none !important;
}

/* Main Headline - Keep Terracotta (orange) for contrast */
body.dark-mode .cta-headline-huge {
  color: #F3F1DE !important; /* Task Force - orange */
}

/* Description Box */
body.dark-mode .cta-description-box {
  background: transparent !important;
  border: none !important;
}

/* Description Text - Cream color */
body.dark-mode .cta-description-centered {
  color: #F3F1DE !important; /* Open Tab - cream */
}

/* CTA Button */
body.dark-mode .cta-button-large {
  background: #80B29B !important; /* Active Status - green */
  color: #1C1C1C !important; /* Night Shift text */
  border: none !important;
}

/* Button Hover Effect */
body.dark-mode .cta-button-large::before {
  background: #80B29B !important; /* Task Force - orange fill on hover */
}

body.dark-mode .cta-button-large:hover {
  color: #F3F1DE !important; /* Open Tab text on hover */
}

/* Button Text & Arrow */
body.dark-mode .button-text,
body.dark-mode .button-arrow-large {
  position: relative;
  z-index: 1;
}

/* ========== BENEFITS BANNER SECTION - DARK MODE ========== */

/* Main Benefits Banner - Sage Green background becomes darker */
body.dark-mode .benefits-banner-section {
  background: #2A2D3A !important; /* Darker than Global Thread */
  border-top: 2px solid rgba(243, 241, 222, 0.2) !important;
  border-bottom: 2px solid rgba(243, 241, 222, 0.2) !important;
}

/* Benefits Banner Container */
body.dark-mode .benefits-banner-container {
  background: transparent !important;
}

/* Benefit Items - No background */
body.dark-mode .benefit-banner-item {
  background: none !important;
  border: none !important;
}

/* Vertical Separator Lines - Cream colored */
body.dark-mode .benefit-banner-item:not(:last-child)::after {
  background-color: rgba(243, 241, 222, 0.2) !important; /* Cream separator */
}

/* Benefit Text - Cream color, changes to orange on hover */
body.dark-mode .benefit-banner-text {
  color: #F3F1DE !important; /* Open Tab - cream */
  background: none !important;
  border: none !important;
}

/* Hover Effect - Orange/Terracotta */
body.dark-mode .benefit-banner-item:hover .benefit-banner-text {
  color: #80B29B !important; /* Task Force - orange */
}

/* Remove any hover effects on container */
body.dark-mode .benefit-banner-item:hover {
  background: none !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ========== SMOOTH TRANSITIONS FOR CTA SECTION ========== */
body.dark-mode .cta-editorial,
body.dark-mode .cta-button-large,
body.dark-mode .benefits-banner-section,
body.dark-mode .benefit-banner-text {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease !important;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */

@media (max-width: 992px) {
  body.dark-mode .cta-editorial {
    background: #3D405B !important;
  }

  body.dark-mode .benefits-banner-section {
    background: #2A2D3A !important;
  }
}

@media (max-width: 768px) {
  body.dark-mode .cta-headline-huge {
    color: #80B29B !important;
  }

  body.dark-mode .benefit-banner-item:not(:last-child)::after {
    display: none !important; /* Hide separators on mobile */
  }
}

@media (max-width: 576px) {
  body.dark-mode .cta-button-large {
    width: 100%;
    max-width: 300px;
  }
}

/* ============================================
   VA CATEGORIES SECTION - DARK MODE
   ============================================ */

/* Main Section Background */
body.dark-mode .categories-magazine {
  background-color: #1C1C1C !important; /* Night Shift */
}

/* Scroll Progress Bar */
body.dark-mode .scroll-progress {
  background: linear-gradient(90deg, #80B29B 0%, #80B29B 100%) !important; /* Green to Orange gradient */
}

/* Magazine Container */
body.dark-mode .magazine-container {
  background-color: transparent !important;
}

/* ========== LEFT COLUMN - STICKY HEADER ========== */
body.dark-mode .magazine-header {
  background-color: #1C1C1C !important; /* Night Shift */
}

/* Header Title */
body.dark-mode .magazine-header h2 {
  color: #F3F1DE !important; /* Open Tab - cream */
}

body.dark-mode .header-small,
body.dark-mode .header-large {
  color: #F3F1DE !important;
}

/* Horizontal Divider Line */
body.dark-mode .header-divider {
  background-color: #80B29B !important; /* Active Status - green accent */
}

/* Header Description */
body.dark-mode .header-description {
  color: rgba(243, 241, 222, 0.85) !important; /* Open Tab - slightly transparent */
}

/* ========== DIVIDER LINES (CENTER COLUMN) ========== */

/* Static Vertical Line (left) */
body.dark-mode .vertical-line-static {
  background-color: rgba(243, 241, 222, 0.2) !important; /* Subtle cream */
}

/* Arrow Line (right - grows on scroll) */
body.dark-mode .arrow-line {
  background-color: #80B29B !important; /* Active Status - green */
}

/* Arrow Tip SVG */
body.dark-mode .arrow-tip svg path {
  stroke: #80B29B !important; /* Green arrow */
}

/* Category Indicator Number */
body.dark-mode .category-indicator {
  color: #80B29B !important; /* Active Status - green */
}

/* ========== CATEGORY ENTRIES (RIGHT COLUMN) ========== */

/* Category Entry Background */
body.dark-mode .category-entry {
  background-color: #1C1C1C !important; /* Night Shift */
}

/* Horizontal Divider Lines Above Categories */
body.dark-mode .category-entry:not(:first-child)::before {
  background-color: rgba(243, 241, 222, 0.15) !important; /* Subtle cream line */
}

/* Category Content Container */
body.dark-mode .category-content {
  background-color: #1C1C1C !important;
}

/* ========== CATEGORY IMAGE ========== */
body.dark-mode .category-image {
  background-color: #2A2D3A !important; /* Darker than Global Thread */
  border-color: rgba(243, 241, 222, 0.3) !important; /* Cream border */
}

body.dark-mode .category-image img {
  opacity: 0.85 !important; /* Slightly dimmed */
}

body.dark-mode .category-entry:hover .category-image {
  border-color: #80B29B !important; /* Green border on hover */
}

body.dark-mode .category-entry:hover .category-image img {
  opacity: 1 !important; /* Full brightness on hover */
}

/* ========== CATEGORY TEXT ========== */

/* Category Title - Huge Editorial Style */
body.dark-mode .category-title {
  color: #F3F1DE !important; /* Open Tab - cream */
}

body.dark-mode .category-entry:hover .category-title {
  color: #80B29B !important; /* Active Status - green on hover */
}

/* Category Description Text */
body.dark-mode .category-text {
  color: rgba(243, 241, 222, 0.85) !important; /* Open Tab - slightly transparent */
}

/* ========== CATEGORY DETAILS CONTAINER ========== */
body.dark-mode .category-details {
  background-color: transparent !important;
}

body.dark-mode .category-header {
  background-color: transparent !important;
}

/* ========== SMOOTH TRANSITIONS ========== */
body.dark-mode .categories-magazine,
body.dark-mode .magazine-header,
body.dark-mode .category-entry,
body.dark-mode .category-image,
body.dark-mode .category-title,
body.dark-mode .category-text {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              opacity 0.3s ease !important;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */

/* Tablet */
@media (max-width: 1200px) {
  body.dark-mode .magazine-header {
    background-color: #1C1C1C !important;
  }
  
  body.dark-mode .category-image {
    border-color: rgba(243, 241, 222, 0.25) !important;
  }
}

/* Mobile */
@media (max-width: 992px) {
  body.dark-mode .magazine-header {
    background-color: transparent !important;
    border-bottom: 2px solid rgba(243, 241, 222, 0.2) !important;
  }
  
  body.dark-mode .divider-container {
    display: none !important; /* Hidden on mobile */
  }
  
  body.dark-mode .category-entry {
    border-bottom: 1px solid rgba(243, 241, 222, 0.1) !important;
  }
}

/* Small Mobile */
@media (max-width: 768px) {
  body.dark-mode .category-title {
    color: #F3F1DE !important;
  }
  
  body.dark-mode .category-image {
    border-color: rgba(243, 241, 222, 0.2) !important;
  }
}

/* Extra Small */
@media (max-width: 480px) {
  body.dark-mode .header-divider {
    background-color: rgba(128, 178, 155, 0.8) !important;
  }
  
  body.dark-mode .category-entry:not(:last-child) {
    margin-bottom: 40px !important;
    padding-bottom: 40px !important;
    border-bottom: 1px solid rgba(243, 241, 222, 0.15) !important;
  }
}


/* =====================================
   TESTIMONIALS 3D CAROUSEL - DARK MODE
   ===================================== */

/* Section Background */
body.dark-mode .testimonials-3d-carousel {
  background: #1C1C1C !important; /* Night Shift */
}

/* ✅ Card Top Border - Green instead of yellow */
body.dark-mode .carousel-card::before {
  background: #80B29B !important; /* Green */
}

/* ✅ Stars - Green instead of yellow */
body.dark-mode .card-rating {
  color: #80B29B !important; /* Green stars */
}

body.dark-mode .carousel-card.active:hover .card-rating i {
  color: #80B29B !important; /* Stay green on hover */
  filter: brightness(1.2) !important; /* Brighter green */
}

/* ✅ Avatar Placeholder - Green instead of yellow/orange */
body.dark-mode .author-avatar {
  background: linear-gradient(135deg, #80B29B 0%, #6A9B84 100%) !important; /* Green gradient */
  border-color: #80B29B !important; /* Green border */
}

/* Author Photo Border */
body.dark-mode .author-photo {
  border-color: #80B29B !important; /* Green border */
}

body.dark-mode .carousel-card.active .author-photo:hover {
  border-color: #80B29B !important; /* Orange on hover */
}

/* Right Side - Title */
body.dark-mode .info-title {
  color: #F3F1DE !important; /* Cream */
}

/* ✅ "ABOUT US" - Green instead of orange */
body.dark-mode .title-accent {
  color: #80B29B !important; /* Green */
}

/* ✅ Divider Line - Green instead of yellow */
body.dark-mode .info-divider {
  background: #3D405B !important; /* Green */
}

/* Description Text */
body.dark-mode .info-description {
  color: rgba(243, 241, 222, 0.7) !important;
}

/* Counter Box */
body.dark-mode .testimonial-counter {
  background: rgba(243, 241, 222, 0.05) !important;
  border-color: rgba(243, 241, 222, 0.1) !important;
}

/* ✅ Counter Numbers - Green instead of orange */
body.dark-mode .counter-current {
  color: #80B29B !important; /* Green */
}

body.dark-mode .counter-separator {
  color: #80B29B !important; /* Green */
}

body.dark-mode .counter-total {
  color: #80B29B !important; /* Green */
}

/* Navigation Buttons */
body.dark-mode .nav-btn {
  background: #3D405B !important; /* Global Thread */
  border-color: rgba(128, 178, 155, 0.3) !important;
  color: #80B29B !important;
}

body.dark-mode .nav-btn:hover {
  background: linear-gradient(135deg, #80B29B 0%, #6A9B84 100%) !important;
  color: #1C1C1C !important;
  border-color: #80B29B !important;
}