.about__wrapper h3{
    font-size: 42px;
    font-weight: 700;
    position: absolute;
    bottom: 150px;
    color: var(--bs-white);
    left: 0;
}

.left__text {
    width: 65%;
}

.outline__img{
    position: absolute;
    width: 528px;
    right: -12px;
    bottom: -38px;
}

.devot__card {
    gap: 42px;
    box-shadow: 0px 4px 18px 0px #00000040;
    border-radius: 10px;
    padding: 28px;
    display:grid !important;
    grid-template-columns: 350px auto;
}

.devot__text p:nth-child(1){
    font-size: 32px;
    font-weight: 700;
    color: var(--h4TextColor);
}

/* Parent container animation on load */
.animate-devot {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeSlideUp 1s ease forwards;
  }
  
  @keyframes fadeSlideUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Image hover zoom effect */
  .devot-img {
    transition: transform 0.5s ease;
  }
  
  .devot-img:hover {
    transform: scale(1.05);
  }
  
  /* Text fade in with slight delay */
  .devot-text p {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeText 0.6s ease forwards;
  }
  
  .devot-text p:nth-child(1) { animation-delay: 0.4s; }
  .devot-text p:nth-child(2) { animation-delay: 0.6s; }
  .devot-text p:nth-child(3) { animation-delay: 0.8s; }
  .devot-text p:nth-child(4) { animation-delay: 1s; }
  
  @keyframes fadeText {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .devot__card .grid-item-1 {
    grid-area: auto;
}