/* header */
    header{
        position: relative;
        background: var(--blue);
        padding: 8px 32px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    /* box social header */
    .box_social{
        position: absolute;
        top: 0; left: 0;
        width: max-content;
        height: 100%;
        color: var(--blue);
        background: var(--white);
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 64px 16px 32px;
        clip-path: polygon(0 0, 85% 0, 96% 100%, 0% 100%);
        border-bottom: 1px solid var(--blue);
    }
    
    .box_social span{
        color: var(--blue);
    }
    
    .box_social a{
        background: var(--blue);
        width: 28px; height: 28px;
        border-radius: 50%;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        i{
            color: var(--white);
        }
    }
    
    .box_social a:hover{
        transform: translatey(-3px);
    }
    
    /* contact header */
    .box_contact_header{
        display: flex;
        align-items: center;
        gap: 16px;
    }
    
    .contact_header{
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .contact_header .icon_div{
        width: 25px; height: 25px;
        background: var(--white);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .contact_header .icon_div i{
        color: var(--blue);
    }
    
    .content_contact_header{
        display: flex;
        flex-direction: column;
    }
    
    .content_contact_header span, .content_contact_header a{
        color: var(--white);
    }
    
    .content_contact_header a:hover{
        text-decoration: underline;
    }
    
    .content_contact_header span{
        font-size: 14px;
    }
/* header */

/* responsive */
    /* header */
        @media screen and (max-width: 900px){
            .box_social{
                display: none;
            }
            
            header{
                justify-content: center;
            }
        }
        
        @media screen and (max-width: 500px){
            .email_header{
                display: none;
            }
        }
    /* header */
/* responsive */