.communication {
    float: left;
    width: 100%;
    margin-top: 50px;
}

.harita{
    margin-top: 30px;
    width: 100%;
    height: 600px;
}

.communication-bar {
    float: left;
    width: 40%;
    height: 110px;
    margin-top: 10px;
    margin-left: 3%;
    border-radius: 10px;
    padding: 5px;
    border: 2px solid black;
    box-shadow: 3px  3px black;
    overflow: auto;
    color: rgb(90, 90, 90);
    transition: 0.3s;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.communication-bar:hover {
    box-shadow: none;
}


.communication-bar i{
font-size: 25px;
color: aqua;
margin-top: 10px;
}

.communication span {
   font-size: 20px;
   color: rgb(38, 114, 180);
}

.communication a{
    color: rgb(90, 90, 90);
}

@media (max-width:500px){
    .communication-bar{
        width: 95%;
        margin-left: 2%;
        height: 125px;
        padding: 0;
    }
}