/* Global Variables with Responsive Values */:root {
    --primary-transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    --hover-scale: 1.15;  /* Base hover scale */
    --active-opacity: 1;
    --inactive-opacity: 0.65;
    --grayscale-inactive: 50%;
    --entrance-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
    --swiper-padding: 50px;
    --swiper-margin: 90px;
    --gradient-width: 180px;
    --mobile-active-transform: 1.06; /* New variable for mobile active slides */
    --mobile-slide-spacing: 10px; /* New variable for mobile slide spacing */
    --swiper-slides-per-view: 5; /* Control number of visible slides */
}

.clientsSectiontext{
    text-align: left;
    margin-bottom: 20px;
    width: 48%;
}
.clientsSection{
    display: flex;
    align-items: center;
    height: 700px;
    width: var(--rn-width1);
    margin: auto;
    justify-content: space-between;
}
.clientleftside{
    overflow: hidden;
    display: flex;
    gap: 15px;
}

.clients{
    border-radius: 0 0 30px 30px;
}

/* Logo specific styles */
.brand-logo.gray-active,
.brand-logo.gray-active .cls-1-eqdom,
.brand-logo.gray-active .cls-1-agenz,
.brand-logo.gray-active .cls-1-soge,
.brand-logo.gray-active .cls-2-redal,.brand-logo.gray-active .cls-3-redal,
.brand-logo.gray-active .cls-2-marjane,.brand-logo.gray-active .cls-3-marjane,
.brand-logo.gray-active .cls-1-saham,.brand-logo.gray-active .cls-3-saham,
.brand-logo.gray-active .cls-1-mauto, .brand-logo.gray-active .cls-2-mauto, .brand-logo.gray-active .cls-3-mauto,
.brand-logo.gray-active .cls-1-cimr, .brand-logo.gray-active .cls-2-cimr, .brand-logo.gray-active .cls-3-cimr,
.brand-logo.gray-active .cls-1-cfc, .brand-logo.gray-active .cls-2-cfc, .brand-logo.gray-active .cls-4-cfc,
.brand-logo.gray-active .cls-6-sg, .brand-logo.gray-active .cls-1-sg, .brand-logo.gray-active .cls-2-sg, .brand-logo.gray-active .cls-3-sg, .brand-logo.gray-active .cls-4-sg
.brand-logo.gray-active .cls-1-07,
.brand-logo.gray-active .cls-1-mm,
.brand-logo.gray-active .cls-1-vc,
.brand-logo.gray-active .cls-1-bc,
.brand-logo.gray-active .cls-1-or,
.brand-logo.gray-active .cls-1-daa,
.brand-logo.gray-active .cls-3-daa,
.brand-logo.gray-active .cls-2-daa,
.brand-logo.gray-active .cls-4-daa,
.brand-logo.gray-active .cls-5-daa,
.brand-logo.gray-active .cls-6-daa,
.brand-logo.gray-active .cls-10-daa,
.brand-logo.gray-active .cls-13-daa,
.brand-logo.gray-active .cls-9-daa{
    fill: rgb(174, 174, 174);
    transition: fill 0.3s ease;
}
/* On hover: back to original red */
.logo-wrapper:hover {
    fill: unset;
}
/* White areas: add drop shadow on hover */
.logo-wrapper:hover .brand-logo {
    /* filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); */
    transition: filter 0.3s ease;
}
/* Base Logo Styles with Optimized Transitions */
.brand-logo {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform var(--primary-transition), filter var(--primary-transition);
    max-width: 100%; /* Ensure logos don't overflow */
    height: auto; /* Maintain aspect ratio */
}
/* home brands */

