.text-desc p {
  color: #4e6a63;
  font-size: 25px;
  word-spacing: 5px;
  text-align: justify;
}
.title-final {
  margin-top: 50px;
  color: #ffffff;
  font-size: 22px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.title-final h4 {
  width: 40%;
  background-color: #193028;
  padding: 20px 30px 20px 30px;
  transform: translate(0px, 30px);
  margin: 0;
  z-index: 5;
}

.final-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  flex-wrap: wrap;
}

.final-card {
  margin-bottom: 5px;
  background-color: white;
  padding: 30px 30px 30px 30px;
  position: relative;
  text-align: center;
  border-top: 12px solid #ffb548;
}
.final-card.wide {
  grid-column: span 2;
}

.final-cards :nth-child(4),
.final-cards :nth-child(6) {
  border-top: 12px solid #ffb548;
}

.final-card p {
  font-size: 22px;
  font-weight: 500;
  color: #333;
  margin-top: 30px;
  vertical-align: center;
  line-height: 25px;
  text-align: center;
}
.highlight-orange {
  color: #fcb44a !important;
}

.highlight-blue {
  color: #858e8b !important;
}

.text-section {
  font-size: 16px;
  color: #676767;
  /* margin: 0; */
}
.text-section p {
  font-weight: lighter;
}

.text-section ul li {
  padding-top: 5px;
}

/* hexagon section */

.honeycomb {
  height: 600px;
  position: relative;
}

/* base row style */
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 15px;
}

/* green row (centered) */
.row-1 .hex {
  width: 250px;
  height: 261px;
  font-size: 25px;
}

/* white row */
.row-2 .hex {
  width: 170px;
  height: 200px;
}

/* gray row */
.row-3 .hex {
  width: 170px;
  height: 200px;
}
/* orange row */
.row-4 .hex {
  width: 170px;
  height: 200px;
}

/* vertical shift to make honeycomb */
.row-2 {
  transform: translateY(-87px);
  gap: 80px;
}
.row-3 {
  transform: translateY(-200px);
  gap: 75px;
}
.row-4 {
  transform: translateY(-310px);
  gap: 80px;
}

/* general hexagon shape */
.hex {
  aspect-ratio: 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #ccc;
  margin: 0px 70px;
  padding: 0px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 8px;
}

/* colors */
.green {
  background: #31544b;
  color: white;
  padding: 0px 30px;
}
.white {
  background: white;
  color: #787878;
}
.gray {
  background: #d0d6d4;
  color: #787878;
}
.orange {
  background: #ffc46c;
  color: #787878;
}
/* hexagon section ends*/

@media (max-width: 992px) {
  .title-final h4 {
    transform: translate(-10px, 30px);
  }

  .row.row-2,
  .row.row-3,
  .row.row-4 {
    flex-wrap: wrap;
    gap: 30px;
    transform: none; 
    margin-bottom: 30px;
  }

  .row.row-3 .hex,
  .row.row-2 .hex,
  .row.row-4 .hex {
    margin: 0;
    flex: 1 1 calc(50% - 20px); 
    max-width: calc(40% - 20px);
  }

  .honeycomb {
    height: auto; 
  }
}


@media (max-width: 768px) {
  .text-desc p {
    margin-top: 80px;
  }
  .honeycomb {
    height: fit-content !important ;
    margin-bottom: 0px;
  }

  .final-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .title-final h4 {
    width: 70%;
    font-size: 20px;
    padding: 15px 20px;
    transform: translate(0px, 20px);
  }

  .final-card {
    padding: 20px;
  }

  .final-card.wide {
    grid-column: span 2;
  }

  .final-card p {
    font-size: 18px;
    line-height: 22px;
    margin-top: 20px;
  }

  .row {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .row-1 .hex {
    width: 230px;
    height: 220px;
    font-size: 20px;
    line-height: 1.3;
  }
  .row-2 .hex,
  .row-3 .hex,
  .row-4 .hex {
    max-width: 100%;
    flex: 1 1 100%;
    width: 230px;
  }
  .row-2,
  .row-3,
  .row-4 {
    transform: none;
  }

  .hex {
    width: 130px;
    font-size: 12px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .text-desc p {
    margin-top: 0px;
  }
  .final-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .title-final h4 {
    width: 90%;
    font-size: 18px;
    padding: 10px 15px;
    transform: translate(0px, 15px);
  }

  .final-card.wide {
    grid-column: span 1;
  }

  .final-card p {
    font-size: 16px;
    line-height: 20px;
    margin-top: 15px;
  }

  .row-1 .hex {
    width: 180px;
    height: 190px;
    font-size: 20px;
    line-height: 1.3;
  }
  .row-2 .hex,
  .row-3 .hex,
  .row-4 .hex {
    max-width: 100%;
    flex: 1 1 100%;
  }
}