/* HERO SLIDER */

.hero-slider{
position:relative;
overflow:hidden;
border-radius:18px;
}

.hero-slide{
position:absolute;
inset:0;
opacity:0;
transition:opacity .7s ease;
}

.hero-slide.active{
opacity:1;
position:relative;
}

.hero-slide img{
width:100%;
height:100%;
object-fit:cover;
border-radius:18px;
}

/* slider dots */

.hero-dots{
display:flex;
gap:8px;
justify-content:center;
margin-top:10px;
}

.hero-dots span{
width:8px;
height:8px;
border-radius:50%;
background:#cbd6ff;
cursor:pointer;
}

.hero-dots span.active{
background:#00CFE8;
}

/* BRAND SLIDER */

.brand-slider{
display:flex;
gap:60px;
overflow:hidden;
position:relative;
align-items:center;
padding:16px 0;
}

.brand-track{
display:flex;
gap:60px;
animation:brandScroll 30s linear infinite;
}

.brand-logo img{
height:34px;
opacity:.75;
filter:grayscale(100%);
transition:.3s;
}

.brand-logo img:hover{
opacity:1;
filter:none;
transform:scale(1.1);
}

@keyframes brandScroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}