body {


    font-family: Arial, sans-serif;
    margin: 50px;
    padding-bottom: 100px; 
}

@page {
    size: A4;
    margin: 50px;
    @top-center {
        content: element(header);
      
    }
    @bottom-center {
        content: element(footer);
        /* content: url('path/to/footer-image.png'); */
        /* content: url('{{template_dir}}{{footer_image_path}}'); */
        
        
    }
}

.header-image {
    max-width: 100%;
    max-height: 100px; /* Adjust height as needed */
    object-fit: contain; /* or object-fit: cover; depending on your design */
}

.header, .footer {
    width: 100%;
    text-align: center;
    position: running(header_footer);

    display: inline-block;

}

.header {
    position: fixed;
    top: 0;
    position: running(header);
}

.footer {
    /* position: fixed; */
    position: running(footer);
    bottom: 0;
  
    width: 100%;
}

div#header{
    position: running(header);
 
 
    width: 100%;

    top: 0;
    
    
    background-color: transparent; 

}

div#footer {
    position: running(footer);
    /* text-align: center;
    font-size: 0.8em; */
 
    width: 100%;
    /*position: fixed;*/
    bottom: 0;
    /* height: 50px; 
    line-height: 50px;  */
    background-color: transparent;
}