/* ========================================
   FEATURED PROJECTS
======================================== */

.featured-projects{
    padding:96px 32px;
    background:#EFEFEC;
    border-top:1px solid #D6D8DC;
    border-bottom:1px solid #D6D8DC;
}

.projects-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    flex-wrap:wrap;
}

.projects-button{
    display:inline-flex;
    align-items:center;
    padding:12px 22px;
    border:1px solid #C2C5CB;
    border-radius:10px;
    color:#0B132B;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
}

.projects-button:hover{
    background:#0B132B;
    color:#fff;
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:44px;
}

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

.project-card{
    background:#fff;
    border:1px solid #D6D8DC;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 6px 30px rgba(11,19,43,.05);
    transition:.3s;
}

.project-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(11,19,43,.12);
}

.project-top{
    position:relative;
    background:#0B132B;
    padding:20px;
    overflow:hidden;
}

.project-grid-bg{
    position:absolute;
    top:0;
    right:0;
    width:72px;
    height:72px;

    background-image:
        linear-gradient(rgba(134,169,214,.16) 1px,transparent 1px),
        linear-gradient(90deg,rgba(134,169,214,.16) 1px,transparent 1px);

    background-size:12px 12px;
}

.project-info{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.project-label{
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:1.5px;
    color:#86A9D6;
}

.project-code{
    margin-top:4px;
    color:#fff;
    font-family:var(--font-mono);
    font-size:17px;
}

.project-letter{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(134,169,214,.5);
    border-radius:7px;

    color:#86A9D6;

    font-family:var(--font-mono);
    font-weight:700;
}

.project-content{
    padding:22px;
}

.project-type{

    display:inline-block;

    padding:5px 10px;

    background:#EAF1F8;

    border-radius:6px;

    color:#3F6FA8;

    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;
}

.project-content h3{
    margin-top:14px;
    color:#0B132B;
    font-size:20px;
}

.project-content p{
    margin-top:10px;
    color:#6B7280;
    line-height:1.6;
    font-size:15px;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

    .featured-projects{

        padding:72px 20px;

    }

}