/* ==========================
   RESIDENTIAL PROJECTS PAGE
   Sindholt Group
========================== */


/* HERO */


.projects-hero {

    min-height:85vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 40px 60px;


    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.85)
    ),

    url("../images/residential/projects/project1.jpg");


    background-size:cover;

    background-position:center;

}



.projects-hero div {

    max-width:900px;

}



.projects-hero h1 {

    font-size:3.8rem;

    margin-bottom:25px;

}



.projects-hero p {

    color:#ddd;

    font-size:1.2rem;

    line-height:1.8;

}



/* GALLERY */


.projects-gallery {

    padding:100px 60px;

    background:#0b0b0b;

    text-align:center;

}



.projects-gallery h2 {

    font-size:3rem;

    margin-bottom:20px;

}



.project-grid {

    display:grid;

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

    gap:35px;

    margin-top:60px;

}



.project-card {

    overflow:hidden;

    border-radius:20px;

    background:#111;

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

    transition:.4s;

}



.project-card:hover {

    transform:translateY(-10px);

    border-color:#d4af37;

    box-shadow:
    0 15px 40px rgba(0,0,0,.5);

}



.project-card img {

    width:100%;

    height:350px;

    object-fit:cover;

    transition:.8s;

}



.project-card:hover img {

    transform:scale(1.08);

}



.project-info {

    padding:30px;

    text-align:left;

}



.project-info h3 {

    color:#d4af37;

    margin-bottom:15px;

}



.project-info p {

    color:#ccc;

    line-height:1.6;

}



/* PROCESS */


.project-process {

    padding:100px 60px;

    background:#111;

    text-align:center;

}



.project-process h2 {

    font-size:3rem;

    margin-bottom:50px;

}



.process-grid {

    display:grid;

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

    gap:40px;

}



.process-grid div {

    padding:40px;

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

    border-radius:20px;

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

}



.process-grid h3 {

    color:#d4af37;

    margin-bottom:15px;

}



.process-grid p {

    color:#ccc;

    line-height:1.6;

}





/* CTA */


.cta {

    text-align:center;

}





/* MOBILE */


@media(max-width:900px){


.project-grid {

    grid-template-columns:1fr;

}



.process-grid {

    grid-template-columns:1fr;

}



.projects-hero h1 {

    font-size:2.5rem;

}



.projects-gallery,
.project-process {

    padding:70px 30px;

}


}