.project-list-page{width:100%;margin:130px auto 30px auto;background:#fff;overflow:hidden;position:relative}.project-container{width:calc(100% - 120px);margin:0 auto;text-align:center;max-width:1640px}.grid-title{text-align:left;font-size:30px;font-weight:600;margin-top:0;margin-bottom:20px}.year-filter{background:#fff;display:flex;gap:10px;margin-bottom:20px;justify-content:flex-start}.year-filter .filter-btn{background:#fff;margin-right:10px;border:none;font-size:18px;font-family:"Poppins",sans-serif;font-weight:600;cursor:pointer;transition:all .2s ease-out;color:#222}.year-filter .filter-btn.active{color:#222}.year-filter .filter-btn:hover{color:#666}.project-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;overflow:hidden}.project-grid .project-item{width:100%;aspect-ratio:11/8;position:relative;overflow:hidden;cursor:pointer}.project-grid .project-item img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease,filter .3s ease}.project-grid .project-item .project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);opacity:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;transition:background .3s ease,opacity .3s ease}.project-grid .project-item .project-overlay .project-title{font-size:19px;font-weight:bold;margin-bottom:5px;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#222}.project-grid .project-item .project-overlay .btn-more{font-size:14px;margin-top:10px;border:2px solid #009ade;padding:5px 18px;border-radius:15px;color:#009ade;font-weight:bold}.project-grid .project-item:hover{z-index:100}.project-grid .project-item:hover img{filter:brightness(0.7)}.project-grid .project-item:hover .project-overlay{background:rgba(238,238,238,.9);opacity:1}@media(max-width: 1400px){.year-filter .filter-btn{font-size:19px}.project-grid{grid-template-columns:repeat(3, 1fr)}}@media(max-width: 1200px){.project-list-page{margin:130px auto 0}.project-container{width:calc(100% - 50px)}}@media(max-width: 1000px){.project-list-page{margin:100px auto 30px auto}.project-container .project-grid{grid-template-columns:repeat(2, 1fr)}.btn-more{font-size:13px !important}}@media(max-width: 768px){.project-list-page{margin:70px auto 30px auto}.year-filter{display:grid;grid-template-columns:repeat(3, 1fr);row-gap:5px;-moz-column-gap:8px;column-gap:8px;margin-bottom:40px}.year-filter .filter-btn{font-size:14px;text-align:center}}.pagination{position:relative;z-index:10;display:flex;justify-content:center;align-items:center;margin:100px 0px 50px 0px;gap:8px}.pagination .pagination-btn{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0);color:#555;text-decoration:none;font-size:16px;font-weight:500;transition:all .3s ease}.pagination .pagination-btn:hover{background:#f0f0f0;color:#272727}.pagination .pagination-btn.active{background:#272727;color:#fff}.pagination .pagination-btn.first-page,.pagination .pagination-btn.prev-page,.pagination .pagination-btn.next-page,.pagination .pagination-btn.last-page{background:#f0f0f0}.pagination .pagination-btn.first-page:hover,.pagination .pagination-btn.prev-page:hover,.pagination .pagination-btn.next-page:hover,.pagination .pagination-btn.last-page:hover{background:#e0e0e0}@media(max-width: 768px){.pagination .pagination-btn{width:36px;height:36px;font-size:14px}}@media(max-width: 480px){.pagination{gap:4px}.pagination .pagination-btn{width:32px;height:32px;font-size:13px}.pagination .first-page,.pagination .last-page{display:none}}