.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--bg-color);
    position: fixed;
    width: 100%;
    z-index: 40;
    .header__logo{
        width:100%;
        height: 100%;
        max-width: 5rem;
        max-height: 5rem;
        border-radius: 50%;
        object-fit: contain;
    }
    .header__nav, .header__list{
        display: flex;
    }
    .header__nav{
        align-items: center;
    }
    .header__list{
        gap:2rem;
        font-size: 1.8rem;
        @media (width <=  768px){
            font-size: 1.4rem;
        }
        .header__element, .header__link{
            color:white;
            font-weight: 700;
            &:hover{
                color:var(--headings-color);
            }
        }
    }

  }