:root {
  --first-color: #18191b;
  --sec-color: #111111;
  --thir-color: #ffbf00;
  --fourth-color: #81abd8;
  --first-radius: 20px;
  --first-transition: 0.3s;
  --light-mode-Color: #e4e5f1;
  --dark-mode-color: #18191a;
}
.dark-mode .dark-btn {
  box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.3),
    inset 8px 0 8px rgba(0, 0, 0, 0.3), inset 0 -4px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .dark-btn .btn-indecator {
  transform: translateX(-2rem);
}

.dark-mode .dark-btn .btn-indecator {
  background-color: var(--first-color);
}

.dark-mode .dark-btn .btn-indecator .btn-container .btn-icon {
  color: var(--light-mode-Color);
}
/* ===== */

.dark-mode {
  background: #070d19;
}
.dark-mode,
.dark-mode span {
  color: #fff;
}

.dark-mode .main-wrapper .page-wrapper {
  background: #070d19;
}
.dark-mode .navbar .navbar-content {
  background-color: var(--second-color);
}
.dark-mode svg {
  fill: #fff;
}
.dark-mode .navbar {
  border: 0;
}
.dark-mode .products .arrow-next,
.dark-mode .products .arrow-prev {
  background-color: var(--main-color);
}
.dark-mode .slick-dots li.slick-active button:before {
  color: var(--main-color);
}
@media (max-width: 991px) {
  .dark-mode .navbar .sidebar-toggler {
    background-color: var(--second-color);
  }
}