.portfolio-renders {
    background: linear-gradient(180deg, #010C25 56.28%, #032576 100%);
    padding: 140px 0;
}

.portfolio-renders .main-h2 {
    color: var(--n-white);
    margin-bottom: 80px;
}

.portfolio-renders .swiper-slide {
    width: fit-content;
}

.portfolio-renders .renders-slide {
    width: 1000px;
    height: 562px;
    border-radius: 20px;
    overflow: hidden;
    cursor: url('data:image/svg+xml;utf8,<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="40" cy="40" r="40" fill="%23123569" fill-opacity="0.4"/><path d="M30 40H50" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M40 30V50" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') 40 40, pointer;
}

.portfolio-renders .renders-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-renders .swiper {
    margin: 0 -100px;
    padding: 0 100px;
}

.portfolio-renders .swiper-pagination-progressbar {
    position: static;
    margin-top: 32px;
    height: 6px;
    background: var(--d-dark-40);
    border-radius: 10px;
    overflow: hidden;
}

.portfolio-renders .swiper-pagination-progressbar-fill {
    background: var(--d-accent);
}

/* Navigation Arrows */
.portfolio-renders .swiper-button-next,
.portfolio-renders .swiper-button-prev {
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

.portfolio-renders .swiper-button-next::after,
.portfolio-renders .swiper-button-prev::after {
    content: '';
}

.portfolio-renders .swiper-button-next {
    right: 90px;
    background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 5.625C25.1791 5.625 20.4664 7.05457 16.458 9.73293C12.4495 12.4113 9.32533 16.2181 7.48045 20.6721C5.63556 25.126 5.15285 30.027 6.09337 34.7553C7.03388 39.4836 9.35538 43.8268 12.7643 47.2357C16.1732 50.6446 20.5164 52.9661 25.2447 53.9066C29.973 54.8472 34.874 54.3644 39.3279 52.5196C43.7819 50.6747 47.5887 47.5505 50.2671 43.542C52.9454 39.5336 54.375 34.8209 54.375 30C54.3682 23.5374 51.7979 17.3415 47.2282 12.7718C42.6585 8.20209 36.4626 5.63182 30 5.625ZM36.9516 31.3266L27.5766 40.7016C27.4024 40.8758 27.1956 41.014 26.9679 41.1082C26.7403 41.2025 26.4964 41.251 26.25 41.251C26.0036 41.251 25.7597 41.2025 25.5321 41.1082C25.3045 41.014 25.0977 40.8758 24.9234 40.7016C24.7492 40.5274 24.6111 40.3205 24.5168 40.0929C24.4225 39.8653 24.374 39.6214 24.374 39.375C24.374 39.1286 24.4225 38.8847 24.5168 38.6571C24.6111 38.4295 24.7492 38.2226 24.9234 38.0484L32.9742 30L24.9234 21.9516C24.5716 21.5997 24.374 21.1226 24.374 20.625C24.374 20.1274 24.5716 19.6503 24.9234 19.2984C25.2753 18.9466 25.7525 18.749 26.25 18.749C26.7476 18.749 27.2247 18.9466 27.5766 19.2984L36.9516 28.6734C37.1259 28.8476 37.2642 29.0544 37.3586 29.282C37.4529 29.5096 37.5015 29.7536 37.5015 30C37.5015 30.2464 37.4529 30.4904 37.3586 30.718C37.2642 30.9456 37.1259 31.1524 36.9516 31.3266Z" fill="%23fff" /></svg>');
}

.portfolio-renders .swiper-button-prev {
    left: 90px;
    right: auto;
    background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 5.625C25.1791 5.625 20.4664 7.05457 16.458 9.73293C12.4495 12.4113 9.32533 16.2181 7.48045 20.6721C5.63556 25.126 5.15285 30.027 6.09337 34.7553C7.03388 39.4836 9.35538 43.8268 12.7643 47.2357C16.1732 50.6446 20.5164 52.9661 25.2447 53.9066C29.973 54.8472 34.874 54.3644 39.3279 52.5196C43.7819 50.6747 47.5887 47.5505 50.2671 43.542C52.9454 39.5336 54.375 34.8209 54.375 30C54.3682 23.5374 51.7979 17.3415 47.2282 12.7718C42.6585 8.20209 36.4626 5.63182 30 5.625ZM23.0484 28.6734L32.4234 19.2984C32.5976 19.1242 32.8044 18.986 33.0321 18.8918C33.2597 18.7975 33.5036 18.749 33.75 18.749C33.9964 18.749 34.2403 18.7975 34.4679 18.8918C34.6955 18.986 34.9023 19.1242 35.0766 19.2984C35.2508 19.4726 35.3889 19.6795 35.4832 19.9071C35.5775 20.1347 35.626 20.3786 35.626 20.625C35.626 20.8714 35.5775 21.1153 35.4832 21.3429C35.3889 21.5705 35.2508 21.7774 35.0766 21.9516L27.0258 30L35.0766 38.0484C35.4284 38.4003 35.626 38.8774 35.626 39.375C35.626 39.8726 35.4284 40.3497 35.0766 40.7016C34.7247 41.0534 34.2475 41.251 33.75 41.251C33.2524 41.251 32.7753 41.0534 32.4234 40.7016L23.0484 31.3266C22.8741 31.1524 22.7358 30.9456 22.6414 30.718C22.5471 30.4904 22.4985 30.2464 22.4985 30C22.4985 29.7536 22.5471 29.5096 22.6414 29.282C22.7358 29.0544 22.8741 28.8476 23.0484 28.6734Z" fill="%23fff"/></svg>');
}

.portfolio-renders .swiper-button-next:hover,
.portfolio-renders .swiper-button-prev:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.portfolio-renders .swiper-button-disabled {
    opacity: 0;
}

/* Modal */
.portfolio-renders__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0B1521CC;
    backdrop-filter: blur(16px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 80px 142px;
}

.portfolio-renders__modal.active {
    opacity: 1;
    visibility: visible;
}

.portfolio-renders__modal-content {
    position: relative;
    height: 100%;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-x pan-y pinch-zoom;
}

.portfolio-renders__image-wrap {
    position: relative;
}

.portfolio-renders__modal-image {
    width: auto;
    height: auto;
    object-fit: cover;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 20px;
    aspect-ratio: 1920 / 1080;
    max-width: 100%;
    max-height: calc(100vh - 160px);
    display: block;
}

.portfolio-renders__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10000;
    transition: transform 0.3s ease;
}

.portfolio-renders__close:hover {
    transform: scale(1.1);
}

.portfolio-renders__close svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 1919px) {
    .portfolio-renders {
        padding: 100px 0;
    }

    .portfolio-renders .main-h2 {
        margin-bottom: 60px;
    }

    .portfolio-renders .renders-slide {
        width: 800px;
        height: 450px;
    }

    .portfolio-renders .swiper {
        margin: 0 -80px;
        padding: 0 80px;
    }

    .portfolio-renders__modal {
        padding: 80px 62px;
    }

    .portfolio-renders .swiper-button-next {
        right: 80px;
    }

    .portfolio-renders .swiper-button-prev {
        left: 80px;
    }
}

