/* Dark Mode Styles */

:root {
    /* Light mode colors (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --border-color: #e5e7eb;
    --shadow: rgba(0, 0, 0, 0.1);
    --card-bg: #ffffff;
}

[data-theme="dark"] {
    /* Dark mode colors */
    --bg-primary: #07192b;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #4b5563;
    --shadow: rgba(0, 0, 0, 0.5);
    --card-bg: #07192b;
}

/* Fix menu backdrop in dark mode - keep it transparent */
[data-theme="dark"] .menu-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Ensure nav menu has proper background in dark mode */
[data-theme="dark"] .nav-menu {
    background: #1f2937 !important;
}

/* Remove blur effects from body and main sections in dark mode */
[data-theme="dark"] body,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .services,
[data-theme="dark"] .shop,
[data-theme="dark"] .about,
[data-theme="dark"] .contact,
[data-theme="dark"] footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* Remove blur from contact section elements specifically */
[data-theme="dark"] .contact-info,
[data-theme="dark"] .contact-item,
[data-theme="dark"] .contact-form {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Apply smooth transitions to all elements - excluding transform to prevent shake */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Stable positioning - prevent shaking */
.contact,
.contact *,
.contact-form,
.contact-form *,
.contact-info,
.contact-info * {
    transform: none !important;
    backface-visibility: hidden !important;
    will-change: auto !important;
    animation: none !important;
}

/* Remove any slide/dropdown animations from contact form */
.contact-form {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.contact-info {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Main backgrounds */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Header - transparent when not scrolled (like light mode) */
[data-theme="dark"] .header:not(.scrolled),
html[data-theme="dark"] .header:not(.scrolled),
body[data-theme="dark"] .header:not(.scrolled),
.dark-mode .header:not(.scrolled),
html.dark-mode .header:not(.scrolled),
body.dark-mode .header:not(.scrolled) {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Header - dark background when scrolled */
[data-theme="dark"] .header.scrolled,
html[data-theme="dark"] .header.scrolled,
body[data-theme="dark"] .header.scrolled,
.dark-mode .header.scrolled,
html.dark-mode .header.scrolled,
body.dark-mode .header.scrolled {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
}

/* Site name - always white in dark mode (both scrolled and not scrolled) */
[data-theme="dark"] .logo h1,
html[data-theme="dark"] .logo h1,
body[data-theme="dark"] .logo h1,
.dark-mode .logo h1,
html.dark-mode .logo h1,
body.dark-mode .logo h1 {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Nav menu - transparent background before scrolling in dark mode (desktop only) */
@media (min-width: 769px) {
    [data-theme="dark"] .header:not(.scrolled) .nav-menu,
    html[data-theme="dark"] .header:not(.scrolled) .nav-menu,
    body[data-theme="dark"] .header:not(.scrolled) .nav-menu,
    .dark-mode .header:not(.scrolled) .nav-menu,
    html.dark-mode .header:not(.scrolled) .nav-menu,
    body.dark-mode .header:not(.scrolled) .nav-menu,
    [data-theme="dark"] .header:not(.scrolled) .nav-menu ul,
    html[data-theme="dark"] .header:not(.scrolled) .nav-menu ul,
    body[data-theme="dark"] .header:not(.scrolled) .nav-menu ul,
    .dark-mode .header:not(.scrolled) .nav-menu ul,
    html.dark-mode .header:not(.scrolled) .nav-menu ul,
    body.dark-mode .header:not(.scrolled) .nav-menu ul {
        background: transparent !important;
    }
}

/* Mobile menu - dark background when open in dark mode */
@media (max-width: 768px) {
    [data-theme="dark"] .nav-menu.active,
    html[data-theme="dark"] .nav-menu.active,
    body[data-theme="dark"] .nav-menu.active,
    .dark-mode .nav-menu.active,
    html.dark-mode .nav-menu.active,
    body.dark-mode .nav-menu.active {
        background: var(--bg-primary) !important;
    }
}

.nav-menu a {
    color: var(--text-primary) !important;
}

/* Sections - Low z-index to not cover fixed elements */
.services,
.projects,
.contact,
.about,
.hero {
    background: var(--bg-primary) !important;
    position: relative !important;
    z-index: 1 !important;
}

.services-grid,
.projects-grid,
.service-card,
.project-card {
    z-index: 1 !important;
    position: relative !important;
}

/* About section - transparent/no background in light mode */
.about,
.about *,
.about-wrapper,
.about-wrapper *,
.about-content,
.about-content *,
.about-header,
.about-header *,
.about .container,
.about .container * {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Remove borders from About section (light mode) */
.about-wrapper,
.about-content,
.about-header {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Cards */
.service-card,
.project-card,
.about-content {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Completely disable ALL hover effects on service cards */
.service-card,
.service-card:hover,
.service-card:focus,
.service-card:active {
    box-shadow: none !important;
    transform: none !important;
    transform: translate(0, 0) !important;
    transform: translateY(0) !important;
    transform: translateX(0) !important;
    transition: none !important;
    animation: none !important;
    scale: 1 !important;
    translate: none !important;
    z-index: 1 !important;
    position: relative !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.service-card {
    transition: none !important;
    will-change: auto !important;
}

/* Completely disable ALL hover effects on project cards */
.project-card,
.project-card:hover,
.project-card:focus,
.project-card:active {
    box-shadow: none !important;
    transform: none !important;
    transform: translate(0, 0) !important;
    transform: translateY(0) !important;
    transform: translateX(0) !important;
    transition: none !important;
    animation: none !important;
    scale: 1 !important;
    translate: none !important;
    z-index: 1 !important;
    position: relative !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.project-card {
    transition: none !important;
    will-change: auto !important;
}

/* Services Section - Dark Background */
[data-theme="dark"] .services {
    background: var(--bg-primary) !important;
}

/* Services Section Headers */
[data-theme="dark"] .services h2,
[data-theme="dark"] #services-title {
    color: #ffffff !important;
}

[data-theme="dark"] .services p,
[data-theme="dark"] #services-subtitle,
[data-theme="dark"] .services .section-header p {
    color: #ffffff !important;
}

/* Section subtitles - default black in light mode */
#services-subtitle,
#about-subtitle-new,
#shop-subtitle,
#contact-subtitle-new,
.contact-subtitle-new {
    color: #000000 !important;
}

/* Make section subtitles white in dark mode */
[data-theme="dark"] #services-subtitle,
[data-theme="dark"] #about-subtitle-new,
[data-theme="dark"] #shop-subtitle,
[data-theme="dark"] #contact-subtitle-new,
[data-theme="dark"] .contact-subtitle-new {
    color: #ffffff !important;
}

[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card .service-title {
    color: #ffffff !important;
}

[data-theme="dark"] .service-card p,
[data-theme="dark"] .service-card .service-description {
    color: var(--text-secondary) !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p, span, li, a {
    color: var(--text-secondary) !important;
}

/* Force pure white for all headers in dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .section-header h2,
[data-theme="dark"] .section-header p {
    color: #ffffff !important;
}

/* Footer */
.footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

.footer-bottom {
    background: var(--bg-tertiary) !important;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #10b981;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

.dark-mode-toggle i {
    font-size: 20px;
    color: #ffffff;
    transition: transform 0.3s ease !important;
}

.dark-mode-toggle:hover i {
    transform: rotate(20deg);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }
    
    .dark-mode-toggle i {
        font-size: 18px;
    }
}

/* Dark mode specific adjustments */
[data-theme="dark"] .hero {
    background: var(--bg-primary) !important;
}

/* Hero Section - Force text colors in dark mode */
[data-theme="dark"] .hero-title,
[data-theme="dark"] #hero-title,
[data-theme="dark"] .hero-content h1 {
    color: #ffffff !important;
}

[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] #hero-subtitle,
[data-theme="dark"] .hero-content p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .wave-path {
    stroke: #2d2d2d !important;
}

[data-theme="dark"] .btn-hero-primary,
[data-theme="dark"] .btn-hero-secondary {
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* About button - Orange background */
.btn-about,
#about-btn {
    background: #eb4d04 !important;
    background-color: #ff8c42 !important;
    color: #ffffff !important;
    border: none !important;
}

.btn-about:hover,
#about-btn:hover {
    background: #ff7a28 !important;
    background-color: #ff7a28 !important;
}

[data-theme="dark"] .btn-about,
[data-theme="dark"] #about-btn {
    background: #ff8c42 !important;
    background-color: #ff8c42 !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="dark"] .btn-about:hover,
[data-theme="dark"] #about-btn:hover {
    background: #ff7a28 !important;
    background-color: #ff7a28 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .progress-bar {
    background: var(--bg-tertiary) !important;
}

/* ========== ABOUT SECTION ========== */
[data-theme="dark"] .about {
    background: var(--bg-primary) !important;
}

/* Remove borders and backgrounds from About section */
[data-theme="dark"] .about-wrapper,
[data-theme="dark"] .about-content,
[data-theme="dark"] .about .container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .about-content,
[data-theme="dark"] .about-header {
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .about-label,
[data-theme="dark"] #about-label {
    color: #60a5fa !important;
}

[data-theme="dark"] .about-title,
[data-theme="dark"] #about-title {
    color: #ffffff !important;
}

[data-theme="dark"] .about-description,
[data-theme="dark"] #about-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .progress-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .progress-percentage {
    color: #60a5fa !important;
}

/* ========== PROJECTS SECTION ========== */
[data-theme="dark"] .projects {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] #projects-title,
[data-theme="dark"] .projects h2 {
    color: #ffffff !important;
}

[data-theme="dark"] #projects-subtitle,
[data-theme="dark"] .projects .section-header p {
    color: var(--text-secondary) !important;
}

/* Project Cards - Fully dark cards matching service cards */
[data-theme="dark"] .project-card {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .project-card:hover {
    background: var(--card-bg) !important;
    box-shadow: 0 8px 24px var(--shadow) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .project-card .project-image,
[data-theme="dark"] .project-card .project-img {
    background: var(--card-bg) !important;
}

[data-theme="dark"] .project-card img {
    opacity: 1 !important;
}

/* Dark background for text area - matching service cards */
[data-theme="dark"] .project-card .project-info,
[data-theme="dark"] .project-card .project-content,
[data-theme="dark"] .project-card .project-details {
    background: var(--card-bg) !important;
    padding: 20px !important;
}

[data-theme="dark"] .project-card h3,
[data-theme="dark"] .project-title,
[data-theme="dark"] .project-card .project-info h3,
[data-theme="dark"] .project-card .project-name {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .project-card p,
[data-theme="dark"] .project-description,
[data-theme="dark"] .project-card .project-info p,
[data-theme="dark"] .project-card .project-details p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .project-category,
[data-theme="dark"] .project-card .category,
[data-theme="dark"] .project-badge {
    background: var(--bg-tertiary) !important;
    color: #60a5fa !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .project-card .project-link,
[data-theme="dark"] .project-card a {
    color: #60a5fa !important;
}

[data-theme="dark"] .project-card .project-link:hover,
[data-theme="dark"] .project-card a:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .filter-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .filter-btn:hover {
    background: var(--bg-tertiary) !important;
    border-color: #60a5fa !important;
}

[data-theme="dark"] .filter-btn.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

/* ========== CONTACT SECTION ========== */
[data-theme="dark"] .contact {
    background: #07192b !important;
}

[data-theme="dark"] .contact h2,
[data-theme="dark"] .contact-title {
    color: #ffffff !important;
}

[data-theme="dark"] .contact p,
[data-theme="dark"] .contact-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .contact-info {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .contact-info h3,
[data-theme="dark"] .contact-info p,
[data-theme="dark"] .contact-info a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .contact-info i {
    color: #60a5fa !important;
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
    background: #07192b !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .contact-form button,
[data-theme="dark"] .btn-contact {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
}

/* ========== FOOTER SECTION ========== */
[data-theme="dark"] .footer {
    background: #07192b !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .footer h3,
[data-theme="dark"] #footer-company-name {
    color: #ffffff !important;
}

[data-theme="dark"] .footer p,
[data-theme="dark"] #footer-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .footer a,
[data-theme="dark"] .footer-links a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .footer a:hover,
[data-theme="dark"] .footer-links a:hover {
    color: #60a5fa !important;
}

[data-theme="dark"] .footer-bottom {
    background: #07192b !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #footer-copyright,
[data-theme="dark"] .footer-bottom p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .social-links a {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .social-links a:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

[data-theme="dark"] #footer-phone,
[data-theme="dark"] #footer-email,
[data-theme="dark"] #footer-address {
    color: var(--text-secondary) !important;
}

/* ========== HEADER/NAVIGATION ========== */
[data-theme="dark"] .header,
[data-theme="dark"] .navbar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Logo - Force white in dark mode */
[data-theme="dark"] .logo,
[data-theme="dark"] .logo a,
[data-theme="dark"] .logo span,
[data-theme="dark"] #site-logo {
    color: #ffffff !important;
}

/* Navigation Links - Override base styles for dark mode */
[data-theme="dark"] .nav-menu a,
[data-theme="dark"] .nav-menu ul li a,
[data-theme="dark"].scrolled .nav-menu a,
[data-theme="dark"].scrolled .nav-menu ul li a {
    color: #ffffff !important;
}

/* Desktop view - Force white navigation links in dark mode */
@media (min-width: 769px) {
    [data-theme="dark"] .nav-menu a,
    [data-theme="dark"] .nav-menu ul li a,
    [data-theme="dark"].scrolled .nav-menu a,
    [data-theme="dark"].scrolled .nav-menu ul li a {
        color: #ffffff !important;
    }
}

/* Mobile view - Revert to black text in dark mode */
@media (max-width: 768px) {
    [data-theme="dark"] .nav-menu a,
    [data-theme="dark"] .nav-menu ul li a,
    [data-theme="dark"].scrolled .nav-menu a,
    [data-theme="dark"].scrolled .nav-menu ul li a {
        color: #000000 !important;
    }
}

[data-theme="dark"] .nav-menu a:hover,
[data-theme="dark"] .nav-menu ul li a:hover {
    color: #60a5fa !important;
}

/* Hamburger Menu Icon - Force white in dark mode */
[data-theme="dark"] .menu-toggle,
[data-theme="dark"] .hamburger,
[data-theme="dark"] .mobile-menu-toggle,
[data-theme="dark"] .nav-toggle {
    color: #ffffff !important;
}

[data-theme="dark"] .menu-toggle span,
[data-theme="dark"] .hamburger span,
[data-theme="dark"] .mobile-menu-toggle span {
    background: #ffffff !important;
}

[data-theme="dark"] .menu-toggle i,
[data-theme="dark"] .hamburger i,
[data-theme="dark"] .mobile-menu-toggle i {
    color: #ffffff !important;
}

/* Dark Mode Toggle - Dark Theme Styles */
[data-theme="dark"] .dark-mode-toggle {
    background: #10b981 !important;
    border: 3px solid #10b981 !important;
}

[data-theme="dark"] .dark-mode-toggle i {
    color: #ffffff !important;
}

/* ========================================
   SHOP SECTION DARK MODE
   ======================================== */

/* Shop section background */
[data-theme="dark"] .shop-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Shop section title and subtitle */
[data-theme="dark"] #shop-title,
[data-theme="dark"] .shop-title-header {
    color: #d1d5db !important;
}

[data-theme="dark"] #shop-subtitle {
    color: #f9fafb !important;
}

/* Shop item cards */
[data-theme="dark"] .shop-item-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .shop-item-card:hover {
    background: #334155 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .shop-item-card h3,
[data-theme="dark"] .shop-item-card .item-name {
    color: #f9fafb !important;
}

[data-theme="dark"] .shop-item-card p,
[data-theme="dark"] .shop-item-card .item-description {
    color: #d1d5db !important;
}

[data-theme="dark"] .shop-item-card .item-price,
[data-theme="dark"] .shop-item-card .price {
    color: #10b981 !important;
}

/* Shop view all button */
[data-theme="dark"] .shop-view-all-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .shop-view-all-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
}

/* ========================================
   CONTACT SECTION DARK MODE
   ======================================== */

/* Contact section background */
[data-theme="dark"] .contact-section-new {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Contact section title and subtitle */
[data-theme="dark"] #contact-title-new,
[data-theme="dark"] .contact-title-new {
    color: #d1d5db !important;
}

[data-theme="dark"] #contact-subtitle-new,
[data-theme="dark"] .contact-subtitle-new {
    color: #f9fafb !important;
}

[data-theme="dark"] #contact-description-new,
[data-theme="dark"] .contact-description-new {
    color: #d1d5db !important;
}

/* Contact info cards */
[data-theme="dark"] .contact-info-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .contact-info-card:hover {
    background: #334155 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .contact-info-card h3,
[data-theme="dark"] .contact-info-card .info-title {
    color: #f9fafb !important;
}

[data-theme="dark"] .contact-info-card p,
[data-theme="dark"] .contact-info-card .info-text {
    color: #d1d5db !important;
}

[data-theme="dark"] .contact-info-card a {
    color: #10b981 !important;
}

[data-theme="dark"] .contact-info-card a:hover {
    color: #34d399 !important;
}

/* Contact form */
[data-theme="dark"] .contact-form,
[data-theme="dark"] .contact-form-wrapper {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .contact-form-title {
    color: #f9fafb !important;
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .form-group-new input,
[data-theme="dark"] .form-group-new textarea {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
    color: #9ca3af !important;
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus,
[data-theme="dark"] .contact-form select:focus {
    background: #1e293b !important;
    border-color: #10b981 !important;
}

[data-theme="dark"] .contact-form label {
    color: #d1d5db !important;
}

[data-theme="dark"] .contact-form button[type="submit"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .contact-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

/* ========================================
   FOOTER SECTION DARK MODE
   ======================================== */

/* Footer background */
[data-theme="dark"] .site-footer,
[data-theme="dark"] footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Footer text */
[data-theme="dark"] .site-footer,
[data-theme="dark"] .site-footer p,
[data-theme="dark"] .site-footer span,
[data-theme="dark"] .footer-text {
    color: #d1d5db !important;
}

/* Footer headings */
[data-theme="dark"] .site-footer h3,
[data-theme="dark"] .site-footer h4,
[data-theme="dark"] .footer-heading {
    color: #f9fafb !important;
}

/* Footer links */
[data-theme="dark"] .site-footer a,
[data-theme="dark"] .footer-link {
    color: #d1d5db !important;
}

[data-theme="dark"] .site-footer a:hover,
[data-theme="dark"] .footer-link:hover {
    color: #10b981 !important;
}

/* Footer social icons */
[data-theme="dark"] .social-icon {
    background: #1e293b !important;
    color: #f9fafb !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .social-icon:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

/* Footer bottom/copyright */
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .footer-copyright {
    background: #0a0f1a !important;
    border-top-color: #334155 !important;
    color: #9ca3af !important;
}

/* Newsletter form in footer */
[data-theme="dark"] .newsletter-form input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .newsletter-form input::placeholder {
    color: #9ca3af !important;
}

[data-theme="dark"] .newsletter-form button {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .newsletter-form button:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}