/* =========================================================
Sponsor Marquee
Forced 80% width
========================================================= */

.sponsor-marquee{
background: #ffffff;
border-bottom: 1px solid rgba(0,0,0,.08);
padding: 18px 0;
position: relative;
z-index: 1;

width: 80% !important;
max-width: 80% !important;
margin: 28px auto 50px auto !important;

border-radius: 16px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
overflow: visible;
display: block;
}

.sponsor-marquee .container{
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: visible;
}

.sponsor-marquee__wrap{
position: relative;
width: 100%;
height: 120px;
overflow: visible;
}

.sponsor-marquee__mask{
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
display: flex;
align-items: center;
border-radius: 16px;
}

.sponsor-marquee__wrap::before,
.sponsor-marquee__wrap::after{
content: "";
position: absolute;
top: 0;
width: 70px;
height: 100%;
z-index: 3;
pointer-events: none;
}

.sponsor-marquee__wrap::before{
left: 0;
background: linear-gradient(to right, #ffffff, rgba(255,255,255,0));
}

.sponsor-marquee__wrap::after{
right: 0;
background: linear-gradient(to left, #ffffff, rgba(255,255,255,0));
}

.sponsor-marquee__track{
display: inline-flex;
align-items: center;
gap: 20px;
white-space: nowrap;
will-change: transform;
animation: sponsorMarquee 28s linear infinite;
}

.sponsor-marquee__item{
width: 180px;
height: 72px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #ececec;
border-radius: 14px;
box-shadow: 0 3px 10px rgba(0,0,0,.05);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.sponsor-marquee__item img{
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 36px;
object-fit: contain;
opacity: .95;
filter: grayscale(20%);
transition: opacity .25s ease, filter .25s ease;
}

.sponsor-marquee__item:hover{
border-color: #fc226a;
box-shadow: 0 8px 20px rgba(0,0,0,.10);
transform: translateY(-1px);
}

.sponsor-marquee__item:hover img{
opacity: 1;
filter: none;
}

.sponsor-marquee__wrap:hover .sponsor-marquee__track{
animation-play-state: paused;
}

@keyframes sponsorMarquee{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
.sponsor-marquee__track{
animation: none;
}
}

.sponsor-marquee + *{
margin-top: 0 !important;
}

/* tablet */
@media (max-width: 991px){
.sponsor-marquee{
width: 88% !important;
max-width: 88% !important;
margin: 22px auto 40px auto !important;
padding: 16px 0;
border-radius: 14px;
}

.sponsor-marquee__wrap{
height: 108px;
}

.sponsor-marquee__mask{
height: 108px;
border-radius: 14px;
}

.sponsor-marquee__track{
gap: 16px;
animation-duration: 24s;
}

.sponsor-marquee__item{
width: 160px;
height: 66px;
padding: 10px 14px;
border-radius: 12px;
}

.sponsor-marquee__item img{
max-height: 32px;
}

.sponsor-marquee__wrap::before,
.sponsor-marquee__wrap::after{
width: 46px;
}
}

/* mobile */
@media (max-width: 576px){
.sponsor-marquee{
width: 94% !important;
max-width: 94% !important;
margin: 16px auto 30px auto !important;
padding: 14px 0;
border-radius: 12px;
}

.sponsor-marquee__wrap{
height: 94px;
}

.sponsor-marquee__mask{
height: 94px;
border-radius: 12px;
}

.sponsor-marquee__track{
gap: 14px;
animation-duration: 22s;
}

.sponsor-marquee__item{
width: 145px;
height: 58px;
padding: 8px 12px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.sponsor-marquee__item img{
max-height: 26px;
max-width: 100%;
filter: none;
}

.sponsor-marquee__item:hover{
transform: none;
box-shadow: 0 5px 14px rgba(0,0,0,.08);
}

.sponsor-marquee__wrap::before,
.sponsor-marquee__wrap::after{
width: 28px;
}
}