/*==========================================================================
Dark CSS
==========================================================================*/
.light-n {
    display: none;
}
.light {
	display: none;
}
.dark-mode {
    color: var(--color-20);
    background: var(--dark-one);
    --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;
    }
    .blog__two-item-content .btn-six,
    .btn-two {
        border-color: #343434;
    }
    //========== Banner ==========\\  
    .banner__three {
        background-image: url("../../assets/img/shape/dark-bg.jpg") !important;
    }
    //========== 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,
    .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);
    }
    .mode__switch::before {
        left: calc(100% - 31px); 
    }
    .mode__switch span {
        &::before {
            background-image: url('../../assets/img/icon/sun-white.png');
        }
        &::after {
            background-image: url("../../assets/img/icon/moon-dark.png");
        }
    }
}
/*==========================================================================
Dark Light Switch CSS
==========================================================================*/
.switch__tab {
    position: fixed;
    font-weight: 500;
    display: flex;
    align-items: center;
    right: 0;
    top: 52%;
    transform: translateY(-50%) translateX(50px) rotate(90deg);
    z-index: 3; 
    cursor: pointer;
}
.light-mode-title,
.dark-mode-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading-color);
    display: flex;
    align-items: center;
}    
.mode__switch {
    height: 34px;
    width: 80px;
    display: inline-block;
    position: relative;
    margin: 0 10px;
    background: var(--primary-color-1);
    transform: translateY(0px);
    border-radius: 35px;
    cursor: pointer;
    transition: all 0.3s ease-out 0s; 
    &::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 3px;
        background: var(--text-white);
        width: 28px;
        height: 28px;
        z-index: -1;
        border-radius: 50%;
        transition: all 0.3s ease-out 0s;
    }
    &.two {
        background: var(--primary-color-2);
    } 
    &.three {
        background: var(--primary-color-3);
    } 
}    
.mode__switch span {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 34px;
    display: block;
    &::before {
        content: "";
        position: absolute;
        top: 8px;
        right: 54px;
        background-image: url('../../assets/img/icon/sun.png');
        background-repeat: no-repeat;
        width: 18px;
        height: 18px;
        background-size: cover;            
    }
    &::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 54px;
        background-image: url("../../assets/img/icon/moon.png");
        background-repeat: no-repeat;
        width: 18px;
        height: 18px;
        background-size: cover;
    }
}