/* Testimonial Carousel Padding Fix
   This CSS file contains the fixes needed to make edge cards visible
   in the testimonial carousel while maintaining proper scrolling behavior
   and preventing horizontal scrollbars.
*/

/* Fix 1: Remove overflow:hidden from testimonials section */
.testimonials-section {
    /* Remove the overflow: hidden property */
    /* overflow: hidden; */
    /* Keep other properties as they are */
    padding: 5rem 140px;
    background-color: #ffffff;
    position: relative;
}

/* Fix 2: Extend carousel beyond section padding using negative margins */
.testimonials-carousel {
    position: relative;
    /* Use full viewport width */
    width: 100vw;
    /* Use negative margins to extend beyond section padding */
    margin-left: -140px;
    margin-right: -140px;
    /* Add padding to compensate for negative margins */
    padding-left: 140px;
    padding-right: 140px;
    /* Keep overflow hidden on the carousel itself */
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Alternative approach using calc() for more precise control */
.testimonials-carousel-alt {
    position: relative;
    /* Calculate exact width needed */
    width: calc(100% + 160px);
    margin-left: -80px;
    overflow: hidden;
    padding: 2rem 80px;
}

/* Ensure the track and cards work properly with the new layout */
.testimonials-track {
    display: flex;
    gap: 2rem;
    animation: scroll 60s linear infinite;
    /* Ensure smooth rendering */
    will-change: transform;
}

/* Responsive adjustments for tablet (1200px and below) */
@media (max-width: 1200px) {
    .testimonials-section {
        padding: 4rem 60px;
    }

    .testimonials-carousel {
        margin-left: -60px;
        margin-right: -60px;
        padding-left: 60px;
        padding-right: 60px;
    }

    /* Alternative approach */
    .testimonials-carousel-alt {
        width: calc(100% + 120px);
        margin-left: -60px;
        padding: 2rem 60px;
    }

    /* Fade edges for tablet */
    .testimonials-carousel::before,
    .testimonials-carousel::after {
        width: 140px;
    }
}

/* Responsive adjustments for mobile (768px and below) */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 3rem 20px;
    }

    .testimonials-carousel {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Alternative approach */
    .testimonials-carousel-alt {
        width: calc(100% + 40px);
        margin-left: -20px;
        padding: 2rem 20px;
    }

    /* Adjust card size for mobile */
    .testimonial-card {
        flex: 0 0 300px;
        padding: 2rem;
        height: 400px;
    }

    /* Fade edges for mobile */
    .testimonials-carousel::before,
    .testimonials-carousel::after {
        width: 60px;
    }
}

/* Additional safety measures to prevent horizontal scroll */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    position: relative;
}

/* Ensure content wrapper doesn't cause overflow */
.content-wrapper {
    overflow-x: hidden;
    position: relative;
}

/* Fade edges - cards disappear into padding at start and end */
.testimonials-carousel::before,
.testimonials-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 180px;
    z-index: 10;
    pointer-events: none;
}

.testimonials-carousel::before {
    left: 0;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 40%,
        rgba(255, 255, 255, 0) 100%);
}

.testimonials-carousel::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 40%,
        rgba(255, 255, 255, 0) 100%);
}

/* Keep animation running on hover */
.testimonials-track:hover {
    animation-play-state: running;
}

/* Performance optimizations */
.testimonial-card {
    /* Ensure smooth animations */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Debug helpers (remove in production) */
.debug-testimonials .testimonials-section {
    border: 2px solid blue;
}

.debug-testimonials .testimonials-carousel {
    border: 2px solid green;
}

.debug-testimonials .testimonial-card {
    border: 1px solid red;
}