/* ==========================================================
   PORTFOLIO
========================================================== */

.portfolio{

    background:#F8FAFC;
    position:relative;

    transition:.35s;

}

.portfolio-showcase{

    display:flex;
    flex-direction:column;
    gap:70px;
    margin-top:80px;

}

.showcase-card{

    background:white;

    border-radius:32px;

    padding:70px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

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

    overflow:hidden;

    position:relative;

}

.showcase-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,#24A8FF08,transparent);

    pointer-events:none;

}

.showcase-card.reverse{

    direction:rtl;

}

.showcase-card.reverse .showcase-content{

    direction:ltr;

}

.showcase-content{

    max-width:520px;

}

.showcase-content span{

    display:inline-block;

    background:#EAF5FF;

    color:var(--primary);

    padding:10px 18px;

    border-radius:100px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.showcase-content h2,
.showcase-content h3{

    font-size:54px;

    line-height:1.1;

    color:#111827;

    margin-bottom:25px;

}

.showcase-content p{

    font-size:20px;

    line-height:1.9;

    color:#6B7280;

    margin-bottom:35px;

}

.showcase-device{

    display:flex;

    justify-content:center;

    align-items:center;

}
/* ==========================================================
   DESKTOP
========================================================== */

.portfolio .desktop{

    width:100%;
    max-width:620px;

    background:white;

    border-radius:26px;

    overflow:hidden;

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

}

.portfolio .desktop-top{

    height:55px;

    background:#ECECEC;

    display:flex;

    align-items:center;

    gap:10px;

    padding-left:22px;

}

.portfolio .desktop-top span{

    width:12px;
    height:12px;
    border-radius:50%;

}

.portfolio .desktop-top span:nth-child(1){

    background:#ff5f57;

}

.portfolio .desktop-top span:nth-child(2){

    background:#febc2e;

}

.portfolio .desktop-top span:nth-child(3){

    background:#28c840;

}

.portfolio .desktop-body{

    padding:35px;

}

.portfolio .graph{

    height:220px;

    border-radius:22px;

    background:linear-gradient(135deg,#24A8FF,#0066ff);

    margin-bottom:25px;

}

.portfolio .cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:22px;

}

.portfolio .cards div{

    height:90px;

    border-radius:18px;

    background:#EEF5FF;

}

.portfolio .table{

    height:150px;

    border-radius:18px;

    background:#F4F4F4;

}

.showcase-card:hover,
.showcase-card:focus-within{

transform:translateY(-10px);

box-shadow:0 45px 90px rgba(0,0,0,.10);

}

/* ==========================================================
   TABLET
========================================================== */

.portfolio .tablet{
    width:100%;
    max-width:320px;
    margin:auto;
    background:#1F2937;
    border-radius:28px;
    padding:14px;
    box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.portfolio .tablet-screen{
    background:white;
    border-radius:18px;
    padding:20px;
}

.portfolio .tablet-chart{
    height:140px;
    border-radius:16px;
    background:linear-gradient(135deg,#24A8FF,#0066ff);
    margin-bottom:18px;
}

.portfolio .tablet-row{
    height:60px;
    background:#EEF5FF;
    border-radius:14px;
    margin-bottom:14px;
}

/* ==========================================================
   PHONE
========================================================== */

.portfolio .phone{
    width:100%;
    max-width:210px;
    margin:auto;
    background:#111827;
    border-radius:42px;
    padding:14px;
    box-shadow:0 30px 70px rgba(0,0,0,.15);
}

.portfolio .phone-notch{

    width:90px;

    height:20px;

    background:black;

    margin:0 auto 18px;

    border-radius:0 0 14px 14px;

}

.portfolio .phone-display{

    background:white;

    border-radius:28px;

    padding:18px;

}

.portfolio .phone-chart{

    height:110px;

    border-radius:16px;

    background:linear-gradient(135deg,#24A8FF,#0066ff);

    margin-bottom:16px;

}

.portfolio .phone-box{

    height:60px;

    border-radius:14px;

    background:#EEF5FF;

    margin-bottom:14px;

}

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

@media(max-width:1100px){

.showcase-card{

grid-template-columns:1fr;

gap:50px;

padding:50px;

}

.showcase-card.reverse{

direction:ltr;

}

.showcase-content{

max-width:100%;

}

}

@media(max-width:768px){

.showcase-card{

padding:35px;

}

.showcase-content h2,
.showcase-content h3{

font-size:38px;

}

.showcase-content p{

font-size:18px;

}

.portfolio .desktop{

max-width:100%;

}

}