*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.container{
  max-width:1300px;
  margin:0 auto;
  padding:0 20px;
}
.project-hero{
  position:relative;
  height:100vh;

  display:flex;
  align-items:center;

  padding:0 80px;

  /* 🔥 REAL BACKGROUND IMAGE */
  background:
    linear-gradient(
      to right,
      #f7f5f1 35%,
      rgba(247,245,241,0.9) 55%,
      rgba(247,245,241,0.3) 70%,
      transparent 85%
    ),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1600&auto=format&fit=crop');

  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}

/* CONTENT */
.hero-content{
  max-width:600px;
}

/* TEXT */
.hero-content h1{
  font-family:Montserrat, serif;
  font-size:55px;
  line-height:1.2;
  margin:15px 0;
  color:#000;
}

.hero-content h1 span{
  color:#c9a74d;
}

.hero-content p{
 display:inline;

  font-size:16px;
  font-weight:400;
  letter-spacing:0.3px;
  line-height:2;

  color:#fff;

  background:rgba(0,0,0,0.45); /* 🔥 premium glass effect */

  padding:8px 14px;

  border-left:3px solid #d4af37; /* luxury gold accent */

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;

  box-shadow:0 4px 20px rgba(0,0,0,0.15);
}

.hero-btn{
  background:#2f5d50;
  color:#fff;
  padding:14px 28px;
  border-radius:6px;
  text-decoration:none;
}

@media(max-width:768px){

  .project-hero{
    height:auto;
    padding:100px 20px 60px;

    background:
      rgba(0,0,0,0.55),
      url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1200&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
  }

  .hero-content h1{
    font-size:32px;
    color:#000;
  }

  .hero-content p{
    color:#fff;
  }

}



    /* ================= FILTER SECTION ================= */

.project-filter{
  background:#f3efe9;
  padding:25px 0;
  border-bottom:1px solid #e5e0d8;
}

/* CONTAINER ROW */
.filter-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
/* ================= TABS ================= */

.tabs{
  display:flex;
  gap:14px;
  position:relative;
  flex-wrap:wrap;
  align-items:center;
}

/* ================= TAB ================= */

.tab{
  position:relative;

  padding:12px 28px;
  border-radius:40px;

  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.92);

  font-size:14px;
  font-weight:500;
  letter-spacing:0.3px;

  color:#333;

  cursor:pointer;
  overflow:hidden;

  transition:all 0.35s ease;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  box-shadow:0 2px 10px rgba(0,0,0,0.03);
}

/* GOLD BACKGROUND */
.tab::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(135deg,#d4af37,#c39a2c);

  opacity:0;
  transition:0.35s ease;

  z-index:0;
}

/* TEXT */
.tab span{
  position:relative;
  z-index:2;

  transition:0.3s ease;
}

/* HOVER */
.tab:hover{
  transform:translateY(-2px);
  border-color:#d4af37;

  box-shadow:0 6px 20px rgba(212,175,55,0.18);
}

.tab:hover span{
  color:#c39a2c;
}

/* ================= ACTIVE TAB ================= */

.tab.active{
  border-color:transparent;

  box-shadow:0 10px 28px rgba(212,175,55,0.35);
}

/* SHOW GOLD */
.tab.active::before{
  opacity:1;
}

/* ACTIVE TEXT */
.tab.active span{
  color:#fff;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  .tabs{
    gap:10px;
  }

  .tab{
    padding:10px 18px;
    font-size:13px;
  }

}
/* ================= SORT DROPDOWN ================= */

.sort-box{
  position:relative;
  width:180px;
}

/* CUSTOM SELECT */
.sort-box select{
  width:100%;
  padding:12px 40px 12px 15px;

  border-radius:8px;
  border:1px solid #ddd;
  background:#fff;

  font-size:13px;
  color:#444;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  cursor:pointer;
  transition:0.3s;
}

/* CUSTOM ARROW */
.sort-box::after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#c9a74d;
  pointer-events:none;
}

/* HOVER */
.sort-box select:hover{
  border-color:#c9a74d;
}

/* FOCUS */
.sort-box select:focus{
  outline:none;
  border-color:#c9a74d;
  box-shadow:0 0 0 3px rgba(201,167,77,0.15);
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  .filter-row{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
  }

  .tabs{
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    padding-bottom:5px;
  }

  .tabs::-webkit-scrollbar{
    display:none;
  }

  .tab{
    flex:0 0 auto;
  }

  .sort-box{
    width:100%;
  }

  .sort-box select{
    width:100%;
  }
}







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

.projects-grid{
display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:25px;
  margin-top:30px;
}

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

.project-card{
  width:100%;
  background:#fff;
  border-radius:12px;
  overflow:hidden; /* 🔥 IMPORTANT */
  border:1px solid #e8e6e2;
}

/* IMAGE */
.project-img{
  width:100%;
  overflow:hidden;
}

.project-img img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.projects-grid > *{
  min-width:0;
}

/* BADGE */
.badge{
  position:absolute;
  top:12px;
  left:12px;
  font-size:11px;
  padding:5px 10px;
  border-radius:4px;
  color:#fff;
}

.badge.ongoing{ background:#2f5d50; }
.badge.upcoming{ background:#c9a74d; }
.badge.completed{ background:#1c1c1c; }

/* BODY */
.project-body{
  padding:16px;
}

/* TOP */
.project-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.project-top h3{
  font-size:15px;
  color:#1c1c1c;
}

/* ARROW */
.arrow{
  width:32px;
  height:32px;
  border:1px solid #c9a74d;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c9a74d;
  font-size:14px;
  transition:0.3s;
}

/* TEXT */
.location{
  font-size:12px;
  color:#777;
  margin-bottom:8px;
}

.desc{
  font-size:13px;
  color:#000;
  line-height:1.5;
  margin-bottom:12px;
}

.view-link{
  font-size:12px;
  color:#c9a74d;
  text-decoration:none;
  font-weight:500;
}

/* HOVER */
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

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

.project-card:hover .arrow{
  background:#c9a74d;
  color:#fff;
}
/* TABLET */
@media(max-width:1024px){
  .projects-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:768px){
  .projects-grid{
    grid-template-columns:repeat(2,1fr);
    gap:15px;
  }
}

  .project-img img{
    height:150px;
  }

  .project-top h3{
    font-size:13px;
  }

  .desc{
    font-size:12px;
  }
}

/* SMALL MOBILE */
@media(max-width:480px){
  .projects-grid{
    grid-template-columns:repeat(2,1fr); /* still 2 */
  }
}