/* ============================================
   GLOBAL DARK MODE DESIGN SYSTEM
   ============================================
   Applies when: html[data-theme="dark"] or body.dark-mode
   
   Color Palette:
   - Background: #0a1628 (Very dark blue, almost black)
   - Surface: #0d1d33 (Slightly lighter for cards)
   - Border: #1e3a5f (Visible borders)
   - Text Primary: #f0f4f8 (Near white)
   - Text Secondary: #a0b3c6 (Muted text)
   - Accent: #29afe3 (Light blue)
   - Header BG: #004685 (Dark blue - FIXED for both modes)
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* Light Mode (Default) */
    --dm-bg-primary: #ffffff;
    --dm-bg-secondary: #f8f9fa;
    --dm-bg-surface: #ffffff;
    --dm-text-primary: #1a1a1a;
    --dm-text-secondary: #525252;
    --dm-text-muted: #737373;
    --dm-border: #e5e5e5;
    --dm-shadow: rgba(0, 0, 0, 0.1);

    /* Header Colors (Fixed for both modes) */
    --header-bg: #004685;
    --header-accent: #29afe3;
    --header-text: #ffffff;
}

/* Dark Mode Variables */
html[data-theme="dark"],
body.dark-mode {
    --dm-bg-primary: #0a1628;
    --dm-bg-secondary: #0d1d33;
    --dm-bg-surface: #0f2240;
    --dm-text-primary: #f0f4f8;
    --dm-text-secondary: #a0b3c6;
    --dm-text-muted: #6b8299;
    --dm-border: #1e3a5f;
    --dm-shadow: rgba(0, 0, 0, 0.4);
}

/* ============================================
   COMPACT HEADER & FOOTER LAYOUT (75% Width)
   ============================================ */

/* Header Compact Layout */
.header-style-1 .container,
.main-bar .container,
.sticky-header .container,
.site-header .container,
.header-nav .container {
    max-width: 75% !important;
    margin: 0 auto !important;
}

/* Footer Compact Layout */
#footer-main-section .container,
#footer-bottom-section .container,
.footer-top .container,
.footer-bottom .container,
footer .container {
    max-width: 75% !important;
    margin: 0 auto !important;
}

/* Tablet - 90% width */
@media (max-width: 1400px) {

    .header-style-1 .container,
    .main-bar .container,
    .sticky-header .container,
    .site-header .container,
    .header-nav .container,
    #footer-main-section .container,
    #footer-bottom-section .container,
    .footer-top .container,
    .footer-bottom .container,
    footer .container {
        max-width: 90% !important;
    }
}

