/* 12. Our Clients Section */

#clients {

  background-color: #091123; 
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at center, #111e3b 0%, #091123 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  background-position: center center;
  min-height: 70vh;
  width: 100%;


}


.clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 30px;
    align-items: center;
    justify-items: center;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
        gap: 50px;
    }
}

.client-logo {
    width: 100%;
    max-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-logo img {
    width: 100%;
    height: auto;
    max-height: 80px; /* Prevents tall logos from taking over */
    object-fit: contain; /* Ensures logos aren't stretched or squished */
    
    /* Mutes the logos to blend with the dark theme */
    filter: grayscale(100%) opacity(50%);
    transition: filter var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* Lights up and scales slightly on hover */
.client-logo img:hover {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.05);
}