/* Logo specific styles */
.brand-logo-h.gray-active,
.brand-logo-h.gray-active .cls-1-eqdom,
.brand-logo-h.gray-active .cls-1-agenz,
.brand-logo-h.gray-active .cls-1-soge,
.brand-logo-h.gray-active .cls-2-redal,.brand-logo-h.gray-active .cls-3-redal,
.brand-logo-h.gray-active .cls-2-marjane,.brand-logo-h.gray-active .cls-3-marjane,
.brand-logo-h.gray-active .cls-1-saham,.brand-logo-h.gray-active .cls-3-saham,
.brand-logo-h.gray-active .cls-1-mauto, .brand-logo-h.gray-active .cls-2-mauto, .brand-logo-h.gray-active .cls-3-mauto,
.brand-logo-h.gray-active .cls-1-cimr, .brand-logo-h.gray-active .cls-2-cimr, .brand-logo-h.gray-active .cls-3-cimr,
.brand-logo-h.gray-active .cls-1-cfc, .brand-logo-h.gray-active .cls-2-cfc, .brand-logo-h.gray-active .cls-4-cfc,
.brand-logo-h.gray-active .cls-6-sg, .brand-logo-h.gray-active .cls-1-sg, .brand-logo-h.gray-active .cls-2-sg, .brand-logo-h.gray-active .cls-3-sg, .brand-logo-h.gray-active .cls-4-sg
.brand-logo-h.gray-active .cls-1-07,
.brand-logo-h.gray-active .cls-1-mm,
.brand-logo-h.gray-active .cls-1-vc,
.brand-logo-h.gray-active .cls-1-bc,
.brand-logo-h.gray-active .cls-1-or,
.brand-logo-h.gray-active .cls-1-daa,
.brand-logo-h.gray-active .cls-3-daa,
.brand-logo-h.gray-active .cls-2-daa,
.brand-logo-h.gray-active .cls-4-daa,
.brand-logo-h.gray-active .cls-5-daa,
.brand-logo-h.gray-active .cls-6-daa,
.brand-logo-h.gray-active .cls-10-daa,
.brand-logo-h.gray-active .cls-13-daa,
.brand-logo-h.gray-active .cls-9-daa{
    fill: rgb(174, 174, 174);
    transition: fill 0.3s ease;
}

/* On hover: back to original red */
.logo-wrapper:hover {
    fill: unset;
}

/* White areas: add drop shadow on hover */
.logo-wrapper:hover .brand-logo-h {
    /* filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); */
    transition: filter 0.3s ease;
}

/* Base Logo Styles with Optimized Transitions */
.brand-logo-h {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform var(--primary-transition), filter var(--primary-transition);
    max-width: 100%; /* Ensure logos don't overflow */
    height: auto; /* Maintain aspect ratio */
}
/* end home brands */

/* Individual Brand Styling */
.swiper.mySwiperBrands, .swiper.mySwiperBrandsreverse{
    height: 700px;
    margin: 0;
    width: 260px;
}

/* Enhanced Gradient Fade Effects */
.swiper.mySwiperBrands::before,
.swiper.mySwiperBrands::after {
    content: '';
    position: absolute;
    top: 0;
    height: 16%;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.5s ease;
    width: inherit;
}
.swiper.mySwiperBrands::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 100%, #f8f8f8 0%);
}