/* Mobile - Full width */
@media (max-width: 991px) {

    .header-style-1 .container,
    .main-bar .container,
    .sticky-header .container,
    .site-header .container,
    .header-nav .container,
    #footer-main-section .container,
    #footer-bottom-section .container,
    .footer-top .container,
    .footer-bottom .container,
    footer .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================
   GLOBAL BODY STYLES
   ============================================ */
html[data-theme="dark"] body,
body.dark-mode {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   LIGHT MODE TEXT COLORS (Default)
   Ensures text is readable on light backgrounds
   ============================================ */

/* Main content text - Dark on light */
body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6,
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4,
html:not([data-theme="dark"]) h5,
html:not([data-theme="dark"]) h6 {
    color: #1a1a2e !important;
}

body:not(.dark-mode) p,
body:not(.dark-mode) span:not(.fa):not([class*="icon"]),
body:not(.dark-mode) li,
body:not(.dark-mode) td,
html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) span:not(.fa):not([class*="icon"]),
html:not([data-theme="dark"]) li,
html:not([data-theme="dark"]) td {
    color: #333333 !important;
}

/* Section titles in light mode */
body:not(.dark-mode) .section-head h2,
body:not(.dark-mode) .section-head .wt-title,
body:not(.dark-mode) .wt-tilte,
body:not(.dark-mode) .section-title,
html:not([data-theme="dark"]) .section-head h2,
html:not([data-theme="dark"]) .section-head .wt-title,
html:not([data-theme="dark"]) .wt-tilte,
html:not([data-theme="dark"]) .section-title {
    color: #1a1a2e !important;
}

/* Cards and boxes in light mode */
body:not(.dark-mode) .wt-box,
body:not(.dark-mode) .card,
body:not(.dark-mode) .widget,
body:not(.dark-mode) .service-box,
html:not([data-theme="dark"]) .wt-box,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .widget,
html:not([data-theme="dark"]) .service-box {
    background-color: #ffffff !important;
    color: #333333 !important;
}

body:not(.dark-mode) .wt-box h3,
body:not(.dark-mode) .wt-box h4,
body:not(.dark-mode) .card h3,
body:not(.dark-mode) .card h4,
html:not([data-theme="dark"]) .wt-box h3,
html:not([data-theme="dark"]) .wt-box h4,
html:not([data-theme="dark"]) .card h3,
html:not([data-theme="dark"]) .card h4 {
    color: #1a1a2e !important;
}

body:not(.dark-mode) .wt-box p,
body:not(.dark-mode) .card p,
html:not([data-theme="dark"]) .wt-box p,
html:not([data-theme="dark"]) .card p {
    color: #555555 !important;
}

/* Links in light mode */
body:not(.dark-mode) a:not(.nav>li>a):not(.site-button):not(.fa),
html:not([data-theme="dark"]) a:not(.nav>li>a):not(.site-button):not(.fa) {
    color: #004685 !important;
}

body:not(.dark-mode) a:hover:not(.nav>li>a):not(.site-button),
html:not([data-theme="dark"]) a:hover:not(.nav>li>a):not(.site-button) {
    color: #29afe3 !important;
}

/* Hero/Banner sections - Keep white text */
body:not(.dark-mode) .wt-bnr-inr h1,
body:not(.dark-mode) .wt-bnr-inr h2,
body:not(.dark-mode) .wt-bnr-inr p,
body:not(.dark-mode) .wt-bnr-inr .breadcrumb li,
body:not(.dark-mode) .wt-bnr-inr .breadcrumb a,
body:not(.dark-mode) .hero-section h1,
body:not(.dark-mode) .hero-section p,
html:not([data-theme="dark"]) .wt-bnr-inr h1,
html:not([data-theme="dark"]) .wt-bnr-inr h2,
html:not([data-theme="dark"]) .wt-bnr-inr p,
html:not([data-theme="dark"]) .wt-bnr-inr .breadcrumb li,
html:not([data-theme="dark"]) .wt-bnr-inr .breadcrumb a,
html:not([data-theme="dark"]) .hero-section h1,
html:not([data-theme="dark"]) .hero-section p {
    color: #ffffff !important;
}

/* Testimonials */
body:not(.dark-mode) .testimonial-5 .testimonial-text,
body:not(.dark-mode) .testimonial-5 .testimonial-name,
html:not([data-theme="dark"]) .testimonial-5 .testimonial-text,
html:not([data-theme="dark"]) .testimonial-5 .testimonial-name {
    color: #333333 !important;
}

/* Why Choose / Features sections */
body:not(.dark-mode) .wt-icon-box h4,
body:not(.dark-mode) .wt-icon-box p,
body:not(.dark-mode) .icon-content h4,
body:not(.dark-mode) .icon-content p,
html:not([data-theme="dark"]) .wt-icon-box h4,
html:not([data-theme="dark"]) .wt-icon-box p,
html:not([data-theme="dark"]) .icon-content h4,
html:not([data-theme="dark"]) .icon-content p {
    color: #333333 !important;
}

/* Products section */
body:not(.dark-mode) .product-box h3,
body:not(.dark-mode) .product-box p,
body:not(.dark-mode) .cleanroom-product-item h4,
body:not(.dark-mode) .cleanroom-product-item p,
html:not([data-theme="dark"]) .product-box h3,
html:not([data-theme="dark"]) .product-box p,
html:not([data-theme="dark"]) .cleanroom-product-item h4,
html:not([data-theme="dark"]) .cleanroom-product-item p {
    color: #1a1a2e !important;
}

/* Industries section */
body:not(.dark-mode) .industry-item h4,
body:not(.dark-mode) .industry-item p,
html:not([data-theme="dark"]) .industry-item h4,
html:not([data-theme="dark"]) .industry-item p {
    color: #333333 !important;
}

/* Blog/News */
body:not(.dark-mode) .blog-post h3,
body:not(.dark-mode) .blog-post p,
body:not(.dark-mode) .news-item h4,
body:not(.dark-mode) .news-item p,
html:not([data-theme="dark"]) .blog-post h3,
html:not([data-theme="dark"]) .blog-post p,
html:not([data-theme="dark"]) .news-item h4,
html:not([data-theme="dark"]) .news-item p {
    color: #333333 !important;
}

/* Contact forms */
body:not(.dark-mode) .contact-form label,
body:not(.dark-mode) .wt-form-group label,
html:not([data-theme="dark"]) .contact-form label,
html:not([data-theme="dark"]) .wt-form-group label {
    color: #333333 !important;
}

/* Services section */
body:not(.dark-mode) .service-box h4,
body:not(.dark-mode) .service-box p,
body:not(.dark-mode) .turnkey-item h4,
body:not(.dark-mode) .turnkey-item p,
html:not([data-theme="dark"]) .service-box h4,
html:not([data-theme="dark"]) .service-box p,
html:not([data-theme="dark"]) .turnkey-item h4,
html:not([data-theme="dark"]) .turnkey-item p {
    color: #333333 !important;
}

/* Welcome/About section */
body:not(.dark-mode) .welcome-block h2,
body:not(.dark-mode) .welcome-block p,
body:not(.dark-mode) .about-section h2,
body:not(.dark-mode) .about-section p,
html:not([data-theme="dark"]) .welcome-block h2,
html:not([data-theme="dark"]) .welcome-block p,
html:not([data-theme="dark"]) .about-section h2,
html:not([data-theme="dark"]) .about-section p {
    color: #333333 !important;
}

body:not(.dark-mode) .welcome-block h2,
body:not(.dark-mode) .about-section h2,
html:not([data-theme="dark"]) .welcome-block h2,
html:not([data-theme="dark"]) .about-section h2 {
    color: #1a1a2e !important;
}

/* ============================================
   HEADER (FIXED FOR BOTH MODES)
   ============================================ */
/* Header background - Dark Blue always */
.header-style-1,
.sticky-header,
.site-header,
.header-nav-bar,
.main-bar,
.header-middle {
    background-color: var(--header-bg) !important;
}

/* Header text - White always */
.header-style-1,
.header-style-1 *:not(.sub-menu):not(.sub-menu *),
.main-bar,
.header-nav-btn,
.header-nav-btn-link {
    color: var(--header-text) !important;
}

/* Navigation links */
.header-nav .nav>li>a,
.header-style-1 .nav>li>a {
    color: var(--header-text) !important;
}

.header-nav .nav>li>a:hover,
.header-nav .nav>li.active>a,
.header-style-1 .nav>li>a:hover {
    color: var(--header-accent) !important;
}

/* Logo text */
.wt-logo,
.logo-header .logo-header-inner,
.logo-header a {
    color: var(--header-text) !important;
}

/* Header accent elements */
.site-button,
.extra-nav .extra-cell .site-button {
    background-color: var(--header-accent) !important;
    color: #ffffff !important;
}

/* Dark mode toggle button styling */
.dark-mode-toggle-header {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--header-text) !important;
}

