* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    "Poppins",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400; /* default regular weight */
  line-height: 1.6;
  color: #333;
  line-height: 1.6;
  color: #333;
  background-color: #f9fafb;
  margin-top: 70px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: bold; /* or 700 for bolder headings */
}

/* MAIN LAYOUT */
.projects-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* WRAPPER */
.projects-wrapper {
  width: 85%;
  max-width: 1250px;
}

/* HERO */
.projects-hero {
  width: 100%;
  display: flex;
  justify-content: center;
  background: linear-gradient(to right, #1e3a8a, #3f7cff);
  padding: 100px 0 90px;
  text-align: center;
  color: #fff;
}

.projects-hero h1 {
  font-size: 3.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}



.projects-hero p {
  font-size: 1.2em;
  color: #e5ecff;
}

/* CONTENT */
.projects-content {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 60px 0 80px;
}

/* FILTERS */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 50px;
}

.filter-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  background-color: #f1f5f9;
  color: #1e3a8a;
  font-weight: 550;
  cursor: pointer;
  transition: 0.3s ease;
  font-size: 14px;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: #1e3a8a;
  color: #fff;
}

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

/* CARD */
.project-card {
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: 0.3s ease;
}

.project-card:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* IMAGE */
.project-card .img-holder {
  width: 100%;
  height: 280px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.3s ease;
}

.project-card:hover .img-holder {
  background-size: 110%;
}

/* TEXT */
.project-card-text-holder {
  padding: 15px 20px 20px;
}

.project-card-text-holder p {
  margin-bottom: 6px;
  color: #3f7cff;
  font-weight: 550;
  font-size: 13px;
}

.project-card-text-holder h3 {
  color: #1e3a8a;
  font-size: 16px;
  margin-bottom: 6px;
}

.project-card-text-holder span {
  display: block;
  font-size: 14px;
  color: #606a78;
  line-height: 1.5;
}

/* IMAGES */
.img1 {
  background-image: url("/images/projects/glass/glass2.jpg");
}
.img2 {
  background-image: url("/images/projects/ceiling/ceiling1.jpg");
}
.img3 {
  background-image: url("/images/projects/handrails/handrail1.jpg");
}
.img4 {
  background-image: url("/images/projects/aluminum/aluminum1.jpg");
}
.img5 {
  background-image: url("/images/projects/glass/glass5.jpg");
}
.img6 {
  background-image: url("/images/projects/aluminum/aluminum6.jpg");
}

.img7 {
  background-image: url("/images/projects/glass/glass1.jpg");
}

.img8 {
  background-image: url("/images/projects/aluminum/aluminum3.jpg");
}

.img9 {
  background-image: url("/images/projects/handrails/handrail3.jpg");
}

.img10 {
  background-image: url("/images/projects/aluminum/aluminum4.jpg");
}

.img11 {
  background-image: url("/images/projects/ceiling/ceiling2.jpg");
}

.img12 {
  background-image: url("/images/projects/ceiling/ceiling3.jpg");
}

.img13 {
  background-image: url("/images/projects/aluminum/aluminum5.jpg");
}

.img14 {
  background-image: url("/images/projects/handrails/handrail4.jpeg");
}

.img15 {
  background-image: url("/images/projects/glass/glass4.jpg");
}




/* RESPONSIVE */
@media (max-width: 768px) {
  .projects-wrapper {
    width: 94%;
  }

  .projects-hero h1 {
    font-size: 2rem;
  }

  .projects-hero p {
    font-size: 0.95rem;
  }

  .project-card .img-holder {
    height: 220px;
  }


}


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

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .project-card {
    width: 95%;
    max-width: 520px;
  }
}