.portfolio-filter{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:40px 0;

}

.portfolio-filter button{

height:50px;

padding:0 24px;

border:none;

cursor:pointer;

border-radius:16px;

background:#131d31;

color:white;

font-family:inherit;

transition:.3s;

}

.portfolio-filter button.active,
.portfolio-filter button:hover{

background:#4f7cff;

}

.featured-project{

display:grid;

grid-template-columns:
1.2fr 1fr;

gap:40px;

padding:40px;

border-radius:32px;

margin-bottom:50px;

}

.featured-image{

overflow:hidden;

border-radius:24px;

}

.featured-image img{

width:100%;
height:100%;

object-fit:cover;

}

.featured-content{

display:flex;

flex-direction:column;

justify-content:center;

& a {
	margin-top: 20px;
}

}

.portfolio-masonry{

columns:3;

column-gap:24px;

}

.portfolio-item{

position:relative;

overflow:hidden;

margin-bottom:24px;

break-inside:avoid;

border-radius:24px;

cursor:pointer;

}

.portfolio-item img{

width:100%;

display:block;

transition:.8s;

}

.portfolio-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
180deg,
transparent,
rgba(0,0,0,.8)
);

display:flex;

justify-content:flex-end;

flex-direction:column;

padding:30px;

opacity:0;

transition:.4s;

}

.portfolio-item:hover img{

transform:scale(1.08);

}

.portfolio-item:hover .portfolio-overlay{

opacity:1;

}



.cursor-preview{

    position:fixed;

    top:0;
    left:0;

    width:80px;
    height:80px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

background:
linear-gradient(
135deg,
#4f7cff,
#3b82f6
);

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

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    color:#fff;

    font-size:24px;
    font-weight:300;

    pointer-events:none;

    z-index:999999;

    opacity:0;

    transform:
    translate(-50%,-50%)
    scale(.8);

    transition:
    opacity .25s ease,
    transform .25s ease;

    box-shadow:
    0 10px 30px rgba(79,124,255,.35),
    inset 0 1px 1px rgba(255,255,255,.15);

}


.project-modal{

position:fixed;

inset:0;

background:
rgba(5,10,20,.8);

backdrop-filter:
blur(16px);

display:flex;

align-items:center;

justify-content:center;

padding:32px;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

}
.project-modal.active{

opacity:1;

visibility:visible;

}
.modal-content{

width:100%;

max-width:1100px;

display:grid;

grid-template-columns:
1.1fr 1fr;

overflow:hidden;

border-radius:32px;

background:
rgba(15,23,42,.92);

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

box-shadow:
0 30px 80px rgba(0,0,0,.35);

position:relative;

max-height: 90dvh;

}
.modal-image{

height:100%;

min-height:550px;

overflow:hidden;

}
.modal-image img{

width:100%;
height:100%;

object-fit:cover;

display:block;

}
.modal-body{

padding:50px;

display:flex;

flex-direction:column;

justify-content:center;

}
.modal-category{

display:inline-flex;

padding:8px 14px;

border-radius:999px;

background:
rgba(79,124,255,.12);

color:#4f7cff;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}
.modal-header h2{

font-size:42px;

line-height:1.2;

margin-bottom:24px;

}
.modal-body p{

font-size:16px;

line-height:2;

color:
rgba(255,255,255,.75);

margin-bottom:40px;

}
.modal-meta{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

margin-bottom:40px;

}
.modal-meta small{

display:block;

margin-bottom:6px;

opacity:.5;

}
.modal-meta strong{

font-size:15px;

}
.modal-tech{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:40px;

}
.modal-tech span{

padding:10px 16px;

border-radius:999px;

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

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

font-size:14px;

}
.modal-close{

position:absolute;

top:24px;

left:24px;

width:48px;

height:48px;

border:none;

border-radius:50%;

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

cursor:pointer;

font-size:18px;

color:white;

transition:.3s;

}
.modal-close:hover{

transform:rotate(90deg);

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

}

/* portfolio filter */
.portfolio-item.hide{

display:none;

}