/* Bottom fade (from transparent to background gray) */
.swiper.mySwiperBrands::after {
  top: 589px;
  background: linear-gradient(to top, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
}

/* Professional Slide Styling with Enhanced Zoom */
/*.swiper.mySwiperBrands .swiper-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
    opacity: var(--inactive-opacity);
    filter: grayscale(var(--grayscale-inactive));
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center center;
    padding: 20px;
    box-sizing: border-box;
}

.swiper.mySwiperBrands .swiper-slide-active,
.swiper.mySwiperBrands .swiper-slide-prev,
.swiper.mySwiperBrands .swiper-slide-next {
    opacity: var(--active-opacity);
    filter: grayscale(0%);
    transform: scale(1.1);
}

.swiper.mySwiperBrands .swiper-wrapper {
    align-items: center;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
} */

/* Advanced Animation Keyframes */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulseSubtle {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glowEffect {
    0% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
    }
    100% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
}

/* Logo Entrance Animation */
.swiper.mySwiperBrands .swiper-slide {
    opacity: 0;
    animation: fadeIn 0.8s var(--entrance-timing) forwards;
    animation-delay: calc(var(--slide-index, 0) * 0.08s + 0.1s);
}

.swiper.mySwiperBrands .swiper-slide.focused {
    animation: pulseSubtle 3s ease infinite;
    transform: scale(1.2) !important;
    z-index: 5;
}

/* Additional zoom effect for active slides */
.swiper.mySwiperBrands .swiper-slide.emphasized {
    z-index: 2;
}

/* Enhanced Responsive Adjustments */
/* Large Desktop and Laptop */
@media (max-width: 1440px) {
    :root {
        --hover-scale: 1.14;
        --swiper-padding: 45px;
        --swiper-margin: 80px;
        --gradient-width: 160px;
    }
}

/* Desktop and Small Laptop */
@media (max-width: 1300px) {
    :root {
        --hover-scale: 1.12;
        --swiper-padding: 40px;
        --swiper-margin: 60px;
        --gradient-width: 120px;
        --swiper-slides-per-view: 4; /* Show fewer slides */
    }

    #redal {
        width: 120px;
    }
    #eqdom {
        width: 140px;
    }
    #marjane {
        width: 140px;
    }
    #SG {
        width: 180px;
    }
    #m-automotiv {
        width: 110px;
    }
    #marjaneM {
        width: 110px;
    }
    #decathlon {
        width: 140px;
    }

    .swiper.mySwiperBrands .swiper-slide-active,
    .swiper.mySwiperBrands .swiper-slide-prev,
    .swiper.mySwiperBrands .swiper-slide-next {
        transform: scale(1.08);
    }
}

/* Tablets and Large Mobile */
@media (max-width: 900px) {
    :root {
        --hover-scale: 1.1;
        --inactive-opacity: 0.75; /* Increased to make non-active slides more visible */
        --grayscale-inactive: 30%; /* Reduced grayscale for better visibility */
        --swiper-padding: 35px;
        --swiper-margin: 50px;
        --gradient-width: 80px; /* Reduced gradient for more visible area */
        --swiper-slides-per-view: 3; /* Better spacing for tablets */
    }

    #redal, #marjaneM {
        width: 110px; /* Slightly increased for better visibility */
    }
    #eqdom, #marjane, #decathlon {
        width: 130px;
    }
    #SG {
        width: 160px;
    }
    #m-automotiv {
        width: 110px;
    }

    .swiper-slide {
        padding: 15px 10px; /* Adjusted padding for better horizontal spacing */
    }

    .swiper.mySwiperBrands .swiper-slide-active,
    .swiper.mySwiperBrands .swiper-slide-prev,
    .swiper.mySwiperBrands .swiper-slide-next {
        transform: scale(1.07);
    }

    .swiper-slide.focused {
        transform: scale(1.15) !important;
    }
        .swiper-slide {
                padding: var(--mobile-slide-spacing);
                margin: 0 -20px;
            }
            .brand-logo {
    width: 220px;
}
}

/* Medium-sized Mobile */
@media (max-width: 700px) {
    :root {
        --hover-scale: 1.08;
        --inactive-opacity: 0.8; /* Further increased for better visibility */
        --grayscale-inactive: 20%; /* Reduced grayscale */
        --swiper-padding: 30px;
        --swiper-margin: 40px;
        --gradient-width: 60px; /* Reduced gradient width */
        --mobile-active-transform: 1.06;
        --swiper-slides-per-view: 2.5; /* Allows partial visibility of next slide */
    }

    /* More consistent sizing across brands */
    #redal, #eqdom, #marjane, #marjaneM, #decathlon, #m-automotiv {
        width: 100px; /* Standardized size for better mobile appearance */
    }
    #SG {
        width: 140px;
    }

    .swiper-slide {
        padding: var(--mobile-slide-spacing);
        margin: 0 5px; /* Added margin for better spacing */
    }

    .swiper.mySwiperBrands .swiper-slide-active,
    .swiper.mySwiperBrands .swiper-slide-prev,
    .swiper.mySwiperBrands .swiper-slide-next {
        transform: scale(var(--mobile-active-transform));
    }

    .swiper.mySwiperBrands .swiper-slide.focused {
        transform: scale(1.12) !important;
    }

    /* Improve gradient visibility on mobile screens */
    .swiper.mySwiperBrands .swiper.mySwiperBrands::before {
        background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 100%);
    }

    .swiper.mySwiperBrands .swiper.mySwiperBrands::after {
        background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 100%);
    }
}

