@media (min-width: 768px) {
  .mail-entry {
    width: 50%;
  }
}
/* since we are fixing the nav top as fixed so 
the img head is being overlapped by that , so we need space a bit */
/* so we use psuedo elements to do a particulr change in the
first line or first character in the text, for further more 
go to psuedo elents in css w3skls
beffore r after are known as first elements*/
body::before {
  display: block;
  content: "";
  height: 60px;
}
#map {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.btn-submit:hover,
.btn-submit:active,
.btn-read-more:hover {
  background-color: #343a40;
}

.btn-read-more:hover {
  background-color: #ffa8a8;
}