body {
  background: #ffffff;
  color: #333333;
}

body.dark-mode {
  background: #121212;
  color: #f0f0f0;
}

.dark-mode-toggle {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 10;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #222;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  font-weight: bold;
  font-size: 2.4rem;
  font-family: "Rubik", sans-serif;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

.dark-mode-toggle svg {
  width: 28px;
  height: 28px;
  transition: all 0.3s ease;
}

[data-theme="light"] .dark-mode-toggle {
  background-color: #f0f0f0;
  color: #222;
}

[data-theme="light"] .dark-mode-toggle svg {
  fill: #222;
}

[data-theme="dark"] .dark-mode-toggle {
  background-color: #333;
  color: #fff;
}

[data-theme="dark"] .dark-mode-toggle svg {
  fill: #fff;
}

body.dark-mode {
  background-color: #121212;
  color: #e5e5e5;
}

.dark-mode .hero-title {
  z-index: 100;
}

.dark-mode .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.8)
  );
}

.dark-mode .contact-item span {
  font-size: 2rem;
  color: #222;
}

.dark-mode .category-button,
.dark-mode .product-card,
.dark-mode .highlight-box,
.dark-mode .about-feature,
.dark-mode .testimonial {
  background-color: #1e1e1e;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .feature-tertiary,
.dark-mode .product-text {
  color: #e5e5e5;
}

.dark-mode .category-button h3,
.dark-mode .product-card h3,
.dark-mode .highlight-box h3,
.dark-mode .about-feature h3,
.dark-mode .testimonial .author {
  color: #e5e5e5;
}

.dark-mode .category-button p,
.dark-mode .product-card p,
.dark-mode .highlight-box p,
.dark-mode .about-feature p,
.dark-mode .testimonial p {
  color: #a1a1a1;
}

.dark-mode .text-true {
  color: #fff;
}
.dark-mode .product-header,
.dark-mode .feature {
  color: #e5e5e5;
}

.dark-mode .icon-container {
  background-color: #2d2d2d;
}

.dark-mode .filter-btn {
  background-color: #2d2d2d;
  color: #e5e5e5;
}

.dark-mode .filter-btn.active {
  background-color: #22c55e;
  color: white;
}

.dark-mode .details-btn {
  background-color: #2d2d2d;
  color: #e5e5e5;
}

.dark-mode .details-btn:hover {
  background-color: #22c55e;
  color: white;
}

.dark-mode .about-section {
  background-color: #1a1a1a;
}

.dark-mode .border-btm {
  border-color: #333333;
}

.dark-mode .icon-box {
  background-color: #2d2d2d;
}

.dark-mode .partner-logo {
  filter: grayscale(100%) brightness(0.8);
  opacity: 0.8;
}

.dark-mode .partner-logo:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* Footer stays dark in both modes */
.footer {
  background-color: #1f2937;
}