.portfolio-bg{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;

    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.75)),
        url("../img/bg/1.webp") center center/cover no-repeat;
}
@keyframes bgZoom{

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1.18);
    }

}

.portfolio-overlay-bg{
    position:absolute;
    inset:0;
    background:
    linear-gradient(180deg,
    rgba(5,5,5,.82),
    rgba(5,5,5,.92)),
    radial-gradient(circle at top left,
    rgba(212,175,55,.12),
    transparent 45%);
}

/*==========================
GRID EFFECT
==========================*/

.portfolio-grid-lines{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.30;

}

/*==========================
GLOW
==========================*/

.portfolio-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.blur-one{

    width:450px;

    height:450px;

    background:#D4AF37;

    opacity:.16;

    top:-120px;

    left:-120px;

}

.blur-two{

    width:420px;

    height:420px;

    background:#FFD9E8;

    opacity:.10;

    right:-120px;

    bottom:-120px;

}

/*==========================
CONTENT
==========================*/

.portfolio-section .container{

    position:relative;

    z-index:5;

}

.portfolio-heading{

    max-width:820px;

    margin:auto;

    margin-bottom:80px;

}

.portfolio-heading .section-title{

    color:#fff;

    font-size:58px;

    font-weight:800;

    margin:20px 0;

}

.portfolio-heading .section-desc{

    color:#d7d7d7;

    font-size:18px;

    line-height:1.9;

}

/*==========================
FILTER
==========================*/

.portfolio-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:70px;

}

.portfolio-filter button{

    border:none;

    padding:15px 28px;

    border-radius:60px;

    color:#fff;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;

    font-weight:600;

}

.portfolio-filter button:hover,

.portfolio-filter button.active{

    background:linear-gradient(135deg,#FFD9E8,#D4AF37);


    color:#111;

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(212,175,55,.35);

}
/*==================================================
PORTFOLIO CARD
Premium 2026
==================================================*/

.portfolio-item{
    perspective:1500px;
}

.portfolio-card{

    position:relative;

    overflow:hidden;

    height:100%;

    min-height:460px;

    border-radius:32px;

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

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

    backdrop-filter:blur(18px);

    transition:.55s cubic-bezier(.2,.8,.2,1);

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

}

/*=========================
IMAGE
=========================*/

.portfolio-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.portfolio-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s cubic-bezier(.2,.8,.2,1);

}

/* Dark Gradient */

.portfolio-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(to top,
    rgba(0,0,0,.92) 5%,
    rgba(0,0,0,.55) 35%,
    rgba(0,0,0,.10) 70%,
    transparent);

}

/* Shine */

.portfolio-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:80%;

    height:100%;

    transform:skewX(-25deg);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transition:1s;

    z-index:3;

}

.portfolio-card:hover::before{

    left:150%;

}

/*=========================
CONTENT
=========================*/

.portfolio-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    z-index:5;

    transition:.55s;

}

.portfolio-content span{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(212,175,55,.18);

    border:1px solid rgba(212,175,55,.25);

    color:#FFD77A;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.portfolio-content h3{

    color:#fff;

    font-size:34px;

    font-weight:800;

    margin-bottom:15px;

    line-height:1.25;

}

.portfolio-content p{

    color:#d8d8d8;

    line-height:1.8;

    margin-bottom:25px;

    opacity:.88;

}

/*=========================
BUTTON
=========================*/

.portfolio-content a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 30px;

    border-radius:60px;

    background:linear-gradient(135deg,#FFD9E8,#D4AF37);

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.portfolio-content a i{

    transition:.35s;

}

.portfolio-content a:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(212,175,55,.35);

}

.portfolio-content a:hover i{

    transform:translate(5px,-4px);

}

/*=========================
HOVER
=========================*/

.portfolio-card:hover{

    transform:
    rotateX(3deg)
    rotateY(-3deg)
    translateY(-12px);

    border-color:rgba(212,175,55,.45);

    box-shadow:

    0 35px 90px rgba(0,0,0,.45),

    0 0 40px rgba(212,175,55,.20);

}

.portfolio-card:hover img{

    transform:scale(1.12);

}

.portfolio-card:hover .portfolio-content{

    bottom:45px;

}

