html {
    height: 100%;
    margin: 0;
    font-family: "Univers 85 Extra Black Oblique", sans-serif;

}

body {
    background-size: cover;
    height: 100%; /* Set body height to 100% */
    margin: 0; /* Remove default margin */
}



    .contact{
        margin-top:10px;
    }
    .contact h2 {
    color: white;
    font-size: 24px;
    margin-bottom: 40px;
    text-align: center;
    }

    .contact .form-group {
    margin-bottom: 20px;
    }

    .contact label {
    display: flex;
    font-size: 14px;
    margin-bottom: 5px;
    }

    .contact input[type="text"],
    .contact input[type="email"],
    .contact textarea {
    border: #201938df;
    border-radius: 50px;
    font-size: 30px;
    height: 60px;
    width: 100%;
    background-color: #201938df;
    color: white;
    }
    .contact textarea:focus{
        background-color: #201938df;
        color: white;
    }
    .contact textarea {
    height: 300px;

    }

    .contact button[type="submit"] {
    background-color: #201938df;
    border: none;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;

    width: 100%;
    }

    .contact button[type="submit"]:hover {
    background-color: #201938;
    }
    .contact iframe {
            width: 100%; /* Make the map iframe take up the full width on smaller screens */
            height: 100%; /* Adjust the height as needed for smaller screens */
        }
        @media only screen and (max-width: 900px) {


            .contact input[type="text"],
            .contact input[type="email"],
            .contact textarea {
            font-size: 20px;
            height: 30px;
            width: 100%;
            background-color: #201938df;
            color: white;
            }
            .contact textarea {
                height: 100px;

                }
            .contact h2 {
                font-size: 15px; /* Adjust the font size for smaller screens */
            }

            .contact form {
                margin-bottom: 10px; /* Add some spacing between the form and the map on smaller screens */
            }

            .contact .row {
                flex-direction: column; /* Stack columns on top of each other for smaller screens */
            }

            .contact .col-md-6 {
                width: 100%; /* Make each column take up the full width on smaller screens */
            }

            .contact iframe {
                width: 100%; /* Make the map iframe take up the full width on smaller screens */
                height: 300px; /* Adjust the height as needed for smaller screens */
            }
         }