.charity-con {
    border: 0px solid black;
    margin: 3em 0;
}

.charity-head {
    text-align: center;
    width: 70%;
    margin: 0 auto;
}

.charity-head-title {
   font-size: 1.5em;
   font-weight: 600;
}

.charity-head-text {
      font-size: 1em;
   font-weight: 600;
}

.charity-logos-con {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.charity-slider-text-con {
    flex: 0 0 50%;
}

.charity-logos-box {
    display: flex;
    flex-direction: column;
    flex: 0 0 15%;
    text-align: center;
    align-items: center;
    margin: 2% 0.4%;
    box-shadow: 0px 0px 5px 0px #97999b;
}

.charity-logo-img {
    max-height: 180px;
    max-width: 180px;
}

.charity-name {
      font-size: 1em;
   font-weight: 600;
   color: #666;
}

.charity-slider {
    border: 0px solid black;
    margin: 7em 0;
}

.charity-slider-con {
    border: 0px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1em 0;
}


.charity-slider-text-con {
    margin: 0 1em;
}

.charity-slider-title {
    border: 0px solid black;
}

.charity-slider-name {
    border: 0px solid black;
}


.charity-slider-text {
    border: 0px solid black;
}

.charity-slider-img {
    position: relative;
    margin: 0 1em;
}



.charity-img {
      transition-property: opacity;
  transition-duration: 3s;
  opacity: 1;
}

.charity-img-fade {
   opacity: 0;
}


.charity-slider-img::before {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 159, 227, 0.8);
  top: -20;
  right: -20;
  z-index: -99;
 content: "";
}



.charity-slider-img::after {
  content: "";
  width: 28.5%;
  height: 100%;
  position: absolute;
  background-color: rgba(120, 190, 32, 0.8);
  top:  0;
  left: 0;
  content: "";
}


@media (max-width: 1280px) {
    charity-slider-text-con {
        flex: 0 0 32%;
    }
}



@media (max-width: 1024px) {
    .charity-slider-con {
        flex-direction: column;   
    }
    .charity-slider-img {
        margin-top: 4em;
    }
}

@media (max-width: 500px) {
    .charity-head {
        width: 90%;
    }
}