body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
    background: url('/assets/bg.jpg') center center/cover no-repeat fixed;
}

.title {
    width: 100%!important;
    text-align: center!important;
    font-weight: 800!important;
    font-family: 'Poppins';
    animation: slideInLeft 2s cubic-bezier(.3,.7,.4,1) forwards;
}

.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 2rem;
    justify-content: center;
  }
  
  .mentor-card {
    width: 270px;
    height: auto;
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 2s ease-out forwards;
  }
  
  .mentor-card:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    height: auto;
    transition-duration: 0.8s;
    cursor: pointer;
  }
  
  .card-thumbnail {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
  
  .card-info {
    padding: 1rem;
    color: black;
  }
  
  .card-info h3 {
    margin: 0;
    font-family: 'Poppins';
    font-size: 1.2rem;
    font-weight: 600;
  }
  
  .card-info .number {
    font-family: 'Poppins';
    font-size: 1.1rem;
    color: #1e40af;
    margin-top: 0.2rem;
    font-weight: 500;
    margin-bottom: 0.1rem;
  }
  
  .card-info .description {
    font-family: 'Poppins';
    font-size: 0.85rem;
    color: #333;
    margin-top: 0.2rem;
  }

  .card-info a img{
    width: 40px;
    height: 40px;
  }
  
  @media (max-width: 500px){
    .title {
      font-size: 1.4rem;
    }
  }

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

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
  }

  @keyframes pulseGrow {
    0%, 100% { transform: scale(1);   }
    50%      { transform: scale(1.08); }
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0);   }
    50%      { transform: translateY(-8px); }
  }

  @keyframes slideInLeft {
    from { transform: translateY(-80px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }

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

  @keyframes typing   { from { width: 0; } to { width: 100%; } }
@keyframes blink    { from { border-color: transparent; } to { border-color:#a8d839; } }