<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/styles.css" rel="stylesheet" />
    <link href="/responsive.css" rel="stylesheet" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap"
        rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
        rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap"
        rel="stylesheet"
    />
    <title>Handover Certificate</title>
</head>
<body>
<section>
    <div class="body">
        <div class="doc-div">
            <img src="/assets/handover/handover-cert.png" />
            <div class="header_container">
                <div class="header_wrapper">
                    <img src="/assets/handover/logo.png" alt="logo" class="img-responsive" />
                    <p class="serial">Serial No: <span class="red">AH0116</span></p>
                    <div class="centralize">
                        <div class="company-name">
                            <p>APDC HOMES</p>
                        </div>
                        <div class="company-addr">
                            <p>Plot 17, Kaba District, Along Kubwa Expressway, Abuja</p>
                        </div>
                        <div class="hand_over_cert">
                            <p>HAND OVER CERTIFICATE</p>
                        </div>
                        <div class="name-of-client">
                            <p>Name of The Client</p>
                        </div>
                        <div class="house_type">
                            <p>House Type</p>
                        </div>
                        <div class="allocation">
                            <p>Allocation</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="property_owner">
                <p>Property Owner:</p>
                <div class="text-block">
                    <input type="text" />
                    <p>Name</p>
                </div>
                <div class="text-block">
                    <input type="text" />
                    <p>Signature</p>
                </div>
                <div class="text-block">
                    <input type="text" />
                    <p>Date</p>
                </div>
            </div>
            <div class="note">
                <p>
                    (I hereby certify that the property handed over to me, be correct
                    and true of description on taking full possession at the above
                    mentioned location)
                </p>
            </div>
            <div class="property_apdc">
                <p>APDC:</p>
                <div class="text-block">
                    <input type="text" />
                    <p>Name</p>
                </div>
                <div class="text-block">
                    <input type="text" />
                    <p>Signature</p>
                </div>
                <div class="text-block">
                    <input type="text" />
                    <p>Date</p>
                </div>
            </div>
            <div class="property_witness">
                <p>Property Owner:</p>
                <div class="text-block">
                    <input type="text" />
                    <p>Name</p>
                </div>
                <div class="text-block">
                    <input type="text" />
                    <p>Signature</p>
                </div>
                <div class="text-block">
                    <input type="text" />
                    <p>Date</p>
                </div>
            </div>
            <div class="disclaimer">
                <p>
                    APDC shall not be responsible for the repair of any material
                    defect not reported to the Facilities Manager within the first 6
                    months of occupation
                </p>
            </div>
        </div>
    </div>
</section>


<style>
    .body {

        height: 100vh;
        width: 100%;
    }

    .doc-div {
        height: 100%;
        width: 100%;
        position: relative;

    }

    .doc-div img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .mobile-width {
        display: flex;
        width: 100%;
    }

    .mobile-input {
        width: 50%;
    }

    .header_container {
        margin-top: 2%;
        width: 100%;
    }

    .header_wrapper>img {
        height: 70px;
        width: 170px;
        position: absolute;
        top: 7%;
        left: 4%;

    }

    .serial {
        position: absolute;
        top: 15%;
        left: 4%;
    }

    .red {
        color: #F00;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .header {
        width: 100%;
        display: flex;
        margin: 0 auto;
    }

    .logo_header {
        width: 50%;
    }

    .logo_header>img {
        width: 200px;
        height: auto;
    }

    .centralize {
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translate(-50%, 50%);
        text-align: center;
    }

    .company-name:nth-child(1) {
        color: #489153;
        font-family: Inter;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 1.04px;

    }

    .company-name:nth-child(2) {
        position: absolute;
        top: 10px;
        color: #212529;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-align: center;
    }

    .company-addr {
        color: #212529;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .hand_over_cert {
        color: #212529;
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0.4px;
    }

    .name-of-client {
        font-family: 'Tangerine', cursive;
        color: #212529;
        font-size: 35px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-top: -20px;
    }

    .house_type {
        font-size: 18px;
        margin-top: -20px;
    }

    .property_owner {
        position: absolute;
        left: 7%;
        top: 50%;
        font-size: 20px;
        display: flex;
        justify-content: center;
    }
    .property-owner>p{
        margin-top: 10px;
    }

    .name_property_owner {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    input {
        border-top: none;
        border-left: none;
        border-right: none;
        width: 320px;
    }

    .text-block {
        text-align: center;
        margin-top: 11px;
    }

    .property_apdc {
        position: absolute;
        left: 13%;
        top: 65%;
        font-size: 20px;
        display: flex;
        justify-content: center;
    }

    .property_witness {
        position: absolute;
        left: 7%;
        top: 80%;
        font-size: 20px;
        display: flex;
        justify-content: center;
    }

    .disclaimer {
        position: absolute;
        bottom: 7%;
        text-align: center;
        left: 0%;
        transform: translate(20%, 50%);
        overflow-x: hidden;

    }

    .note {
        font-size: 15px;
        position: absolute;
        top: 57%;
        left: 20%;
        transform: translate(0%, 50%);
        text-align: center;

    }



    /* Default styles for all screen sizes */

    /* Mobile styles */
    @media screen and (max-width: 767px) {
        .img-responsive {
            width: 35%;
            height: 49px;
        }

        .serial {
            font-size: 10px;
            margin-top: 10px;

        }

        .centralize {
            top: 3%;
        }

        .company-name {
            font-size: 17px;

        }

        .company-addr {
            font-size: 9px;

        }

        .hand_over_cert {
            font-size: 12px;
            font-weight: bold;
        }

        .name-of-client {
            font-size: 28px;
        }

        .house_type {
            font-size: 16px;
        }

        .property_owner,
        .property_apdc,
        .property_witness {
            font-size: 12px;
            width: 80%;
            margin: 0 auto;
            left: 20px;
            /* display: none; */
        }

        .note {
            font-size: 9px;
            left: 0px;
            right: 0px;
            padding: 0px 20px;
        }

        .disclaimer {
            bottom: 2%;
            padding: 10px;
            font-size: 9px;
            left: 0px;
            transform: translate(0%, 0%);



        }

        input {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;


        }

    }

    @media screen and (width: 375px) {
        .centralize {
            top: -10%;
        }

        .header_wrapper>img {
            width: 100px;
            height: 40px;
        }

        .serial {
            top: 15%;
        }

        .disclaimer {
            bottom: -1%;
        }

        .property-witness {
            top: 76px;
        }
    }

    @media screen and (width: 360px) {
        .centralize {
            top: -4%;
        }
    }


    /* Tablet styles */
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .centralize{
            top: 10%;
        }
        input {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .property_owner,
        .property_apdc,
        .property_witness {
            font-size: 12px;
            width: 90%;
            margin: 0 auto;
            left: 20px;
        }

        .doc-div {
            height: 100%;
            width: 100%;
            position: relative;

        }
        .disclaimer{
            transform: translate(0%, 0%);
            padding: 0px 50px;
        }
        .note{
            left: 0%;
            transform: translate(0%, 0%);
            padding: 0px 50px;
        }

    }

    /* Desktop styles */
    @media screen and (min-width: 1024px) {
        /* Add your specific styles for larger screens here */
    }

</style>



</body>
</html>
