section { text-align: center; padding: 50px 20px; background:white; }
    h1 { font-size: 36px; margin-bottom: 10px; }
    h2 { font-size: 20px; margin-bottom: 40px; color: #666; }

    .carousel { position: relative; max-width: 1200px; margin: auto; overflow: hidden; }
    .cards { display: flex; transition: transform 0.7s ease-in-out; }

    .card {
      flex: 0 0 33.33%;
      max-width: 33.33%;
      padding: 20px;
      box-sizing: border-box;
      opacity: 0.5;
      transform: scale(0.85);
      transition: all 0.7s ease;
    }
    .card.active {
      opacity: 1;
      transform: scale(1.05);
    }
    .card-inner {
      background: #fff;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .card img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-bottom: 15px;
      object-fit: cover;
    }
    .client-name { font-weight: bold; margin-top: 10px; }
    .client-pos { font-size: 14px; color: #777; margin-bottom: 15px; }
    .testimonial-text { font-size: 15px; color: #444; line-height: 1.4; }

    /* Tablet + Mobile (show only 1 clean card) */
    @media (max-width: 1023px) {
      .card {
        flex: 0 0 100%;
        max-width: 100%;
        opacity: 1 !important;
        transform: scale(1) !important;
      }
    }
    /* Mobile devices (up to 480px) */
@media (max-width: 480px) {
  .client-logos h2 { 
    font-size: 10px; /* little spacing */
  }
}

/* Tablets (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
.client-logos h2 { 
    font-size: 12px; /* little spacing */
  }
}

/* Small laptops (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .client-logos h2 { 
    font-size: 15px; /* little spacing */
  }
}

/* Large laptops & desktops (1025px and above) */
@media (min-width: 1025px) {
  .client-logos h2 { 
    font-size: 20px; /* little spacing */
  }
}