/* HERO */
.projects-hero{
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('images/comhero.jpeg');
    background-size: cover;
    background-position: center;
    height:300px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    text-align:center;
}


/* PROJECT SECTION */

.projects{
    padding:60px 10%;
}

.projects h2{
    text-align:center;
    margin-bottom:40px;
    color:#0570b4;
}

/* PROJECT GRID */

.project-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap:25px;
}

/* PROJECT CARD */

.project-card{
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    transition:0.3s;
}

.project-card:hover{
    transform:translateY(-8px);
}

.project-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.project-content{
    padding:20px;
}

.project-content h3{
    margin-bottom:10px;
    color:#0570b4;
}

.project-content p{
    color:#555;
    font-size:15px;
}
.project-grid {
    display: grid;
}

/* TABLET */

@media (max-width: 992px) {

    .project-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .projects-hero h1 {
        font-size: 2.5rem;
        text-align: center;
    }
}



/* MOBILE */

@media (max-width: 768px) {

    /* Navbar */
    .nav-links {
        position: absolute;
        top: 70px;
        right: 0;
        background: #0a3d62;
        width: 100%;
        flex-direction: column;
        align-items: center;
        display: none;
        padding: 20px 0;
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    /* Hero */
    .projects-hero {
        padding: 60px 20px;
        text-align: center;
    }

    .projects-hero h1 {
        font-size: 2rem;
    }

    /* Projects Grid */
    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        width: 100%;
    }

    .project-card img {
        height: auto;
    }

}