/*
|==========================================================
| PROJECT SHOWCASE
|==========================================================
*/

.project-showcase{
    padding:32px;

    background:
    radial-gradient(
    circle at top right,
    rgba(255,119,0,.08),
    transparent 25%
    ),
    #050816;

    overflow:hidden;

    border-top:
    1px solid rgba(255,255,255,.04);
}

/*
|==========================================================
| HEADER
|==========================================================
*/

.showcase-header{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:30px;
}

.showcase-header span{
    width:24px;
    height:3px;

    border-radius:999px;

    background:#ff6b00;
}

.showcase-header h2{
    color:white;

    font-size:20px;
    font-weight:700;
}

/*
|==========================================================
| GRID
|==========================================================
*/

.mockup-grid{
    display:grid;

    grid-template-columns:
    1.5fr
    0.8fr
    0.8fr;

    gap:30px;

    align-items:flex-start;
}

/*
|==========================================================
| CARD
|==========================================================
*/

.mockup-card{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/*
|==========================================================
| LABEL
|==========================================================
*/

.mockup-label{
    display:flex;
    align-items:center;
    gap:10px;

    width:fit-content;

    padding:10px 14px;

    border-radius:14px;

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

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

    color:white;

    font-size:13px;
    font-weight:600;

    backdrop-filter:blur(10px);
}

.mockup-label i{
    color:#ff6b00;
}

/*
|==========================================================
| DESKTOP MOCKUP
|==========================================================
*/

.real-mockup{
    position:relative;

    width:100%;

    transition:.3s;
}

.real-mockup:hover{
    transform:
    translateY(-6px);
}

.laptop-mockup{
    max-width:760px;
}

/*
|==========================================================
| DESKTOP SCREEN
|==========================================================
*/

.mockup-screen{
    position:absolute;

    
}

.mockup-screen img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:top;

    display:block;
}

/*
|==========================================================
| DESKTOP FRAME
|==========================================================
*/

.mockup-frame{
    display:block;

    position:relative;

    width:100%;

    z-index:5;

    pointer-events:none;

    filter:
    drop-shadow(
    0 20px 40px rgba(0,0,0,.45)
    );
}

/*
|==========================================================
| MOBILE MOCKUP
|==========================================================
*/

.real-mobile-mockup{
    position:relative;

    width:320px;

    margin:auto;

    transition:.3s;
}

.real-mobile-mockup:hover{
    transform:
    translateY(-6px);
}

.mobile-screen{
    position:absolute;

    top:11px;
    left:22px;

    width:190px;
    height:375px;

    overflow:hidden;

    border-radius:15px;

    z-index:1;

    background:#fff;
}

.mobile-screen img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:top;

    display:block;
}

.mobile-frame{
    position:relative;

    width:100%;

    display:block;

    z-index:5;

    pointer-events:none;

    filter:
    drop-shadow(
    0 20px 40px rgba(0,0,0,.45)
    );
}

/*
|==========================================================
| TABLET MOCKUP
|==========================================================
*/

.tablet-mockup{
    position:relative;

    width:100%;

    height:375px;

    overflow:hidden;

    border-radius:28px;

    background:#111827;

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

    padding:12px;

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

    transition:.3s;
}

.tablet-mockup:hover{
    transform:
    translateY(-6px);
}

.tablet-mockup img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:top;

    border-radius:18px;

    display:block;
}

/*
|==========================================================
| RESPONSIVE
|==========================================================
*/

@media(max-width:1200px){

    .mockup-grid{
        grid-template-columns:1fr;

        gap:50px;
    }

    .laptop-mockup{
        max-width:100%;
    }

    .real-mobile-mockup{
        width:320px;
    }

}

@media(max-width:768px){

    .project-showcase{
        padding:20px;
    }

    .showcase-header h2{
        font-size:18px;
    }

    .mockup-grid{
        gap:40px;
    }

    .real-mobile-mockup{
        width:260px;
    }

    .mobile-screen{
        top:9px;
        left:18px;

        width:224px;
        height:485px;

        border-radius:28px;
    }

    .tablet-mockup{
        height:300px;
    }

}