/* Optional: Prevent body scrolling when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* Optional: Add any other styles you want to apply to the body when lightbox is open */
body.lightbox-open {
    padding-right: 17px; /* Compensate for scrollbar disappearing */
}

/* Optional: Add transition for smooth effect */
body {
    transition: padding-right 0.3s ease;
}


.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.portfolio-item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
    border-bottom: 1px solid #002e5d;
    padding-bottom: 10px;
    padding: 0;
    cursor: pointer;
}

.portfolio-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-image {
    width: 100%;
    height: 0;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='512' height='512' fill='%23E5EAEF'/%3E%3Cpath d='M127.268 212.236C167.507 212.236 203.959 233.185 225.025 267.536L277.267 352.706C262.525 376.844 227.563 376.925 212.7 352.827L127.268 212.236Z' fill='white'/%3E%3Cpath d='M212.941 142C252.898 142 290.035 162.828 310.9 197.017L341.673 247.353L309.49 300.029L212.941 142Z' fill='white'/%3E%3Cpath d='M341.634 142H406L373.817 194.676L341.634 142Z' fill='white'/%3E%3Cpath d='M133.591 197.3C148.829 197.3 161.182 184.921 161.182 169.65C161.182 154.379 148.829 142 133.591 142C118.353 142 106 154.379 106 169.65C106 184.921 118.353 197.3 133.591 197.3Z' fill='white'/%3E%3C/svg%3E%0A");
    background-size: cover;
    background-position: center;
}

.portfolio-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.portfolio-item:hover .portfolio-image img{
    transform: scale(1.1);
}

.portfolio-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99999;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-content {
    position: relative;
    max-width: fit-content;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
}
.portfolio-item-content {
    padding-top: 30px;
}
.portfolio-item-discription-wrapper {
    width: 440px;
    max-width: 90vw;
    padding: 0 20px;
}
.portfolio-item-content .portfolio-item-title-wrapper{width: 15%;max-width:220px}
.portfolio-item-content .portfolio-item-more-info-wrapper{width: 15%;max-width:220px;text-align: right;}
#portfolio-content #iv_lightbox_project_main_wrapper .portfolio-item-content .portfolio-item-title-wrapper h2{
font-weight: 700;
font-size: 16px;
line-height: 1.2;
color: #002E5D;
}
.portfolio-item-content .portfolio-item-more-info-wrapper .more-info-link{
font-weight: 600;
font-size: 12px;
line-height: 1;
color: #002E5D;
text-transform: lowercase;
}
.portfolio-item-content .portfolio-item-more-info-wrapper .more-info-link:after{
    content: '';
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3536 4.35355C10.5488 4.15829 10.5488 3.84171 10.3536 3.64645L7.17157 0.464466C6.97631 0.269204 6.65973 0.269204 6.46447 0.464466C6.2692 0.659728 6.2692 0.976311 6.46447 1.17157L9.29289 4L6.46447 6.82843C6.2692 7.02369 6.2692 7.34027 6.46447 7.53553C6.65973 7.7308 6.97631 7.7308 7.17157 7.53553L10.3536 4.35355ZM0 4.5H10V3.5H0V4.5Z' fill='%23002E5D'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    margin-left: 7px;
    width: 10px;
    height: 8px;
}
.close-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #002e5d;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 99;
}

.close-overlay:hover {
    background-color: #005177;
}

.portfolio-item-content {
    display: flex;
    justify-content: space-between;
}

#portfolio-grid.portfolio-grid .portfolio-item h3.portfolio-title {
    position: relative;
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: #002e5d;
}
#portfolio-grid.portfolio-grid .portfolio-item h3.portfolio-title:after {
  content: '+';
  position: absolute;
  right: 0;
}

#portfolio-filters {
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 90vw;
    row-gap: 40px;
}

.filter-button {
    display: flex;
    background: transparent;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid #021e2f;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #002e5d;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.filter-button:hover {
    background-color: transparent;
}

.filter-button:focus {
    outline: none;
}

.filter-button .arrow {
    display: inline-block;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.filter-button.active .arrow {
    transform: rotate(90deg);
}

.divider {
    width: 100%;
    height: 1px;
    background-color: #002856;
    margin: 5px 0 15px;
}

.portfolio-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #002e5d;
    animation: spin 1s ease infinite;
}

#iv_lightbox_project_main_wrapper {
    width: 90vw;
    max-width: 1200px;
    margin: auto;
    position: relative;
    height: auto;
    padding: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px 0;
    }

    #iv_lightbox_project_main_wrapper {
        width: 95vw;
        padding: 15px;
    }
}

@media screen and (max-width: 767px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px;
    }

    #portfolio-filters {
        width: 100%;
    }

    .portfolio-content {
        width: 100%;
        padding: 15px 0;
        margin: 10px auto;
    }
    .portfolio-item-content{flex-direction:column;}
    .portfolio-item-content .portfolio-item-title-wrapper,
    .portfolio-item-content .portfolio-item-discription-wrapper,
    .portfolio-item-content .portfolio-item-more-info-wrapper{width:100%;max-width:100%;padding:0;text-align:left;}
    .portfolio-item-content .portfolio-item-more-info-wrapper{padding-top:10px;}

    .portfolio-overlay {
        padding: 10px;
    }

    #iv_lightbox_project_main_wrapper {
        width: 100%;
        padding: 10px;
    }

    .swiper-container {
        max-height: 70vh;
    }

    .swiper-slide {
        aspect-ratio: 4/3;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        height: 30px;
        background-color: rgba(0, 46, 93, 0.7);
        border-radius: 50%;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 16px;
        color: white;
    }
}

@media screen and (max-width: 480px) {
    .filter-button {
        font-size: 14px;
        padding: 12px 0;
    }

    .portfolio-item h3.portfolio-title {
        font-size: 12px;
    }

    .close-overlay {
        top: 5px;
        right: 5px;
        width: 35px;
        height: 35px;
        padding: 5px;
    }

    .portfolio-overlay {
        padding: 5px;
    }

    #iv_lightbox_project_main_wrapper {
        padding: 5px;
    }

    .swiper-container {
        max-height: 60vh;
    }
}

/* Touch device handling */
@media (hover: none) and (pointer: coarse) {
    .swiper-container {
        touch-action: pan-y pinch-zoom;
    }
}

/* Additional Swiper navigation styles */
.swiper-button-next,
.swiper-button-prev {
    color: #002e5d;
}

.swiper-pagination-bullet {
    background: #002e5d;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

/* Optional: Add loading placeholder */
.swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.swiper-slide.loaded::before {
    opacity: 0;
}