:root {
  --bodyTextWhite: #e6e9f1;
  --clr-dark-theme-50: #0065ca;
  --clr-dark-theme-100: #011ea0;
  --clr-dark-theme-200: #0c3a6e;
  --clr-dark-theme-300: #041523;
  --clr-dark-theme-400: #111111;
}

html.dark-mode .cmp-main-btn--light,
html.dark-mode .cmp-main-btn-footer {
  background-color: var(--clr-dark-theme-50);
}

html.dark-mode .header__container {
  box-shadow: 0 3px 25px var(--clr-dark-theme-200);
}

html.dark-mode .hamburger-btn,
html.dark-mode .cmp-main-btn {
  box-shadow: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030,
    0 4px 8px #00000030;
}

html.dark-mode .banner-overlay,
html.dark-mode #footer,
html.dark-mode .main-btn--pg1-hero:last-of-type,
html.dark-mode .pricing-card:last-of-type,
html.dark-mode .glide__track,
html.dark-mode #pg1-hero,
html.dark-mode .pg1-s2-mission,
html.dark-mode .pg1-s5-pricing,
html.dark-mode .cmp-svg-pages-decoration,
html.dark-mode .pg2-s2-portfolio {
  background-color: var(--clr-dark-theme-300);
}

html.dark-mode body,
html.dark-mode .header__container,
html.dark-mode .nav-bar,
html.dark-mode .services-card,
html.dark-mode .pricing-card,
html.dark-mode .pg1-s3-performance,
html.dark-mode .pg1-s5-pricing--pg4-s1 {
  background-color: var(--clr-dark-theme-400);
}

html.dark-mode p,
html.dark-mode li,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode a,
html.dark-mode span:not(.pricing-card li span),
html.dark-mode .cmp-sub-heading,
html.dark-mode .cmp-topper-heading {
  color: var(--bodyTextWhite);
}

html.dark-mode .business-logo-container .logo-front {
  transform: rotateY(0deg);
}

html.dark-mode .business-logo-container .logo-back {
  transform: rotateY(180deg);
}

html.dark-mode .nav-bar .active-link {
  color: var(--clr-blue-100);

  @media (width > 62.5rem) {
    color: var(--bodyTextWhite);
  }
}

html.dark-mode .cmp-topper-heading {
  color: var(--clr-dark-theme-50) !important;
}

html.dark-mode .cmp-svg-pages-decoration__svg {
  fill: var(--clr-dark-theme-300);
}

html.dark-mode .hero__svg-page-decoration,
html.dark-mode .footer__svg-page-decoration {
  fill: var(--clr-dark-theme-400);
}

html.dark-mode .decorative-side-svg {
  fill: var(--clr-dark-theme-100);
  opacity: 0.55;
}

html.dark-mode .hero-text span {
  color: var(--clr-dark-theme-50) !important;
}

html.dark-mode .who-image-block__image {
  box-shadow: 0 0 1rem #ffffff9b;
}

html.dark-mode .services-card {
  box-shadow: -2px 5px 10px var(--clr-dark-theme-100);

  .services-card__svg-box {
    background-color: transparent;
  }

  @media (width > 47.5rem) {
    box-shadow: -5px 5px 20px var(--clr-dark-theme-100);

    &:hover {
      background-color: var(--clr-dark-theme-200);
      box-shadow: 0 0 30px var(--clr-dark-theme-100);

      .services-card__svg-box {
        transform: scale(1.8) rotate(360deg);
        transition: transform 0.5s;

        @media (prefers-reduced-motion: reduce) {
          transform: none !important;
        }
      }

      svg {
        fill: #fff;
      }
    }
  }
}

html.dark-mode .services-card--pg3-s2 {
  .services-card__svg-box {
    box-shadow: unset;
  }

  h3,
  p {
    color: var(--clr-lighter-white);
  }

  svg {
    fill: #fff;
  }
}

html.dark-mode .services-page-list strong {
  color: var(--clr-blue-100);
}

html.dark-mode .pricing-page-svg-decoration,
html.dark-mode .contact-page-contact-box__list-flex {
  fill: var(--clr-dark-theme-200);
}

html.dark-mode .pricing-card {
  box-shadow: 0 0 10px var(--clr-dark-theme-200);
}

html.dark-mode .pricing-card:first-of-type {
  li span {
    color: var(--clr-blue-100);
  }
}

html.dark-mode .pricing-card:last-of-type {
  border: 1px solid var(--clr-dark-theme-200);
  box-shadow: 0px 0 20px var(--clr-dark-theme-100);
}

html.dark-mode .glide__track {
  border: 1px solid var(--clr-dark-theme-200);
  box-shadow: -2px 0 5px var(--clr-dark-theme-50);

  .glide__bullet {
    background-color: #ffffff76;
  }

  ul li span {
    color: var(--clr-blue-100);
  }
}

html.dark-mode .pg1-s3-performance {
  padding-bottom: 0;
}

html.dark-mode .pg1-s5-pricing {
  padding-block: var(--padd-60-100);
}

html.dark-mode .pg1-s2-mission {
  padding-top: var(--padd-60-100);
}

html.dark-mode .pg2-s1-who,
html.dark-mode .cmp-topper-heading--pg2-s2 {
  padding-bottom: var(--padd-60-100);
  color: var(--clr-dark-theme-50) !important;
}

html.dark-mode .dark-mode-hidden {
  display: none;
}

html.dark-mode .dark-mode-show {
  display: block;
}

/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/

html.dark-mode #dark-mode-toggle #svg-sun {
  transform: translate(-50%, -50%);
  opacity: 1;
}

html.dark-mode #dark-mode-toggle #svg-moon {
  transform: translate(-200%, -50%);
  opacity: 0;
}

#dark-mode-toggle {
  display: block;
  right: 5.25rem;
  width: 3rem;
  height: 3rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 1.5s ease-in-out;
  /* prettier-ignore */
  transition-timing-function: linear(0, 0.618 4.6%, 1.072 9.7%, 1.358 15.3%, 1.446 18.4%, 1.497 21.7%, 1.512 23.9%, 1.514 26.2%, 1.481 31.5%, 1.421 36.4%, 1.174 53.4%, 1.108 59.5%, 1.059 65.7%, 1.028 71.9%, 1.009 78.9%, 1);

  svg {
    position: absolute;
    width: 2rem;
    height: 2rem;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  #svg-moon {
    z-index: 2;
    transition: transform 0.75s, opacity 0.5s;
  }

  #svg-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.75s, opacity 0.5s;

    /* prettier-ignore */
    transition-timing-function: linear(0, 0.504 20.5%, 1 37.8%, 0.863 44.4%, 0.831 47.4%, 0.821 50.3%, 0.83 53%, 0.856 55.8%, 1 65.5%, 0.959 69.4%, 0.947 73.2%, 0.955 76.6%, 1 84.5%, 0.991 89.3%, 1);
  }

  @media (width > 64rem) {
    &:hover {
      transform: scale(1.2);
    }
  }
}