@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(70px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes sway {
    from { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
  }
  
  .animate-fade-in-left { animation: fadeInLeft 1s ease-out; }
  .animate-fade-in-right { animation: fadeInRight 1s ease-out; }
  
  .growth-card {
    padding: 45px 35px;
    color: #666;
    text-align: center;
    background: #edf5ec;
    border: 2px solid #0e4b4e;
    border-radius: 28px;
    box-shadow: 0 12px 35px rgba(14, 75, 78, .08);
    opacity: 0;
    transform: translateY(70px);
    animation: fadeUp .9s forwards;
    transition: transform .45s ease, background-color .3s ease, border-color .3s ease, box-shadow .45s ease;
  }
  
  .growth-card:nth-child(1) { animation-delay: .2s; }
  .growth-card:nth-child(2) { animation-delay: .5s; }
  .growth-card:nth-child(3) { animation-delay: .8s; }
  
  .growth-card:hover {
    transform: translateY(-10px) scale(1.03);
    background-color: #fdfdfd;
    border-color: #c9a063;
    box-shadow: 0 25px 50px rgba(14, 75, 78, .18);
  }
  
  .growth-card h3 {
    margin-bottom: 18px;
    color: #0e4b4e;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
  }
  
  .growth-card p {
    font-size: 15px;
    line-height: 1.8;
  }
  
  .year-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    color: #fff;
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-weight: 700;
    background: #0e4b4e;
    border-radius: 50%;
    transition: background-color .4s, transform .4s;
  }
  
  .growth-card:hover .year-circle {
    background-color: #c9a063;
    transform: rotate(360deg);
  }
  
  .shadow-lg { transition: transform .5s ease; }
  .shadow-lg:hover { transform: translateY(-10px); }
  
  .flower-left,
  .flower-right {
    position: absolute;
    top: 0;
    width: clamp(120px, 18vw, 250px);
    opacity: .35;
    pointer-events: none;
    animation: sway 5s infinite alternate ease-in-out;
  }
  
  .flower-left img,
  .flower-right img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  @media (max-width: 768px){

  .growth-card{
    padding:24px 18px;
  }

  .growth-card h3{
    font-size:24px;
  }

  .growth-card p{
    font-size:14px;
    line-height:1.7;
  }

  .year-circle{
    width:70px;
    height:70px;
    font-size:20px;
  }

  .founder-content{
    text-align:center;
  }

  .founder-content h2{
    font-size:2rem;
  }

  .founder-content h4{
    font-size:1rem;
  }

  .founder-content p{
    font-size:14px;
    line-height:1.8;
  }

  .shadow-lg{
    width:100%;
  }
}

@media (max-width:480px){

  .growth-card h3{
    font-size:22px;
  }

  .growth-card p{
    font-size:13px;
  }
}
@media (max-width: 768px) {

  .about-images {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    margin-top: 30px;
  }

  .about-images > div {
    position: static !important;
    width: 100% !important;
    max-width: 320px;
    height: 220px !important;
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
  }

  .about-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hide decorative boxes on mobile */
  .about-images > div:first-child,
  .about-images > div:last-child {
    display: none;
  }

}