/* Dark Mode Styles */
body.dark-mode {
    --background-main: #1A1A1A;
    --background-alt: #2A2A2A;
    --border-color: #3A3A3A;
    --text-color: #EDECE8;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode, body.dark-mode .hero, body.dark-mode #services, body.dark-mode #contact, body.dark-mode footer {
    background-color: var(--primary-color); /* Dark background */
    color: var(--secondary-color); /* Light text */
}

body.dark-mode a {
    color: var(--secondary-color);
}

body.dark-mode a:hover::after {
    background-color:var(--secondary-color);
}

body.dark-mode #loading-overlay {
    background-color:var(--primary-color); /* Dark background */
}

body.dark-mode .spinner {
    border: 5px solid var(--secondary-color);
    border-top: 5px solid #C33248; /* Red spinner border */
}


.body.dark-mode .language-switcher, body.dark-mode .language-switcher .dropdown-menu, body.dark-mode .language-switcher .dropdown-label {
    background-color: transparent; /* Dark background */
    color:var(--secondary-color);
}

/* Dark mode text color */
body.dark-mode .theme-text {
    color:var(--secondary-color);
}

body.dark-mode #scroll-line {
    background-color: var(--secondary-color);
}

body.dark-mode .hero-image .s0, body.dark-mode #portfolio-img .s0 {
    fill: transparent;
    stroke: var(--secondary-color);
}

body.dark-mode .hero-image .s0:hover, body.dark-mode #portfolio-img .s0:hover {
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
}

body.dark-mode .service::before {
    background-color: var(--secondary-color);
}

body.dark-mode .service .column1 h3::after {
    background-color: var(--secondary-color);
}

body.dark-mode .btnup-wrapper {
    border-bottom: 1px solid var(--secondary-color);
}
body.dark-mode footer {
    border-top: 1px solid var(--secondary-color);
}

/* Contact Popup Dark Mode */
body.dark-mode .contact-popup {
    background: rgba(228, 228, 228, 0.7);
}

body.dark-mode .popup-content {
    background: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .close-popup::before,
body.dark-mode .close-popup::after {
    background-color: var(--secondary-color);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    border-color: var(--secondary-color);
    color: var(--primary-color);
    background: var(--secondary-color)!important;
}

body.dark-mode .form-group label {
    color: var(--primary-color);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    border-color: var(--accent-color);
}

body.dark-mode .form-group input:focus ~ label,
body.dark-mode .form-group textarea:focus ~ label,
body.dark-mode .form-group input:valid ~ label,
body.dark-mode .form-group textarea:valid ~ label {
    color: var(--accent-color);
    background: var(--secondary-color);
}

body.dark-mode .submit-btn {
    background: var(--secondary-color);
    color: var(--primary-color);
}

body.dark-mode .submit-btn:hover {
    background: transparent;
    color: var(--secondary-color);
}

body.dark-mode .submit-btn::after {
    background-color: var(--accent-color);
}

/* Dark mode backdrop filter */
body.dark-mode .contact-popup {
    backdrop-filter: blur(10px);
}

/* Dark mode popup title */
body.dark-mode .popup-content h3 {
    color: var(--secondary-color);
}

/* Dark Mode Support */
body.dark-mode .target-group {
    background-color: var(--background-dark-alt);
}

body.dark-mode .contact-info a {
    color: var(--accent-color-light);
}

body.dark-mode .features-list li,
body.dark-mode .target-group {
    background-color: var(--background-dark-alt);
}

body.dark-mode .process-step h3 {
    color: var(--accent-color-light);
}

body.dark-mode .contact-info a {
    color: var(--accent-color-light);
}

body.dark-mode .contact-info a:hover {
    color: var(--accent-color);
}

body.dark-mode .features-list li {
    background-color: #1a1a1a;
}
body.dark-mode .service-hero {
    background-color: var(--text-color);
    color: var(--text-color-light);
}

body.dark-mode #header {
    background-color: var(--background-dark);
    color: var(--text-color);
}

body.dark-mode .target-group h3 {
    color: var(--text-color);
}

body.dark-mode .hamburger span {
    background: var(--secondary-color); /* or your accent color */
    transition: background 0.3s;
}
body.dark-mode .mobile-nav a {
   color: var(--text-color)
}