<script>
document.addEventListener('DOMContentLoaded', function() {
    const header = document.getElementById('header');
    const firstSection = document.getElementById('first');
    const navLinks = document.querySelectorAll('#header-nav li a');
    const logoPaths = document.querySelectorAll('.logo path:not(:last-of-type)');

    function onScroll() {
        const headerHeight = header.offsetHeight;
        const firstSectionTop = firstSection.getBoundingClientRect().top;

        if (firstSectionTop <= headerHeight) {
            header.style.backgroundColor = '#ffffff';
	          header.style.boxShadow = '0px 4px 8px 0px rgba(99, 107, 147, 0.15)';
            logoPaths.forEach(path => path.style.fill = '#13172B');
            navLinks.forEach(link => link.style.color = '#212121');
        } else {
            header.style.backgroundColor = 'transparent';
						header.style.boxShadow = 'none';          
            logoPaths.forEach(path => path.style.fill = '#ffffff');
            navLinks.forEach(link => link.style.color = 'white');
        }
    }

    window.addEventListener('scroll', onScroll);
});
</script>