/* ============================================================
   Clients Logo Carousel Widget — style.css
   ============================================================ */

/* --- Wrapper ------------------------------------------------ */
.clw-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* --- Header ------------------------------------------------- */
.clw-header {
    margin-bottom: 40px;
}

.clw-title {
    margin: 0 0 12px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.clw-divider {
    display: block;
    width: 50px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto 20px;
    background: #e02020;
}

.clw-header[style*="left"] .clw-divider   { margin-left: 0; }
.clw-header[style*="right"] .clw-divider  { margin-left: auto; margin-right: 0; }

.clw-description {
    margin: 0 auto;
    max-width: 780px;
    font-size: 0.97rem;
    line-height: 1.7;
    color: #666;
}

/* --- Carousel Wrapper --------------------------------------- */
.clw-carousel-wrap {
    position: relative;
}

.clw-swiper {
    overflow: hidden;
    padding-bottom: 10px;
}

/* Fallback: before Swiper initialises, show logos in a flex row
   so they are never invisible. Swiper overrides this on init.  */
.clw-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.clw-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 auto;
    width: auto;
}

/* --- Logo Item ---------------------------------------------- */
.clw-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 70px;
}

.clw-logo img,
.clw-logo .clw-logo-img {
    display: block;
    width: auto;
    height: auto;
    max-height: 70px;
    max-width: 160px;
    object-fit: contain;
    transition: all 0.35s ease;
}

.clw-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.clw-logo-placeholder {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    text-align: center;
}

/* --- Active / Center Logo Highlight ------------------------
   .swiper-slide-active ke andar jo logo hai wo color mein
   baaki sab grayscale + dim honge (jab feature on ho)       */

.clw-wrapper.clw-center-active .clw-logo img,
.clw-wrapper.clw-center-active .clw-logo .clw-logo-img {
    filter: grayscale(100%) !important;
    opacity: 0.45 !important;
    transform: scale(0.92) !important;
    transition: all 0.4s ease !important;
}

/* Active (center) slide — full color, slightly larger */
.clw-wrapper.clw-center-active .swiper-slide-active .clw-logo img,
.clw-wrapper.clw-center-active .swiper-slide-active .clw-logo .clw-logo-img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

/* When combined with hover-grayscale — active overrides */
.clw-wrapper.clw-center-active .swiper-slide-active .clw-hover-grayscale img,
.clw-wrapper.clw-center-active .swiper-slide-active .clw-hover-grayscale .clw-logo-img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}


   !important used to override Elementor/theme CSS safely     */

/* Make sure transition is always on */
.clw-logo,
.clw-logo img {
    transition: all 0.35s ease !important;
}

/* Grayscale → Color */
.clw-hover-grayscale img {
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
}
.clw-hover-grayscale:hover img,
.clw-hover-grayscale:focus-within img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* Fade on hover */
.clw-hover-opacity img {
    opacity: 1 !important;
}
.clw-hover-opacity:hover img,
.clw-hover-opacity:focus-within img {
    opacity: 0.5 !important;
}

/* Scale up */
.clw-hover-scale img {
    transform: scale(1) !important;
}
.clw-hover-scale:hover img,
.clw-hover-scale:focus-within img {
    transform: scale(1.12) !important;
}

/* Drop shadow */
.clw-hover-shadow img {
    filter: none !important;
}
.clw-hover-shadow:hover img,
.clw-hover-shadow:focus-within img {
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25)) !important;
}

/* Lift */
.clw-hover-lift img {
    transform: scale(1) translateY(0) !important;
    filter: none !important;
}
.clw-hover-lift:hover img,
.clw-hover-lift:focus-within img {
    transform: scale(1.08) translateY(-5px) !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)) !important;
}

/* --- Navigation Arrows -------------------------------------- */
.clw-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
}

