@media (max-width: 768px) {
    
    /* 1. Target the PARENT container */
    .testimonials-wrapper {
        /* CRUCIAL: Change the main axis from row (default) back to column */
        flex-direction: column; 
        
        /* Optional: Center the content if needed */
        align-items: center; 
    }
    
    /* 2. Target the CHILD testimonial */
    .testimonial {
        /* KEY CHANGE: Make each testimonial take up the full container width */
        width: 100%; 
        
        /* Ensure internal content stacks for mobile (you already had this) */
        flex-direction: column; 
        text-align: center;
     
    }

    /* ... rest of your mobile styles ... */
    .avatar {
        width: 100px;
        height: 100px;
    }

    .lottie-wrapper {
        margin-top: 20px;
    }
}

/* --- Desktop Specific Styles (Apply above 768px) --- */
@media (min-width: 769px) { 
    .testimonial {
        /* This rule only applies on large screens for the two-column layout */
        width: calc(50% - 20px); 
    }
}

.testimonial-section {
      max-width: 1200px;
      margin: auto;
      padding: 80px 20px;
    }

    /* New rule to manage the two-column layout */
.testimonials-wrapper {
    display: flex;       /* 1. Make children line up horizontally */
    flex-wrap: wrap;     /* 2. Allow children to wrap to the next line */
    gap: 40px;           /* 3. Add space between the columns and rows */
    justify-content: space-between; /* Optional: Distribute space evenly */
    margin-top: 40px;    /* Space below the header */
}

    .testimonial {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #232B32, #323C47);
      border-radius: 20px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
      margin-bottom: 60px;
      padding: 40px;
      gap: 40px;
      opacity: 0;
      transform: translateY(50px);

    }

    .avatar {
      flex-shrink: 0;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid #ffffff44;
    }

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

    .testimonial-content {
      flex: 1;
    }

    .quote {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .author {
      font-weight: bold;
      font-size: 1.1rem;
      color: #D29980;
    }

    .role {
      font-size: 0.9rem;
      color: #aaa;
    }

    .lottie-wrapper {
      max-width: 100px;
    }

    @media (max-width: 768px) {
      .testimonial {
        flex-direction: column;
        text-align: center;
        padding: 30px;
      }

      .avatar {
        width: 100px;
        height: 100px;
      }

      .lottie-wrapper {
        margin-top: 20px;
      }
    }