body{
  background:url(img/hexagons.svg), linear-gradient(to right, #141e30, #224D7E);
  font-family: 'Poppins', sans-serif;
}
.container{
  position:relative;
  margin:0 auto;
  width:630px;
}
@keyframes uptitle{
  from{transform: translateY(40px);opacity:0;}
    to{transform: translateY(0px);opacity:1;}
}
@keyframes title{
  from{transform: translateY(60px);opacity:0;}
    to{transform: translateY(0px);opacity:1;}
}
@keyframes pharmacy-info{
  from{transform: translateY(80px);opacity:0;}
    to{transform: translateY(0px);opacity:1;}
}
.uptitle{
  font-size: 34px;
  font-weight:600;
  color:#fff;
  text-align:center;
  margin-bottom:0;
  margin-top:45px;
  animation:.4s uptitle;
}
.title{
  font-size: 48px;
  font-weight:600;
  color:#00FFFF;
  text-align:center;
  margin:0;
  padding:0;
  animation:.4s title;
}

.pharmacy-info-location{
  color:#fff;
  font-size:19px;
  padding-left:35px;
  background:url(img/location.svg);
  background-position:left center;
  background-size:contain;
  background-repeat:no-repeat;
  animation:.4s pharmacy-info;
}
.pharmacy-info-phone{
  color:#fff;
  font-size:19px;
  padding-left:35px;
  background:url(img/phone.svg);
  background-position:left center;
  background-size:25px;
  background-repeat:no-repeat;
  animation:.4s pharmacy-info;
}
.pharmacy-info-phone a{
  color:#fff;
  text-decoration: none;
}
.pharmacy-info-phone a:hover{
  text-decoration: underline;
}
.pharmacy-info-clock{
  color:#fff;
  font-size:19px;
  padding-left:35px;
  background:url(img/clock.svg);
  background-position:left center;
  background-size:25px;
  background-repeat:no-repeat;
  animation:.4s pharmacy-info;
}
.container img{
  animation:.4s pharmacy-info;
  box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.18);
}
.heading{
  color:#fff;
  font-size:25px;
  font-weight:500;
  text-align:center;
}
.street-input::placeholder{
  color:#aaa;
}
.street-input{
  display:inline-block;
  color:#292929;
  font-size:23px;
  text-align:center;
  font-weight:500;
  font-family: 'Poppins', sans-serif;
  border-radius:74px;
  border:none;
  outline:none;
  padding:18px;
  width:510px;
  margin:0;
  text-transform: capitalize;
  box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.18);
}
.search-btn{
  display:inline;
  width:68px;
  height:68px;
  background-color:#00ffff;
  content:'';
  border:none;
  border-radius:100%;
  outline:none;
  cursor:pointer;
  background-image:url(img/search.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size:27px;
  margin:0;
  float:right;
  box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.18);
}
.search-btn:hover{
  background-color:#F50057;
  background-size:27px;
  background-image:url(img/search-w.svg);
}
.input-info{
  width:100%;
  font-size:15px;
  color:#fff;
  opacity:0.61;
  text-align: center;
}
.pharmacy-box{
  border-bottom:2px solid rgba(255, 255, 255, 0.17);
  padding-bottom:5px;
  display:grid;
  grid-gap:15px;
  grid-template-columns: 1fr 1fr;
}
.box-title{
  font-size:19px;
  font-weight: 500;
  color:#00ffff;
  margin-bottom:5px;
  padding-left:25px;
}
.box-location{
  color:#fff;
  font-size:16px;
  padding-left:25px;
  background:url(img/location.svg);
  background-position:left center;
  background-size:17px;
  background-repeat:no-repeat;
  margin:0;
}
.box-phone{
  color:#fff;
  font-size:16px;
  padding-left:25px;
  background:url(img/phone.svg);
  background-position:left center;
  background-size:17px;
  background-repeat:no-repeat;
  margin:0;
}
.box-clock{
  color:#fff;
  font-size:16px;
  padding-left:25px;
  background:url(img/clock.svg);
  background-position:left center;
  background-size:17px;
  background-repeat:no-repeat;
  margin:0;
}
.box-phone a{
  color:#fff;
  text-decoration: none;
}
.box-phone a:hover{
  text-decoration: underline;
}
.distance{
  font-size:16px;
  color:#fff;
  opacity:0.61;
  padding-left:25px;
}
.btn{
  font-size:16px;
  background:transparent;
  border-radius:50px;
  font-family: 'Poppins', sans-serif;
  border:3px solid #00ffff;
  outline:none;
  padding:10px 40px 10px 40px;
  cursor:pointer;
  font-weight:500;
  color:#00ffff;
}
.btn:hover{
  color:#F50057;
  border:3px solid #F50057;
}
.box-2{
  text-align:right;
}
.footer{
  margin-top:100px;
  width:100%;
  border-top:2px solid rgba(255, 255, 255, 0.17);
  display:grid;
  grid-gap:15px;
  grid-template-columns: 1fr 1fr;
  padding-top:10px;
  padding-bottom:10px;
}
.legal{
  font-size:13px;
  color:#fff;
}
.href{
  color:#00ffff;
  text-decoration:none;
}
.href:hover{
  text-decoration: underline;
}