/* Light Mode Styles */
body.light-mode {
  --text-color: #333333;
  --light-text: #555555;
  --bg-dark: #f4f4f4;
  --bg-darker: #e0e0e0;
  --bg-light: #ffffff;
  --card-bg: #ffffff;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.light-mode header {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.light-mode .nav-links a {
  color: #333;
}

body.light-mode .btn-secondary {
  background: #fad02c;
  color: black;
}

body.light-mode .hamburger .line1,
body.light-mode .hamburger .line2,
body.light-mode .hamburger .line3 {
  background-color: #333;
}

body.light-mode .service-card {
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode footer {
  background-color: #1a1a1a;
  color: #f4f4f4;
}

body.light-mode .footer-bottom {
  background-color: #121212;
}

body.light-mode .project-info {
  background: #ffffff;
  color: #333;
}

body.light-mode .testimonial {
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .testimonial-content p {
  color: #333;
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
  background: #f9f9f9;
  color: #333;
  border: 1px solid #ddd;
}

body.light-mode .info-item {
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .map-faq-section {
  background-color: #f8f8f8; /* Light gray background for light mode */
}

body.light-mode .location-info {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .faq-item {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

body.light-mode .faq-answer {
  background-color: #f8f8f8;
}

body.light-mode .location-info h3,
body.light-mode .faq-column h3,
body.light-mode .faq-question h4 {
  color: #333;
  text-shadow: none;
}

body.light-mode .location-info p {
  color: #555;
}

body.light-mode .toggle-icon {
  background: rgba(250, 208, 44, 0.1);
}

body.light-mode .map-faq-section .section-header h2 {
  color: #333;
  text-shadow: none;
}

/* Transition for smooth theme switching */
body,
header,
.nav-links a,
.btn,
.service-card,
footer,
.project-info,
.testimonial,
input,
textarea,
.info-item {
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}