.gallery{

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));

    gap: 30px;

}

.gallery-item{

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    cursor: pointer;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    transition: .35s ease;

}

.gallery-item:hover{

    transform: translateY(-10px);

    border-color: rgba(59,130,246,.35);

    box-shadow: 0 25px 55px rgba(0,0,0,.25);

}

.gallery-image{

    position: relative;

    overflow: hidden;

}

.gallery-image img{

    width: 100%;

    display: block;

    object-fit: cover;

    transition: .6s ease;

}

.gallery-item:hover img{

    transform: scale(1.1);

}

.gallery-overlay{

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 18px;

    background: rgba(8,15,30,.75);

    opacity: 0;

    transition: .35s ease;

}

.gallery-item:hover .gallery-overlay{

    opacity: 1;

}

.gallery-overlay i{

    width: 70px;

    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: var(--primary-color);

    color: var(--white);

    font-size: 1.5rem;

    transform: scale(.7);

    transition: .35s;

}

.gallery-item:hover .gallery-overlay i{

    transform: scale(1);

}

.gallery-overlay h3{

    color: var(--white);

    font-size: 1.3rem;

    font-weight: 600;

}

.gallery-overlay p{

    color: var(--text-secondary);

    text-align: center;

    max-width: 260px;

    line-height: 1.7;

}

.gallery-caption{

    padding: 22px;

    background: rgba(255,255,255,.03);

}

.gallery-caption h4{

    color: var(--white);

    font-size: 1.15rem;

    margin-bottom: 8px;

}

.gallery-caption span{

    color: var(--text-secondary);

    font-size: .92rem;

}

.gallery-filter{

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 50px;

}

.gallery-filter button{

    padding: 12px 24px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50px;

    background: rgba(255,255,255,.04);

    color: var(--text-secondary);

    cursor: pointer;

    transition: .3s;

}

.gallery-filter button:hover,

.gallery-filter button.active{

    background: var(--primary-color);

    color: var(--white);

    border-color: var(--primary-color);

}

.gallery-item.hidden{

    display: none;

}

.gallery-item.show{

    animation: galleryFade .6s ease forwards;

}

@keyframes galleryFade{

    from{

        opacity: 0;

        transform: scale(.9);

    }

    to{

        opacity: 1;

        transform: scale(1);

    }

}

.gallery-modal{

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(0,0,0,.92);

    opacity: 0;

    visibility: hidden;

    transition: .3s;

    z-index: 9999;

}

.gallery-modal.active{

    opacity: 1;

    visibility: visible;

}

.gallery-modal img{

    width: min(90%,1000px);

    max-height: 90vh;

    object-fit: contain;

    border-radius: 16px;

}

.gallery-close,
.gallery-prev,
.gallery-next{

    position: absolute;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.15);

    color: #fff;

    font-size: 1.6rem;

    cursor: pointer;

    transition: .3s;

}

.gallery-close{

    top: 30px;

    right: 30px;

}

.gallery-prev{

    left: 40px;

}

.gallery-next{

    right: 40px;

}

.gallery-close:hover,
.gallery-prev:hover,
.gallery-next:hover{

    background: var(--primary-color);

}

.certificate-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:40px;

}

.certificate-modal.active{

    display:flex;

}

.certificate-modal img{

    max-width:90%;

    max-height:90vh;

    border-radius:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

}

.close-modal{

    position:absolute;

    top:25px;

    right:40px;

    color:#fff;

    font-size:42px;

    cursor:pointer;

    transition:.3s;

}

.close-modal:hover{

    transform:scale(1.2);

    color:#3b82f6;

}

.project-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.92);

    z-index:9999;

}

.project-modal.active{

    display:flex;

}

.project-modal img{

    max-width:90%;

    max-height:90vh;

    border-radius:12px;

}

.close-project{

    position:absolute;

    top:30px;

    right:40px;

    color:#fff;

    font-size:42px;

    cursor:pointer;

}

.prev-project,
.next-project{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:26px;

    cursor:pointer;

}

.prev-project{

    left:40px;

}

.next-project{

    right:40px;

}