.container {
    margin: 1% 3% 1% 3%;
    display: grid;
    grid-gap: 15px;
    grid-row-gap: 15px;
    /* grid-template-columns: 30% 30% 35%; */
    grid-template-areas: 
    'header header header'
    'nav nav nav'
    'contact contact contact'
    'detailsM detailsM form'
    'footer footer footer';
}

.header { grid-area: header; }
.nav-area { grid-area: nav; }
#mum { grid-area: detailsM; }
/*#pune { grid-area: detailsP; }*/
form { grid-area: form; }
footer {  grid-area: footer; }

#mum a {
    color: black;
}

.contact {
    grid-area: contact;
    background-color: var(--olive-green);
}

.contactDetails {
    display: flex;
    flex-direction: column;
    background-color:white;
    border : 2px solid black;
    /* width: 30vw; */
    color: black;
}

form {
    /* width: 35vw; */
    padding: 1%;
    display: flex;
    flex-direction: column;
    background-color: var(--logo-dark-teal);
}

form > label {
    margin: 3% 1% 1% 1%;
    padding: 0 0.5%;
}

form > input {
    margin: 0.5%;
    padding: 2% 2%;
    border: 1px solid darkgray; 
    border-radius: 4px;
}

form > textarea {
    font-family: Futura,Trebuchet MS,Arial,sans-serif;
    margin: 0.5%;
    padding: 2% 2%;
    border: 1px solid darkgray; 
    border-radius: 4px;
    resize: none;
}

form > input[type="submit"] {
    font-family: 'Open Sans','sans-serif';
    display: block;
    border: none;
    background-color: black;
    color: white;
    margin: 1%;
    padding: 2%;
    width: 40%;
}

form > input[type="submit"]:hover {
    background-color: white;
    color: black;
}

@media only screen and (max-width:950px) {
    .container {
        margin: 1% 3%;
    }    
}

@media only screen and (max-width: 600px)
{
    .container {
        margin: 1%;
        grid-template-columns: 100%;
        grid-template-areas: 
        'header'
        'nav'
        'contact'
        'detailsM'
        /*'detailsP'*/
        'form'
        'footer';
    }    
}

@media only screen and (min-width:2000px) {
    .container {
        margin: 1% 19%;
    }
}