/* Pages */
@media screen and (min-width: 0px) {
  body.dark-mode {
    /*-- -------------------------- -->
        <---           Home             -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---           About            -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---          Contact           -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---        Testimonials        -->
        <--- -------------------------- -*/
  }
  body.dark-mode #hero {
    position: relative;
  }
  body.dark-mode #hero:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .7;
    top: 0;
    left: 0;
  }
  body.dark-mode #hero h1 {
    color: #fff;
  }
  body.dark-mode #hero .call-now .light {
    display: none;
  }
  body.dark-mode #hero .call-now .dark {
    display: inline-block;
  }
  body.dark-mode #hero .call-now .text {
    color: #fff;
  }
  body.dark-mode #hero .call-now .number {
    color: #fff;
  }
  body.dark-mode #hero .button-solid {
    background: var(--darkPrimary);
  }
  body.dark-mode #hero .button-solid:before {
    background: var(--tint);
  }
  body.dark-mode #services .service {
    background: var(--darkPrimary);
  }
  body.dark-mode #services .service .button-solid:before {
    background: var(--tint);
  }
  body.dark-mode #services .service:nth-of-type(2) {
    background: var(--tint);
  }
  body.dark-mode #services .service:nth-of-type(2) .button-solid:before {
    background: var(--primary);
  }
  body.dark-mode #about:before {
    background: #0a0a0a;
  }
  body.dark-mode #about .left-section:before {
    background: var(--shade);
    opacity: .1;
  }
  body.dark-mode #about .right-section .topper {
    color: var(--shade);
  }
  body.dark-mode #about .right-section h2 {
    color: #fff;
  }
  body.dark-mode #about .right-section h2:before {
    background: var(--shade);
    opacity: .1;
  }
  body.dark-mode #about .right-section h2 span {
    color: var(--shade);
  }
  body.dark-mode #about .right-section .decoration .line {
    background: var(--shade);
  }
  body.dark-mode #about .right-section .button-solid {
    background: var(--darkPrimary);
  }
  body.dark-mode #how-we-know {
    box-shadow: none;
  }
  body.dark-mode #how-we-know .left-section {
    background: var(--medium);
  }
  body.dark-mode #how-we-know .left-section ul li {
    color: #fff;
    opacity: .9;
  }
  body.dark-mode #how-we-know .right-section {
    background: var(--darkPrimary);
  }
  body.dark-mode #how-we-know .right-section .button-solid {
    color: var(--darkPrimary);
  }
  body.dark-mode #how-we-know .right-section .button-solid::before {
    background: var(--tint);
  }
  body.dark-mode #how-we-know .right-section .button-solid:hover {
    color: #fff;
  }
  body.dark-mode #get-started .topper {
    color: var(--shade);
  }
  body.dark-mode #get-started .steps .step .image-group {
    background: #262626;
  }
  body.dark-mode #get-started .steps .number {
    border: 0.34615385em solid var(--dark);
  }
  body.dark-mode #get-started .steps h3 {
    color: #fff;
  }
  body.dark-mode #get-started .steps .dots .dot {
    background: var(--shade);
  }
  body.dark-mode #get-started .steps .dots .dot:nth-of-type(5) {
    background: var(--primary) !important;
  }
  body.dark-mode #get-started .button-solid {
    background: var(--darkPrimary);
  }
  body.dark-mode #get-started .button-solid:before {
    background: var(--tint);
  }
  body.dark-mode #reviews .topper {
    color: var(--shade);
  }
  body.dark-mode #reviews h2 {
    color: #fff;
  }
  body.dark-mode #reviews .right-section .review {
    background: var(--tint);
  }
  body.dark-mode #reviews .right-section .identity .light {
    display: none;
  }
  body.dark-mode #reviews .right-section .identity .dark {
    display: inline-block;
  }
  body.dark-mode #reviews .right-section .identity .name {
    color: #fff;
  }
  body.dark-mode #footer {
    background: #0e0d0d;
  }
  body.dark-mode #footer .button-solid {
    background: var(--darkPrimary);
  }
  body.dark-mode #footer .button-solid:before {
    background: var(--tint);
  }
  body.dark-mode #int-hero {
    background: url("../images/about-dark.jpg");
    background-size: cover;
    background-position: center 80%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  body.dark-mode #about-content .content .topper {
    color: var(--shade);
  }
  body.dark-mode #about-content .content h2 {
    color: #fff;
  }
  body.dark-mode #about-content .content h2:before {
    background: var(--shade);
    opacity: .1;
  }
  body.dark-mode #about-content .content h2 span {
    color: var(--shade);
  }
  body.dark-mode #about-content .content .decoration .line {
    background: var(--shade);
  }
  body.dark-mode #staff h2 {
    color: #fff;
  }
  body.dark-mode #staff .member .title {
    color: #fff;
    opacity: .7;
  }
  body.dark-mode #form .topper {
    color: var(--shade);
  }
  body.dark-mode #form h2 {
    color: #fff;
  }
  body.dark-mode #form label {
    color: #fff;
  }
  body.dark-mode #form ::placeholder {
    opacity: .3;
  }
  body.dark-mode #form .contact-right {
    background: var(--tint);
  }
  body.dark-mode #reviews .name {
    color: #fff;
  }
}
/* Desktop */
@media screen and (min-width: 1024px) {
  body.dark-mode #how-we-know {
    background: var(--darkPrimary);
  }
}