/* ================= WRAPPER ================= */
.gcproj-1{
  width:95%;
  max-width:1600px;
  margin:auto;
  padding:60px 0;
}

/* ================= HEADING ================= */
.gcproj-2{
  text-align:center;
  margin-bottom:50px;
}
.gcproj-2 h1{
  font-size:42px;
  color:#111;
}
.gcproj-2 p{
  font-size:18px;
  color:#666;
  margin-top:10px;
}

/* ================= GRID ================= */
.gcproj-3{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* ================= PROJECT CARD ================= */
.gcproj-4{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
  transition:.4s ease;
  display:flex;
  flex-direction:column;
}
.gcproj-4:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 60px rgba(0,0,0,0.15);
}

/* ================= LOGO ================= */
.gcproj-5{
  width:100%;
  height:160px;
  background:#eef3f8;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gcproj-5 img{
  max-width:70%;
  max-height:70%;
}

/* ================= CONTENT ================= */
.gcproj-6{
  padding:26px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.gcproj-7{
  font-size:20px;
  font-weight:600;
  color:#111;
  margin-bottom:6px;
}
.gcproj-8{
  font-size:14px;
  color:#777;
  margin-bottom:18px;
}

/* ================= LINK ================= */
.gcproj-9{
  margin-top:auto;
}
.gcproj-9 a{
  display:inline-block;
  padding:12px 20px;
  background:#0066ff;
  color:#fff;
  border-radius:30px;
  text-decoration:none;
  font-size:14px;
  transition:.3s;
}
.gcproj-9 a:hover{
  background:#004fd4;
}

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

/* XL screens */
@media(max-width:1400px){
  .gcproj-3{grid-template-columns:repeat(3,1fr);}
}

/* Large laptops */
@media(max-width:1100px){
  .gcproj-3{grid-template-columns:repeat(2,1fr);}
}

/* Tablets */
@media(max-width:900px){
  .gcproj-2 h1{font-size:34px;}
}

/* Mobile – 2 columns */
@media(max-width:700px){
  .gcproj-3{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  .gcproj-5{height:140px;}
  .gcproj-6{padding:14px;}
  .gcproj-7{font-size:16px;}
  .gcproj-8{font-size:12px;}
  .gcproj-9 a{
    padding:8px 14px;
    font-size:12px;
  }
}

/* Small mobiles */
@media(max-width:400px){
  .gcproj-3{
    grid-template-columns:repeat(2,1fr);
  }
  .gcproj-7{font-size:14px;}
  .gcproj-8{font-size:11px;}
}

/* XS devices */
@media(max-width:320px){
  .gcproj-9 a{
    width:100%;
    text-align:center;
  }
}