Hide header & footer only for first page?

1

Hide header & footer for first page in this ?
Anyone Have solution

<div class="letter-head" style="position: fixed;">
    <div class="header-content">
        <div class="company-details">
            <p>Address Line 1, City, Country</p>
            <p>Phone: +91 1234567890 | Email: info@company.com</p>
        </div>
    </div>
</div>


<div class="content">    
    {% for section in doc.table_wyqq %}
    {% endfor %}
</div>


<div class="footer" style="position: fixed;">
    <div class="footer-content">
        <p>Website: www.company.com | Support: support@company.com</p>
        <p class="staticText">Page <span class="page-number"></span> of <span class="total-pages"></span></p>
    </div>
</div>

<style>

    .letter-head {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 10px;
        text-align: center;
        border-top: 1px solid #ccc;
    }

    /* Print-specific styles */
    @media print {

        .letter-head {
            display: none; 
            position: static; 
        }


        body {
            counter-reset: page;
        }

        @page {
            margin-top: 100px; 
        }


        .letter-head {
            display: block;
            position: static; 
        }
    }
</style>

Thanks in advance