.group_pencapaian{
    margin-top: 100px;
    padding: 0 200px;
}

.group_pencapaian h1{
    margin-bottom: 30px;
}

.pencapaian h3 {
    font-size: 32px;
    margin-bottom: 0;
}

.pencapaian-orange {
  /* background: linear-gradient(to top, #FF6600, #ffb685); */
  background-color: #FF6600;
}

.pencapaian-blue {
  /* background: linear-gradient(to top, #2E4A94, #7da0ff); */
  background-color: #2E4A94;
}


.pencapaian-blue,
.pencapaian-orange {
    flex-grow: 1;
    width: 100%;
    border-radius: 15px;
    padding: 30px;
    align-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 1s ease;
}

.pencapaian-blue:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* background: linear-gradient(to top, #3757af, #8baaff); */
}

.pencapaian-orange:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* background: linear-gradient(to top, #ff7113, #ffc197); */
}

.pencapaian p{
    margin: 0;
  margin-top: 5px; /* dorong p ke bawah */
    font-size: 20px;
}

.pencapaian {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: flex-start; /* h3 di atas */
}

.pencapaian i {
  margin-top: auto; /* dorong ikon ke bawah */
  padding: 20px 0 0;
  font-size: 30px;
}

.row.equal-height {
    display: flex;
    flex-wrap: wrap;
}

.row.equal-height > [class*="col-"] {
    display: flex;
}

@media (max-width: 1300px) {
    .group_pencapaian {
        padding: 0 100px !important;
    }
}
@media (max-width: 1100px) {
    .pencapaian{
        padding: 40px 20px;
    }
}
@media (max-width: 1000px) {
    .group_pencapaian {
        padding: 0 50px !important;
    }
    .pencapaian h3{
        font-size: 25px;
    }
    .pencapaian p{
        font-size: 14px;
    }
}
@media (max-width: 992px) {
    .pencapaian{
        margin: 15px 0;
    }
}
@media (max-width: 800px) {
    .group_pencapaian {
        padding: 0 30px;
    }
}
@media (max-width: 767px) {
    .group_pencapaian h1 {
        font-size: 30px;
    }
    .group_pencapaian h3 {
        font-size: 25px;
    }
}
@media (max-width: 400px) {
    .group_pencapaian {
        padding: 0 15px;
    }
    .group_pencapaian h1 {
        font-size: 25px;
    }
    .group_pencapaian h3 {
        font-size: 20px;
    }
    .pencapaian{
        margin: 5px 0;
    }
}