/* ============================= */
/* Brand Slider Main Section     */
/* ============================= */
.chn-brand-slider {
    width: 100%;
    padding:10px 0;
    background-color: #ffffff;
    box-sizing: border-box;
    /* IMPORTANT: Ensure Elementor doesn't hide overflow here */
    overflow: visible; 
}

/* ============================= */
/* Content Wrapper (New)         */
/* ============================= */
/* This holds the max-width instead of the swiper directly, 
   so the arrows stick to the slider area */
.chn-content-wrapper {
    position: relative; /* Context for arrows */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Prevent slider touching screen edge on mobile */
}

/* ============================= */
/* Swiper Container              */
/* ============================= */
.chn-brand-slider .swiper {
    width: 100%;
    /* overflow: hidden is automatic here by Swiper library */
}

/* ============================= */
/* Slides                        */
/* ============================= */
.chn-brand-slider .swiper-slide { display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 12px; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; /* Fix for some sliders clipping shadow */ margin: 10px 0; }

.chn-brand-slider .swiper-slide img {
    max-height: 100px;   /* try 80–120px */
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.chn-brand-slider .swiper-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ============================= */
/* Navigation Arrows (Fixed)     */
/* ============================= */
/* Style for classy nav buttons */
/* Clean nav buttons */
.chn-brand-slider .swiper-button-next.chn-next,
.chn-brand-slider .swiper-button-prev.chn-prev {
    width: 40px;                /* Circle size */
    height: 40px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.chn-brand-slider .swiper-button-next.chn-next::after,
.chn-brand-slider .swiper-button-prev.chn-prev::after {
    font-size: 12px;            /* Smaller arrow */
    color: #333;
}


.chn-brand-slider .swiper-button-next.chn-next:hover,
.chn-brand-slider .swiper-button-prev.chn-prev:hover {
    background: #f0f0f0;        /* Slight hover effect */
}


/* Position outside the slider */
.chn-brand-slider .swiper-button-prev.chn-prev { left: -50px; }
.chn-brand-slider .swiper-button-next.chn-next { right: -50px; }

/* Disabled state */
.chn-brand-slider .swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ============================= */
/* Mobile Optimization           */
/* ============================= */
@media (max-width: 768px) {

    .chn-brand-slider {
        overflow: visible; /* VERY important */
    }

    /* Position arrows slightly outside */
    .chn-brand-slider .swiper-button-prev.chn-prev {
        left: -20px;
    }

    .chn-brand-slider .swiper-button-next.chn-next {
        right: -20px;
    }

    /* Smaller arrows */
    .chn-brand-slider .swiper-button-next.chn-next,
    .chn-brand-slider .swiper-button-prev.chn-prev {
        width: 30px;
        height: 30px;
    }

    .chn-brand-slider .swiper-button-next.chn-next::after,
    .chn-brand-slider .swiper-button-prev.chn-prev::after {
        font-size: 10px;
    }

    /* Slide spacing */
    .chn-brand-slider .swiper-slide {
        margin: 5px 0;
    }

    .chn-brand-slider .swiper-slide img {
        max-height: 70px;
    }

	
	.chn-brand-slider .swiper {
        padding-left: 24px;
        padding-right: 24px;
		padding-bottom: 30px;   

    }
	
	
}