* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.adoptionmain{
  width: 100%;
  background-color: #ffe8971c;
}
.adoptionmain img{
  margin-top: 115px;
  width: 100%;
  height: auto;

}


/* adoption available css */
.amain {
  width: 100%;
  margin: 40px auto 0;
  
}
.amain-title {
  width: 80%;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid#f321bf;
}

.amain-title h1 {
  font-weight: 600;
  color: #f38820;
}
.amain-title a {
  text-decoration: none;
  font-weight: 500;
  color: #f38820;
}
.amain-title a:hover {
  text-decoration: underline#f38820;
}
.adoption-Container {
  width: 80%;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}

.animals {
  width: 100%;
  background-color: #fff;
  display: block;
  align-items: center;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  padding: 1rem;
  cursor: pointer;
  position: relative;
}
.animals:hover {
  .hoveritem {
    display: block;
  }
}

.animals img {
  width: 100%;
  height: 230px;
}
.hoveritem {
  display: none;
  top: 2%;
  left: 0;
  position: absolute;
}
.fa-heart {
  padding: 2px 6px;
  font-size: 1.2vw;
  color: #f321bf;
}
.eyeb {
  padding: 2px 6px;
  font-size: 1vw;
  font-weight: 500;
  border: none;
  color: #fff;
  background: #2196f3;
}
.adoptbtn {
  padding: 2px 6px;
  font-size: 1vw;
  font-weight: 500;
  border: none;
  color: #fff;
  background: #2196f3;
}
.intro {
  display: block;
  align-items: center;
  justify-content: center;
}
.intro h2 {
  
  font-weight: 600;
  color: #000;
  text-align: center;
}

.intro p {

  font-weight: 500;
  color: #000;
  text-align: center;
}