:root {
    --logo-height: 30px;
    --logo-height-09: calc(var(--logo-height) * 0.9);
    --logo-height-12: calc(var(--logo-height) * 1.2);
    --logo-height-15: calc(var(--logo-height) * 1.5);
    --logo-height-20: calc(var(--logo-height) * 2);
    --logo-height-25: calc(var(--logo-height) * 2.5);
    --logo-height-30: calc(var(--logo-height) * 3);
    --logo-height-35: calc(var(--logo-height) * 3.5);
    --logo-gap: calc(var(--logo-height) * 2);
    --logo-gap-y: calc(var(--logo-gap) * 0.6);
}


@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

section.client_logo_section {
    padding: 50px 0;
}

.client_logo_section h3.blue-center {
    text-align: center;
    font-size: 40px;
    color: #275BAB;
    padding: 0 20px;
    margin-bottom: 30px;
    font-weight: inherit;
    border: inherit;
}

.client_logo_section h3.blue-center span {
    font-size: 0.4em;
    padding-left: 1em;
}

.client_logo_container {
    overflow: hidden;
    width: 100%;
}

.client_logo_wrap {
    display: flex;
    gap: var(--logo-gap);
    width: max-content;
    /* animation: infinity-scroll-left 50s infinite linear 0.5s both; */
    animation: infinity-scroll-left 50s infinite linear -40s both;
}

.client_logo_wrap ul.logo_list {
    display: flex;
    gap: var(--logo-gap-y) var(--logo-gap);
    align-items: center;
}

.client_logo_wrap ul.logo_list>li {
    /* min-width: 300px; */
}

.client_logo_wrap ul.logo_list>li img {
    height: var(--logo-height);
    width: auto;
    display: block;
}

.client_logo_wrap ul.logo_list>li img.height09 {
    height: var(--logo-height-09);
}

.client_logo_wrap ul.logo_list>li img.height12 {
    height: var(--logo-height-12);
}

.client_logo_wrap ul.logo_list>li img.height15 {
    height: var(--logo-height-15);
}

.client_logo_wrap ul.logo_list>li img.height20 {
    height: var(--logo-height-20);
}

.client_logo_wrap ul.logo_list>li img.height25 {
    height: var(--logo-height-25);
}

.client_logo_wrap ul.logo_list>li img.height30 {
    height: var(--logo-height-30);
}

.client_logo_wrap ul.logo_list>li img.height35 {
    height: var(--logo-height-35);
}

.bg_over_white {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    margin: 40px 0;
}

.client_logo_container.no-animation {
    overflow: inherit;
    margin-top: 40px;
}

.client_logo_container.no-animation .client_logo_wrap {
    animation: none;
    display: block;
    width: auto;
}

.client_logo_container.no-animation .client_logo_wrap ul.logo_list {
    flex-wrap: wrap;
    justify-content: center;
}

@media(min-width: 769px) and (max-width: 1200px) {
    .client_logo_section h3.blue-center {
        font-size: 4.17vw;
    }

    section.client_logo_section {
        padding: 6.67vw 0;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --logo-height: 18px;
    }

    .client_logo_section h3.blue-center {
        font-size: 8vw;
    }
    #products_service .client_logo_section h3.blue-center {
        font-size: 6vw;
    }

    section.client_logo_section {
        padding: 10vw 0;
    }

    .client_logo_wrap {
        animation: infinity-scroll-left 50s infinite linear -45s both;
    }
}