/* Dark Mode Styles */
:root {
  --dark-bg: #121212;
  --dark-text: #e4e4e4;
  --dark-link: #80b3ff;
  --dark-accent: #4a4a4a;
  --dark-card: #1e1e1e;
  --dark-border: #333;
  --dark-button: #3a3a3a;
  --dark-button-hover: #505050;
  --dark-input: #2d2d2d;
}

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

/* Text & Links */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode label,
body.dark-mode div {
  color: var(--dark-text);
}

body.dark-mode .text-muted {
  color: #9ca3af;
}

body.dark-mode a:not(.button):not(.nav-link):not(.btn) {
  color: var(--dark-link);
}

body.dark-mode .contact-label,
body.dark-mode .footer-heading,
body.dark-mode .logo,
body.dark-mode .service-title {
  color: var(--dark-text) !important;
}

body.dark-mode .hero-text,
body.dark-mode .contact-detail {
  color: #bbb !important;
}

/* Containers & Cards */
body.dark-mode .ed-container,
body.dark-mode .ed-reference-container,
body.dark-mode .wv-boxed,
body.dark-mode .header,
body.dark-mode .contact-form,
body.dark-mode .service-card,
body.dark-mode .hero {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
}

body.dark-mode .header {
  background-color: rgba(30, 30, 30, 0.97);
}

body.dark-mode .hero {
  background-color: var(--dark-bg);
}

body.dark-mode .services {
  background-color: var(--dark-bg);
}

body.dark-mode .service-icon {
  background-color: var(--dark-accent);
}

/* Form elements */
body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
  background-color: var(--dark-input);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

/* Buttons */
body.dark-mode .button {
  background-color: var(--dark-button);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

body.dark-mode .button:hover {
  background-color: var(--dark-button-hover);
}

/* Icon for the dark mode toggle */
.dark-mode-toggle {
  background-color: transparent;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border: none;
  outline: none;
  padding: 0;
  color: var(--accent);
}

.dark-mode-toggle:hover {
  background-color: rgba(0, 82, 204, 0.1);
  transform: rotate(15deg);
}

.dark-mode-toggle:focus {
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

body.dark-mode .dark-mode-toggle {
  color: var(--dark-link);
}

.dark-mode-toggle svg {
  transition: transform 0.5s ease, opacity 0.3s ease;
}

body.dark-mode .dark-mode-icon-moon {
  display: none;
}

body.dark-mode .dark-mode-icon-sun {
  display: block !important;
}

@media (max-width: 768px) {
  .dark-mode-toggle {
    position: absolute;
    top: 20px;
    right: 70px;
  }
}

/* Transition effect */
body, body *, .dark-mode-toggle {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}