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

.portfolio{
    position:relative;
    padding:45px 0 35px;
    overflow:hidden;
}

.portfolio-container{
    width:min(1400px,90%);
    margin:auto;
}

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

.portfolio-header{
    text-align:center;
    margin-bottom:35px;
}

.portfolio-header h2{
    font-size:56px;
    margin:20px 0;
    font-family:var(--heading);
}

.portfolio-header h2 span{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.portfolio-header p{
    max-width:700px;
    margin:auto;
    color:var(--text);
    line-height:1.8;
}

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

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:35px;
}

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

.portfolio-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    overflow:hidden;

    transition:.4s ease;

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

}

.portfolio-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,176,0,.35);

    box-shadow:
        0 20px 50px rgba(255,176,0,.18),
        0 0 35px rgba(255,176,0,.15);

}

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

.portfolio-card img{

    width:100%;
    height:240px;

    object-fit:cover;

    transition:.5s ease;

}

.portfolio-card:hover img{

    transform:scale(1.08);

}

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

.portfolio-content{

    padding:28px;

}

.portfolio-content span{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,176,0,.12);

    color:#FFB000;

    font-size:13px;

    margin-bottom:18px;

}

.portfolio-content h3{

    font-size:26px;

    margin-bottom:15px;

    font-family:var(--heading);

}

.portfolio-content p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:25px;

}

/* ==========================
   BUTTONS
========================== */

.portfolio-buttons{

    display:flex;

    gap:15px;

}

.portfolio-buttons a{

    flex:1;

    text-align:center;

    text-decoration:none;

    padding:12px;

    border-radius:14px;

    font-weight:600;

    transition:.35s ease;

}

.portfolio-buttons a:first-child{

    background:#FFB000;

    color:#111827;

}

.portfolio-buttons a:first-child:hover{

    background:#FFC933;

}

.portfolio-buttons a:last-child{

    border:1px solid rgba(255,176,0,.25);

    color:#FFB000;

}

.portfolio-buttons a:last-child:hover{

    background:#FFB000;

    color:#111827;

}

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

.portfolio::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:#FF8A00;

    filter:blur(150px);

    opacity:.12;

    top:0;
    left:-150px;

    z-index:-1;

}

.portfolio::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:#FFD700;

    filter:blur(150px);

    opacity:.10;

    bottom:-100px;
    right:-100px;

    z-index:-1;

}

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

@media(max-width:768px){

    .portfolio-header h2{
        font-size:42px;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
    }

}