/*=========================
HEIGHTS
=========================*/

.portfolio-item:nth-child(1) .portfolio-card,
.portfolio-item:nth-child(2) .portfolio-card{

    min-height:560px;

}

.portfolio-item:nth-child(3) .portfolio-card,
.portfolio-item:nth-child(4) .portfolio-card,
.portfolio-item:nth-child(5) .portfolio-card{

    min-height:420px;

}
/*==================================================
PORTFOLIO RESPONSIVE
Premium 2026
==================================================*/

/* Floating Animation */

@keyframes portfolioFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

.portfolio-card:nth-child(odd){
    animation:portfolioFloat 7s ease-in-out infinite;
}

.portfolio-card:nth-child(even){
    animation:portfolioFloat 9s ease-in-out infinite;
}

/* Glow Animation */

@keyframes glowMove{

    0%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(50px,-40px) scale(1.15);
    }

    100%{
        transform:translate(0,0) scale(1);
    }

}

.blur-one{
    animation:glowMove 12s ease-in-out infinite;
}

.blur-two{
    animation:glowMove 16s ease-in-out infinite reverse;
}

/* Grid Animation */

@keyframes gridMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:70px 70px;
    }

}

.portfolio-grid-lines{

    animation:gridMove 20s linear infinite;

}

/* Image Animation */

.portfolio-card:hover .portfolio-image img{

    transform:scale(1.15) rotate(2deg);

}

/* Tag */

.portfolio-card:hover .portfolio-content span{

    background:#D4AF37;

    color:#111;

}

/* Title */

.portfolio-card:hover h3{

    color:#FFD9E8;

}

/*=========================
1400px
=========================*/

@media(max-width:1400px){

.portfolio-heading .section-title{

font-size:52px;

}

}

/*=========================
1200px
=========================*/

@media(max-width:1199px){

.portfolio-card{

min-height:420px;

}

.portfolio-item:nth-child(1) .portfolio-card,
.portfolio-item:nth-child(2) .portfolio-card{

min-height:500px;

}

.portfolio-content h3{

font-size:30px;

}

}

/*=========================
992px
=========================*/

@media(max-width:991px){

.portfolio-section{

padding:100px 0;

}

.portfolio-heading{

margin-bottom:60px;

}

.portfolio-heading .section-title{

font-size:42px;

}

.portfolio-filter{

margin-bottom:50px;

}

.portfolio-item .portfolio-card{

min-height:420px !important;

}

}

/*=========================
768px
=========================*/

@media(max-width:768px){

.portfolio-section{

padding:80px 0;

}

.portfolio-heading .section-title{

font-size:34px;

}

.portfolio-heading .section-desc{

font-size:16px;

}

.portfolio-filter{

gap:10px;

}

.portfolio-filter button{

padding:12px 22px;

font-size:14px;

}

.portfolio-content{

left:25px;

right:25px;

bottom:25px;

}

.portfolio-content h3{

font-size:24px;

}

.portfolio-content p{

font-size:15px;

}

.portfolio-content a{

padding:14px 24px;

font-size:14px;

}

}

/*=========================
576px
=========================*/

@media(max-width:576px){

.portfolio-section{

padding:70px 0;

}

.portfolio-heading{

margin-bottom:45px;

}

.portfolio-heading .section-title{

font-size:28px;

}

.portfolio-filter{

justify-content:flex-start;

overflow:auto;

flex-wrap:nowrap;

padding-bottom:10px;

}

.portfolio-filter::-webkit-scrollbar{

display:none;

}

.portfolio-filter button{

white-space:nowrap;

}

.portfolio-item .portfolio-card{

min-height:340px !important;

border-radius:24px;

}

.portfolio-content{

left:20px;

right:20px;

bottom:20px;

}

.portfolio-content span{

font-size:11px;

padding:6px 14px;

}

.portfolio-content h3{

font-size:20px;

margin-bottom:10px;

}

.portfolio-content p{

display:none;

}

.portfolio-content a{

width:100%;

justify-content:center;

}

}

/*=========================
Performance
=========================*/

.portfolio-card,
.portfolio-image img,
.portfolio-content,
.blur-one,
.blur-two{

will-change:transform;

transform:translateZ(0);

backface-visibility:hidden;

}