:root {
  --dm-main: #121212;
  --dm-surface: #1e293b;
  --dm-darkest: #020617;
  --dm-text-head: #ffffff;
  --dm-text-body: #cbd5e1;
  --dm-text-muted: #94a3b8;
  --dm-border: #334155;
  --dm-accent: var(--theme);
  --dm-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --dm-overlay: rgba(255, 255, 255, 0.05);
}

body.dark-mode {
  background-color: var(--dm-main) !important;
  color: var(--dm-text-body) !important;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  strong,
  b,
  .heading,
  a:not(.theme-btn) {
    color: var(--dm-text-head) !important;
  }

  p,
  span:not(.theme-btn span),
  li,
  .text-muted,
  .text-body,
  .text-dark {
    color: var(--dm-text-body) !important;
  }

  section,
  .section-padding,
  .bg-light,
  .bg-white,
  .white-bg,
  .gray-bg,
  [style*="background-color: #fff"],
  [style*="background: #fff"],
  .business-strategy-section,
  .faq-section-3,
  .faq-about,
  .why-choose-strategy-section,
  .operational-section,
  .approach-section,
  .services-tab-section,
  .why-choose-light,
  .editorial-impact-section {
    background-color: var(--dm-main) !important;
  }

  .business-strategy-section,
  .breadcrumb-wrapper,
  .keep-bg {
    background-blend-mode: overlay !important;
  }

  header,
  .header-1,
  .header-sticky,
  footer,
  .footer-area,
  .footer-bottom,
  .offcanvas__content,
  .fix-area,
  .offcanvas__info,
  .offcanvas__wrapper,
  .mobile-menu,
  .mean-container,
  .mean-bar,
  .mean-nav {
    background-color: #151704 !important;
    border-color: var(--dm-border) !important;
  }

  .main-menu ul li ul.sub-menu,
  .submenu,
  header ul li ul {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;

    li a {
      color: var(--dm-text-body) !important;
      border-bottom: 1px solid var(--dm-overlay) !important;
      &:hover {
        color: var(--dm-accent) !important;
        background-color: var(--dm-overlay) !important;
      }
    }

    &::before {
      background-color: var(--dm-surface) !important;
    }
  }

  .mean-container .mean-nav ul li a,
  .mean-container .mean-nav ul li {
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
  }
  a.mean-expand {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-overlay) !important;
    color: #fff !important;
  }
  .offcanvas__close button {
    background-color: var(--dm-surface) !important;
    color: #fff !important;
  }

  .card,
  .service-box-item,
  .strategy-card,
  .process-card,
  .value-card,
  .grid-card,
  .it-matrix-card,
  .bento-card,
  .terms-wrapper,
  .custom-contact-right,
  .custom-contact-wrapper,
  .pricing-card,
  .testimonial-card,
  .project-item,
  .team-item,
  .accordion-item,
  .timeline-item .content-box,
  .static-measure-box,
  .single-service-item,
  .service-details-wrapper,
  .sidebar-widget,
  .strategy-impact-card,
  .faq-items-2 .accordion-box .accordion.block,
  .benefit-item,
  .ops-highlight-box,
  .approach-card,
  .service-tab-content,
  .custom-accordion-2 .accordion-item,
  .editorial-impact-wrapper,
  .compass-label {
    background-color: #2c2c2c !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
  }

  .benefit-item:hover,
  .approach-card:hover {
    background-color: var(--dm-border) !important;
    border-color: var(--dm-accent) !important;
  }

  input,
  textarea,
  select,
  .nice-select,
  .form-control,
  .custom-form-control {
    background-color: var(--dm-main) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-head) !important;
  }
  .nice-select .list {
    background-color: var(--dm-surface) !important;
  }

  .theme-btn {
    color: #fff !important;
    border-color: transparent !important;
    span {
      color: #fff !important;
    }
  }

  .accordion-button,
  .acc-btn {
    background-color: transparent !important;
    color: var(--dm-text-head) !important;
    box-shadow: none !important;
  }

  .accordion-button:not(.collapsed),
  .accordion.block.active-block .acc-btn {
    color: var(--dm-accent) !important;

    .icon {
      background-color: var(--dm-accent) !important;
      color: #fff !important;
      border-color: var(--dm-accent) !important;
    }
  }

  .acc-btn .icon,
  .custom-accordion-2 .accordion-button .icon {
    background-color: var(--dm-overlay) !important;
    color: var(--dm-text-head) !important;
    border-radius: 50%;
  }
  .accordion-body,
  .acc-content .content .text {
    color: var(--dm-text-body) !important;
    border-top: 1px solid var(--dm-border) !important;
  }

  .impact-quote {
    background-color: var(--dm-main) !important;
    border-left: 3px solid var(--dm-accent) !important;
  }
  .compass-visual-wrapper img.bg-img {
    opacity: 0.6 !important;
    filter: grayscale(20%) !important;
  }
  .compass-ring {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
  }

  .why-choose-image-area .pattern-bg {
    background-color: var(--dm-surface) !important;
    opacity: 0.5 !important;
  }
  .why-choose-image-area .main-img img,
  .why-choose-image-2 img {
    filter: brightness(0.9) contrast(1.1);
    box-shadow: var(--dm-shadow) !important;
    border: 1px solid var(--dm-border) !important;
  }
  .benefit-item .icon {
    background-color: var(--dm-overlay) !important;
    border-radius: 50%;
  }

  .ops-content .section-title .sub-title {
    background-color: rgba(var(--theme-rgb), 0.1) !important;
  }
  .ops-list li {
    color: var(--dm-text-head) !important;
    font-weight: 500 !important;
    i {
      margin-right: 10px !important;
    }
  }
  .gear-shape-anim {
    background-color: var(--dm-surface) !important;
    color: #fff !important;
    border: 5px solid var(--dm-main) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
  }
  .ops-image-wrapper,
  .ops-main-img img {
    background-color: transparent !important;
  }

  .approach-card .icon-box {
    background-color: var(--dm-overlay) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .approach-card:hover .icon-box {
    background-color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    i {
      color: #fff !important;
    }
  }

  .service-tab-nav .nav-link {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-head) !important;
    border: 1px solid var(--dm-border) !important;
    margin-bottom: 10px !important;

    .icon-holder {
      background-color: var(--dm-overlay) !important;
      color: var(--dm-accent) !important;
    }
    .arrow-icon {
      color: var(--dm-text-body) !important;
    }

    &:hover {
      border-color: var(--dm-accent) !important;
    }

    &.active {
      background-color: var(--dm-accent) !important;
      border-color: var(--dm-accent) !important;
      color: #fff !important;

      .icon-holder {
        background-color: #fff !important;
        color: var(--dm-accent) !important;
      }
      .arrow-icon {
        color: #fff !important;
      }
    }
  }
  .service-tab-content .divider {
    background-color: var(--dm-accent) !important;
  }
  .check-list li {
    color: var(--dm-text-head) !important;
    i {
      background-color: var(--dm-overlay) !important;
      border-radius: 50%;
      padding: 5px;
    }
  }

  .impact-title-area .sub-title {
    background-color: var(--dm-overlay) !important;
    padding: 5px 10px;
    border-radius: 5px;
  }
  .impact-content-area {
    .quote-icon i {
      opacity: 0.3 !important;
    }
    .lead-text {
      color: var(--dm-text-head) !important;
      font-size: 1.1rem !important;
    }
    .secondary-text {
      color: var(--dm-text-muted) !important;
    }
  }

  *,
  *::before,
  *::after {
    border-color: var(--dm-border) !important;
  }

  .tailored-list li,
  .ops-list li,
  .value-card-item,
  .feature-box-items.h-100,
  .editorial-impact-wrapper {
    background: #2c2c2c;
  }
}

