html,
body {
    font-family: "Roboto", "Helvetica Neue", "Arial, sans-serif";
    color: #000000;
    font-size: 24px;
    background-color: #0298f2;
    background-image: linear-gradient(192deg, #0298f2 0%, #80D0C7 100%);
}

.form {
    width: 100%;
    background-image: linear-gradient( 105.3deg, rgba(30, 39, 107, 1) 21.8%, rgba(77, 118, 221, 1) 100.2%);
    box-shadow: 6px 6px 30px rgb(255, 255, 255), -6px -6px 30px rgb(255, 255, 255);
}

.google-map-div {
    width: 100%;
}

.page-content {
    margin: 0px auto;
}

.google-map {
    max-width: 600px;
    max-height: 600px;
}

.submit {
    box-shadow: 2px 2px 5px rgb(255, 255, 255), -2px -2px 5px rgb(255, 255, 255);
}

@media (max-width: 576px) {
    .page-content,
    .banner {
        width: 95%;
    }
}

@media (min-width: 576px) and (max-width:768px) {
    .page-content,
    .banner {
        width: 65%;
    }
}

@media (min-width: 768px) and (max-width:992px) {
    .page-content,
    .banner {
        width: 50%;
    }
}

@media (min-width: 992px) and (max-width:1200px) {
    .page-content,
    .banner {
        width: 45%;
    }
}

@media (min-width: 1200px) {
    .page-content,
    .banner {
        width: 40%;
    }
}