body header {
    box-sizing: border-box;
	margin:0;
	padding:0;
	scroll-behavior: smooth;

    --base: #555;
	--base-100: #f1f1f1;
	--base-400: #555;
	--base-800: #000;
	--yellow: #ffda4b;
	--yellow-100: rgb(255, 244, 121);
	--yellow-400: #ffdb4b;
	--yellow-800: #8b6f00;
	--blue: #0a61ae;
	--blue-100: #e2f8ff;
	--blue-400: #61dafb;
	--blue-800: #0a61ae;

    font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 18px;
	max-width: 1440px;
	margin: auto;
    padding-right: 10px;
    padding-left: 10px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba(0,0,0,0.4);
    
	@media (max-width:1024px) {
		flex-direction:column;
		justify-content: space-evenly;
	}

	@media (max-width:768px) {
		flex-direction: column;
		padding: 0px;
	}

	a {
		text-decoration: none;
		color: var(--blue);
		&:hover {
			text-decoration: underline;
		}
	}

    .logo-all {
        align-items:center;
        display: flex;
        padding-left:10px;
        padding-right:10px;
        font-weight:700;
        justify-content: space-between;
        @media (max-width:1024px) {
            justify-content: center;
        }
    
        @media (max-width:768px) {
            padding: 10px 10px 0 10px;
            justify-content: space-between;
        }
    
        .logo-holder {
            display:flex;
            padding:10px;
            align-items:center;
            font-weight:700;
            color: var(--base-800);
        }
        .logo-holder .logo {
            display:flex;
            align-items:center;
            justify-content:center;
            font-size: 21.6px;
            background-color: var(--base-800);
            color: var(--base-100);
            height:50px;
            width:50px;
            margin-right:20px;
            border-radius:50%;
        }
        .logo-holder .logo-text {
            flex:1;
        }
        .mobile-toggle {
            color: var(--base-800);
            width: 32px;
            display: none;
            padding: 10px;
            @media (max-width:768px) {
                display: inline-block;
                width: 54px;
                margin-left: 30px;
            }
        }
    }
    
    nav {
        display:flex;
        align-items:center;
        @media (max-width:1024px) {
            justify-content: center;
        }
    
        @media (max-width:768px) {
            margin-top: 10px;
            width: 100%;
        }
    
        ul {
            display:flex;
            list-style-type: none;
            gap:5px;
            @media (max-width:768px) {
                display: none;
                flex-direction: column;
                text-align: center;
                width: 100%;
                &.active {
                    display: flex;
                }
            }
        }
        ul li {
            display:inline-block;
            a {
                display:inline-block;
                padding:10px 20px;
                color:var(--base);
                @media (max-width:768px) {
                    width: 100%;
                    &.button {
                        margin-top: 5px;
                    }
                }
            }
            a:hover {
                background-color: var(--base-100);
                border-radius:10px;
                text-decoration:none;
            }
        }
    }

    .button {
        display:inline-flex;
        align-items: center;
        justify-content: center;
        padding:8px 24px;
        background-color: var(--blue);
        color: var(--base-100);
        border-radius:10px;
        transition: ease 0.3s all;
        &:hover {
            text-decoration:none;
            background-color: var(--base-400);
        }
        @media (max-width:768px) {
            height: 2em;
            width: auto;
            padding:10px 20px;
            &.black, &.white {
                height: 3em;
                width: auto;
                padding:10px 20px;
            }
    
        }
    
        &.black {
            font-size: 12.6px;
            padding:8px 24px;
            border: 1px solid var(--base-800);
            background-color: black;
            color: white;
            &:hover {
                background-color: var(--base);
                color: var(--base-100);
                border: 1px solid var(--base-100);
            }
        }
    
        &.white {
            font-size: 12.6px;
            padding:8px 24px;
            border: 1px solid var(--base-800);
            background-color: transparent;
            color: var(--base-800);
            &:hover {
                background-color: var(--base);
                color: var(--base-100);
                border: 1px solid var(--base-100);
            }
        }
    
        &.white img {
            width: 12.6px;
            height: auto;
            margin-right: 10px;
            object-fit: contain;
        }
    }
}