.form-container {
    padding: 5%;
    position: relative;
}

.border {
    border-radius: 5%;
    border: 1px solid black;
    width: 66%;
    padding: 3%;
    box-shadow: 5px 5px 15px black;
}

.form-container h1 {
    padding-bottom: 10px;
}

.form {
    width: 100%;
}

input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=email] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=number] {
    width: 100%;
    padding: 9px;
    border: 1px solid #ccc;
}

button[type=submit] {
    background-color: #025AA6;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #0474d6;
}

.row.no-gutter {
    margin-right: -5px;
    margin-left: -5px;
}

.container {
    border-radius: 5px;
    /* background-color: #f2f2f2; */
    padding: 20px;
}

.contact-detail {
    width: 33%;
    background-color: rgb(241, 241, 241);
    box-shadow: 5px 5px 15px black;
    position: absolute;
    top: 10%;
    left: 66%;
    border-radius: 5%;
    height: 81%;
    padding: 3%;
}

.contact-detail p {
    font-size: 130%;
    margin: 10px;
}

#output2 {
    /* color: #f2f2f2; */
    font-size: 200%;
    background-color: #f2f2f2;
    width: 50%;
}

form label,
form input {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
}

form .error {
    color: #ff0000;
}

@media screen and (max-width: 500px) {
    .border {
        width: 100%;
        border: none;
        box-shadow: none;
    }
    .contact-detail {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: 10%;
        text-align: center;
        font-size: small;
        padding: 2%;
        box-shadow: none;
        background-color: transparent;
    }
}


/* tablet css */

@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    .border {
        width: 100%;
    }
    .contact-detail {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 600px;
        margin-top: 10%;
        text-align: center;
    }
}