/* =====================================================
   PROJECTS SECTION
===================================================== */

.projects-section{

    position: relative;

}

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

.section-badge{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(139,92,246,.12);

    border:1px solid rgba(139,92,246,.25);

    color:var(--primary);

    font-size:.90rem;
    font-weight:600;

}

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

.project-card{

    height:100%;

    display:flex;
    flex-direction:column;

    padding:35px;

    border-radius:26px;

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

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

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

    transition:all .35s ease;

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

}

.project-card:hover{

    transform:translateY(-8px);

    border-color:rgba(139,92,246,.35);

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

}

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

.project-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.project-card h3{

    font-size:1.6rem;

    font-weight:700;

    margin-bottom:18px;

}

.project-card p{

    color:var(--muted);

    line-height:1.8;

    flex-grow:1;

}

/* ===========================
   STATUS
=========================== */

.project-status{

    display:inline-flex;

    align-items:center;

    padding:8px 15px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:600;

    white-space:nowrap;

}

.online{

    background:rgba(34,197,94,.12);

    color:#22C55E;

}

.progress{

    background:rgba(245,158,11,.12);

    color:#F59E0B;

}

/* ===========================
   BADGE
=========================== */

.project-badge{

    padding:8px 14px;

    border-radius:999px;

    background:rgba(139,92,246,.12);

    border:1px solid rgba(139,92,246,.25);

    color:var(--primary);

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

/* ===========================
   TAGS
=========================== */

.project-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:30px 0;

}

.project-tags span{

    padding:8px 14px;

    border-radius:999px;

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

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

    color:var(--muted);

    font-size:.82rem;

}

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

.project-card .btn-primary-custom,
.project-card .btn-secondary-custom{

    width:100%;

    justify-content:center;

}

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

@media (max-width:991px){

    .projects-section{

        padding:100px 0;

    }

    .project-card{

        padding:30px;

    }

}

@media (max-width:576px){

    .project-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .project-card h3{

        font-size:1.35rem;

    }

}