/*==========================
  PROJECTS PAGE
===========================*/

.page-title{
    text-align:center;
    font-size:42px;
    font-weight:300;
    margin-bottom:40px;
    color:#222;
}

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

.projects-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:45px 35px;
}

.project-card{
    width:100%;
}

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

.project-image{
    overflow:hidden;
    background:#eee;
}

.project-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.project-card:hover img{
    transform:scale(1.05);
}

/*==========================
  DETAILS
===========================*/

.project-details{
    padding-top:18px;
}

.project-details p{
    font-size:14px;
    margin-bottom:7px;
    color:#555;
}

.project-details strong{
    color:#222;
}

/*==========================
  FOOTER
===========================*/



/*==========================
  SCROLLBAR
===========================*/

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#33b7b4;
}

::-webkit-scrollbar-track{
    background:#f2f2f2;
}
/*=========================================
  LARGE LAPTOPS (1400px and below)
=========================================*/
@media (max-width:1400px){

    .content{
        padding:30px;
    }

    .projects-grid{
        gap:35px 25px;
    }

}

/*=========================================
  LAPTOPS (1200px and below)
=========================================*/
@media (max-width:1200px){
    .page-title{
        font-size:34px;
    }

    .project-image img{
        height:240px;
    }
}

@media (max-width:992px){
    .page-title{
        font-size:30px;
    }

    .projects-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .project-image img{
        height:320px;
    }
}

@media (max-width:768px){
    .page-title{
        font-size:26px;
        line-height:1.4;
    }

    .project-image img{
        height:260px;
    }

    .project-details p{
        font-size:13px;
    }
}

@media (max-width:576px){
    .page-title{
        font-size:22px;
        margin-bottom:25px;
    }

    .project-image img{
        height:220px;
    }

    .project-details p{
        font-size:12px;
        line-height:1.6;
    }
}