/* ========== Gallery Section ========== */
.gallery{padding:clamp(35px, 5.2vw, 100px) 0;background:#fff;color:var(--color-black);overflow:hidden;border-top:1px solid #F5F5F5;}
.gallery .gallery-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:4rem;}

.pro-menu{position:relative;z-index:50;}
.pro-menu .selector-item{border:1px solid #E5E5E5;min-width:190px;padding:12px 30px 12px 20px;position:relative;cursor:pointer;display:flex;align-items:center;gap:12px;}
.pro-menu .selector-item .filter-icon{color:#A3A3A3;transition:color 300ms ease;width:14px;height:14px;}
.pro-menu .selector-item em{font-size:11px;color:#000;font-weight:500;display:block;letter-spacing:0.2em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;pointer-events:none}
.pro-menu .selector-item span{position:absolute;top:calc(50% - 10px);right:8px;width:20px;height:20px;line-height:20px;color:#444;text-align:center;user-select:none;pointer-events:none}
.pro-menu .selector-item span i{font-size:12px;display:inline-block;transition:all 0.3s;}
.pro-menu .tab-list{display:none;position:absolute;left:0;top:calc(100% + 5px);width:100%;padding:5px 0;max-height:500px;overflow-y:auto;background:#fff;border:1px solid #E5E5E5;box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);}
.pro-menu .tab-list ul{}
.pro-menu .tab-list ul li{border-bottom:1px solid rgba(0,0,0,0.02);}
.pro-menu .tab-list ul li a{display:block;font-size:13px;color:#000;padding:12px 20px;cursor:pointer;white-space:nowrap;}
.pro-menu .tab-list ul li.active a{background:#FAFAFA;}
.pro-menu .tab-list ul li:hover a{background:#FAFAFA;}

.pro-menu .selector-item:hover{border-color:#000;}
.pro-menu .selector-item:hover .filter-icon{color:#000;}

.pro-menu .selector-item.active span i{transform:rotate(180deg);}

.gallery .gallery-count{font-size:11px;font-weight:500;color:#D4D4D4;letter-spacing:0.15em;text-transform:uppercase;}
@media (max-width:768px) {
.gallery .gallery-count{display:none;}
}


.gallery-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1.5rem;}
@media (min-width:768px) {
.gallery-grid {grid-template-columns:repeat(2,1fr);gap:3rem 1.5rem;}
}
@media (min-width:1024px) {
.gallery-grid {grid-template-columns:repeat(4,1fr);}
}
.gallery-grid .gallery-item{cursor:pointer;transition:opacity 500ms ease,transform 500ms ease;}
.gallery-grid .gallery-item .img-wrap{display:block;position:relative;aspect-ratio:1 / 1;overflow:hidden;margin-bottom:1rem;background:#F5F5F5;border:1px solid #F5F5F5;}
.gallery-grid .gallery-item .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 1000ms ease;}
.gallery-grid .gallery-item .img-wrap .img-overlay {position:absolute;inset:0;background:transparent;transition:background 500ms ease;}
.gallery-grid .gallery-item .img-wrap .badge{position:absolute;top:1rem;right:1rem;opacity:0;transform:translateY(8px);transition:all 500ms ease;}
.gallery-grid .gallery-item .img-wrap .badge span{display:inline-block;background:#fff;color:#000;padding:4px 8px;font-size:8px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;border-radius:9999px;}
.gallery-grid .gallery-item .item-info .title {font-size:18px;letter-spacing:-0.01em;color:#171717;margin-bottom:6px;font-weight:600;line-height:1.3;transition:color 300ms ease;text-transform: capitalize;}
.gallery-grid .gallery-item .item-info .line {width:16px;height:1px;background:#E5E5E5;transition:all 500ms ease;}

.gallery-grid .gallery-item:hover .img-wrap img {transform:scale(1.1);}
.gallery-grid .gallery-item:hover .img-wrap .img-overlay{background:rgba(0,0,0,0.1);}
.gallery-grid .gallery-item:hover .img-wrap .badge{opacity:1;transform:translateY(0);}
.gallery-grid .gallery-item:hover .item-info .title{color:#000;}
.gallery-grid .gallery-item:hover .item-info .line{width:40px;}

@media (max-width:768px) {
.gallery-grid .gallery-item .item-info .title {font-size:16px;}
}
@media (max-width:480px) {
.gallery-grid .gallery-item .item-info .title {font-size:15px;}
}



/*---------------------pagesize----------------------*/
#pagesize{margin-top:6rem;padding-top:3rem;border-top:1px solid rgba(0,0,0,0.05);display:flex;flex-direction:column;align-items:center;gap:2rem;}
#pagesize .page-info{font-size:12px;text-transform:uppercase;letter-spacing:0.3em;font-weight:700;color:#a3a3a3;}
#pagesize .page-info .current {color:#000000;}

#pagesize ul{display:flex;align-items:center;gap:10px;}
#pagesize ul li{width:3rem;height:3rem;background:#E9E9ED;position:relative;}
#pagesize ul li::after{content:"";position:absolute;inset:0;transition:all 500ms ease;transform:scale(0);border-radius:2px;}
#pagesize ul li a{position:relative;z-index:10;width:100%;height:100%;font-size:13px;font-weight:600;color:#a3a3a3;display:flex;justify-content:center;align-items:center;}
#pagesize ul li.active{background:#000;}
#pagesize ul li.active a{color:#fff;}
#pagesize ul li a.disabled {border:none;background:none;opacity:0.5;cursor:not-allowed;}

#pagesize ul li:hover::after{background:#f5f5f5;transform:scale(1);}

#pagesize .pn{display:flex;align-items:center;gap:15px;}
#pagesize .pn p{font-size:13px;font-weight:600;color:#000;}

@media (min-width:768px) {
#pagesize{flex-direction:row;justify-content:space-between;}
}