body.dark-mode .choose-us-section {
  background-color: var(--dm-main) !important;
  background-image: none !important;
}

body.dark-mode .choose-us-section .section-title h2 {
  color: #ffffff !important;
}

body.dark-mode .choose-us-section .section-title .sub-title {
  color: var(--theme) !important;
}

body.dark-mode .choose-item {
  background-color: #2c2c2c !important;
  border-bottom: 1px solid var(--dm-border) !important;
  transition: all 0.3s ease;
}

body.dark-mode .choose-item.active,
body.dark-mode .choose-item:hover {
  background-color: #242424 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  border-bottom-color: transparent !important;
  border: 1px solid #242424 !important;
}

body.dark-mode .choose-item .icon {
  background-color: var(--dm-overlay) !important;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  min-width: 60px;
}

body.dark-mode .choose-item .icon i {
  color: var(--theme) !important;
}

body.dark-mode .choose-item.active .icon,
body.dark-mode .choose-item:hover .icon {
  background-color: var(--theme) !important;
}

body.dark-mode .choose-item.active .icon i,
body.dark-mode .choose-item:hover .icon i {
  color: #ffffff !important;
}

body.dark-mode .choose-item .content h3 {
  color: #ffffff !important;
}

body.dark-mode .choose-item .content p {
  color: var(--dm-text-body) !important;
}
/*  */
body.dark-mode .check-list li {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .check-list li a,
body.dark-mode .check-list li span,
body.dark-mode .fa-bars:before,
body.dark-mode .fa-navicon:before {
  color: #ffffff !important;
}
body.dark-mode .offcanvas__close {
  background-color: var(--theme) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

body.dark-mode .offcanvas__close button {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.dark-mode .offcanvas__close i {
  color: #ffffff !important;
}
body.dark-mode .accordion-button::after {
  filter: brightness(0) invert(1) !important;
}

body.dark-mode .accordion .acc-btn .icon,
body.dark-mode .accordion .acc-btn i {
  color: #ffffff !important;
}
body.dark-mode .accordion .acc-btn .icon {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .mean-container .mean-nav,
body.dark-mode .mean-container .mean-nav ul,
body.dark-mode .mean-container .mean-nav ul li,
body.dark-mode .mean-container .mean-nav ul li ul.submenu {
  background-color: #020617 !important;
}
body.dark-mode .mean-container .mean-nav ul li ul {
  background: #020617 !important;
}
body.dark-mode .mean-container .mean-nav ul li a {
  background-color: transparent !important;
}
body.dark-mode .mean-container .mean-nav ul li ul.submenu li a {
  transition: none !important;
}
/*  */
body.dark-mode .cookie-popup-container .cookie-popup {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}
body.dark-mode .cookie-popup-container .cookie-popup * {
  color: var(--dm-text-body) !important;
}
body.dark-mode .cookie-popup-container .cookie-popup .class-title,
body.dark-mode .cookie-popup-container .cookie-popup b {
  color: var(--dm-text-head) !important;
}
body.dark-mode .cookie-popup-container a.policy-href {
  color: var(--dm-accent) !important;
}
body.dark-mode .cookie-popup-container .cookie-decide ul li.allow {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #ffffff !important;
}

body.dark-mode .cookie-popup-container .cookie-decide ul li.customize,
body.dark-mode .cookie-popup-container .cookie-decide ul li.allow-selection {
  border-color: var(--dm-border) !important;
  background-color: var(--dm-main) !important;
}
body.dark-mode .cookie-popup-container .cookie-panel ul li i {
  color: var(--dm-text-head) !important;
}
body.dark-mode .cookie-popup-container .cookie-category .cat-describe {
  color: var(--dm-text-muted) !important;
}
/*  */
body.dark-mode .terms-contact-box {
  background-color: var(--dm-main) !important;
  border-color: var(--dm-accent) !important;
}

body.dark-mode .terms-contact-box strong {
  color: var(--dm-text-head) !important;
}

body.dark-mode .terms-contact-box p,
body.dark-mode .terms-contact-box span {
  color: var(--dm-text-body) !important;
}

body.dark-mode .terms-contact-box i {
  color: var(--dm-accent) !important;
}

body.dark-mode .terms-contact-box a {
  color: var(--dm-accent) !important;
}

body.dark-mode .terms-contact-box a:hover {
  color: var(--dm-text-head) !important;
}
/*  */
body.dark-mode .preloader {
  background-color: #000000 !important;
}

body.dark-mode .preloader .loader-section .bg {
  background-color: #000000 !important;
}

body.dark-mode .preloader .animation-preloader .txt-loading .letters-loading,
body.dark-mode .preloader p {
  color: #000000 !important;
}

body.dark-mode
  .preloader
  .animation-preloader
  .txt-loading
  .letters-loading::before {
  color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode {
  background-color: #121212 !important;
  color: #f8fafc !important;
}

body.dark-mode .about-section,
body.dark-mode .service-section,
body.dark-mode .choose-us-section,
body.dark-mode .bg-light,
body.dark-mode footer {
  background-color: #121212 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode span {
  color: #ffffff !important;
}

body.dark-mode .service-box-item {
  background: #2c2c2c !important;
  border-color: #1e1e1e !important;
}
body.dark-mode .back-to-top {
  background: rgba(59, 130, 246, 0.8);
  backdrop-filter: blur(10px);
}
body.dark-mode header .logo img,
body.dark-mode .header-1 .logo img,
body.dark-mode .header-main .logo img {
  content: url("../img/logo/Vertical\ Vision\ Logo-2.png") !important;
}

body.dark-mode .offcanvas__logo img {
  content: url("../img/logo/Vertical\ Vision\ Logo-2.png") !important;
}

body.dark-mode .header-sticky .logo img {
  content: url("../img/logo/Vertical\ Vision\ Logo-2.png") !important;
}
body.dark-mode .mean-container .mean-nav ul li a.active {
  color: var(--theme5) !important;
  background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .main-menu ul li a.active,
body.dark-mode .mean-container .mean-nav ul li a.active {
  color: #c8b070 !important;
}
body.dark-mode .mean-container .mean-nav ul li a.active,
body.dark-mode .mean-container .mean-nav ul li.active-parent > a {
  color: #c8b070 !important;
}

body.dark-mode .commitment-section {
  background-image: none !important;
  background-color: #121212 !important;
}
body.dark-mode .commitment-section > div:first-child {
  background: #121212 !important;
}

body.dark-mode .value-item {
  background: #2c2c2c !important;
  border-color: #2c2c2c !important;
}
body.dark-mode .it-feature-item {
  background: #242424 !important;
}
body.dark-mode .it-feature-item:hover {
  background: #2c2c2c !important;
}
/*  */
body.dark-mode .footer-section,
body.dark-mode .footer-area {
  background-color: #151704 !important;
  background-image: none !important;
}

body.dark-mode .footer-bottom {
  background-color: #151704 !important;
  border-top: 1px solid #000 !important;
}