*{
    justify-content: center;
}


.mapcontainer{
    width: 90%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
    
    

}

.mapcard{
    width: 80%;
    height: 88vh;
    justify-content: center;

    margin-left: 20vh;
    background-color:  rgb(136, 206, 206);
    text-align: center;
    padding: 4vh;
    border-radius: 5vh;
    box-shadow: 0 0 6vh rgb(0, 30, 38);
    
}



.mapcard :hover{
    transform: translateY(-11vh);
    transition: 1.8s;
    background-color: rgb(216, 100, 87);
    border-radius: 5vh;    
    
}

iframe{
    width: 98%;
    height: 75vh;
    padding: 3%;
    margin-left: 2vh;

    display: flex;
    border-radius: 50px;
    

    
    filter: invert(100%);
}