.dark-mode:root {
    --main-bg-color: #e74c3c;
    --dark-bg-color: #c0392b;
}

.dark-mode {
    background-color: hsl(227, 10%, 10%);
    color: white;
}

.dark-mode body {
    background-color: hsl(227, 10%, 10%);
    color: white;
}

.dark-mode #header .logo h1 a,
#header .logo h1 a:hover {
    color: white !IMPORTANT;
}

.dark-mode .header-scrolled {
    background-color: #fff !IMPORTANT;
}

.dark-mode .mobile-nav-toggle::before {
    color: white !IMPORTANT;
}

.dark-mode .hero-img {
    background-color: #fff !IMPORTANT;
}

.dark-mode .section-title h2 {
    color: white !IMPORTANT;
}

.dark-mode .counts .content .count-box span {
    color: white !IMPORTANT;
}

.dark-mode .services .icon-box {
    background-color: #2b2b2b !IMPORTANT;
    color: white !IMPORTANT;
}

.dark-mode .services .icon-box::before {
    background-color: #141414 !IMPORTANT;
}

.dark-mode .title a {
    color: white;
    background-color: #2b2b2b;
}

.dark-mode li {
    color: white !important;
}

.dark-mode .main-menu {
    background-color: hsl(227, 10%, 10%);
    color: white;
}

.dark-mode .main-menu li a {
    background-color: hsl(227, 10%, 10%);
    color: white;
}

.dark-mode .portfolio-filter li.mixitup-control-active {
    color: white;
}

.dark-mode button {
    background-color: hsl(227, 10%, 10%);
    color: white;
    border-color: hsl(227, 10%, 10%);
}

.dark-mode .pic-frame:after {
    border: 2px solid white;
}

.dark-mode .main-menu {
    background-color: hsl(227, 10%, 10%);
}

.dark-mode a {
    background-color: hsl(227, 10%, 10%);
    color: white;
}

.dark-mode .mobile-nav {
    background-color: hsl(227, 10%, 10%);
    color: white;
}

.dark-mode #hero h1 {
    color: white !IMPORTANT;
}

.dark-mode #footer {
    color: white;
    background-color: rgba(0, 0, 0, 0);
}

.dark-mode #footer a {
    color: white;
}

.dark-mode .counts .content .count-box p {
    color: white;
}

.dark-mode .features .icon-box h3 a {
    color: white;
    background-color: #2b2b2b;
}

.dark-mode .icon-box {
    background-color: #2b2b2b;
}

.dark-mode .icon-box:hover {
    background-color: #141414;
}

.dark-mode .features .icon-box:hover h3 a {
    background-color: #141414;
}

.dark-mode .section-bg {
    background-color: rgba(0, 0, 0, 0);
}

.dark-mode .testimonials .testimonial-item {
    background-color: #2b2b2b;
}

.dark-mode .testimonials .testimonial-item .testimonial-img {
    border-color: #141414;
}

.dark-mode .skyblock {
    opacity: 0.75;
}

.dark-mode .icofont-navigation-menu:before {
    color: white;
}

.dark-mode .faq .faq-list li {
    background: #2b2b2b;
    color: white;
}

.dark-mode .faq .faq-list a {
    background: #2b2b2b;
    color: white;
}

.dark-mode .faq .faq-list a:hover {
    color: var(--main-bg-color);
}

.dark-mode .team .member .member-info {
    background-color: #2b2b2b;
    color: white;
}

.dark-mode .team .member .member-info h4 {
    color: white;
}

.dark-mode .btn:hover {
    color: white;
}