html, body {
    height: 100%;
}

body {
    display: inline-block;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, rgba(#242e4d, .9), rgba(#897e79, .9));
    font-family: DroidSans, Droid Sans, Verdana;
}

#prf-det {
    display: grid;
    grid-template-areas: 'personal' 'company' 'contact' 'address';
    gap: 5px;
    padding: 0px;
    margin: 0 auto;
}

.sec1 {
    grid-area: personal;
    background-color: white;
    padding: 5px;
    border: 1px solid #eee;
    border-radius:8px;
}

    .sec1> div{
        text-align:left;
    }

.sec2 {
    grid-area: company;
    background-color: white;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 8px;
}

    .sec2 > div {
        text-align: left;
    }

.sec3 {
    grid-area: contact;
    background-color: white;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 8px;
}


.sec3 > div {
    text-align: left;
}

.sec4 {
    grid-area: address;
    background-color: white;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 8px;
}

    .sec4 > div {
        text-align: left;
    }

h3 {
    text-align: left;
    text-transform: uppercase;
}

label {
    display: block;
    font-family:inherit;
}

input[type=text], textarea, input[type=email] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
}

input[type=mobile]{
    width: 100%;
    padding: 5px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
}

.btn-div {
    padding: 10px 20px; /* Adjust padding for desired size */
    /*background-color: #007bff; /* Button background color */*/
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor on hover to indicate interactivity */
    /*text-align: center; /* Center the text */ */ text-decoration: none; /* Remove underline if used with an <a> tag */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Example shadow */
}

    .btn-div:hover {
        background-color: #0056b3; /* Darker background on hover */
        transform: translateY(1px); /* Slight downward shift for a "pressed" effect */
    }

    .btn-div:active {
        background-color: #004085; /* Even darker background on click (active state) */
        transform: translateY(1px); /* Slight downward shift for a "pressed" effect */
    }

/*-------------------- Desktop--------------------*/
@media screen and (min-width: 600px) {
    #prf-det {
        width: 80vw;
        /*max-width: 15em;*/
    }

    h3 {
        font-size: 1em;
    }

    label{
        font-size:0.9em;
    }

    .sec1 > div, .sec2 > div, .sec3 > div, .sec4 > div {
        font-size: 0.9em;
    }

    .grdCrd {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
        margin: 0 8px;
    }
}

/*-------------------- Mobile --------------------*/
@media screen and (max-width: 600px) {
    #prf-det {
        width: 90vw;
        /*max-width: 15em;*/
    }

    h3 {
        font-size: 0.7em;
    }

    label {
        font-size: 0.8em;
    }

    .sec1 > div, .sec2 > div, .sec3 > div, .sec4 > div {
        font-size: 0.7em;
    }

    .grdCrd {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 5px;
        margin: 0 8px;
    }

    input[type=text], textarea, input[type=email] {
        font-size:0.9em;
    }

    textarea{
        min-height:100px;
    }
}