/* Small Mobile Devices */
@media (max-width: 576px) {
    :root {
        --hover-scale: 1.08;
        --inactive-opacity: 0.85; /* Greatly increased for better visibility */
        --grayscale-inactive: 15%; /* Minimal grayscale effect */
        --swiper-padding: 20px;
        --swiper-margin: 30px;
        --gradient-width: 45px;
        --mobile-active-transform: 1.05;
        --mobile-slide-spacing: 8px;
        --swiper-slides-per-view: 2; /* Show 2 clear slides */
    }

    /* Adjusted for better visibility on small screens */
    #redal, #eqdom, #marjane, #marjaneM, #decathlon, #m-automotiv {
        width: 90px; /* Consistent sizing */
        max-height: 50px; /* Control height for uniformity */
    }
    #SG {
        width: 120px;
        max-height: 50px;
    }

    .swiper.mySwiperBrands .swiper-slide {
        padding: var(--mobile-slide-spacing);
        margin: 0 3px;
    }

    /* Small-screen specific swiper adjustments */
    .swiper.mySwiperBrands {
        padding: 15px 0; /* Reduced top/bottom padding */
    }

    .swiper.mySwiperBrands .swiper-slide-active,
    .swiper.mySwiperBrands .swiper-slide-prev,
    .swiper.mySwiperBrands .swiper-slide-next {
        transform: scale(var(--mobile-active-transform));
    }

    .swiper.mySwiperBrands .swiper-slide.focused {
        transform: scale(1.1) !important;
    }

    /* Lighter gradients for small screens */
    .swiper.mySwiperBrands::before {
        background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);
    }

    .swiper.mySwiperBrands::after {
        background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);
    }

    /* Optimize animations for performance on small devices */
    @keyframes pulseSubtle {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.03);
        }
        100% {
            transform: scale(1);
        }
    }
           .swiper-slide {
                padding: var(--mobile-slide-spacing);
                margin: 0 -14px;
            }
}

/* Extra Small Mobile Devices */
@media (max-width: 375px) {
    :root {
        --hover-scale: 1.05;
        --inactive-opacity: 0.9; /* Almost fully visible */
        --grayscale-inactive: 10%;
        --swiper-padding: 15px;
        --swiper-margin: 20px;
        --gradient-width: 35px;
        --mobile-slide-spacing: 5px;
    }

    /* Further optimized sizes for smallest screens */
    #redal, #marjaneM, #eqdom, #marjane, #decathlon, #m-automotiv {
        width: 85px;
        max-height: 45px;
    }
    #SG {
        width: 110px;
        max-height: 45px;
    }

    /* Enhance touch targets */
    .swiper.mySwiperBrands .swiper-slide {
        padding: var(--mobile-slide-spacing);
        touch-action: pan-y; /* Optimize for touch interaction */
    }

    /* Add JavaScript helper class for small screens */
    .mobile-view-active .swiper-slide {
        padding: 3px;
        margin: 0 2px;
    }

    /* Even lighter gradients */
    .swiper.mySwiperBrands::before {
        background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
        width: 30px;
    }

    .swiper.mySwiperBrands::after {
        background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
        width: 30px;
    }

    .swiper-slide {
                padding: var(--mobile-slide-spacing);
                margin: 0 -6px;
            }
}

/* JavaScript enhancement class - add with JS when detected mobile */
.optimize-for-mobile .swiper-slide {
    opacity: var(--inactive-opacity);
    filter: grayscale(var(--grayscale-inactive) / 2); /* Half the grayscale effect */
}

/* Critical addition for mobile: Force Swiper settings via CSS */
@media (max-width: 768px) {
    /* These classes help override Swiper's default behavior */
    .swiper.mySwiperBrands .swiper-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* This ensures consistent sizing */
    .swiper.mySwiperBrands .swiper-slide {
        /*width: auto !important; /* Override inline styless */
        flex: 0 0 auto;
        min-width: 0; /* Allow shrinking below content size */
    }
}