<script lang="ts">
    import intelidom_banner from '$lib/assets/intelidom_banner.svg';
    import HeaderContact from './HeaderContact.svelte';
</script>

<style>
    div{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.25);
        position: sticky;
        top: 0;
        backdrop-filter: blur(7px);
        padding: 0 0 1em 0;
    }


    .blur-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: rgba(15, 15, 16, 0.8);
    }

    div>img{
        padding: 1em;
        width: 15em;
        z-index: 1;
    }

    

@media (min-width: 900px){

    :global(.header-contact){
        position: absolute;
        right: 2em;
        z-index: 1;
    }

     div{
       padding: 0;
    }
}
</style>



<div class="header-content">
    <img src={intelidom_banner} alt="intelidom banner">
    <HeaderContact/>
</div>