.clw-nav button {
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

/* Style: Rounded Dark (default) */
.clw-arrows-rounded button {
    background: #222;
    color: #fff;
    border-radius: 6px;
}
.clw-arrows-rounded button:hover {
    background: #e02020;
}
.clw-arrows-rounded button svg {
    stroke: #fff;
}

/* Style: Outline */
.clw-arrows-outline button {
    background: transparent;
    border: 2px solid #222 !important;
    border-radius: 6px;
}
.clw-arrows-outline button svg {
    stroke: #222;
}
.clw-arrows-outline button:hover {
    background: #222;
}
.clw-arrows-outline button:hover svg {
    stroke: #fff;
}

/* Style: Minimal */
.clw-arrows-minimal button {
    background: transparent;
    border-radius: 0;
}
.clw-arrows-minimal button svg {
    stroke: #444;
    width: 20px;
    height: 20px;
}
.clw-arrows-minimal button:hover svg {
    stroke: #e02020;
}

/* --- Pagination Dots ---------------------------------------- */
.clw-pagination {
    margin-top: 16px;
}
.clw-pagination .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}
.clw-pagination .swiper-pagination-bullet-active {
    background: #e02020;
}

/* --- Scroll Animations ──────────────────────────────────────
   Applied to .clw-logo (NOT .swiper-slide) so overflow:hidden
   on the Swiper container doesn't clip the transforms.
   animation-fill-mode is set inline via JS as 'both'          */

/* Base hidden state — only when class is present */
.clw-logo.clw-anim {
    opacity: 0;
    will-change: opacity, transform;
}

/* Once animated, clear will-change */
.clw-logo.clw-anim.clw-animated {
    will-change: auto;
}

/* fadeIn */
.clw-logo.clw-anim[data-anim="fadeIn"] {
    opacity: 0;
}
.clw-logo.clw-anim.clw-animated[data-anim="fadeIn"] {
    animation-name: clwFadeIn;
    animation-timing-function: ease;
}
@keyframes clwFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* fadeInUp */
.clw-logo.clw-anim[data-anim="fadeInUp"] {
    opacity: 0;
    transform: translateY(35px);
}
.clw-logo.clw-anim.clw-animated[data-anim="fadeInUp"] {
    animation-name: clwFadeInUp;
    animation-timing-function: ease;
}
@keyframes clwFadeInUp {
    from { opacity: 0; transform: translateY(35px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* fadeInDown */
.clw-logo.clw-anim[data-anim="fadeInDown"] {
    opacity: 0;
    transform: translateY(-35px);
}
.clw-logo.clw-anim.clw-animated[data-anim="fadeInDown"] {
    animation-name: clwFadeInDown;
    animation-timing-function: ease;
}
@keyframes clwFadeInDown {
    from { opacity: 0; transform: translateY(-35px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* zoomIn */
.clw-logo.clw-anim[data-anim="zoomIn"] {
    opacity: 0;
    transform: scale(0.65);
}
.clw-logo.clw-anim.clw-animated[data-anim="zoomIn"] {
    animation-name: clwZoomIn;
    animation-timing-function: ease;
}
@keyframes clwZoomIn {
    from { opacity: 0; transform: scale(0.65); }
    to   { opacity: 1; transform: scale(1); }
}

/* slideInLeft */
.clw-logo.clw-anim[data-anim="slideInLeft"] {
    opacity: 0;
    transform: translateX(-50px);
}
.clw-logo.clw-anim.clw-animated[data-anim="slideInLeft"] {
    animation-name: clwSlideInLeft;
    animation-timing-function: ease;
}
@keyframes clwSlideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* slideInRight */
.clw-logo.clw-anim[data-anim="slideInRight"] {
    opacity: 0;
    transform: translateX(50px);
}
.clw-logo.clw-anim.clw-animated[data-anim="slideInRight"] {
    animation-name: clwSlideInRight;
    animation-timing-function: ease;
}
@keyframes clwSlideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* bounceIn */
.clw-logo.clw-anim[data-anim="bounceIn"] {
    opacity: 0;
    transform: scale(0.4);
}
.clw-logo.clw-anim.clw-animated[data-anim="bounceIn"] {
    animation-name: clwBounceIn;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes clwBounceIn {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.12); }
    80%  { transform: scale(0.94); }
    100% { opacity: 1; transform: scale(1); }
}

/* flipIn */
.clw-logo.clw-anim[data-anim="flipIn"] {
    opacity: 0;
    transform: rotateY(90deg);
}
.clw-logo.clw-anim.clw-animated[data-anim="flipIn"] {
    animation-name: clwFlipIn;
    animation-timing-function: ease;
}
@keyframes clwFlipIn {
    from { opacity: 0; transform: rotateY(90deg); }
    to   { opacity: 1; transform: rotateY(0deg); }
}