.board-section{
    background:#fff5f5;
    border:3px solid #f3caca;
    border-radius:24px;
    padding:24px;
    overflow:hidden;
    margin-top:100px;
}

.board-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.board-header .left{
    font-size:28px;
    font-weight:800;
    color:#e60023;
}

.board-header .right{
    color:#0066cc;
    cursor:pointer;
    font-weight:600;
}

.slider-wrapper{
    position:relative;
}
.board-slider{
    display:flex;

    gap:18px;

    overflow-x:auto;

    padding:10px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-x;

    scroll-behavior:auto;

    animation:autoMove 40s linear infinite;
}

.board-slider:hover{
    animation-play-state:paused;
}

.board-slider::-webkit-scrollbar{
    display:none;
}

.board-slider::-webkit-scrollbar{
    display:none;
}

.board-card{
    min-width:220px;
    max-width:220px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 4px 14px rgba(0,0,0,0.08);

    flex-shrink:0;

    transition:.25s;
}

.board-card:hover{
    transform:translateY(-6px);
}

.board-card img{
    width:100%;
    height:320px;

    object-fit:cover;

    display:block;

    cursor:pointer;
}

.slide-btn{
    position:absolute;

    top:45%;

    transform:translateY(-50%);

    width:52px;
    height:52px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 3px 12px rgba(0,0,0,0.2);

    cursor:pointer;

    z-index:100;

    font-size:24px;

    transition:.2s;
}

.slide-btn:hover{
    transform:translateY(-50%) scale(1.08);
}

.prev{
    left:0;
}

.next{
    right:0;
}



/* MODAL */

.image-modal{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.image-modal img{
    max-width:90%;
    max-height:90%;

    border-radius:20px;

    box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

.close-modal{
    position:absolute;

    top:20px;
    right:35px;

    color:#fff;

    font-size:50px;

    cursor:pointer;
}



/* MOBILE */

@media(max-width:768px){

    .board-header .left{
        font-size:26px;
    }

    .board-card{
        min-width:170px;
        max-width:170px;
    }

    .board-card img{
        height:250px;
    }

    .slide-btn{
        width:42px;
        height:42px;
        font-size:20px;
    }

}

/* ALL BOARD MODAL */

.all-board-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.85);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;
}

.all-board-content{
    width:90%;
    max-width:1300px;

    max-height:90vh;

    overflow:auto;

    background:#fff;

    border-radius:24px;

    padding:30px;

    position:relative;
}

.all-board-content h2{
    margin-bottom:25px;

    font-size:32px;

    color:#e60023;
}

.all-board-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(220px,1fr));

    gap:20px;
}

.all-board-card{
    border-radius:18px;

    overflow:hidden;

    box-shadow:0 4px 14px rgba(0,0,0,.1);

    transition:.25s;

    cursor:pointer;
}

.all-board-card:hover{
    transform:translateY(-6px);
}

.all-board-card img{
    width:100%;
    height:320px;

    object-fit:cover;

    display:block;
}



.close-all-board{
    position:fixed;

    top:40px;
    right:35px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:hsla(0, 0%, 100%, 0.333);

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:38px;

    cursor:pointer;

    color:#222;

    z-index:999999;

    box-shadow:0 4px 14px rgba(0,0,0,.25);

    transition:.2s;
}

.close-all-board:hover{
    transform:scale(1.08);
}
.modal-content-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}



.modal-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

}



.board-btn{

    border:none;

    padding:14px 24px;

    border-radius:14px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    color:white;

}



.play-btn{

    background:linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

}



.status-btn{

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

}



.board-btn:hover{

    transform:translateY(-4px);

    opacity:.9;

}



/* mobile */

@media(max-width:768px){

    .board-btn{

        width:100%;

        font-size:16px;

    }

}