header{
    position: sticky;
    top: 0px;
    z-index: 99;
    overflow-x: clip;
}

header.active {
    transition: 0.3s;
    background: var(--skin-color--);
    transform: translateY(0px);
}

.header nav ul li a{
    color: #000;
}

header.active .header nav ul li a{
    color: #fff;
}

.top_header .social_media ul li a{
    color: #000;
}

.header .logo img{
    filter: none;
}

header.active .header .logo img{
    filter: brightness(0) invert(1);
}

.side_bar {
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
    padding: 20px 20px 10px;
    position: sticky;
    z-index: 98;
    top: 128px;
    margin-top: 41px;
    margin-bottom: 20px;
}

@media(max-width: 768px){
    .header .logo img{
        filter: brightness(0) invert(1);
    }
    .header nav ul li a{
        color: #fff;
    }
    .top_header .social_media ul li a{
        color: #fff;
    }
}