/* css/slider-logo.css */
.slider-logo{
    /* background-color: #f8f9fa; */
    /* padding: 0px 40; */
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    /* padding-inline: 80px; */
    /* padding-right: calc(var(--bs-gutter-x) * .5); */
    /* padding-left: calc(var(--bs-gutter-x) * .5); */
    margin-right: auto;
    margin-left: auto;
}
/* 1. Container spacing */
.clients-slider {
    padding: 40px 0;
    width: 100%;
    position: relative;
}

/* 2. Slide Layout - Centers the image in the slide area */
.clients-slider .swiper-slide {
    /* Flexbox to center logos vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    margin-right: 40px;
    padding: 20px;
    transition-timing-function: linear !important;
    /* Fixed height ensures all logos align on the same horizontal line */
    /* height: 100px; */
    background-color: #fff;
    /* Optional: ensures transparent logos look okay */
    overflow: hidden;
}

/* key fix for continuous smooth scrolling */
/* Ensure the images have dimensions so Swiper can calculate the loop */

/* 3. Image Styling - Ensures logos aren't too big or stretched */
.clients-slider .swiper-slide img {
    display: block;

    max-width: 100%;
    height: 30px;

    object-fit: contain;
    /* Keeps aspect ratio */

    /* OPTIONAL: Makes logos grayscale and slightly transparent */
    /* filter: grayscale(100%); */
    /* opacity: 0.6; */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* 4. Hover Effect - Brings color back on hover */
.clients-slider .swiper-slide img:hover {
    /* filter: grayscale(0%); */
    opacity: 1;
    transform: scale(1.05);
    /* Slight zoom on hover */
}

@media (min-width: 768px) {
    .clients-slider .swiper-slide {
        /* height: 80px; */
        /* Taller container on desktop */
    }

    .clients-slider .swiper-slide img {
        max-height: 50px;
        /* Allow larger logos on desktop */

        /* Optional: Add the grayscale effect ONLY on desktop */
        /* filter: grayscale(100%); */
        /* opacity: 0.6; */
        transition: all 0.3s ease;
    }

    /* Only allow hover effect on Desktop */
    .clients-slider .swiper-slide img:hover {
        /* filter: grayscale(0%); */
        opacity: 1;
        transform: scale(1.1);
    }
}