#about{
  background-image: url(/img/Charity!.png);
  background-size: cover;
  width: 100%;
}

#aboutCard1{
  width: 65%;
  text-align: justify;
  background-color: rgba(13, 9, 9, 0.514);
  color: #fff;
  margin-top: 8%;
}
@media(max-width: 768px){
  #aboutCard1{
  width: 100%;
  text-align: justify;
  background-color: rgba(13, 9, 9, 0.514);
  color: #fff;
  margin-bottom: 8%;
}
}
#about1{
  background-image: url(/img/about4c.png);
  background-size: cover;
  width: 100%;
  height: 95vh;
  align-items:center;
  justify-content: center;
}

#aboutCard2{
  width: 90%;
  height: auto;
  text-align: justify;
  padding: 10px;
  border-radius: 20%;
  background-color: rgba(58, 16, 16, 0.696);
  color: #fff;
  margin-top:8%;
}


#about-3-img{
      width: 100%;
}

#aboutCard3{
  width: 100%;
  font-size: 0.9rem;
  height: auto;
  box-shadow: none;
  border: none;
  text-align: justify;
}


/*call-us icon animation */

.mainbox{
  width: 55px;
  height: 55px;
  border: 1px solid #9f0f0fa7;
  padding: 2px;
  border-radius: 50%;
  position: relative;
  display: flex;
  background-color:transparent;
  background-attachment: rgb(11,11,43);
  align-items: center;
  justify-content: center;
  margin: -20% 0% -30% 0%;

}

.parent,
.child,
.subchild {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid transparent;
  border-right: 6px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.parent{
  transform: translate(-2px, 2px)rotate(-45deg);
  animation: any3 4s ease-out infinite;
}
@keyframes any3{
  0%{
    border-right: 6px solid transparent;
  }
  20%{
    border-right: 6px solid transparent;
  }
  40%{
    border-right: 6px solid transparent;
  }
  60%{
    border-right: 6px solid rgb(255, 255, 255,1);
  }
  80%{
    border-right: 6px solid rgb(255, 255, 255,1);
  }
  100%{
    border-right: 6px solid transparent;
  }
}

.child{
  width: 90%;
  height: 90%;
  animation: any2 4s ease-out infinite;
}
@keyframes any2{
  0%{
    border-right: 6px solid transparent;
  }
  20%{
    border-right: 6px solid transparent;
  }
  40%{
    border-right: 6px solid rgb(255, 255, 255,1);
  }
  60%{
    border-right: 6px solid rgb(255, 255, 255,.3);
  }
  80%{
    border-right: 6px solid rgb(255, 255, 255,1);
  }
  100%{
    border-right: 6px solid transparent;
  }
}
.subchild{
  width: 60%;
  height: 60%;
  animation: any1 4s ease-out infinite;
}
@keyframes any1{
  0%{
    border-right: 6px solid transparent;
  }
  20%{
    border-right: 6px solid rgb(255, 255, 255,1);
  }
  40%{
    border-right: 6px solid rgb(255, 255, 255,.3);
  }
  60%{
    border-right: 6px solid rgb(255, 255, 255,1);
  }
  80%{
    border-right: 6px solid rgb(255, 255, 255,1);
  }
  100%{
    border-right: 6px solid transparent;
  }

}
#call-us{
  color: #fff;
  transform: rotate(45deg);
  font-size: 25px;
  margin: 2px;
  animation: any4 3s ease-out infinite;
}
@keyframes any4{
  0%{
     transform: rotate(45deg);
  }
  50%{
    transform: rotate(60deg);
  }
  100%{
    transform: rotate(45deg);
  }
}

.box {
  background: linear-gradient(to right, gold, darkorange);
  color: white;
   margin:40% 0% 10% 16%;
  --width: auto;
  --height: calc(var(--width) / 1.5);
  width: var(--width);
  height: var(--height);
  text-align: center;
  line-height: var(--height);
  font-size: calc(var(--height) / 1.5);
  font-family: sans-serif;
  letter-spacing: 0.1em;
  border: 1px solid darkgoldenrod;
  border-radius: 2em;
  transform: perspective(500px) rotateY(-15deg);
  text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 0 5px brown;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
}

.box:hover {
  transform: perspective(500px) rotateY(15deg);
  text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}

.box::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, white, transparent);
  left: -100%;
  transition: 0.5s;
}

.box:hover::before {
  left: 100%;
}