.hero {
  background: linear-gradient(to right, #f06292, #ba68c8);
  color: white;
  text-align: center;
  padding: 50px 20px;
}

.why-volunteer {
  padding: 50px 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.vol-text {
  min-width: 20rem;
  max-width: 56vw;
}
.vol-img{
  min-width: 20rem;
  padding-top: 2rem;
  max-width: 90dvw;
  overflow: hidden;
}
.vol-img img{
  max-width: 100%;
}
.why-volunteer h2 {
  margin: 2rem;
  /* margin-top: 3rem; */
  font-size:2rem;
  max-width: 80%;
  color: #e91a50;
  }
  .why-volunteer p,
  .why-volunteer li,
  .why-volunteer ul{
  max-width: 80%;
  line-height: 1.5rem;
  margin: 2rem;
  text-align: justify;

}
.why-volunteer img {
  width: 400px;
  margin-top: 20px;
  border-radius: 1rem;
}

.volunteers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 20px;
}

.volunteer-card {
background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* overflow: hidden; */
  margin:3rem;
  text-align: center;
  width: 300px;
  padding: 20px;
  position: relative;
}
.volunteer-card:hover{
  box-shadow: 0 1px 1rem rgba(0, 0, 0, 0.8);
  cursor: pointer;;
}
.volunteer-card:nth-child(even)::after
{
  content: '';
  height: 90%;
  width: 80%;
  position: absolute;
  background:#19488e;
  inset: 0;
    top: -1.5rem;
  left: -1.5rem;
  z-index: -1;
}
.volunteer-card:nth-child(odd)::after{
  content: '';
  height: 90%;
  width: 80%;
  position: absolute;
  background: #e8194f;
  inset: 0;
    top: -1.5rem;
  left: -1.5rem;
  z-index: -1;
}
.volunteer-card h3{
  color: #19488e;
  margin: 1rem 0px;
}
.volunteer-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.org-text li {
  background-image: url("favicon.ico");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  padding-left: 30px;
  list-style: none;
}