.app__works{flex-direction:column;flex:1;align-items:center;width:100%;display:flex}.app__work-filter{z-index:1;background-color:#edf2f8;flex-direction:row;justify-content:center;width:100%;padding-top:4.5rem;padding-bottom:5px;display:flex;position:sticky;top:0;left:0;overflow-x:auto;box-shadow:0 0 10px #0003}@media screen and (max-width:875px){.app__work-filter{justify-content:flex-start}}.app__work-filter::-webkit-scrollbar{display:none}.app__work-filter .item__active{background-color:var(--secondary-color)!important;color:#fff!important}.app__work-filter .app__work-filter-item{border:1px solid var(--secondary-color);color:#000;cursor:pointer;background-color:#fff;border-radius:20px;margin:.3rem .5rem;padding:.5rem 1rem;font-weight:800;transition:all .3s}@media screen and (max-width:875px){.app__work-filter .app__work-filter-item{text-overflow:ellipsis;white-space:nowrap;min-width:fit-content;max-width:20rem;overflow:hidden}}.app__work-filter .app__work-filter-item:first-child{margin-left:20px}.app__work-filter .app__work-filter-item:last-child{margin-right:20px}.app__work-filter .app__work-filter-item:hover{background-color:var(--secondary-color);color:#fff}@media screen and (min-width:2000px){.app__work-filter .app__work-filter-item{border-radius:.85rem;padding:1rem 2rem}}.app__work-portfolio{flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.app__work-portfolio .app__work-item{color:#000;cursor:pointer;background-color:#fff;border-radius:.5rem;flex-direction:column;justify-content:flex-start;align-items:stretch;width:270px;height:370px;margin:1rem;padding:0 0 .7rem;transition:all .3s;overflow:hidden}.app__work-portfolio .app__work-item:hover{box-shadow:0 0 25px #0003}@media screen and (min-width:2000px){.app__work-portfolio .app__work-item{border-radius:.75rem;width:470px}}@media screen and (max-width:300px){.app__work-portfolio .app__work-item{width:100%;margin:1rem}}.app__work-img{border-radius:10px 10px 0 0;width:100%;height:220px;position:relative;overflow:hidden}.app__work-img img{object-fit:cover;border-radius:10px 10px 0 0;width:100%;height:220px;transition:all .3s ease-in-out}.app__work-img:hover img{transform:scale(1.1)}@media screen and (min-width:2000px){.app__work-img{height:350px}}.app__works .app__work-portfolio .app__work-item{width:min(320px,100vw - 2rem);height:420px}.app__works .app__work-portfolio .app__work-img,.app__works .app__work-portfolio .app__work-img img{height:250px}.app__work-hover{opacity:0;pointer-events:none;background-color:#00000080;border-radius:10px 10px 0 0;width:100%;height:100%;transition:all .2s ease-in-out;position:absolute;top:0;left:0;right:0}.app__work-img:hover .app__work-hover,.app__work-item:hover .app__work-hover{opacity:1;pointer-events:auto}.app__work-hover div{color:#fff;width:50px;height:50px;font-family:var(--font-base);background-color:#00000080;border-radius:50%;margin:1rem;font-weight:800;transition:all .2s ease-in-out}.app__work-hover div svg{color:#fff;width:50%;height:50%}.app__work-content{flex-direction:column;width:100%;padding:24px 16px 18px;position:relative}.app__work-content h4{text-align:center;margin:0 0 10px;line-height:1}.app__work-content p{text-align:center}.view__all{background-color:var(--secondary-color);color:#fff;border-radius:1rem;margin-top:1rem;padding:1.2rem 2.4rem;font-size:16px;font-weight:600;transition:all .3s}.view__all:hover{background-color:#ff2f2f}