/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jul 11 2026 | 04:18:15 */
/* ==========================================================
   AKTEC DESIGN SYSTEM
   Component : Project Filter
   Version   : 1.0
========================================================== */


/* ==========================================================
   FILTER CONTAINER
========================================================== */

.ak-filter{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin:25px 0 40px;
}


/* ==========================================================
   FILTER ITEM
========================================================== */

.ak-filter-item{

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

    height:46px;

    padding:0 22px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:10px;

    color:#1F2937;

    font-size:15px;
    font-weight:600;

    line-height:1;

    white-space:nowrap;

    cursor:pointer;

    user-select:none;

    transition:
        background-color .25s,
        border-color .25s,
        color .25s,
        transform .2s,
        box-shadow .25s;

}


/* ==========================================================
   HOVER
========================================================== */

.ak-filter-item:hover{

    border-color:#148CFF;

    color:#148CFF;

    background:#F7FBFF;

    transform:translateY(-2px);

    box-shadow:0 6px 18px rgba(20,140,255,.12);

}


/* ==========================================================
   ACTIVE
========================================================== */

.ak-filter-item.active{

    background:#148CFF;

    border-color:#148CFF;

    color:#FFFFFF !important;

    box-shadow:0 8px 20px rgba(20,140,255,.20);

}

.ak-filter-item.active *{

    color:#FFFFFF !important;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:849px){

    .ak-filter{

        flex-wrap:nowrap;

        justify-content:flex-start;

        overflow-x:auto;

        gap:10px;

        padding-bottom:6px;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;

    }

    .ak-filter::-webkit-scrollbar{

        display:none;

    }

    .ak-filter-item{

        flex:0 0 auto;

        height:42px;

        padding:0 18px;

        font-size:14px;

    }

}

/* ==========================================================
   PROJECT ANIMATION
========================================================== */

.ak-project{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .3s ease,
        transform .3s ease;

}