.donate-page{
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: flex-start;
}
.donate-img-container{
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  width: 100%;
}

.img-l{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.img-l img{
  width: 80%;
  height: 200px;
}

.img-r{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-items: center;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.img-r h3{
  font-size: 700;
  font-size: 1rem;
  padding: 2px;
}
.foot-image{
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.foot-image img{
  width: 100%; 
}
.event-2-sec{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.event-2-content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.event-2-hero{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.event-2-hero img{
  width: 100%;
 max-width: 800px;
 max-height: 800px;
}
.event-gallery{
  width: 100%;
  display: flex; 
  flex-direction: column;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.event-gallery-content{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%; 
  justify-content: center;
  align-items: center;
}
 
.event-gallery-content h1{
background-color: darkslategrey;
margin-bottom: 2rem;
color: whitesmoke;
padding: 10px;
text-align: center;
}
.images{
  width: 100%;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  align-items: center; 
  gap: 2rem;
  height: auto;
  max-width: 1250px;
}
.image{
  width: 100%;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.image img {
  width: 350px;
  height: 400px;
  border-radius: 2cm;
}
@media (min-width: 575px) {
  /* Styles for small phones */
  .img-r h3{
    font-size: 1.5rem;
    font-size: 800;
    line-height: 1.5rem;
  }
  .foot-image img{ 
    height: 400px;
  }
  .foot-image img{ 
    height: 400px;
  }
  .event-gallery-content h1{
    padding: 10px;
  }
 
  .image img {
    width: 400px;
    height: 450px;
    border-radius: 2cm;
  }
}

@media (min-width: 767px)   {
  .donate-img-container{
    flex-direction: row;
    height: 30vh;
  }
  .img-r h3{
    font-size: 1.2rem;
    font-size: 800;
    line-height: 1.8rem;
  }
  .foot-image img{
    width: 100%; 
    height: 800px;
  }
  .foot-image img{ 
    height: 400px;
  }
  .images{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    justify-content: center;
    justify-items: center;
  }
  .image{ 
    padding: 5px;
    margin: 0px; 
   }
   .image img{
     width: 320px;
     height: 400px;
   }
   .event-gallery-content h1{
    padding: 20px;
   }
}

@media (min-width: 991px)   {
  .foot-image img{ 
    height: 500px;
  }
  .img-r h3{
    font-size: 2rem;
    font-size: 800;
    line-height: 1.9rem;
  }
  .img-l img{
    width: 80%;
    height: 300px;
  }

  .event-gallery-content h1{
    line-height: 4.2rem;
  }
  .images{
    grid-template-columns: repeat(3, 1fr);
    /* padding-left: 20px */
    /* padding-right: 20px */
   }
   .image img{
    width: 300px;
    height: 400px;
  }
}

@media (min-width: 1199px) {
  .images{
    gap: 10px;
  }
  .image img{
    width: 320px;
    height: 400px;
  }

}


@media (min-width: 1200px) {
  .donate-img-container{
    flex-direction: row;
    height: 40vh;
  }
  .foot-image img{ 
    height: 800px;
  }
  .event-gallery{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .images{
    width: 100%;
    gap: 10px;
  }
  .image img{
    width: 380px;
    height: 500px;
  }
  .event-gallery-content h1{
    padding-left: 4rem;
    padding-right: 4rem;
  }
}