/* ===========================
   Google Font
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===========================
   Global
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;

    background:#0d1117;

    color:#f8fafc;

}

/* ===========================
   Projects Section
=========================== */

.projects{

    width:min(1200px,90%);
    margin:80px auto;

}

.projects h1{

    font-size:3rem;

    margin-bottom:15px;

}

.projects p{

    color:#94a3b8;

    margin-bottom:50px;

}

/* ===========================
   Grid
=========================== */

.projects-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

/* ===========================
   Card
=========================== */

.project-card{

    background:#111827;

    border:1px solid #1f2937;

    border-radius:18px;

    padding:35px;

    text-decoration:none;

    color:white;

    display:flex;

    flex-direction:column;

    gap:30px;

    transition:0.25s;

}

.project-card:hover{

    transform:translateY(-6px);

    border-color:#3b82f6;

    box-shadow:0 10px 30px rgba(59,130,246,.15);

}

/* ===========================
   Icon
=========================== */

.project-icon{

    width:70px;

    height:70px;

    background:#172033;

    border:1px solid #263042;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    color:#3b82f6;

}

/* ===========================
   Text
=========================== */

.project-info h2{

    font-size:2rem;

    margin-bottom:12px;

}

.project-info p{

    margin:0;

    color:#94a3b8;

    font-size:1rem;

    line-height:1.6;

}

/* ===========================
   Divider
=========================== */

.divider{

    width:100%;

    height:1px;

    background:#293548;

}

/* ===========================
   Footer
=========================== */

.project-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.language{

    background:#1d4ed8;

    padding:7px 14px;

    border-radius:999px;

    font-size:.9rem;

}

.view{

    color:#60a5fa;

    font-weight:600;

    transition:.2s;

}

.project-card:hover .view{

    transform:translateX(6px);

}

/* ===========================
   Responsive
=========================== */

@media(max-width:900px){

    .projects-grid{

        grid-template-columns:1fr;

    }

    .projects h1{

        font-size:2.3rem;

    }

}