.dark-mode-toggle-header:hover {
    background: var(--header-accent) !important;
    border-color: var(--header-accent) !important;
}

/* Dropdown menus - Light mode (default) */
.header-nav .nav>li .sub-menu,
.nav-dark.header-nav .nav>li .sub-menu,
.nav-dark .nav>li .sub-menu {
    background-color: #004685 !important;
    /* Dark blue dropdown */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.header-nav .nav>li .sub-menu>li>a,
.nav-dark.header-nav .nav>li .sub-menu>li>a,
.nav-dark .nav>li .sub-menu>li>a,
.nav-dark.header-nav .nav>li .sub-menu li a {
    color: #ffffff !important;
    /* White text in dropdown */
    background-color: transparent !important;
}

.header-nav .nav>li .sub-menu>li>a:hover,
.nav-dark.header-nav .nav>li .sub-menu>li>a:hover,
.nav-dark .nav>li .sub-menu>li>a:hover,
.nav-dark.header-nav .nav>li .sub-menu li a:hover {
    background-color: #29afe3 !important;
    color: #ffffff !important;
}

/* Nav-dark submenu item borders */
.nav-dark.header-nav .nav>li .sub-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode dropdown overrides */
html[data-theme="dark"] .header-nav .nav>li .sub-menu,
body.dark-mode .header-nav .nav>li .sub-menu {
    background-color: #0d1d33 !important;
    border-color: #1e3a5f;
}

html[data-theme="dark"] .header-nav .nav>li .sub-menu>li>a,
body.dark-mode .header-nav .nav>li .sub-menu>li>a {
    color: #ffffff !important;
}

html[data-theme="dark"] .header-nav .nav>li .sub-menu>li>a:hover,
body.dark-mode .header-nav .nav>li .sub-menu>li>a:hover {
    background-color: #29afe3 !important;
    color: #ffffff !important;
}

/* Contact Slide-out Panel - Light Mode */
.contact-slide-hide,
.contact-nav {
    background-color: #ffffff !important;
}

.contact-nav-form,
.contact-info {
    background-color: #ffffff !important;
}

.contact-nav h4,
.contact-nav h5,
.contact-nav .section-head h4,
.contact-nav-form h4,
.contact-nav-form .section-head h4 {
    color: #1a1a2e !important;
}

.contact-nav p,
.contact-nav .icon-content p {
    color: #333333 !important;
}

/* Form labels - MUST be visible dark text */
.contact-nav label,
.contact-nav-form label,
.contact-nav .input-animate label,
.contact-nav-form .input-animate label,
.input-animate label {
    color: #333333 !important;
    font-weight: 500 !important;
}

/* Form inputs - Light background with dark text */
.contact-nav input,
.contact-nav textarea,
.contact-nav-form input,
.contact-nav-form textarea,
.contact-nav .input-animate input,
.contact-nav .input-animate textarea {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
    border: 1px solid #ccc !important;
    border-bottom: 2px solid #29afe3 !important;
}

.contact-nav input:focus,
.contact-nav textarea:focus {
    border-color: #29afe3 !important;
    box-shadow: 0 0 0 2px rgba(41, 175, 227, 0.2) !important;
}

.contact-nav input::placeholder,
.contact-nav textarea::placeholder {
    color: #888888 !important;
}

.contact_close {
    color: #1a1a2e !important;
}

/* Mobile nav - Light mode */
.mobile-sider-drawer-menu {
    background-color: #004685 !important;
}

.mobile-sider-drawer-menu .nav>li>a {
    color: #ffffff !important;
}

.mobile-sider-drawer-menu .nav>li>a:hover {
    color: #29afe3 !important;
}

/* Dark mode mobile nav */
html[data-theme="dark"] .mobile-sider-drawer-menu,
body.dark-mode .mobile-sider-drawer-menu {
    background-color: #0d1d33 !important;
}

/* Dark mode contact panel */
html[data-theme="dark"] .contact-slide-hide,
html[data-theme="dark"] .contact-nav,
html[data-theme="dark"] .contact-nav-form,
html[data-theme="dark"] .contact-info,
body.dark-mode .contact-slide-hide,
body.dark-mode .contact-nav,
body.dark-mode .contact-nav-form,
body.dark-mode .contact-info {
    background-color: #0d1d33 !important;
}

html[data-theme="dark"] .contact-nav h4,
html[data-theme="dark"] .contact-nav h5,
html[data-theme="dark"] .contact-nav .section-head h4,
body.dark-mode .contact-nav h4,
body.dark-mode .contact-nav h5,
body.dark-mode .contact-nav .section-head h4 {
    color: #ffffff !important;
}

html[data-theme="dark"] .contact-nav p,
html[data-theme="dark"] .contact-nav .icon-content p,
html[data-theme="dark"] .contact-nav label,
body.dark-mode .contact-nav p,
body.dark-mode .contact-nav .icon-content p,
body.dark-mode .contact-nav label {
    color: #d0d8e0 !important;
}

html[data-theme="dark"] .contact-nav input,
html[data-theme="dark"] .contact-nav textarea,
body.dark-mode .contact-nav input,
body.dark-mode .contact-nav textarea {
    background-color: #0a1628 !important;
    color: #ffffff !important;
    border: 1px solid #1e3a5f !important;
}

html[data-theme="dark"] .contact_close,
body.dark-mode .contact_close {
    color: #ffffff !important;
}

/* ============================================
   SECTIONS & CONTAINERS - ALTERNATING COLORS
   Creates visual separation between content sections
   ============================================ */

/* Base dark mode background */
html[data-theme="dark"] section,
body.dark-mode section,
html[data-theme="dark"] .section-full,
body.dark-mode .section-full,
html[data-theme="dark"] .p-t80,
body.dark-mode .p-t80,
html[data-theme="dark"] .p-t100,
body.dark-mode .p-t100,
html[data-theme="dark"] .p-b80,
body.dark-mode .p-b80 {
    background-color: var(--dm-bg-primary);
}

/* Alternating section colors for visual hierarchy */
/* Primary sections (odd) - Darker background */
html[data-theme="dark"] .bg-white,
body.dark-mode .bg-white {
    background-color: #0a1628 !important;
    /* Darkest blue */
}

/* Secondary sections (even) - Slightly lighter */
html[data-theme="dark"] .bg-gray,
body.dark-mode .bg-gray,
html[data-theme="dark"] .bg-gray-light,
body.dark-mode .bg-gray-light {
    background-color: #0d1d33 !important;
    /* Dark blue surface */
}

/* Tertiary accent sections - Subtle blue tint */
html[data-theme="dark"] .section-full.bg-gray,
body.dark-mode .section-full.bg-gray {
    background-color: #0f2240 !important;
    /* Richer dark blue */
    border-top: 1px solid rgba(41, 175, 227, 0.1);
    border-bottom: 1px solid rgba(41, 175, 227, 0.1);
}

/* Hero/Banner sections - Keep overlay effect */
html[data-theme="dark"] .wt-bnr-inr,
body.dark-mode .wt-bnr-inr {
    background-color: #001528 !important;
}

html[data-theme="dark"] .wt-bnr-inr .overlay-main,
body.dark-mode .wt-bnr-inr .overlay-main {
    background: linear-gradient(135deg, rgba(0, 21, 40, 0.9) 0%, rgba(0, 70, 133, 0.7) 100%) !important;
}

/* CTA/Call-to-action sections - Accent gradient background */
html[data-theme="dark"] .video-section-full,
body.dark-mode .video-section-full {
    background: linear-gradient(135deg, #0d1d33 0%, #0f2240 100%) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Timeline sections */
html[data-theme="dark"] .timeline-section,
body.dark-mode .timeline-section {
    background-color: #0d1d33 !important;
}

html[data-theme="dark"] .timeline-content,
body.dark-mode .timeline-content {
    background-color: #0f2240 !important;
    border-left: 3px solid var(--header-accent) !important;
}

/* Page content wrapper */
html[data-theme="dark"] .page-content,
body.dark-mode .page-content {
    background-color: var(--dm-bg-primary);
}

/* Testimonial sections */
html[data-theme="dark"] .testimonial-section,
body.dark-mode .testimonial-section {
    background-color: #0d1d33 !important;
}

/* Products/Services sections */
html[data-theme="dark"] .products-section,
html[data-theme="dark"] .cleanroom-products-section,
body.dark-mode .products-section,
body.dark-mode .cleanroom-products-section {
    background-color: #0f2240 !important;
}

/* Industries section */
html[data-theme="dark"] .industries-section,
body.dark-mode .industries-section {
    background-color: #0a1628 !important;
}

/* Contact/Form sections */
html[data-theme="dark"] .contact-section,
body.dark-mode .contact-section {
    background-color: #0d1d33 !important;
}

/* Welcome/About section */
html[data-theme="dark"] .welcome-section,
html[data-theme="dark"] .about-section,
body.dark-mode .welcome-section,
body.dark-mode .about-section {
    background-color: #0a1628 !important;
}

/* Icon box wrappers - Lighter surface for contrast */
html[data-theme="dark"] .wt-icon-box-wraper,
body.dark-mode .wt-icon-box-wraper {
    background-color: #0f2240 !important;
    border: 1px solid rgba(41, 175, 227, 0.15) !important;
    transition: all 0.3s ease;
}

html[data-theme="dark"] .wt-icon-box-wraper:hover,
body.dark-mode .wt-icon-box-wraper:hover {
    border-color: rgba(41, 175, 227, 0.4) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Tables in dark mode */
html[data-theme="dark"] .table,
body.dark-mode .table {
    background-color: #0f2240 !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #0d1d33 !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even),
body.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: #0a1628 !important;
}

/* Tab content */
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-pane,
body.dark-mode .tab-content,
body.dark-mode .tab-pane {
    background-color: #0f2240 !important;
}

html[data-theme="dark"] .nav-tabs li a,
body.dark-mode .nav-tabs li a {
    background-color: #0d1d33 !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .nav-tabs li.active a,
html[data-theme="dark"] .nav-tabs li a:hover,
body.dark-mode .nav-tabs li.active a,
body.dark-mode .nav-tabs li a:hover {
    background-color: var(--header-accent) !important;
    color: #ffffff !important;
}

/* ============================================
   TYPOGRAPHY - HIGH CONTRAST FOR VISIBILITY
   ============================================ */

/* Headings - Pure bright white for maximum visibility */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
html[data-theme="dark"] .wt-title,
html[data-theme="dark"] .wt-tilte,
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .section-head h2,
body.dark-mode .wt-title,
body.dark-mode .wt-tilte,
body.dark-mode .widget-title,
body.dark-mode .section-head h2 {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Heading links */
html[data-theme="dark"] h1 a,
html[data-theme="dark"] h2 a,
html[data-theme="dark"] h3 a,
html[data-theme="dark"] h4 a,
html[data-theme="dark"] h5 a,
html[data-theme="dark"] h6 a,
body.dark-mode h1 a,
body.dark-mode h2 a,
body.dark-mode h3 a,
body.dark-mode h4 a,
body.dark-mode h5 a,
body.dark-mode h6 a {
    color: #ffffff !important;
}

html[data-theme="dark"] h1 a:hover,
html[data-theme="dark"] h2 a:hover,
html[data-theme="dark"] h3 a:hover,
html[data-theme="dark"] h4 a:hover,
html[data-theme="dark"] h5 a:hover,
html[data-theme="dark"] h6 a:hover,
body.dark-mode h1 a:hover,
body.dark-mode h2 a:hover,
body.dark-mode h3 a:hover,
body.dark-mode h4 a:hover,
body.dark-mode h5 a:hover,
body.dark-mode h6 a:hover {
    color: #29afe3 !important;
}

/* Paragraphs and body text - Bright light gray for readability */
html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.fa):not([class*="icon"]),
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] label,
html[data-theme="dark"] .icon-content p,
html[data-theme="dark"] .icon-content,
html[data-theme="dark"] .testimonial-text,
html[data-theme="dark"] .widget-section li,
body.dark-mode p,
body.dark-mode span:not(.fa):not([class*="icon"]),
body.dark-mode li,
body.dark-mode td,
body.dark-mode label,
body.dark-mode .icon-content p,
body.dark-mode .icon-content,
body.dark-mode .testimonial-text,
body.dark-mode .widget-section li {
    color: #e8eef4 !important;
    /* Very bright - near white */
}

/* Additional paragraph elements for full coverage */
html[data-theme="dark"] .wt-box p,
html[data-theme="dark"] .section-content p,
html[data-theme="dark"] .about-section p,
html[data-theme="dark"] .service-detail p,
html[data-theme="dark"] .blog-post p,
html[data-theme="dark"] .welcome-block p,
html[data-theme="dark"] .m-b30,
html[data-theme="dark"] .m-b20,
html[data-theme="dark"] .text-gray,
body.dark-mode .wt-box p,
body.dark-mode .section-content p,
body.dark-mode .about-section p,
body.dark-mode .service-detail p,
body.dark-mode .blog-post p,
body.dark-mode .welcome-block p,
body.dark-mode .m-b30,
body.dark-mode .m-b20,
body.dark-mode .text-gray {
    color: #e8eef4 !important;
}

/* Strong/bold text - Pure white */
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] .text-black,
body.dark-mode strong,
body.dark-mode b,
body.dark-mode .text-black {
    color: #ffffff !important;
}

/* Section separators and accent text */
html[data-theme="dark"] .sep-line-one,
html[data-theme="dark"] .site-text-primary,
body.dark-mode .sep-line-one,
body.dark-mode .site-text-primary {
    color: #29afe3 !important;
}

/* Links - Bright accent blue */
html[data-theme="dark"] a,
body.dark-mode a {
    color: #29afe3 !important;
}

html[data-theme="dark"] a:hover,
body.dark-mode a:hover {
    color: #5dd4ff !important;
}

/* Read More links */
html[data-theme="dark"] .site-button-link,
body.dark-mode .site-button-link {
    color: #29afe3 !important;
}

html[data-theme="dark"] .site-button-link:hover,
body.dark-mode .site-button-link:hover {
    color: #ffffff !important;
}

/* ============================================
   CARDS & BOXES
   ============================================ */
html[data-theme="dark"] .wt-box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .blog-post,
html[data-theme="dark"] .testimonial-5,
html[data-theme="dark"] .pricing-table,
html[data-theme="dark"] .service-box,
body.dark-mode .wt-box,
body.dark-mode .card,
body.dark-mode .blog-post,
body.dark-mode .testimonial-5,
body.dark-mode .pricing-table,
body.dark-mode .service-box {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 20px var(--dm-shadow);
}

html[data-theme="dark"] .wt-box:hover,
body.dark-mode .wt-box:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* Icon boxes */
html[data-theme="dark"] .wt-icon-box-wraper,
body.dark-mode .wt-icon-box-wraper {
    background-color: var(--dm-bg-surface);
}

/* ============================================
   INNER PAGE BANNER
   ============================================ */
html[data-theme="dark"] .wt-bnr-inr,
body.dark-mode .wt-bnr-inr {
    background-color: var(--dm-bg-secondary);
}

html[data-theme="dark"] .wt-bnr-inr .wt-bnr-inr-entry h1,
body.dark-mode .wt-bnr-inr .wt-bnr-inr-entry h1 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .wt-bnr-inr .breadcrumb>li,
html[data-theme="dark"] .wt-bnr-inr .breadcrumb>li a,
body.dark-mode .wt-bnr-inr .breadcrumb>li,
body.dark-mode .wt-bnr-inr .breadcrumb>li a {
    color: var(--dm-text-secondary) !important;
}

/* ============================================
   FORMS
   ============================================ */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
html[data-theme="dark"] .site-button-secondry,
body.dark-mode .site-button-secondry {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .site-button-link,
body.dark-mode .site-button-link {
    color: var(--header-accent) !important;
}

/* ============================================
   SEPARATORS & BORDERS
   ============================================ */
html[data-theme="dark"] hr,
html[data-theme="dark"] .wt-divider,
body.dark-mode hr,
body.dark-mode .wt-divider {
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .wt-separator-outer .wt-separator,
body.dark-mode .wt-separator-outer .wt-separator {
    border-color: var(--dm-border);
}

/* ============================================
   ACCORDIONS
   ============================================ */
html[data-theme="dark"] .wt-accordion .acod-head a,
html[data-theme="dark"] .panel-heading,
body.dark-mode .wt-accordion .acod-head a,
body.dark-mode .panel-heading {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .wt-accordion .acod-body,
html[data-theme="dark"] .panel-body,
body.dark-mode .wt-accordion .acod-body,
body.dark-mode .panel-body {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
}

/* ============================================
   TABLES
   ============================================ */
html[data-theme="dark"] table,
body.dark-mode table {
    background-color: var(--dm-bg-surface);
}

html[data-theme="dark"] table thead th,
body.dark-mode table thead th {
    background-color: var(--header-bg) !important;
    color: var(--header-text) !important;
}

html[data-theme="dark"] table td,
html[data-theme="dark"] table th,
body.dark-mode table td,
body.dark-mode table th {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary);
}

/* ============================================
   FOOTER (FIXED FOR BOTH MODES - Like Header)
   ============================================ */
/* Footer Variables */
:root {
    --footer-bg: #001528;
    --footer-accent: #29afe3;
    --footer-text: #ffffff;
    --footer-text-secondary: rgba(255, 255, 255, 0.8);
}

/* Footer Main Background - Dark Blue Always */
.footer-dark,
footer,
#footer-main-section,
#footer-bottom-section,
.site-footer {
    background-color: var(--footer-bg) !important;
}

/* Footer Headings - White */
.footer-dark h1,
.footer-dark h2,
.footer-dark h3,
.footer-dark h4,
.footer-dark h5,
.footer-dark h6,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
#footer-main-section h1,
#footer-main-section h2,
#footer-main-section h3,
#footer-main-section h4,
#footer-main-section h5,
#footer-main-section h6,
.widget-title {
    color: var(--footer-text) !important;
}

/* Footer Text - White/Light */
.footer-dark p,
.footer-dark li,
.footer-dark span,
footer p,
footer li,
footer span,
#footer-main-section p,
#footer-main-section li,
.copyrights-text {
    color: var(--footer-text-secondary) !important;
}

/* Footer Links - White, Hover Light Blue */
.footer-dark a,
footer a,
#footer-main-section a,
.footer-link a {
    color: var(--footer-text) !important;
    transition: color 0.3s ease;
}

.footer-dark a:hover,
footer a:hover,
#footer-main-section a:hover,
.footer-link a:hover {
    color: var(--footer-accent) !important;
}

/* Footer Widget Title Underline */
#footer-main-section h4.widget-title::after,
.footer-dark .widget-title::after {
    background-color: var(--footer-accent) !important;
}

/* Footer Social Icons */
.footer-dark .social-icons li a,
footer .social-icons li a,
#footer-main-section .social-icons li a {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--footer-text) !important;
    background: transparent !important;
}

.footer-dark .social-icons li a:hover,
footer .social-icons li a:hover,
#footer-main-section .social-icons li a:hover {
    background-color: var(--footer-accent) !important;
    border-color: var(--footer-accent) !important;
    color: #ffffff !important;
}

/* Footer Bottom / Copyright Section */
#footer-bottom-section,
.footer-bottom {
    background-color: #003366 !important;
    /* Slightly darker for distinction */
}

#footer-bottom-section p,
#footer-bottom-section a,
.footer-bottom p,
.footer-bottom a {
    color: var(--footer-text-secondary) !important;
}

#footer-bottom-section a:hover,
.footer-bottom a:hover {
    color: var(--footer-accent) !important;
}

/* Footer Form Inputs */
footer input,
footer textarea,
.footer-dark input,
.footer-dark textarea {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--footer-text) !important;
}

footer input::placeholder,
footer textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Newsletter Button */
footer .site-button,
.footer-dark .site-button {
    background-color: var(--footer-accent) !important;
    color: #ffffff !important;
    border: none !important;
}

footer .site-button:hover,
.footer-dark .site-button:hover {
    background-color: #1a9fd4 !important;
}

/* ============================================
   WIDGETS
   ============================================ */
html[data-theme="dark"] .widget,
body.dark-mode .widget {
    background-color: var(--dm-bg-surface);
    border-color: var(--dm-border);
}

html[data-theme="dark"] .widget-title,
body.dark-mode .widget-title {
    color: var(--dm-text-primary) !important;
}

/* ============================================
   CONTACT SLIDE PANEL
   ============================================ */
html[data-theme="dark"] .contact-slide-hide,
body.dark-mode .contact-slide-hide {
    background-color: var(--dm-bg-secondary) !important;
}

html[data-theme="dark"] .contact-slide-hide h4,
html[data-theme="dark"] .contact-slide-hide p,
body.dark-mode .contact-slide-hide h4,
body.dark-mode .contact-slide-hide p {
    color: var(--dm-text-primary) !important;
}

/* ============================================
   QUICK CONTACT WIDGET
   ============================================ */
html[data-theme="dark"] .quick-contact-widget .quick-contact-toggle,
body.dark-mode .quick-contact-widget .quick-contact-toggle {
    background-color: var(--header-bg);
}

html[data-theme="dark"] .quick-contact-menu,
body.dark-mode .quick-contact-menu {
    background-color: var(--dm-bg-surface);
    border-color: var(--dm-border);
}

/* ============================================
   SCROLL TO TOP
   ============================================ */
html[data-theme="dark"] .scroltop,
body.dark-mode .scroltop {
    background-color: var(--header-accent);
    color: #ffffff;
}

/* ============================================
   PRELOADER
   ============================================ */
html[data-theme="dark"] .loading-area,
body.dark-mode .loading-area {
    background-color: var(--dm-bg-primary);
}

/* ============================================
   OWL CAROUSEL
   ============================================ */
html[data-theme="dark"] .owl-carousel .owl-nav button,
body.dark-mode .owl-carousel .owl-nav button {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .owl-carousel .owl-nav button:hover,
body.dark-mode .owl-carousel .owl-nav button:hover {
    background-color: var(--header-accent) !important;
    color: #ffffff !important;
}

/* ============================================
   IMAGES & OVERLAYS
   ============================================ */
html[data-theme="dark"] .overlay-main,
body.dark-mode .overlay-main {
    background-color: rgba(10, 22, 40, 0.85);
}

/* ============================================
   SECTION-SPECIFIC OVERRIDES
   ============================================ */

/* Who We Are Section */
html[data-theme="dark"] #who-we-are-section,
body.dark-mode #who-we-are-section {
    background-color: var(--dm-bg-secondary) !important;
}

/* Industries Section */
html[data-theme="dark"] #industries-we-serve-section,
body.dark-mode #industries-we-serve-section {
    background-color: var(--dm-bg-primary) !important;
}

/* Turnkey Services - Already has custom dark styles */
html[data-theme="dark"] #turnkey-services-section,
body.dark-mode #turnkey-services-section {
    background-color: var(--dm-bg-secondary) !important;
}

/* Why Choose PakGusu - Already dark, keep as is */

/* Latest News Section */
html[data-theme="dark"] #latest-news-section,
body.dark-mode #latest-news-section {
    background-color: var(--dm-bg-primary) !important;
}

/* Testimonials */
html[data-theme="dark"] #testimonials-section,
body.dark-mode #testimonials-section {
    background-color: var(--dm-bg-secondary) !important;
}

/* Cleanroom Products */
html[data-theme="dark"] #cleanroom-products-section,
body.dark-mode #cleanroom-products-section {
    background-color: var(--dm-bg-primary) !important;
}

/* ============================================
   UTILITIES
   ============================================ */
html[data-theme="dark"] .text-dark,
body.dark-mode .text-dark {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .bg-dark,
body.dark-mode .bg-dark {
    background-color: var(--dm-bg-secondary) !important;
}

html[data-theme="dark"] .border,
body.dark-mode .border {
    border-color: var(--dm-border) !important;
}