.projects{
    width:min(1200px,90%);
    margin:120px auto;
}

.section-title{
    text-align:center;
    margin-bottom:70px;
}

.section-title p{
    text-transform:uppercase;
    letter-spacing:4px;
    color:#888;
    margin-bottom:10px;
}

.section-title h2{
    font-size:3rem;
    margin-bottom:18px;
}

.section-title span{
    color:#666;
    max-width:650px;
    display:block;
    margin:auto;
    line-height:1.7;
}

.project-grid{
    display:grid;
    gap:40px;
}

.project-card{

    display:grid;
    grid-template-columns:1.2fr 1fr;

    border:1px solid #e6e6e6;
    border-radius:24px;

    overflow:hidden;
    background:white;

    transition:.35s;
}

.project-card:hover{

    transform:translateY(-8px);

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

.project-image{

    background:#f4f4f4;

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

    min-height:420px;

    color:#888;
    font-size:22px;
}

.project-content{
    padding:45px;
}

.project-top{

    display:flex;
    justify-content:space-between;

    margin-bottom:25px;
}

.status{

    background:black;
    color:white;

    padding:6px 15px;
    border-radius:100px;

    font-size:.85rem;
}

.year{
    color:#777;
}

.project-content h3{

    font-size:2rem;

    margin-bottom:18px;
}

.project-content p{

    color:#555;
    line-height:1.8;

    margin-bottom:30px;
}

.tech-stack{

    display:flex;
    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;
}

.tech-stack span{

    border:1px solid #ddd;

    padding:8px 16px;

    border-radius:100px;

    font-size:.9rem;
}

.project-links{

    display:flex;
    gap:30px;
}

.project-links a{

    color:black;

    text-decoration:none;

    font-weight:600;
}

.project-links a:hover{

    opacity:.65;
}

@media(max-width:900px){

.project-card{

grid-template-columns:1fr;

}

.project-image{

min-height:260px;

}

.project-content{

padding:30px;

}

.section-title h2{

font-size:2.3rem;

}

}


/* peesonal projet screenshort  */

.project-image img {
    max-width: 100%;
    height: auto;
    display: block;
}