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

.projects {
    position: relative;
    overflow: hidden;
}

/* Background Glow */

.projects::before{
    content:"";
    position:absolute;
    top:-250px;
    left:-250px;

    width:550px;
    height:550px;

    background:radial-gradient(circle,
    rgba(255,45,85,.12),
    transparent 70%);

    filter:blur(60px);

    z-index:-1;
}

/* ======================================================
   FEATURED PROJECT
====================================================== */

.featured-project{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    padding:35px;

    margin-bottom:70px;

    border-radius:24px;

}

.featured-image{

    overflow:hidden;

    border-radius:18px;

}

.featured-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.featured-image:hover img{

    transform:scale(1.08);

}

.project-tag{

    display:inline-block;

    padding:8px 18px;

    background:rgba(255,45,85,.15);

    color:var(--clr-primary);

    border-radius:30px;

    margin-bottom:18px;

    font-size:.9rem;

    font-weight:600;

}

.featured-content h2{

    font-size:2rem;

    margin-bottom:20px;

}

.featured-content p{

    color:var(--clr-text);

    line-height:1.8;

    margin-bottom:25px;

}

/* ======================================================
   TECH STACK
====================================================== */

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.tech-stack span{

    padding:10px 16px;

    border-radius:50px;

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

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

    transition:.35s;

}

.tech-stack span:hover{

    background:var(--clr-primary);

    transform:translateY(-3px);

}

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

.project-buttons{

    display:flex;

    gap:18px;

}

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

.project-grid{

    display:grid;

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

    gap:35px;

}

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

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    transition:.4s;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-red-lg);

}

.project-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-card h3{

    padding:22px 25px 10px;

    font-size:1.4rem;

}

.project-card p{

    padding:0 25px 25px;

    color:var(--clr-text-light);

}

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

@media(max-width:992px){

    .featured-project{

        grid-template-columns:1fr;

    }

    .project-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .featured-project{

        padding:22px;

    }

    .featured-content h2{

        font-size:1.6rem;

    }

    .project-buttons{

        flex-direction:column;

    }

}