html{
    scroll-behavior: smooth;
    box-sizing: border-box;
}

/* body{ */
.about-banner {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
              url('../images/about-us.jpg') no-repeat center center;
  background-size: cover;
  height: 60vh;
}

.from-left{
  animation-name: from-left;
  animation-duration: 0.7s;
  animation-delay: 1s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes from-left {
  from{
    opacity: 0;
    transform: translateX(-50px);
  }
  
  to{
    opacity: 1;
    transform: translateX(0);
  }
}
.from-right{
  animation-name: from-right;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes from-right {
  from{
    opacity: 0;
    transform: translateX(50px);
  }
  
  to{
    opacity: 1;
    transform: translateX(0);
  }
}
.from-top{
  animation-name: from-top;
  animation-duration: 0.7s;
  animation-delay: 1s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes from-top {
  from{
    opacity: 0;
    transform: translateY(-30px);
  }
  
  to{
    opacity: 1;
    transform: translateX(0);
  }
}


/* card hover */

.card-item:hover{
  transform: translateY(-20px);
  transition: all 0.3s linear;
}
 .testimonial-section {
    background: #f9f9ff;
  }
  .carousel-inner {
    border-radius: 1rem;
    overflow: hidden;
  }
  .testimonial-caption {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 1.5rem;
    border-radius: 0.75rem;
  }
  .testimonial-img {
    max-height: 350px;
    object-fit: cover;
    width: 100%;}
    
  .impact-section {
    background: linear-gradient(to right, #fefefe, #f3f6ff);
  }
  .impact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem;
  }
  .impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  .impact-icon {
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 1rem;
  }
  .impact-title {
    font-weight: bold;
    font-size: 1.25rem;
  }
  .impact-subtext {
    color: #555;
    font-size: 0.95rem;
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .fade-in {
    animation: fadeInUp 1s ease-in-out;
  }

  @media (min-width: 280px) and (max-width: 700px){
    .responsive{
      justify-content: center;
      padding-bottom: 10px;
    }
  }