/* Dark Mode Styles */
html.dark-mode {
    /* General Background and Text */
    background-color: #1a202c; /* Dark background */
    color: #e2e8f0; /* Light text */
  }
  
  html.dark-mode body {
    background-color: #1a202c;
    color: #e2e8f0;
  }
  
  /* Header/Navbar */
  html.dark-mode .ud-header {
    background-color: #2d3748 !important; /* Darker header background */
    border-bottom: 1px solid #4a5568;
  }
  
  html.dark-mode .ud-header .navbar-brand img {
    filter: invert(1) hue-rotate(180deg); /* Adjust logo for dark mode if needed */
  }
  
  html.dark-mode .ud-header .ud-menu-scroll {
    color: #e2e8f0 !important; /* Light text for nav links */
  }
  
  html.dark-mode .ud-header .ud-menu-scroll:hover {
    color: #a0aec0 !important; /* Lighter hover color */
  }
  
  /* Buttons */
  html.dark-mode .ud-main-btn.ud-white-btn {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #4a5568;
  }
  
  html.dark-mode .ud-main-btn.ud-white-btn:hover {
    background-color: #636b7a;
    border-color: #636b7a;
  }
  
  /* Footer */
  html.dark-mode .ud-footer {
    background-color: #2d3748; /* Darker footer background */
    color: #e2e8f0;
  }
  
  html.dark-mode .ud-footer .ud-widget-title {
    color: #e2e8f0;
  }
  
  html.dark-mode .ud-footer .ud-widget-links li a {
    color: #a0aec0;
  }
  
  html.dark-mode .ud-footer .ud-widget-links li a:hover {
    color: #e2e8f0;
  }
  
  html.dark-mode .ud-footer .ud-widget-socials li a img {
    filter: invert(1) hue-rotate(180deg); /* Adjust social icons for dark mode */
  }
  
  html.dark-mode .ud-footer-bottom {
    background-color: #1a202c; /* Even darker footer bottom */
    border-top: 1px solid #4a5568;
  }
  
  html.dark-mode .ud-footer-bottom-left li a,
  html.dark-mode .ud-footer-bottom-right {
    color: #a0aec0;
  }
  
  html.dark-mode .ud-footer-bottom-right a {
    color: #e2e8f0;
  }
  
  /* Specific elements from your existing styles that might need dark mode adjustments */
  html.dark-mode .bg-light {
    background-color: #2d3748 !important;
  }
  
  html.dark-mode .text-dark {
    color: #e2e8f0 !important;
  }
  
  /* Adjust for any other specific elements that might not inherit well */
  /* For example, if you have specific card backgrounds or section backgrounds */
  html.dark-mode .card {
    background-color: #2d3748;
    color: #e2e8f0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  }
  
  html.dark-mode .card-header {
    background-color: #4a5568;
    border-bottom: 1px solid #636b7a;
    color: #e2e8f0;
  }
  
  /* Adjust for Bootstrap primary color if used in dark mode */
  html.dark-mode .bg-primary {
    background-color: #4299e1 !important; /* A slightly different blue for dark mode */
  }
  
  html.dark-mode .navbar-dark .navbar-nav .nav-link {
    color: #e2e8f0;
  }
  
  html.dark-mode .navbar-dark .navbar-nav .nav-link.active {
    color: #90cdf4;
  }
  
  /* Adjust for any other specific elements that might not inherit well */
  /* For example, if you have specific card backgrounds or section backgrounds */