:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --icon-bg: #000000;
  --icon-text: #ffffff;
  --square-bg: #ffffff;
  --square-border: #000000;
  --button-bg: #000000;
  --button-text: #ffffff;
  --footer-bg: #000000;
  --footer-text: #ffffff;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
  --icon-bg: #ffffff;
  --icon-text: #000000;
  --square-bg: #1e1e1e;
  --square-border: #ffffff;
  --button-bg: #ffffff;
  --button-text: #000000;
  --footer-bg: #1e1e1e;
  --footer-text: #ffffff;
  --border-color: #333;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Nav bar styles */
body[data-theme="dark"] .nav-bar {
  background-color: #121212;
}

body[data-theme="dark"] .problem-item h3 {
  margin-left: 1.3rem;
}

body[data-theme="dark"] .research-findings h3 {
  margin-left: 1.4rem; /* or any value you prefer */
}

body[data-theme="dark"] .research-methods h3 {
  margin-left: 1.5rem; /* or any value you prefer */
}

body[data-theme="dark"] .result-item h3 {
  margin-left: 1.4rem; /* or any value you prefer */
}

body[data-theme="dark"] .gmail {
  color: #ffffff;
}

/* Text elements in dark mode */
body[data-theme="dark"] p,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-theme="dark"] li,
body[data-theme="dark"] td,
body[data-theme="dark"] th,
body[data-theme="dark"] label,
body[data-theme="dark"] .text-content,
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .content-box,
body[data-theme="dark"] .case-study-section {
  color: #ffffff;
}

/* Info items in dark mode */
body[data-theme="dark"] .info-item,
body[data-theme="dark"] .info-item .label,
body[data-theme="dark"] .info-item .value {
  color: #ffffff !important;
}

/* body[data-theme="dark"] .research-methods-list li {
  color: #ffffff !important;
} */

/* Problem Grid Section - Light Mode */
.problem-grid .problem-item li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--text-color);
}

.problem-grid .problem-item li:before {
  content: "•";
  color: #000000;
  position: absolute;
  left: 0;
  font-size: 1.2rem;
  line-height: 1.4;
  width: 1.2rem;
  text-align: left;
  margin-left: 0;
}

/* Problem Grid Section - Dark Mode */
body[data-theme="dark"] .problem-grid {
  color: #e0e0e0;
  gap: 1.5rem;
}

body[data-theme="dark"] .problem-grid .problem-item h3 {
  color: #ffffff;
}

body[data-theme="dark"] .problem-grid .problem-item {
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .problem-grid .problem-item li {
  color: #e0e0e0;
  padding-left: 1.5rem;
  position: relative;
  list-style-type: none;
}

body[data-theme="dark"] .research-methods-list li::before {
  color: #ffffff;
}

body[data-theme="dark"] .research-findings-list li::before {
  color: #ffffff;
}

body[data-theme="dark"] .problem-grid .problem-item li:before {
  content: "•";
  color: #ffffff;
  position: absolute;
  left: 0;
  font-size: 1rem;
  line-height: 1.5;
  width: 1rem;
  text-align: left;
  margin-left: 0;
}

/* Responsive adjustments for dark mode */
@media (max-width: 768px) {
  body[data-theme="dark"] .problem-item {
    padding: 1.25rem;
  }

  body[data-theme="dark"] .problem-item li {
    padding-left: 1.5rem;
  }
}

/* Update box styles in dark mode */
body[data-theme="dark"] .section,
body[data-theme="dark"] .content-box,
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Headers in boxes */
body[data-theme="dark"] .section h2,
body[data-theme="dark"] .content-box h2,
body[data-theme="dark"] .info-box h2,
body[data-theme="dark"] .card h2 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

/* Text in boxes */
body[data-theme="dark"] .section p {
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Text in boxes */
body[data-theme="dark"] .overview p {
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 1rem;
}

body[data-theme="dark"] .content-box p,
body[data-theme="dark"] .info-box p,
body[data-theme="dark"] .card p {
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Lists in boxes */
body[data-theme="dark"] .section ul,
body[data-theme="dark"] .content-box ul,
body[data-theme="dark"] .info-box ul,
body[data-theme="dark"] .card ul {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

body[data-theme="dark"] .section li,
body[data-theme="dark"] .content-box li,
body[data-theme="dark"] .info-box li,
body[data-theme="dark"] .card li {
  color: #ffffff;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Remove background from nested boxes */
body[data-theme="dark"] .content-box .content-box,
body[data-theme="dark"] .info-box .info-box,
body[data-theme="dark"] .card .card {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* Boxes and containers */
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .content-box,
body[data-theme="dark"] .case-study-section,
body[data-theme="dark"] .card,
body[data-theme="dark"] .section,
body[data-theme="dark"] .info-item {
  background-color: #000000;
  border: 1px solid #333;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Ensure text remains visible on black background */
body[data-theme="dark"] .info-box *,
body[data-theme="dark"] .content-box *,
body[data-theme="dark"] .case-study-section *,
body[data-theme="dark"] .card *,
body[data-theme="dark"] .section *,
body[data-theme="dark"] .info-item * {
  color: #ffffff;
}

/* Slightly lighter background for nested elements */
body[data-theme="dark"] .info-box .content-box,
body[data-theme="dark"] .content-box .info-box,
body[data-theme="dark"] .card .content-box {
  background-color: #0a0a0a;
}

/* Ensure text remains visible */
body[data-theme="dark"] .info-box *,
body[data-theme="dark"] .content-box *,
body[data-theme="dark"] .case-study-section *,
body[data-theme="dark"] .card *,
body[data-theme="dark"] .section *,
body[data-theme="dark"] .info-item * {
  color: #ffffff;
}

/* Headers in boxes */
body[data-theme="dark"] .content-box h2,
body[data-theme="dark"] .content-box h3,
body[data-theme="dark"] .info-box h2,
body[data-theme="dark"] .info-box h3 {
  color: #000000;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Paragraph text in boxes */
body[data-theme="dark"] .content-box p,
body[data-theme="dark"] .info-box p {
  color: #b0b0b0;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Remove extra padding from nested boxes */
body[data-theme="dark"] .content-box .content-box,
body[data-theme="dark"] .info-box .info-box {
  padding: 0;
  background: transparent;
  border: none;
  margin: 0;
}

/* List items in boxes */
body[data-theme="dark"] .content-box ul,
body[data-theme="dark"] .info-box ul {
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem;
}

body[data-theme="dark"] .content-box li,
body[data-theme="dark"] .info-box li {
  margin-bottom: 0.5rem;
  color: #b0b0b0;
}

/* Ensure text remains visible */
body[data-theme="dark"] .section,
body[data-theme="dark"] .content-box,
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .card {
  color: #000000;
}

/* Ensure images maintain their appearance */
body[data-theme="dark"] img {
  filter: none;
  opacity: 1;
}