/*==========================================================================
Dark CSS
==========================================================================*/
.light-n {
    display: none;
}
.light {
	display: none;
}
.dark-mode {
    overflow: hidden; 
    color: var(--color-20);
    --body-color: var(--color-20);
    background: #1C1E22;
    --text-heading-color: #FFFFFF;
    --color-2: #808287;
    --color-6: #222429;
    --color-7: #343434;
    --color-10: #343434;
    --color-12: #343434;
    --color-13: #808287;
    --color-15: #343434;
    --color-16: #343434;
    --border-color-1: #343434;
    --border-color-2: #343434;
    --border-color-3: #343434;
    --border-color-4: #343434;
    --bg-white: #1C1E22;
    .dark__image img {
        filter: grayscale(100%);
    }
    .light-n {
        display: inline-block;
    }
    .dark-n {
        display: none;
    }
    //========== Header ==========\\
    .header__two {
        &::before {
            background: url("../../assets/img/shape/before-dark.png");
            background-position: center;
            background-repeat: no-repeat;

        }
        &::after {
            background: url("../../assets/img/shape/after-dark.png");
            background-position: center;
            background-repeat: no-repeat;

        }
    }
    .header__area-menubar-right-sidebar-popup-icon::before {
        opacity: 0.2;
    }
    .header__area-menubar-center-menu ul li.menu-item-has-children {
        > a {
            &::before {
                background: var(--text-white);
            }
            &::after {
                background: var(--text-white);
            }
        }
    }
    .header__area-menubar-center-menu {
        ul li.menu-item-has-children:hover > a::after {
            background: var(--primary-color-1);
        }
        &.two {
            ul {
                li {
                    &.menu-item-has-children {
                        &:hover > a {
                            &::after {
                                background: var(--primary-color-2);
                            }
                        }
                    }
                }
            }                   
        }
        &.three {
            ul {
                li {
                    &.menu-item-has-children {
                        &:hover > a {
                            &::after {
                                background: var(--primary-color-3);
                            }
                        }
                    }
                }
            }                   
        }
    }
    .header__sticky-sticky-menu {
        box-shadow: 0 0 50px var(--color-12);
    }
    .header__area-menubar.two .header__area-menubar-left-logo .two {
        display: none;
    } 
    //========== Contact ==========\\
    .contact__four-info {
        background: var(--dark-two);
        &::after {
            opacity: 0;
        }
        &:hover {
            background: var(--bg-heading-color);
            &::after {
                opacity: 0.6;
            }
        }
    }
    .contact__four-form,
    .contact__page-form {
        background: var(--dark-two);
        input,
        textarea {
            background: var(--dark-two);            
        }
    }
    .contact__two-box {
        box-shadow: 0 0 80px var(--color-18);
    }
    //========== Features ==========\\
    .features-area-item.features-area-item-hover {
        background: var(--primary-color-3);
    }
    //========== Services ==========\\
    .banner__one-image::before,
    .banner__four-image::before,
    .solution__area::after,
    .portfolio__three::before,
    .page__banner::before,
    .services__two-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: var(--text-white);
        mix-blend-mode: color;
    }
    .services__three-item-content::after {
        background: var(--dark-two);
    }
    //========== Pricing ==========\\
    .pricing__area-item {
        box-shadow: none;
        background: var(--dark-two);
        &::after {
            content: none;
        }
        &-title .text-two {
            color: var(--color-20);
        }
    }
    //========== Experience ==========\\
    .copyright__three p,
    .experience__area-right-skill-item-count.text-two {
        color: var(--color-20);
    }
    //========== Get In Touch ==========\\
    .getIn__touch-three-right {
        background: var(--dark-two);
        input,
        textarea {
            border-color: var(--body-color);
            &:focus {
                border-color: var(--primary-color-3);                
            }
        }
    }
    .getIn__touch-left {
        box-shadow: 0 0 60px var(--color-11);
    }    
    //========== Team ==========\\
    .team__three-item-image-info-icon::after {
        background-image: url("../../assets/img/icon/union-dark.png");
    }   
    .testimonial__area-item-client-image img,
    .news__standard-left-item-image img,
    .testimonial__two-item-bottom > img,
    .all__sidebar-help-image > img,
    .team__three-item-image > img,
    .team__two-item-image > img,
    .faq__two-left-image > img,
    .blog__two-item-image img,
    .project__area-item > img,
    .project__one-item > img,
    .post__item-image img {
        filter: grayscale(100%);
    }
    .header__area-menubar-center-menu ul li .sub-menu,
    .testimonial__two-item-bottom::before,
    .news__standard-left-item-content,
    .solutions__two-item-icon,
    .blog__three-item-content,
    .team__area-item-content,
    .blog__two-item-content,
    .features-area-item,
    .testimonial__two-item {
        background: var(--dark-two);
    }    
    input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
        color: var(--text-white);
    }

}