/* dark css hrre */
.dark{
    --primary-color: #fff;
    --foreground-color: #fff;
    --foreground-sub-color: #fff;
    --body-background-color: rgba(33, 36, 40, 1);
    --border-color: #000000;
    
}
.dark .sidebar__header{
    background: #000000;
}
.dark .bg-dark_primary_bg{
    
    background-color: rgba(33, 36, 40, 1);
}

.dark .primary__btn:hover{
    color: var(--secondary-color);
}
.dark .hero__profile::before{
    background: #fff;
}
.dark .hero__profile--title{
    color: #333333;
}
.dark .hero__profile--subtitle{
    color: #636363;
}
.dark .hero__profile--info__text{
    color: #636363;
}
.dark .hero__profile--info__text:hover{
    color: var(--secondary-color)
}
.dark .home__navigation--menu__icon{
    background: #fff;
}


.dark .header__sticky.sticky{
    background-color: rgba(24, 26, 29, 1);
}

.dark #scroll__top:hover{
    color: var(--secondary-color);
}

/* dark hero section css */
.dark .hero__section--bg{
    background: url(../img/hero/hero-bg-img-dark.png);
    border-bottom: 1px solid var(--bg-black-color);
}

.dark .hero__content--title{
    color: var(--text-white-color);
}
.dark .hero__thumbnail--media.light_img{
    display: none;
}
.dark .hero__thumbnail--media.dark_img{
    display: block;
}
.dark .main__logo--img.logo_light{
    display: none;
}
.dark .main__logo--img.logo_dark{
    display: block;
}
.dark .projects__budget{
    background: var(--bg-black-color);
}
.dark .home2__hero--bg{
    background: url(../img/hero/home2-hero-bg-dark.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.dark .pricing__box{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 991px) {
    .dark .home__navigation--menu{
        box-shadow: -10px 0 20px 0 rgba(0, 0, 0, 0.1);
        background-color: rgba(24, 26, 29, 1);
    }
    .dark .home__navigation--menu__icon{
        background: var(--secondary-color);
    }
}

.dark .toggle__navigation--bg{
    background: #fff;
}
.dark .toggle__navigation.menu--visible .toggle__navigation--button{
    background: #fff;
}

/* dark services section css */
.dark .services__card{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
.dark .services__card:hover{
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
}

/* dark about section css */
.dark .about__section--bg{
    background-image: none;
    border-bottom: 1px solid var(--bg-black-color);
}
.dark .about__btn:hover{
    color: var(--secondary-color);
}

/* brand logo section */
.dark .brand__logo--img.brand_logo_light{
    display: none;
}
.dark .brand__logo--img.brand_logo_dark{
    display: block;
    filter: grayscale(1);
    opacity: 1;
}
.dark .brand__logo--img.brand_logo_dark:hover{
    filter: grayscale(0);
}

/* Resume dark css */
.dark .border__round{
    background: #fff;
}


/* skills dark css */
.dark .skills__field::before{
    background-color: rgba(55, 65, 81, 1);
}

/* portfolio dark css */
.dark .portfolio__section--bg{
    background: none;
    border-bottom: 1px solid var(--bg-black-color);
    border-top: 1px solid var(--bg-black-color);
}
.dark .modal-content{
    background-color: rgba(55, 65, 81, 1);
}
.dark .portfolio__modal--colse:hover{
    color: var(--secondary-color);
}

/* contact dark css */
.dark .contact__section--bg{
    background: url(../img/other/contact-bg-dark.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-top: 1px solid var(--bg-black-color);
}
.dark .contact__input--field{
    border: 1px solid rgba(71, 85, 105, 1);
    color: var(--text-white-color);
}
.dark .contact__input--field:focus{
    border-color: #fff;
}
.dark .contact__textarea--field{
    border: 1px solid rgba(71, 85, 105, 1);
    color: var(--text-white-color);
}
.dark .contact__textarea--field:focus{
    border-color: #fff;
}

/* blog dark css */
.blog__card--tag{
    background: var(--secondary-color);
    color: var(--text-white-color);
}

/* footer dark css */
.dark .footer__bg{
    background: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-top: 1px solid var(--bg-black-color);
}