/* =========================
   PORTFOLIO PAGE
========================= */

.portfolio-page {
    background: #f5f5f5;
    padding-bottom: 80px;
}

/* =========================
   PAGE INTRO
========================= */

.portfolio-header {
    max-width: 1000px;
    margin: 80px auto 60px;
    padding: 0 20px;
    text-align: center;
}

.portfolio-intro {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

.portfolio-page-title {
    color: var(--primary);
    margin-bottom: 20px;
}

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

.projects-grid {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;

}

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

.project-item {
    text-align:center;
}

.project-card {

    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#000;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);

}

.project-card img {

    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;

}

.project-card:hover img {

    transform:scale(1.05);

}

/* =========================
   OVERLAY
========================= */

.project-overlay {

    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
    opacity:0;
    transition:.35s ease;

}


.project-card:hover .project-overlay {

    opacity:1;

}


/* Description */

.project-desc {

    color:white;
    font-size:15px;
    line-height:1.6;
    margin-bottom:25px;

}

/* =========================
   VIEW GALLERY BUTTON
========================= */

.view-gallery-btn {

    padding:12px 30px;
    background:white;
    color:var(--primary);
    border-radius:50px;
    font-weight:600;
    transition:.3s ease;

}

.view-gallery-btn:hover {

    background:var(--primary);
    color:white;

}

/* =========================
   TITLE UNDER IMAGE
========================= */

.project-title {

    margin-top:18px;
    color:#333;
    font-size:22px;

}


/* =========================
   HIDDEN GLIGHTBOX
========================= */

.hidden-gallery {

    display:none!important;

}

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

@media(max-width:900px){

    .projects-grid{

        grid-template-columns:1fr;

    }

    .project-card img{

        height:350px;

    }


}


@media(max-width:600px){

    .portfolio-header {

        margin-top:100px;
        margin-bottom:40px;

        padding:0 15px;
    }

    .portfolio-page-title {

        margin-bottom:15px;

    }

     .project-card img{

        height:260px;

    }

    .portfolio-intro {

        line-height:1.6;

    }

}