@media (max-width: 1439px) {
    .portfolio-renders {
        padding: 80px 0;
    }

    .portfolio-renders .main-h2 {
        margin-bottom: 48px;
    }

    .portfolio-renders .swiper-button-next {
        right: 60px;
    }

    .portfolio-renders .swiper-button-prev {
        left: 60px;
    }


    .portfolio-renders__modal {
        padding: 80px 142px;
    }

    .portfolio-renders .swiper {
        margin: 0 -60px;
        padding: 0 60px;
    }
}

@media (max-width: 1279px) {
    .portfolio-renders .renders-slide {
        width: 688px;
        height: 425px;
    }

    .portfolio-renders .swiper-button-next,
    .portfolio-renders .swiper-button-prev {
        display: none;
    }


    .portfolio-renders .swiper {
        margin: 0 -40px;
        padding: 0 40px;
    }

    .portfolio-renders__modal {
        padding: 40px;
    }

    .portfolio-renders__modal-image,
    .portfolio-renders__modal-content {
        height: fit-content;
    }

    .portfolio-renders__modal-image {
        max-height: calc(100vh - 80px);
    }

    .portfolio-renders__close {
        height: 32px;
        width: 32px;
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 577px) {
    .portfolio-renders__modal-image {
        max-height: calc(100vh - 32px);
    }

    .portfolio-renders {
        padding: 60px 0;
    }

    .portfolio-renders .renders-slide {
        width: 100%;
        height: 228px;
    }

    .portfolio-renders .main-h2 {
        margin-bottom: 40px;
        text-align: center;
    }

    .portfolio-renders__modal {
        padding: 16px;
    }
}