.carousel-container{
    overflow:hidden;
    position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:0 10px;
}

.carousel-track{
    display:flex;
    gap:20px;

    /* smoother than linear */
    transition:transform 0.6s ease-in-out;

    will-change:transform;
}

.carousel-slide{
    flex:0 0 calc(25% - 15px);
    background:#111827;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;

    /* small upgrade */
    transition:0.3s ease;
}

.carousel-slide:hover{
    transform:translateY(-5px);
}

.carousel-slide img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.card-content{
    padding:15px;
}

/* DOTS */
.carousel-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:15px;
}

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

.carousel-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#64748b;
    cursor:pointer;
    transition:0.3s;
}

.carousel-dot.active{
    background:#2563eb;
    transform:scale(1.3);
}

/* RESPONSIVE */
@media(max-width:1024px){
    .carousel-slide{
        flex:0 0 calc(50% - 15px);
    }
}

@media(max-width:640px){
    .carousel-slide{
        flex:0 0 100%;
    }
}

/* MODAL */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-content{
    background:#111827;
    padding:25px;
    border-radius:20px;
    width:90%;
    max-width:500px;
    text-align:center;
    position:relative;
    animation:pop .3s ease;
}

.modal-content img{
    width:100%;
    border-radius:15px;
    margin-bottom:15px;
}

.modal-content h2{
    color:white;
    margin-bottom:10px;
}

.modal-content p{
    color:#cbd5e1;
    line-height:1.6;
}

.close{
    position:absolute;
    right:15px;
    top:10px;
    font-size:28px;
    cursor:pointer;
    color:white;
}

@keyframes pop{
    from{transform:scale(0.7);opacity:0;}
    to{transform:scale(1);opacity:1;}
}