.section.kategori {
  background-color: #5474fc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0px;
  align-items: center;
  position: relative;
  z-index: 1;
  color: white;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 45px;
  margin-top: 170px;
  position: relative;
  z-index: 1;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffd872;
}

.category-card {
  background-color: #ffd872;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 340px;
  border-radius: 50px;
  height: 270px;
}

.category-text{
  font-size: 45px;
  max-width: 340px;
  margin-top: 35px;
  text-align: center;
  margin-top: 10px;
}

.hakim {
  margin-top: -108px;
  width: 236px;
}

.kepaniteraan {
  margin-top: -102px;
  width: 317px;
}

.tenaga-non-teknis {
  margin-top: -100px;
  width: 290px;
}

.open-access {
  margin-top: -85px;
  width: 526px;
}

.open-access {
  margin-left: -31px;
  margin-top: -48px;
  width: 395px;
}

@media (max-width: 1280px) {
    
    .category {
        margin-bottom: 50px;
    }
    
}

/**Responsive CSS**/


/* ≤ 1700px */
@media (max-width: 1700px) {
  .category-card {
    width: 320px;
    height: 255px;
  }
  .categories {
    gap: 40px;
    margin-top: 158px;
  }
  .category-text {
    font-size: 42px;
  }
  .hakim { width: 225px; margin-top: -107px; }
  .kepaniteraan { width: 300px; margin-top: -98px; }
  .tenaga-non-teknis { width: 275px; margin-top: -96px;}
  .open-access { width: 357px; margin-left: -40px; margin-top: -33px;}
}

/* ≤ 1500px */
@media (max-width: 1500px) {
  .category-card {
    width: 300px;
    height: 240px;
  }
  .categories {
    gap: 36px;
    margin-top: 145px;
  }
  .category-text {
    font-size: 39px;
  }
  .hakim { width: 215px; margin-top: -107px;}
  .kepaniteraan { width: 285px; margin-top: -96px;}
  .tenaga-non-teknis { width: 262px; margin-top: -96px;}
  .open-access { width: 333px; margin-left: -47px; margin-top: -31px; }
}


@media (max-width: 1387px) {
  .category-card {
    width: 280px;
  }
}

/* ≤ 1366px */
@media (max-width: 1366px) {
  .category-card {
    width: 280px;
    height: 225px;
  }
  .categories {
    gap: 32px;
    margin-top: 130px;
  }
  .category-text {
    font-size: 36px;
  }
  .hakim { width: 205px; margin-top: -106px; }
  .kepaniteraan { width: 270px; margin-top: -94px; }
  .tenaga-non-teknis { width: 250px; }
  .open-access { width: 320px; margin-top: -36px; margin-left: -49px;}
}

@media (max-width: 1315px) {
  .category-card {
    width: 254px;
  }
  .open-access { margin-left: -61px;}
}

/* ≤ 1280px */
@media (max-width: 1280px) {
  .category-card {
    width: 228px;
    height: 182px;
  }
  .categories {
    gap: 28px;
    margin-top: 110px;
  }
  .category-text {
    font-size: 30px;
    max-width: 217px;
  }
  .hakim {
    width: 157px;
    margin-top: -75px;
  }
  .kepaniteraan {
    width: 212px;
    margin-top: -73px;
  }
  .tenaga-non-teknis {
    width: 196px;
    margin-top: -75px;
  }
  .open-access {
    width: 273px;
    margin-top: -43px;
    margin-left: -38px;
  }
}

@media (max-width: 1035px) {
  .category-card {
    width: 215px;
  }
}

@media (max-width: 1035px) {
  .open-access {
    width: 260px;
    margin-top: -33px;
    margin-left: -45px;
  }
}

/* ≤ 992px */
@media (max-width: 992px) {
  .category-card {
    width: 302px;
    height: 251px;
  }
  .categories {
    gap: 24px;
    margin-top: 100px;
  }
  .category-text {
    font-size: 27px;
  }
  .hakim { width: 180px; margin-top: -42px; }
  .kepaniteraan { width: 235px; margin-top: -29px;}
  .tenaga-non-teknis { width: 215px; margin-top: -28px;}
  .open-access { width: 307px; margin-left: -21px;}
  .open-access { margin-top: 0px; }
}

/* ≤ 768px */
@media (max-width: 768px) {
  .category-card {
    height: 230px;
    width: 235px;
  }
  .categories {
    gap: 20px;
    margin-top: 80px;
  }
  .category-text {
    font-size: 24px;
  }
  .hakim { width: 165px; margin-top: -40px; }
  .kepaniteraan { width: 215px; margin-top: -28px;}
  .tenaga-non-teknis { width: 195px; margin-top: -26px;}
  .open-access { width: 245px; margin-top: 26px; margin-left: -25px;}
}

@media (max-width: 527px) {
  .open-access { margin-top: 25px; }
}

/* ≤ 500px */
@media (max-width: 500px) {
  .category-card {
    width: 240px;
  }
  
  .categories {
    margin-top: 70px;
  }
  
  .hakim { margin-top: -40px; }
  .kepaniteraan { margin-top: -28px; }
  .tenaga-non-teknis { margin-top: -26px; }
  .open-access { margin-top: 26px; margin-left: -22px; width: 245px;}
}

@media (max-width: 360px) {
  .open-access { margin-top: 25px; }
}