* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  font-family: "Poppins", sans-serif;
  color: #48BF84;
}
body {
  background-color: #fff;
}

#hero{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  height: 20vh;
  background: rgb(16,78,47);
  background: linear-gradient(90deg, rgb(190, 209, 190) 0%, rgb(159, 199, 173) 20%, rgb(89, 179, 134) 100%);
}
#hero span{
  color: #000;
  font-family: 'Times New Roman', Times, serif;
}

#hero h1{
  font-family: 'Times New Roman', Times, serif;
  color: white;
  font-size: 4vw;
}

.wrapper {
  width: 95%;
  margin: 0 auto;
}


#select{
  border-radius: 5px;
  margin: 20px auto 0 auto;
  width: 280px;
  height: 38px;
  border: 2px solid #48BF84;
  display: flex;
  justify-content: center;
  align-items: center;
}

#select #especialidades{
  border: none;
  font-size: 22px;
  padding: 1px;
  color: #fab429;
  font-family: 'Times New Roman', Times, serif;
}

#especialidades option{
  color: #fab429;
  font-family: 'Times New Roman', Times, serif;
  width: 250px;
}



.doctors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 1.5em;
  padding: 4em 0;
}
.card {
  background-color: #ffffff;
  max-width: 18em;
  margin: auto;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 1px 2px 2.5px rgba(55, 182, 93, 0.8);
}
.image-container {
  text-align: center;
}
img {
  max-width: 80%;
  object-fit: contain;
  height: 15em;
}
.card .container {
  display: grid;
  justify-content: center;
  padding-top: 1em;
  color: #110f29;
}
.card .container h5 h6{
  font-weight: 500;
}
.hide {
  display: none;
}

.pagination{
  display: flex;
  justify-content: center;
  width: auto;
}
.page-link{
  cursor: pointer;
  padding: 12px;
  margin: 3px;
  background:#48BF84;
  border: #48BF84;
  color:#fff ;
  border-radius: 3px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px;
}
.page-link:hover{
  background: #379265;
}
.active{
  background: #379265;
}

@media screen and (max-width: 720px) {
  #hero h1{
    font-size: 30px;
  }
  
  img {
    max-width: 120px;
  }
  .card {
    max-width: 20em;
    margin-top: 1em;
  }
  .doctors {
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
  }
}