.work-page{background:url(/images/background/content.png) top no-repeat;width:100%}.work-page .work-banner{padding:128px}.work-page .work-banner .title-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;width:75%;max-width:1184px;margin:0 auto;display:flex}.work-page .work-banner .title-container .category .wrapper{background:#ffffff26;border:1px solid #e2e8f0;border-radius:9999px;align-items:center;gap:12px;width:fit-content;padding:8px 16px;display:flex}.work-page .work-banner .title-container .category .wrapper .text{font-family:Inter;font-size:18px;font-weight:500;line-height:28px}.work-page .work-banner .title-container h1{text-align:left;font-family:Inter;font-size:48px;font-weight:600;line-height:58px}.work-page .work-banner .title-container p{opacity:.8;font-family:Inter;font-size:18px;font-weight:400;line-height:28px}.work-page .category-tabs{background:#f4f4f5;border-radius:9999px;flex-direction:row;align-items:center;width:579px;height:48px;margin:0 auto;padding:8px;display:flex}@media (max-width:768px){.work-page .category-tabs{border-radius:0}}.work-page .category-tabs .tab{text-align:center;color:#71717a;border-radius:9999px;flex-direction:row;flex:none;justify-content:center;align-self:stretch;align-items:center;gap:8px;height:32px;padding:6px 12px;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:16px;transition:all .3s;display:flex}.work-page .category-tabs .tab:hover{background:#ffffff80}.work-page .category-tabs .tab.active{color:#18181b;background:#fff;box-shadow:0 1px 2px #0000000d}.work-page .portfolio-grid{grid-template-columns:repeat(3,1fr);gap:24px;width:100%;max-width:1184px;margin:48px auto;padding:0 128px;display:grid}.work-page .portfolio-grid .portfolio-item{background:#f8fafc;border-radius:16px;flex-direction:column;align-items:center;gap:20px;padding:16px;transition:transform .3s;display:flex}.work-page .portfolio-grid .portfolio-item:hover{transform:translateY(-5px)}.work-page .portfolio-grid .portfolio-item .thumbnail{cursor:pointer;background:#000;border:1px solid #e2e8f0;border-radius:8px;width:100%;height:300px;position:relative;overflow:hidden}.work-page .portfolio-grid .portfolio-item .thumbnail img{object-fit:cover;width:100%;height:100%}.work-page .portfolio-grid .portfolio-item .thumbnail .view-project{color:#18181b;background:#f4f4f5;border-radius:9999px;align-items:center;gap:8px;padding:8px 32px;font-family:Inter;font-size:14px;font-weight:500;line-height:20px;transition:background-color .3s;display:flex;position:absolute;bottom:16px;left:16px}.work-page .portfolio-grid .portfolio-item .thumbnail .view-project:hover{background:#e4e4e7}.work-page .portfolio-grid .portfolio-item .content{flex-direction:column;gap:12px;width:100%;display:flex}.work-page .portfolio-grid .portfolio-item .content h3{color:#171717;margin:0;font-family:Inter;font-size:24px;font-weight:600;line-height:32px}.work-page .portfolio-grid .portfolio-item .content p{color:#475569;margin:0;font-family:Inter;font-size:18px;font-weight:400;line-height:28px}@media (max-width:1200px){.work-page .work-banner{padding:56px 64px}.work-page .portfolio-grid{grid-template-columns:repeat(2,1fr);padding:0 64px}}@media (max-width:768px){.work-page .work-banner{padding:100px 32px 56px}.work-page .work-banner .title-container .category .wrapper .text{font-size:13.5px;line-height:21px}.work-page .work-banner .title-container h1{font-size:36px;line-height:44px}.work-page .work-banner .title-container p{font-size:13.5px;line-height:21px}.work-page .category-tabs{flex-wrap:wrap;gap:8px;width:100%;height:auto}.work-page .category-tabs .tab{flex-grow:1;min-width:100px;font-size:9px;line-height:12px}.work-page .portfolio-grid{grid-template-columns:1fr;padding:0 32px}.work-page .portfolio-grid .portfolio-item .thumbnail .view-project{font-size:10.5px;line-height:15px}.work-page .portfolio-grid .portfolio-item .content h3{font-size:18px;line-height:24px}.work-page .portfolio-grid .portfolio-item .content p{font-size:13.5px;line-height:21px}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.work-page .skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#f8f8f8 50%,#f0f0f0 75%) 0 0/1000px 100%;border-radius:4px;animation:2s linear infinite shimmer}.work-page .skeleton.h1{width:70%;height:58px}.work-page .skeleton.h3{width:80%;height:32px}.work-page .skeleton.p{width:90%;height:28px}.work-page .skeleton-tabs .tab{border-radius:9999px;width:120px;height:32px}.work-page .skeleton-item .thumbnail{height:300px}.work-page .skeleton-item .content{gap:12px;width:100%}.work-page .skeleton-item .content .h3,.work-page .skeleton-item .content .p{margin:0}
