@import url("https://fonts.googleapis.com/css?family=Poppins|Varela+Round&display=swap");

#header {
  background-color: #ebecf0;
  border-radius: 0.2cm;
  width: auto;
}
#head {
  font-family: "Varela Round", sans-serif;
  text-align: center;
  color: #051a47;
}
.container {
  border-radius: 0.2px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 
  "login1 login2 login3";
  grid-gap: 5rem;
}
#login1 {
  grid-area: login1;
  width: 100%;
}
#login2 {
  grid-area: login2;
  width: 100%;
}
#login3 {
  grid-area: login3;
  width: 100%;
}
@media only screen and (max-width: 700px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: 
    "login1"
    "login2"
    "login3";
  }
}
#footer {
  font-family: "Poppins", sans-serif;
  background-color: #ebecf0;
  border-radius: 0.2cm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
}
#mlogo {
  border-radius: 0.2cm;
  width: 90vw;
  padding: 0.5vw;
}
.social-icons {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #051a47;
}
.social-icons .images {
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-icons img {
  width: 55px;
}
.address {
  font-family: "Varela Round", sans-serif;
  text-align: center;
  color: #051a47;
}
.details {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #051a47;
}
#bottom-line {
  font-family: "Varela Round", sans-serif;
  text-align: center;
  color: #051a47;
}

@media screen and (max-width: 768px) {
  #footer {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 1024px) {
  #mlogo {
    width: 700px;
  }
}