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

/* Dark Mode Variables & Base */
@media only screen and (min-width: 0em) {
  body.dark-mode {
    --dark: #1a1a1a;
    --medium: #2b2b2b;
    background-color: var(--dark);
  }

  /* Headings */
  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6 {
    color: var(--bodyTextColorWhite);
  }

  /* Common text elements */
  body.dark-mode .cs-title,
  body.dark-mode .cs-text {
    color: var(--bodyTextColorWhite);
  }

  body.dark-mode .cs-text {
    opacity: 0.9;
  }

  body.dark-mode .cs-topper {
    color: var(--primaryLight);
  }

  body.dark-mode p,
  body.dark-mode li {
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
  }
}

/*-- -------------------------- -->
<---     Navigation Dark        -->
<--- -------------------------- -*/
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-li-link:hover {
    color: var(--primaryLight);
  }
}

@media only screen and (min-width: 64rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-li-link:hover {
    color: var(--primaryLight);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-active {
    color: var(--primaryLight);
  }
}

/*-- -------------------------- -->
<---       Footer Dark          -->
<--- -------------------------- -*/
body.dark-mode #cs-footer-269 {
  background-color: rgba(0, 0, 0, 0.6);
}

/*-- -------------------------- -->
<---    Home Page Dark Mode     -->
<--- -------------------------- -*/

/* Services Cards */
body.dark-mode #h-services-81 .cs-item {
  background-color: var(--medium);
}
body.dark-mode #h-services-81 .cs-title {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #h-services-81 .cs-text {
  color: var(--bodyTextColorWhite);
  opacity: 0.8;
}

/* Side by Side Section */
body.dark-mode #sbs-81 .cs-li {
  color: var(--bodyTextColorWhite);
}

/* Gallery Section */
body.dark-mode #gallery-45 .cs-button {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #gallery-45 .cs-button.cs-active {
  background-color: var(--primary);
  color: #fff;
}

/* Reviews Section */
body.dark-mode #reviews-81 {
  background-color: rgba(0, 0, 0, 0.5);
}
body.dark-mode #reviews-81 .cs-item {
  background-color: var(--medium);
}
body.dark-mode #reviews-81 .cs-h3,
body.dark-mode #reviews-81 .cs-name {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #reviews-81 .cs-item-text {
  color: var(--bodyTextColorWhite);
  opacity: 0.8;
}

/*-- -------------------------- -->
<---    About Page Dark Mode    -->
<--- -------------------------- -*/

/* Why Choose Section */
body.dark-mode #why-choose-12 {
  background-color: rgba(0, 0, 0, 0.5);
}
body.dark-mode #why-choose-12 .cs-item {
  background-color: var(--medium);
}
body.dark-mode #why-choose-12 .cs-h3 {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #why-choose-12 .cs-item-text {
  color: var(--bodyTextColorWhite);
  opacity: 0.8;
}

/*-- -------------------------- -->
<---  Services Page Dark Mode   -->
<--- -------------------------- -*/
body.dark-mode #services-340 .cs-item {
  background-color: var(--medium);
}
body.dark-mode #services-340 .cs-h3 {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #services-340 .cs-item-text {
  color: var(--bodyTextColorWhite);
  opacity: 0.8;
}

/*-- -------------------------- -->
<---  Contact Page Dark Mode    -->
<--- -------------------------- -*/
body.dark-mode #contact-401 .cs-label {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #contact-401 .cs-input {
  background-color: var(--medium);
  color: var(--bodyTextColorWhite);
  border: 1px solid #444;
}
body.dark-mode #contact-401 .cs-input::placeholder {
  color: #b4b2c7;
}
body.dark-mode #contact-401 .cs-textarea {
  background-color: var(--medium);
  color: var(--bodyTextColorWhite);
}
body.dark-mode #contact-401 .cs-contact-group {
  background-color: var(--medium);
}
body.dark-mode #contact-401 .cs-header {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #contact-401 .cs-link {
  color: var(--bodyTextColorWhite);
  opacity: 0.8;
}

/*-- -------------------------- -->
<---  Portfolio Page Dark Mode  -->
<--- -------------------------- -*/
body.dark-mode #gallery-45 .cs-button {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #gallery-45 .cs-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode #gallery-45 .cs-button.cs-active {
  background-color: var(--primary);
  color: #fff;
}

/*-- -------------------------- -->
<---   Reviews Page Dark Mode   -->
<--- -------------------------- -*/
body.dark-mode #reviews-399 .cs-item {
  background-color: var(--medium);
}
body.dark-mode #reviews-399 .cs-h3,
body.dark-mode #reviews-399 .cs-name {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #reviews-399 .cs-item-text,
body.dark-mode #reviews-399 .cs-location {
  color: var(--bodyTextColorWhite);
  opacity: 0.8;
}

/*-- -------------------------- -->
<---     Banner Dark Mode       -->
<--- -------------------------- -*/
body.dark-mode #banner-712 .cs-int-title {
  color: #fff;
}

/*-- -------------------------- -->
<---      CTA Dark Mode         -->
<--- -------------------------- -*/
body.dark-mode #cta-51 .cs-topper {
  color: var(--secondaryLight);
}
body.dark-mode #cta-51 .cs-title {
  color: #fff;
}
body.dark-mode #cta-51 .cs-text {
  color: #fff;
  opacity: 0.8;
}

/*-- -------------------------- -->
<---   Side by Side Dark Mode   -->
<--- -------------------------- -*/
body.dark-mode #sbs-578 .cs-text {
  color: var(--bodyTextColorWhite);
  opacity: 0.9;
}