/* Main Section Container - Strict Overflow Control */
.happy-customers-section { background-color: var(--color-white); padding: 60px 0; margin: 40px 0; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); border-top: 3px solid #eee; border-bottom: 3px solid #eee; width: 100%; max-width: 100vw; position: relative; }

/* Section Heading */
.happy-customers-section h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 15px; text-align: center; font-family: "Montserrat", sans-serif; color: #222; }

/* Section Description */
.happy-customers-section p { font-size: 1.1rem; color: #555; text-align: center; margin-bottom: 40px; font-family: "Open Sans", sans-serif; }

/* Container Override for Mobile */
.happy-customers-section .container { max-width: 100%; padding-left: 0; padding-right: 0; overflow: hidden; }

/* Slider Container - Aggressive Mobile Fix */
.logo-slider-container { width: 100%; max-width: 100vw; margin: 0; padding: 0; overflow: hidden; position: relative; }

/* Slider Track - Controlled Expansion */
.logo-slider { display: flex; width: fit-content; will-change: transform; }

/* Left to Right Animation */
.logo-slider-ltr { animation: slideLeft 25s linear infinite; }

/* Right to Left Animation */
.logo-slider-rtl { animation: slideRight 25s linear infinite; }

/* Pause Animation on Hover */
.logo-slider:hover { animation-play-state: paused; }

/* Individual Logo Slide */
.logo-slide { flex: 0 0 auto; padding: 15px 25px; display: flex; align-items: center; justify-content: center; min-width: 180px; max-width: 180px; transition: transform 0.3s ease; }

/* Hover Effect on Slide */
.logo-slide:hover { transform: scale(1.05); }

/* Customer Logo Image */
.customer-logo { max-width: 100%; max-height: 80px; height: auto; width: auto; object-fit: contain; filter: grayscale(30%); transition: filter 0.3s ease; display: block; }

/* Logo Hover Effect */
.customer-logo:hover { filter: grayscale(0%); }

/* Left to Right Keyframes */
@keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Right to Left Keyframes */
@keyframes slideRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

/* Tablet Responsive - 992px and below */
@media (max-width: 992px) { .logo-slide { min-width: 140px; max-width: 140px; padding: 10px 15px; } .customer-logo { max-height: 60px; } .happy-customers-section h2 { font-size: 2rem; } .happy-customers-section p { font-size: 1rem; } .happy-customers-section { padding: 50px 0; margin: 30px 0; } }

/* Small Tablet - 768px and below */
@media (max-width: 768px) { .happy-customers-section { padding: 40px 0; margin: 20px 0; overflow-x: hidden; } .happy-customers-section .container { padding-left: 0 !important; padding-right: 0 !important; } .logo-slider-container { width: 100vw; margin-left: calc(-50vw + 50%); } .logo-slide { min-width: 120px; max-width: 120px; padding: 8px 12px; } .customer-logo { max-height: 55px; } .happy-customers-section h2 { font-size: 1.8rem; } }

/* Mobile Responsive - 576px and below */
@media (max-width: 576px) { .happy-customers-section { padding: 30px 0; margin: 15px 0; overflow-x: hidden !important; } .logo-slide { min-width: 100px; max-width: 100px; padding: 6px 10px; } .customer-logo { max-height: 45px; } .happy-customers-section h2 { font-size: 1.6rem; line-height: 1.3; } .happy-customers-section p { font-size: 0.9rem; margin-bottom: 20px; padding: 0 15px; } }

/* Extra Small Mobile - 400px and below */
@media (max-width: 400px) { .logo-slide { min-width: 85px; max-width: 85px; padding: 5px 8px; } .customer-logo { max-height: 40px; } .happy-customers-section h2 { font-size: 1.4rem; } .happy-customers-section p { font-size: 0.85rem; } }