.cards-section {
    background-color: var(--cool-light-gray);
    padding: 80px;
  }
  
  .program-benefits {
    display: flex;
    flex-direction: row;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--blue-zodiac-light);
  }
  
  .text-content {
    flex: 2;
    padding: 30px 20px;
  }
  
  .text-content h2, 
  .text-content h3 {
    margin: 0;
    color: var(--blue-zodiac-light)!important;
  }
  
  .text-content p {
    margin: 10px 0;
    color: var(--blue-zodiac-light)!important;
  }
  
  .find-more {
    margin-top: 20px;
    padding: 10px 20px;
    cursor: pointer;
  }
  
  .ani_cards-container {
    display: flex;
    flex: 3;
    gap: 10px;
    overflow: hidden;
    position: relative;
    height: 300px;
    padding: 30px 20px;
    border-left: 1px solid var(--blue-zodiac-light);
  }
  
  .ani_card {
    flex: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: flex 0.6s ease-in-out, opacity 0.5s ease-in-out;
    cursor: pointer;
    min-width: 50px;
  }
  
  .ani_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
  }
  
  .ani_card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
  }
  
  .ani_card:hover img {
    transform: scale(1.1);
  }
  
  .ani_card-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: var(--neutral01100);
    padding: 10px;
    z-index: 1;
  }
  
  .ani_card-content h4 {
  
    transition: transform 0.3s ease-in-out, writing-mode 0.3s ease-in-out, position 0.3s ease-in-out; 
    width:  250px;
    transform-origin: center top; 
    position: relative;
    bottom: 90px;
    left: -130px ;
  
    /* transform-origin: center left;  */
    writing-mode: horizontal-tb; 
    transform: rotate(-90deg); 
    font-size: 18px;
    margin: 0;
  }
  
  .ani_card-content p, 
  .ani_card-content .enroll-btn {
    display: none; 
    opacity: 1;
    animation: display .4s ease-in-out;
    
  }
  
  .ani_card.active .ani_card-content h4 {
    
    position: static;
    writing-mode: horizontal-tb; 
    transform: rotate(0deg);
    transform-origin: center top;  
    transition: transform 0.8s ease-in-out, writing-mode .5s ease, position 0.3s ease-in-out;
    width: fit-content;
    text-align: left; 
  
  }
  
  
  .ani_card.active .ani_card-content p, .ani_card.active .ani_card-content .enroll-btn {
    display: block;
    opacity: 0;
  
    animation: fadeIn .8s ease-in-out forwards;
    
  }
  
  
  
  @keyframes fadeIn {
    from {
      margin-left: 70%;
      opacity: 0;
  
    }
    to {
      opacity: 1;
      margin-left: 0;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
      margin-left: 0;
      
    }
    to {
      opacity: 0;
      margin-left: 70%;
    }
  }
  
  .ani_card.active .ani_card-content p
   {
    opacity: 1;
    display: block;
    width: 300px;
    transition: all 0.8s ease-in; 
   
  }
  
  .ani_card.active {
    flex: 3;
  }
  
  .ani_card:not(.active) {
    flex: 1;
    opacity: 0.7;
  }
  
  .enroll-btn {
    margin-top: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: var(--neutral01100);
    cursor: pointer;
  }
  
  /* Mobile Responsive Styles */
  @media (max-width: 768px) {
    .cards-section {
        padding: 10px;
    }
  
    .program-benefits {
        flex-direction: column;
        gap: 20px;
    }
  
    .text-content {
        padding: 20px;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
  
    /* .text-content button{
      padding: 20px;
      width: 30%;
      border-radius: 25px;
      position: static;
      margin: 0 auto;
      justify-content: center;
  } */
  
    .ani_cards-container {
        height: 400px;
        border-left: none;
        border-top: 1px solid var(--blue-zodiac-light);
        padding: 20px;
    }
  
    .ani_card-content h4 {
        font-size: 14px;
    }
  
    .ani_card-content p {
        font-size: 12px;
    }
  }