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

.featured-projects{

    background:var(--light);

}

.projects-grid{

    display:grid;

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

    gap:35px;

}

.project-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    transition:.4s;

    box-shadow:var(--shadow-sm);

}

.project-card:hover{

    transform:translateY(-12px);

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

}

.project-image{

    height:260px;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-content{

    padding:35px;

}

.project-category{

    display:inline-block;

    background:#EAF3FF;

    color:var(--primary);

    padding:8px 16px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.project-content h3{

    font-size:26px;

    color:var(--navy);

    margin-bottom:15px;

}

.project-content p{

    color:var(--gray);

    margin-bottom:30px;

    line-height:1.7;

}

.project-content a{

    color:var(--primary);

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.project-content a:hover{

    gap:18px;

}
/* ==========================================================
   PROJECTS GRID
========================================================== */


.projects-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 50px;

}


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


.project-card {

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 15px 35px rgba(0,0,0,0.08);

    transition: all .35s ease;

    border: 1px solid rgba(0,0,0,0.05);

}


.project-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(0,0,0,0.15);

}



/* ==========================================================
   PROJECT IMAGE
========================================================== */


.project-card img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    display: block;

    transition: transform .4s ease;

}


.project-card:hover img {

    transform: scale(1.08);

}



/* ==========================================================
   PROJECT CONTENT
========================================================== */


.project-content {

    padding: 28px;

}


.project-category {

    display: inline-block;

    color: #037ffc;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 12px;

}



.project-content h3 {

    font-size: 22px;

    line-height: 1.3;

    color: #0b1f33;

    margin-bottom: 12px;

}



.project-content p {

    color: #667085;

    font-size: 15px;

    margin-bottom: 20px;

}



/* ==========================================================
   VIEW PROJECT BUTTON
========================================================== */


.project-content a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #037ffc;

    font-weight: 600;

    text-decoration: none;

    transition: .3s ease;

}


.project-content a:hover {

    color: #005fcc;

    transform: translateX(5px);

}


.project-content a::after {

    content: "→";

    font-size: 18px;

}



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


@media(max-width:1200px) {


    .projects-grid {

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

    }

}



@media(max-width:768px) {


    .projects-grid {

        grid-template-columns: 1fr;

        gap:25px;

    }


    .project-card img {

        height:230px;

    }


    .project-content {

        padding:22px;

    }


    .project-content h3 {

        font-size:20px;

    }

}