.portfolio_sec {padding-bottom: 40px;}
.portfolio_sec .title {margin-bottom: 55px;text-align: center;}
.portfolio_sec .title > h2 {color: #282828;font-size: 36px;font-weight: 600;margin-bottom: 20px;}
.portfolio_sec .title > p {color: #575757;font-size: 18px;line-height: 26px;}
.portfolio_sec .wrapper {display: grid;grid-template-columns: repeat(4,1fr);gap: 30px;}
.portfolio_sec .wrapper > div {position: relative;cursor: pointer;}
.portfolio_sec .wrapper > div > img {border-radius: 16px;width: 100%;height: 356px;object-fit: cover;}
.portfolio_sec .wrapper > div > div {width: 100%; color: #000;font-size: 16px;font-weight: 600;text-align: center;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);text-wrap: nowrap; padding-inline: 5px;}
.portfolio_sec .wrapper > div > div > span {display: block;font-size: 20px;margin-bottom: 5px; line-height: 1.2; text-wrap: wrap;}

.image_modal {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;backdrop-filter: blur(3px);background-color: rgba(0, 0, 0, 0.4);justify-content: center;align-items: center;z-index: 9999;}
.image_modal.active {display: flex;}
.image_modal .modal_content img {object-fit: cover;width: 800px;max-height: 80vh;height: 100%;border-radius: 12px;box-shadow: 0 0 15px rgba(0,0,0,0.3);}
.image_modal .modal_content {animation: zoomIn 0.3s ease;}

@keyframes zoomIn {
from {transform: scale(0.8); opacity: 0;}
to   {transform: scale(1); opacity: 1;}
}

@media only screen and (max-width:1200px) {
    .portfolio_sec .wrapper {grid-template-columns: repeat(3,1fr);}
    .image_modal .modal_content img {width: 600px;}
}
@media only screen and (max-width:991px) {
    .portfolio_sec .title > h2 {font-size: 30px;}
    .portfolio_sec .title > p {font-size: 16px;}
}
@media only screen and (max-width:767px) {
    .portfolio_sec .wrapper {grid-template-columns: repeat(2,1fr);}
    .image_modal .modal_content img {width: 400px;}
}
@media only screen and (max-width:575px) {
    .portfolio_sec .title > h2 {font-size: 26px;}
    .portfolio_sec .wrapper {grid-template-columns: repeat(1,1fr);}
    .portfolio_sec .wrapper > div > img {height: 440px;}
}