/*-------------------------
Section curve (CSS, no image)
--------------------------*/
.bg-shape-image-position {
    position: relative;
    z-index: 2;
}

.bg-shape-image-position::after {
    content: '';
    position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1920 / 241;
    background: inherit;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .bg-shape-image-position::after {
        bottom: 51%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bg-shape-image-position::after {
        bottom: 98%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bg-shape-image-position::after {
        bottom: 98%;
    }
}

@media only screen and (max-width: 767px) {
    .bg-shape-image-position::after {
        bottom: 98%;
    }
}

/*-------------------------
Client List  
--------------------------*/
ul.client-list {
    position: relative;
    z-index: 2;
}

ul.client-list li a img {
    max-height: 55px;
}

@media only screen and (max-width: 767px) {
    ul.client-list li a img {
        width: auto;
        padding: 0 10px;
    }
}

/*-------------------------
Brand Logo Marquee
--------------------------*/
.brand-logo-marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.brand-logo-marquee__track {
    display: flex;
    width: max-content;
    animation: brandLogoMarquee 45s linear infinite;
}

.brand-logo-marquee:hover .brand-logo-marquee__track {
    animation-play-state: paused;
}

.brand-logo-marquee__group {
    flex-shrink: 0;
    align-items: center;
    margin: 0;
    padding: 0;
}

.brand-logo-marquee__item {
    flex-shrink: 0;
    padding: 0 2.5rem;
}

@keyframes brandLogoMarquee {
    0% {
        transform: translateX(0);
    }

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

@media (prefers-reduced-motion: reduce) {
    .brand-logo-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .brand-logo-marquee__group[aria-hidden="true"] {
        display: none;
    }
}