.kdpsc-wrapper{
position:relative;
overflow:hidden;
padding:80px 0;
}

/* TRACK */

.kdpsc-track{
display:flex;
transition:transform .5s ease;
will-change:transform;
}

/* CARD BASE */

.kdpsc-card{
padding:0 18px;
box-sizing:border-box;
display:flex;
}

/* DESKTOP */

@media(min-width:1024px){
.kdpsc-card{
flex:0 0 33.333%;
}
}

/* TABLET */

@media(min-width:768px) and (max-width:1023px){
.kdpsc-card{
flex:0 0 50%;
}
}

/* MOBILE */

@media(max-width:767px){
.kdpsc-card{
flex:0 0 100%;
padding:0 12px;
}
}

/* CARD */

.kdpsc-card-inner{
background:#fff;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
overflow:hidden;
transition:.35s ease;
display:flex;
flex-direction:column;
width:100%;
}

.kdpsc-card-inner:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.14);
}

/* IMAGE */

.kdpsc-image img{
width:100%;
display:block;
object-fit:cover;
}

/* CONTENT */

.kdpsc-content{
padding:26px;
text-align:center;
display:flex;
flex-direction:column;
flex-grow:1;
}

.kdpsc-content h3{
font-size:22px;
margin-bottom:12px;
font-weight:600;
color:#222;
}

.kdpsc-content p{
font-size:14px;
color:#666;
margin-bottom:22px;
flex-grow:1;
line-height:1.6;
}

/* BUTTON */

.kdpsc-btn{
display:inline-block;
padding:10px 22px;
border-radius:30px;
background:linear-gradient(90deg,#000000,#003170) !important;
color:#fff;
font-size:13px;
text-decoration:none;
transition:.35s ease;
align-self:center;
font-weight:500;
}

.kdpsc-btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* ARROWS */

.kdpsc-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
border-radius:50%;
background:#fff;
box-shadow:0 6px 20px rgba(0,0,0,.15);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
z-index:10;
transition:.3s ease;
}

.kdpsc-arrow:hover

.kdpsc-prev{
left:12px;
}

.kdpsc-next{
right:12px;
}

/* DOTS */

.kdpsc-dots{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:32px;
}

.kdpsc-dots button{
width:7px;
height:7px;
border-radius:50%;
border:none;
background:#cfd2dc;
cursor:pointer;
transition:all .3s ease;
padding:0;
}

/* ACTIVE DOT */

.kdpsc-dots button.active{
width:9px;
height:9px;
background:#003170;
}