.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  color: white;
  transition: transform 0.5s ease;
}

.theme-toggle[aria-pressed="true"] svg {
  transform: rotate(360deg);
}


:root {
  --primary: #6d28d9;
  --primary-light: rgba(109, 40, 217, 0.1);
  --primary-dark: #5b21b6;
  --secondary: #f9fafb;
  --background: #ffffff;
  --foreground: #1f2937;
  --muted: #f3f4f6;
  --muted-foreground: #6b7280;
  --border: #e5e7eb;
}


.dark {
  --primary: #8b5cf6;
  --primary-light: rgba(139, 92, 246, 0.1);
  --primary-dark: #7c3aed;
  --secondary: #1f2937;
  --background: #1e293b; 
  --foreground: #f8fafc;
  --muted: #334155;
  --muted-foreground: #cbd5e1; 
  --border: #475569; 
}


body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
  background-color: var(--background);
  color: var(--foreground);
}

.dark .header {
  background-color: rgba(30, 41, 59, 0.95); 
  border-bottom-color: var(--border);
}

.dark .form-card {
  background-color: var(--background);
  border-color: var(--border);
}

.dark .input {
  background-color: #334155;
  border-color: var(--border);
  color: var(--foreground);
}

.dark .service-card,
.dark .testimonial-card,
.dark .how-it-works-card,
.dark .accordion-item {
  background-color: #334155;
  border-color: var(--border);
}

.dark .footer {
  background-color: #1e293b; 
  border-top-color: var(--border);
}


.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark .nav-link,
.dark .button-outline.light,
.dark .footer-column h4,
.dark .footer-column ul li a {
  color: var(--foreground);
}

.dark .muted-foreground,
.dark .author-role,
.dark .user-stats,
.dark .footer-bottom p {
  color: var(--muted-foreground);
}


.dark .button-outline {
  border-color: #8b5cf6;
  color: #f8fafc;
}

.dark .button-outline:hover {
  background-color: rgba(139, 92, 246, 0.2);
}


.dark .accordion-content {
  background-color: #334155;
}

.dark .accordion-content p {
  color: #f8fafc;
}