/* Google Maps dark mode styling moved to /css/Pages/google_map_dark_mode.css */

/* Dark Mode Styles - Automatically applies when user has dark mode enabled */
@media (prefers-color-scheme: dark) {
  
  /* ================== ROOT VARIABLES FOR DARK MODE ================== */
  :root {
    --primary-color: #4a9eff;           /* Lighter blue for better contrast */
    --secondary-color: #66b3ff;         /* Lighter secondary blue */
    --accent-color: #ffaa33;            /* Lighter orange for better visibility */
    --dark-color: #e0e0e0;              /* Light text for dark backgrounds */
    --darker-color: #f5f5f5;            /* Even lighter text */
    --light-color: #2a2a2a;             /* Dark background for "light" sections */
    --text-color: #d0d0d0;              /* Light gray text */
    --white-color: #1a1a1a;             /* Dark background instead of white */
    --border-color: #404040;            /* Darker borders */
    --box-shadow: 0 4px 15px rgba(0,0,0,.3); /* Darker shadows */
  }

  /* ================== BODY AND BASE ELEMENTS ================== */
  body {
    background: #121212 !important;     /* Dark background */
    color: #e0e0e0 !important;          /* Light text */
  }

  /* ================== HEADINGS ================== */
  h1, h2, h3, h4, h5, h6 {
    color: #f5f5f5 !important;          /* Very light text for headings */
  }

  /* ================== LINKS ================== */
  a {
    color: var(--primary-color) !important;
  }
  
  a:hover {
    color: var(--accent-color) !important;
  }

  /* ================== NAVIGATION ================== */
  .header {
    background: rgba(18, 18, 18, 0.95) !important; /* Dark header */
    border-bottom: 1px solid #333 !important;
  }

  .header.scrolled {
    background: #121212 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.3) !important;
  }

  .logo {
    color: var(--primary-color) !important;
  }

  .logo .logo-en {
    color: #b0b0b0 !important;
  }

  .nav-link {
    color: #e0e0e0 !important;
  }

  .nav-link:hover, .nav-link.active {
    color: var(--primary-color) !important;
  }

  .hamburger .bar {
    background: #e0e0e0 !important;
  }

  /* ================== DROPDOWNS ================== */
  .submenu {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.5) !important;
  }

  .submenu li a {
    color: #e0e0e0 !important;
  }

  .submenu li a:hover {
    background: #2a2a2a !important;
    color: var(--primary-color) !important;
  }

  /* ================== MOBILE MENUS ================== */
  .nav-menu {
    background: #121212 !important;
    border-right: 1px solid #333 !important;
  }

  .mobile-secondary-menu, .mobile-lang-menu {
    background: #121212 !important;
  }

  .secondary-header, .lang-header {
    background: #121212 !important;
    border-bottom: 1px solid #333 !important;
  }

  .secondary-header h3, .lang-header h3 {
    color: #e0e0e0 !important;
  }

  .back-btn {
    color: var(--primary-color) !important;
  }

  .secondary-items li, .lang-items li {
    border-bottom: 1px solid #333 !important;
  }

  .secondary-items a, .lang-items a {
    color: #e0e0e0 !important;
  }

  .secondary-items a:hover, .lang-items a:hover {
    background: #2a2a2a !important;
  }

  /* ================== HERO SECTIONS ================== */
  .hero-section {
    /* Preserve background images but add darker overlay for better text contrast */
  }

  .hero-section .hero-overlay {
    background: linear-gradient(120deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%) !important;
  }

  .hero-title {
    color: #f5f5f5 !important;
  }

  .hero-subtitle {
    color: #d0d0d0 !important;
  }

  /* ================== SECTIONS AND BACKGROUNDS ================== */
  .bg-light {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .bg-dark {
    background: #0a0a0a !important;
    color: #f5f5f5 !important;
  }

  .bg-darker {
    background: #000000 !important;
    color: rgba(255,255,255,.9) !important;
  }

  .section-padding {
    background: #121212 !important;
  }

  /* ================== CARDS AND CONTAINERS ================== */
  .glass-card, .card, .product-card, .service-card, .project-card, .testimonial-card {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
  }

  .glass-card:hover, .card:hover, .product-card:hover, .service-card:hover, .project-card:hover {
    background: #222222 !important;
    border-color: #444 !important;
  }

  /* ================== PRODUCT HIGHLIGHTS SECTION ================== */
  .products-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .products-row-scroll {
    background: transparent !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
    scrollbar-color: #555 #2a2a2a !important;
  }

  /* Enhanced scrollbar for dark mode */
  .products-row-scroll::-webkit-scrollbar {
    height: 8px !important;
    background: #2a2a2a !important;
    border-radius: 4px !important;
  }

  .products-row-scroll::-webkit-scrollbar-thumb {
    background: #555 !important;
    border-radius: 4px !important;
    transition: background 0.3s ease !important;
  }

  .products-row-scroll::-webkit-scrollbar-thumb:hover {
    background: #777 !important;
  }

  .products-row-scroll::-webkit-scrollbar-track {
    background: #1a1a1a !important;
    border-radius: 4px !important;
  }

  /* Only target product cards in the products section/home page */
  .products-section .product-card,
  .products-row-scroll .product-card,
  #products .product-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    flex: 0 0 340px !important;
    max-width: 340px !important;
    min-width: 260px !important;
    scroll-snap-align: start !important;
  }

  .products-section .product-card:hover,
  .products-row-scroll .product-card:hover,
  #products .product-card:hover {
    background: #333333 !important;
    border-color: #555 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
    transform: translateY(-5px) !important;
  }

  /* Mobile responsive scrolling for dark mode */
  @media (max-width: 900px) {
    .products-row-scroll {
      gap: 20px !important;
    }
    .products-section .product-card,
    .products-row-scroll .product-card,
    #products .product-card {
      flex: 0 0 80vw !important;
      max-width: 90vw !important;
      min-width: 220px !important;
    }
  }

  @media (max-width: 600px) {
    .products-row-scroll {
      gap: 12px !important;
    }
    .products-section .product-card,
    .products-row-scroll .product-card,
    #products .product-card {
      flex: 0 0 92vw !important;
      max-width: 98vw !important;
      min-width: 180px !important;
    }
  }

  .products-section .product-title,
  .products-row-scroll .product-title,
  #products .product-title {
    color: #f5f5f5 !important;
  }

  .products-section .product-card p,
  .products-row-scroll .product-card p,
  #products .product-card p {
    color: #d0d0d0 !important;
  }

  .product-link {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid var(--primary-color) !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
  }

  .product-link:hover {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(74, 159, 255, 0.3) !important;
  }

  /* More specific targeting for product card buttons */
  .product-card .product-link,
  .product-card a[class*="product-link"],
  .products-section .product-link {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid var(--primary-color) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    width: auto !important;
    min-width: 120px !important;
  }

  .product-card .product-link:hover,
  .product-card a[class*="product-link"]:hover,
  .products-section .product-link:hover {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(74, 159, 255, 0.3) !important;
  }

  /* Force all child elements to be white */
  .product-link *,
  .product-card .product-link *,
  .products-section .product-link * {
    color: #ffffff !important;
  }

  /* Reset styles for links in product category pages */
  .product-page .product-link,
  .product-page .product-link:hover {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    color: inherit !important;
  }

  .product-page .product-link *,
  .product-page .product-link:hover * {
    color: inherit !important;
  }

  /* Ensure product names are white in dark mode */
  .product-page .product-name {
    color: #ffffff !important;
  }

  /* Ultra-specific targeting for any link elements in product cards */
  .products-section .product-card a,
  .products-row-scroll .product-card a,
  .product-card a[data-i18n*="learn_more"],
  a[data-i18n="learn_more"] {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid var(--primary-color) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    min-width: 120px !important;
  }

  .products-section .product-card a:hover,
  .products-row-scroll .product-card a:hover,
  .product-card a[data-i18n*="learn_more"]:hover,
  a[data-i18n="learn_more"]:hover {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(74, 159, 255, 0.3) !important;
  }

  /* Nuclear option: override any text color in product links */
  .products-section a,
  .products-section a *,
  .product-card a,
  .product-card a * {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  /* Override primary color specifically for product section */
  .products-section {
    --primary-color: #4a9eff !important;
  }

  /* Ensure all buttons in products section use blue background */
  .products-section .btn,
  .products-section a.btn,
  .products-section .product-link,
  .products-section a[class*="link"] {
    background: #4a9eff !important;
    color: #ffffff !important;
    border-color: #4a9eff !important;
  }

  .products-section .btn:hover,
  .products-section a.btn:hover,
  .products-section .product-link:hover,
  .products-section a[class*="link"]:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
  }

  /* FORCE visible white text on all product buttons - ULTIMATE OVERRIDE */
  .products-section .product-card a,
  .product-card .product-link,
  .products-row-scroll a,
  .products-section a[data-i18n="learn_more"],
  .product-card a[data-i18n="learn_more"],
  .products-section .product-card .product-link,
  section[id="products"] .product-card a,
  section[id="products"] a {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid #4a9eff !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    min-width: 120px !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  /* Force ALL nested elements inside buttons to be white */
  .products-section .product-card a *,
  .product-card .product-link *,
  .products-row-scroll a *,
  .products-section a[data-i18n="learn_more"] *,
  .product-card a[data-i18n="learn_more"] *,
  section[id="products"] .product-card a *,
  section[id="products"] a * {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  /* FINAL NUCLEAR OPTION - Target by exact HTML structure */
  section#products .product-card a,
  section#products .products-row-scroll .product-card a,
  #products .product-card a,
  #products .products-row-scroll .product-card a {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid #4a9eff !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-align: center !important;
    min-width: 120px !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  /* Ensure text is visible on hover too */
  section#products .product-card a:hover,
  section#products .products-row-scroll .product-card a:hover,
  #products .product-card a:hover,
  #products .products-row-scroll .product-card a:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(74, 159, 255, 0.3) !important;
  }

  /* ================== BUTTONS ================== */
  .btn-primary {
    background: var(--accent-color) !important;
    color: #000 !important;
    border: none !important;
  }

  .btn-primary:hover {
    background: #ff9900 !important;
    color: #000 !important;
  }

  .btn-secondary {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
  }

  .btn-secondary:hover {
    background: var(--primary-color) !important;
    color: #000 !important;
  }

  /* ================== FORMS ================== */
  input, textarea, select {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  input:focus, textarea:focus, select:focus {
    border-color: var(--primary-color) !important;
    background: #222222 !important;
  }

  input::placeholder, textarea::placeholder {
    color: #888 !important;
  }

  /* ================== CUSTOM FORM ELEMENTS ================== */
  .custom-select-trigger {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  .custom-select-trigger:hover {
    border-color: var(--primary-color) !important;
    background: #222222 !important;
  }

  .custom-options {
    background: #1a1a1a !important;
    border: 1px solid #444 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
  }

  .custom-option {
    color: #e0e0e0 !important;
    background: #1a1a1a !important;
  }

  .custom-option:hover {
    background: #2a2a2a !important;
    color: #f5f5f5 !important;
  }

  .custom-option.selected {
    background: var(--primary-color) !important;
    color: #fff !important;
  }

  .custom-file-label {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  .custom-file-label:hover {
    border-color: var(--primary-color) !important;
    background: #222222 !important;
  }

  /* ================== FORM LABELS AND TEXT ================== */
  label {
    color: #e0e0e0 !important;
  }

  .form-group label {
    color: #e0e0e0 !important;
  }

  /* ================== FOOTER ================== */
  .footer {
    background: #0a0a0a !important;
    color: #d0d0d0 !important;
    border-top: 1px solid #333 !important;
  }

  .footer-title {
    color: #f5f5f5 !important;
  }

  .footer-links a {
    color: #b0b0b0 !important;
  }

  .footer-links a:hover {
    color: var(--primary-color) !important;
  }

  .footer-bottom {
    background: #000000 !important;
    border-top: 1px solid #222 !important;
  }

  .footer-bottom-links a {
    color: #888 !important;
  }

  .footer-bottom-links a:hover {
    color: var(--primary-color) !important;
  }

  /* ================== PRODUCT PAGES ================== */
  .sidebar {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
  }
  
  .sidebar.is-stuck {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; /* Darker shadow in dark mode */
  }
  
  /* Dark mode scrollbar for sidebar */
  .sidebar::-webkit-scrollbar-track {
    background: #2a2a2a !important;
  }
  
  .sidebar::-webkit-scrollbar-thumb {
    background: #555 !important;
  }
  
  .sidebar::-webkit-scrollbar-thumb:hover {
    background: #4a9eff !important; /* Use dark mode primary color */
  }

  .filter-section {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
  }

  .filter-title {
    color: #e0e0e0 !important;
    background: #1a1a1a !important;
  }

  .filter-title:hover {
    background: #222222 !important;
  }

  .filter-list {
    background: #1a1a1a !important;
  }

  .filter-list li {
    color: #d0d0d0 !important;
    background: #222222 !important;
    border: 1px solid #333 !important;
  }

  .filter-list li:hover {
    background: #2a2a2a !important;
    border-color: #444 !important;
  }

  .filter-list li.active {
    background: var(--primary-color) !important;
    color: #000 !important;
  }

  .product-item {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
  }

  .product-name {
    color: #e0e0e0 !important;
  }

  .product-item:hover {
    background: #222222 !important;
    border-color: #444 !important;
  }

  .product-info {
    color: #b0b0b0 !important;
  }

  .product-item .overlay {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #f5f5f5 !important;
  }

  .tag-bar .tag {
    background: var(--primary-color) !important;
    color: #000 !important;
  }

  .tag-bar .clear-all {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
  }

  .tag-bar .clear-all:hover {
    background: var(--primary-color) !important;
    color: #000 !important;
  }

  /* ================== TABLES ================== */
  table {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  th {
    background: #2a2a2a !important;
    color: #f5f5f5 !important;
    border-bottom: 2px solid #444 !important;
  }

  td {
    border-bottom: 1px solid #333 !important;
  }

  tr:hover {
    background: #222222 !important;
  }

  /* ================== TESTIMONIALS AND QUOTES ================== */
  blockquote {
    background: #1a1a1a !important;
    border-left: 4px solid var(--primary-color) !important;
    color: #d0d0d0 !important;
  }

  .testimonial-card:before {
    color: var(--accent-color) !important;
    opacity: 0.4 !important;
  }

  .testimonial-card h5 {
    color: var(--secondary-color) !important;
  }

  /* ================== CONTACT FORMS ================== */
  .contact-section {
    background: #121212 !important;
  }

  .contact-form {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
  }

  /* ================== SCROLLBAR STYLING ================== */
  ::-webkit-scrollbar {
    width: 8px;
    background: #1a1a1a;
  }

  ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* ================== SELECTION COLORS ================== */
  ::selection {
    background: var(--primary-color);
    color: #000;
  }

  ::-moz-selection {
    background: var(--primary-color);
    color: #000;
  }

  /* ================== BORDERS AND DIVIDERS ================== */
  hr {
    border-color: #333 !important;
  }

  .border {
    border-color: #333 !important;
  }

  /* ================== SPECIAL SECTIONS ================== */
  .about-section, .services-section, .projects-section, .contact-section {
    background: #121212 !important;
  }

  .about-text, .service-description, .project-description, .product-description p {
    color: #d0d0d0 !important;
  }

  .pillar-card p, .story-slide blockquote, .metric-label {
    color: #b0b0b0 !important;
  }

  .tarkett-vinyl-section, .pvc-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .tv-heading, .tv-heading1, .pvc-section h2 {
    color: #f5f5f5 !important;
  }

  .tv-paragraph, .pvc-box p, .pvc-stats p {
    color: #d0d0d0 !important;
  }

  .pvc-circular-link {
    color: var(--accent-color) !important;
  }

  .pvc-box {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
  }

  .pvc-box p {
    color: #e0e0e0 !important;
  }

  .pvc-box strong {
    color: #f5f5f5 !important;
  }

  .pvc-small-print {
    color: #b0b0b0 !important;
  }

  .pvc-stats {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
  }

  .pvc-stats h3 {
    color: #f5f5f5 !important;
  }

  /* ================== TEAM CARDS ================== */
  .team-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .team-name {
    color: #f5f5f5 !important;
  }

  .team-role {
    color: var(--accent-color) !important;
  }

  .team-bio {
    color: #d0d0d0 !important;
  }

  /* ================== TIMELINE CARDS ================== */
  .timeline-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .timeline-card p {
    color: #d0d0d0 !important;
  }

  /* ================== HORIZONTAL TIMELINE SPECIFIC ================== */
  .timeline-wrapper .timeline-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .timeline-wrapper .timeline-card p {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  .timeline-wrapper .timeline-card::before {
    background: linear-gradient(90deg, var(--accent-color), #ff8c00) !important;
  }

  /* ================== TIMELINE NAVIGATION ================== */
  .timeline-nav {
    background: #2a2a2a !important;
    border: 2px solid var(--accent-color) !important;
    color: #e0e0e0 !important;
  }

  .timeline-nav:hover {
    background: var(--accent-color) !important;
    color: #000 !important;
  }

  .timeline-dots .timeline-dot {
    background: #444 !important;
  }

  .timeline-dots .timeline-dot.active {
    background: var(--accent-color) !important;
  }

  /* ================== CORE SERVICES PAGE ================== */
  .brand-story, .services-section, .process-section, .industries-section, .projects-section, .testimonials-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .story-text p, .lead-text, .service-text p, .timeline-content p {
    color: #d0d0d0 !important;
  }

  .story-text h2, .service-text h3, .timeline-content h3 {
    color: #f5f5f5 !important;
  }

  .founder-quote {
    background: #2a2a2a !important;
    border-left: 4px solid var(--accent-color) !important;
    color: #d0d0d0 !important;
  }

  .founder-quote cite {
    color: var(--accent-color) !important;
  }

  .service-benefits li {
    color: #d0d0d0 !important;
    border-bottom: 1px solid #444 !important;
  }

  /* ================== PROCESS SECTION & TIMELINE ================== */
  .process-timeline::before {
    background: var(--accent-color) !important;
  }

  .timeline-item {
    color: #e0e0e0 !important;
  }

  .timeline-number {
    color: var(--accent-color) !important;
    opacity: 0.8 !important;
  }

  .timeline-content {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  }

  .timeline-content:hover {
    background: #333333 !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
  }

  .timeline-content h3 {
    color: #f5f5f5 !important;
  }

  .timeline-content p {
    color: #d0d0d0 !important;
  }

  /* ================== PROCESS SECTION TITLES ================== */
  .process-section h2, .process-section .section-title {
    color: #f5f5f5 !important;
  }

  .process-section .section-title::after {
    background: var(--accent-color) !important;
  }

  .industry-overlay, .project-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #f5f5f5 !important;
  }

  .industry-overlay h3, .project-overlay h3 {
    color: #f5f5f5 !important;
  }

  .industry-overlay p, .project-overlay p {
    color: #d0d0d0 !important;
  }

  /* ================== MISSION AND VISION CARDS ================== */
  .mission-step {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .mission-step h3 {
    color: #f5f5f5 !important;
  }

  .mission-step p {
    color: #d0d0d0 !important;
  }

  .mission-icon {
    background: #1a1a1a !important;
    border: 2px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
  }

  /* ================== FEATURES SECTION WITH WAREHOUSE BACKGROUND ================== */
  .features-section {
    background: linear-gradient(120deg, 
      rgba(0,0,0,0.45) 0%, 
      rgba(26,26,26,0.35) 50%,
      rgba(42,42,42,0.45) 100%),
      url('/image/About_us/Warehouse.jpg') center center/cover no-repeat !important;
  }

  .features-section .section-title {
    color: #f5f5f5 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
  }

  .features-section .section-title::after {
    background: var(--accent-color) !important;
  }

  .feature-step {
    background: rgba(26,26,26,0.9) !important;
    border: 1px solid rgba(255,152,0,0.4) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    color: #f5f5f5 !important;
  }

  .feature-step:hover {
    background: rgba(26,26,26,0.95) !important;
    border: 1px solid rgba(255,152,0,0.7) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.7) !important;
    transform: translateY(-10px) !important;
  }

  .feature-step h4 {
    color: #f5f5f5 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
  }

  .feature-step p {
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
  }

  .feature-icon {
    background: rgba(0,0,0,0.8) !important;
    border: 2px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  }

  .feature-step:hover .feature-icon {
    background: rgba(255,152,0,0.1) !important;
    border: 2px solid var(--accent-color) !important;
    box-shadow: 0 12px 32px rgba(255,152,0,0.4) !important;
    transform: scale(1.1) !important;
  }

  /* ================== SECTION TAGS AND LABELS ================== */
  .section-tag {
    color: #000 !important;
    background: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }

  .process-section .section-tag {
    color: #000 !important;
    background: var(--accent-color) !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
  }

  /* ================== CTA SECTIONS ================== */
  .cta-section, .redesigned-cta {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    color: #f5f5f5 !important;
  }

  .cta-section h2, .redesigned-cta h2 {
    color: #f5f5f5 !important;
  }

  .cta-text {
    color: #d0d0d0 !important;
  }

  /* ================== GENERAL TEXT ELEMENTS ================== */
  p, .text-content, .description {
    color: #d0d0d0 !important;
  }

  .lead-text, .subtitle {
    color: #b0b0b0 !important;
  }

  .section-subtitle {
    color: #b0b0b0 !important;
  }

  /* ================== VALUE SECTIONS STYLING ================== */
  .value-description {
    color: var(--primary-color) !important;
  }

  .value-details p {
    color: #d0d0d0 !important;
  }

  .value-item {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .value-item:hover {
    background: #333333 !important;
    border-color: #555 !important;
  }

  .value-item h4 {
    color: #f5f5f5 !important;
  }

  .value-item h4 i {
    color: var(--accent-color) !important;
  }

  .value-item p {
    color: #d0d0d0 !important;
  }

  /* ================== SPECIFIC PAGE ELEMENTS ================== */
  .pillar-title, .story-author {
    color: #f5f5f5 !important;
  }

  .story-slide {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
  }

  .story-slide blockquote {
    color: #d0d0d0 !important;
  }

  /* ================== HOVER STATES ================== */
  .team-card:hover, .timeline-card:hover, .mission-step:hover, .feature-step:hover {
    background: #333333 !important;
    border-color: #555 !important;
  }

  /* ================== IMAGES ================== */
  img {
    transition: opacity 0.3s ease;
  }

  img:hover {
    opacity: 1;
  }

  /* ================== MOBILE RESPONSIVE ADJUSTMENTS ================== */
  @media (max-width: 768px) {
    .hero-section .hero-overlay {
      background: linear-gradient(120deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%) !important;
    }
    
    .nav-menu {
      background: #0a0a0a !important;
      border: 1px solid #333 !important;
    }
  }

  /* ================== PROCESS TIMELINE SPECIFIC ================== */
  .process-timeline .timeline-item {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
  }

  .process-timeline .timeline-content {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
  }

  .process-timeline .timeline-content h3 {
    color: #f5f5f5 !important;
  }

  .process-timeline .timeline-content p {
    color: #e0e0e0 !important;
  }

  /* ================== TESTIMONIAL CARDS AND CONTENT ================== */
  .testimonial-item, .testimonial-card, .story-slide {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .testimonial-item blockquote, .testimonial-card blockquote {
    color: #e0e0e0 !important;
    background: transparent !important;
  }

  .testimonial-author, .story-author {
    color: var(--accent-color) !important;
  }

  .testimonial-image img {
    border: 2px solid #444 !important;
  }

  /* ================== SECTION HEADINGS WITH BACKGROUNDS ================== */
  .industries-showcase h2, .projects-showcase h2, .testimonials-showcase h2, 
  .process-section h2, .industries-section h2, .projects-section h2 {
    background: transparent !important;
    color: #f5f5f5 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* ================== INDUSTRY AND PROJECT ITEMS ================== */
  .industry-item, .project-item {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
  }

  .industry-item h3, .project-item h3 {
    color: #f5f5f5 !important;
  }

  .industry-item p, .project-item p {
    color: #d0d0d0 !important;
  }

  /* ================== SHOWCASE SECTIONS ================== */
  .industries-showcase, .projects-showcase, .testimonials-showcase {
    background: #1a1a1a !important;
  }

  /* ================== SERVICE FEATURES ================== */
  .service-feature {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .service-feature h3 {
    color: #f5f5f5 !important;
  }

  .service-feature p {
    color: #d0d0d0 !important;
  }

  .service-benefits {
    color: #d0d0d0 !important;
  }

  .service-benefits li {
    color: #d0d0d0 !important;
  }

  /* ================== ADDITIONAL TEXT ELEMENTS ================== */
  cite {
    color: var(--accent-color) !important;
  }

  .client-name, .author-name {
    color: var(--accent-color) !important;
  }

  .client-role, .author-role {
    color: #b0b0b0 !important;
  }

  /* ================== CORE SERVICES SPECIFIC ELEMENTS ================== */
  .testimonials-content, .industries-content, .projects-content {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  /* ================== PILLAR CARDS SPECIFIC ================== */
  .pillar-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .pillar-card h3, .pillar-title {
    color: #f5f5f5 !important;
  }

  .pillar-card p {
    color: #e0e0e0 !important;
  }

  .pillar-icon {
    background: #1a1a1a !important;
    border: 2px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
  }

  /* ================== CTA BUTTONS SPECIFIC ================== */
  .btn-light {
    background: #f5f5f5 !important;
    color: #1a1a1a !important;
    border: 1px solid #f5f5f5 !important;
  }

  .btn-light:hover {
    background: var(--accent-color) !important;
    color: #000 !important;
    border-color: var(--accent-color) !important;
  }

  /* ================== WHY US PAGE SPECIFIC ================== */
  .pillars-section {
    background: #1a1a1a !important;
  }

  .pillar-grid {
    background: transparent !important;
  }

  /* ================== UPDATES SECTION ================== */
  .updates-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .update-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
  }

  .update-card:hover {
    background: #333333 !important;
    border-color: #555 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
  }

  .update-icon {
    background: linear-gradient(135deg, var(--primary-color), #4a9eff) !important;
    color: #fff !important;
  }

  .update-title {
    color: var(--primary-color) !important;
  }

  .update-card p {
    color: #d0d0d0 !important;
  }

  .updates-grid .update-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
  }

  .updates-grid .update-card:hover {
    background: #333333 !important;
    border-color: #555 !important;
  }

  /* ================== LOCATION & MAP SECTION ================== */
  .location-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .map-container {
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  }

  /* Google Maps styling handled by dedicated CSS file: /css/Pages/google_map_dark_mode.css */

  .map-overlay {
    background: rgba(26,26,26,0.9) !important;
    border: 1px solid #444 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .map-info h4 {
    color: var(--primary-color) !important;
  }

  .map-info h4 i {
    color: var(--accent-color) !important;
  }

  .map-info p {
    color: #d0d0d0 !important;
  }

  .directions-btn {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid var(--primary-color) !important;
    font-weight: 600 !important;
  }

  .directions-btn:hover {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* More specific targeting for map overlay buttons */
  .map-overlay .directions-btn,
  .map-info .directions-btn {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid var(--primary-color) !important;
    font-weight: 600 !important;
  }

  .map-overlay .directions-btn:hover,
  .map-info .directions-btn:hover {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* Additional comprehensive button styling for all possible cases */
  a.directions-btn,
  a[class*="directions-btn"] {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid var(--primary-color) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
  }

  a.directions-btn:hover,
  a[class*="directions-btn"]:hover {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
  }

  /* Force all children elements inside button to be white */
  .directions-btn *,
  .map-overlay .directions-btn *,
  .map-info .directions-btn * {
    color: #ffffff !important;
  }

  /* Ultra-specific targeting for the exact HTML structure */
  .map-overlay .map-info .directions-btn,
  .map-container .map-overlay .directions-btn {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid #4a9eff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(74, 159, 255, 0.3) !important;
  }

  .map-overlay .map-info .directions-btn:hover,
  .map-container .map-overlay .directions-btn:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(74, 159, 255, 0.4) !important;
    transform: translateY(-1px) !important;
  }

  /* Force override any potential light mode styling */
  @media (prefers-color-scheme: dark) {
    .contact-section .map-container .map-overlay .map-info .directions-btn {
      background: #4a9eff !important;
      color: #ffffff !important;
      text-decoration: none !important;
      border: 1px solid #4a9eff !important;
      font-weight: 600 !important;
    }
  }

  /* Nuclear option - force all anchor tags in map overlay to be styled */
  .map-overlay a[href*="maps.google.com"],
  .map-info a[href*="maps.google.com"] {
    background: #4a9eff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid #4a9eff !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .map-overlay a[href*="maps.google.com"]:hover,
  .map-info a[href*="maps.google.com"]:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
  }

  .location-details {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  .location-details-title {
    color: var(--primary-color) !important;
  }

  .location-icon {
    background: linear-gradient(135deg, var(--primary-color), #4a9eff) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(74,159,255,0.3) !important;
  }

  .location-text h5 {
    color: var(--primary-color) !important;
  }

  .location-text p {
    color: #d0d0d0 !important;
  }

  .location-text small {
    color: #b0b0b0 !important;
  }

  .location-actions .btn-primary {
    background: var(--accent-color) !important;
    color: #000 !important;
  }

  .location-actions .btn-primary:hover {
    background: #ff9900 !important;
    color: #000 !important;
  }

  .location-actions .btn-outline {
    background: transparent !important;
    color: #e0e0e0 !important;
    border: 2px solid var(--primary-color) !important;
    text-decoration: none !important;
  }

  .location-actions .btn-outline:hover {
    background: var(--primary-color) !important;
    color: #000 !important;
    border-color: var(--primary-color) !important;
  }

  .nearby-landmarks {
    background: #1a1a1a !important;
    border-left: 4px solid var(--accent-color) !important;
  }

  .nearby-landmarks h5 {
    color: var(--primary-color) !important;
  }

  .nearby-landmarks h5 i {
    color: var(--accent-color) !important;
  }

  .nearby-landmarks li {
    color: #d0d0d0 !important;
  }

  /* ================== COMPREHENSIVE TEXT FIXES ================== */
  span, div, article, section {
    color: inherit !important;
  }

  /* Force all paragraph text to be readable */
  p:not(.hero-subtitle):not(.cta-text) {
    color: #d0d0d0 !important;
  }

  /* All heading elements */
  h1:not(.hero-title), h2:not(.hero-title), h3, h4, h5, h6 {
    color: #f5f5f5 !important;
  }

  /* ================== SECTION BACKGROUNDS COMPREHENSIVE ================== */
  section:not(.hero-section):not(.contact-hero):not(.about-hero) {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .container {
    color: inherit !important;
  }

  /* ================== CARD ELEMENTS COMPREHENSIVE ================== */
  .card, .item, .box, .panel {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
  }

  /* ================== LIST ELEMENTS ================== */
  ul, ol, li {
    color: #d0d0d0 !important;
  }

  /* ================== LINK ELEMENTS ================== */
  a:not(.btn):not(.logo) {
    color: var(--primary-color) !important;
  }

  a:not(.btn):not(.logo):hover {
    color: var(--accent-color) !important;
  }

  /* ================== SPECIFIC PROBLEMATIC ELEMENTS ================== */
  .bg-white, .white-bg, .light-bg {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
  }

  .text-dark, .dark-text {
    color: #e0e0e0 !important;
  }

  .text-muted, .muted-text {
    color: #b0b0b0 !important;
  }

  /* ================== OVERRIDE ANY REMAINING LIGHT BACKGROUNDS ================== */
  *[style*="background: white"], *[style*="background-color: white"],
  *[style*="background: #fff"], *[style*="background-color: #fff"],
  *[style*="background: #ffffff"], *[style*="background-color: #ffffff"] {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
  }

  /* ================== OVERRIDE ANY REMAINING DARK TEXT ================== */
  *[style*="color: #000"], *[style*="color: black"],
  *[style*="color: #333"], *[style*="color: #666"] {
    color: #e0e0e0 !important;
  }

  /* ================== COMPREHENSIVE PAGE-SPECIFIC OVERRIDES ================== */
  /* Contact Us Page */
  .contact-hero, .contact-section, .location-section, .faq-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .contact-form, .faq-item, .location-details {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  .location-icon {
    background: linear-gradient(135deg, var(--primary-color), #4a9eff) !important;
    color: #fff !important;
  }

  /* Core Services Page */
  .brand-story, .services-section, .process-section, .industries-section, .projects-section, .testimonials-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .service-card, .process-card, .industry-card, .project-card {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  /* Why Us Page */
  .pillars-section, .sustainability-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .pillar-card, .sustainability-card {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  /* FAQ Page */
  .faq-item {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
  }

  .faq-question {
    color: #f5f5f5 !important;
    background: #2a2a2a !important;
  }

  .faq-answer {
    color: #d0d0d0 !important;
    background: #1a1a1a !important;
  }

  /* Terms, Privacy, Cookie Policy Pages */
  .policy-section, .terms-section, .cookie-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .policy-content, .terms-content, .cookie-content {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  /* ================== FORCE OVERRIDE ALL PAGE-SPECIFIC DARK TEXT ================== */
  /* This targets specific CSS rules that force black text */
  .industries-section .section-title,
  .projects-section .section-title,
  .industries-section .section-tag,
  .projects-section .section-tag,
  .industries-section h2,
  .projects-section h2 {
    color: #f5f5f5 !important;
  }

  /* ================== UNIVERSAL CARD AND SECTION OVERRIDES ================== */
  /* Catch any remaining cards, sections, or containers */
  .hero-section:not(#hero),
  .content-section,
  .main-section,
  .info-section {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .content-card,
  .info-card,
  .feature-card:not(.about-hero .feature-card),
  .service-item,
  .process-item {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
  }

  /* ================== TEXT COLOR UNIVERSAL FIXES ================== */
  /* Ensure all text elements are properly colored */
  .content-text,
  .description-text,
  .info-text,
  .feature-text {
    color: #d0d0d0 !important;
  }

  .title-text,
  .heading-text,
  .section-heading {
    color: #f5f5f5 !important;
  }

  .accent-text,
  .highlight-text {
    color: var(--primary-color) !important;
  }

  /* ================== ABOUT PAGE HERO OVERLAY ================== */
  .about-hero::after {
    background: linear-gradient(120deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 100%) !important;
  }

  /* Remove vertical border line beside language switcher on desktop */
  @media (min-width: 769px) {
    .nav-menu {
      border-right: none !important;
    }
  }
}

/* ================== FORCED DARK MODE CLASS ================== */
/* Optional: Add this class to body to force dark mode regardless of system preference */
.dark-mode {
  /* All the same styles as above but without the media query wrapper */
  /* This can be toggled via JavaScript if you want a manual dark mode toggle */
}