.data-tkdn-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: white;
  padding: 5rem 0 0 0;
  background-image: url("../images/tentang-icef/data-tkdn/background-img.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top 5rem center;
}

.data-tkdn-container p {
  margin: 0 0 1rem 0;
}

.data-tkdn-wrapper {
  background-image: url("../images/tentang-icef/data-tkdn/bg-body.webp");
  background-repeat: no-repeat;
  background-size: 55% 40%;
}

.tkdn-header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
  padding-top: 5.5rem;
  margin-bottom: 3rem;
}

.tkdn-header-container>p:nth-child(1) {
  font-size: 60px;
  font-weight: bold;
}

.tkdn-header-container>p:nth-child(1) span {
  background-color: #67c8da;
  padding: 0 1rem;
}

.tkdn-body-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20% 3rem 20%;
  background-image: url("../images/tentang-icef/text-bg-icon.png"),
    url("../images/tentang-icef/text-bg-icon.png"),
    url("../images/tentang-icef/data-tkdn/bg-left.png"),
    url("../images/tentang-icef/data-tkdn/bg-right.png");
  background-repeat: no-repeat;
  background-position: top 1.5rem right 4rem, bottom 1rem left 4rem, bottom 7rem left -1.3rem, bottom 7rem right -1.3rem;
  background-size: 2%, 2%, 6%, 6%;
  padding-bottom: 3rem;
}

.tkdn-body-container>p:nth-child(1),
.tkdn-body-container>p:nth-child(2) {
  font-size: 30px;
  font-weight: bold;
  margin: 0;
}

.tkdn-categories-img-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.tkdn-categories-img-wrapper {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
}

.tkdn-body-container>p:nth-child(2) {
  margin-bottom: 2rem;
}

.tkdn-button {
  border: 1px #dc455f solid;
  border-radius: 50px;
  background-color: #dc455f;
  color: white;
  padding: 3px 30px 6px 30px;
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
  cursor: pointer;
}

.tkdn-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.tkdn-button:active {
  box-shadow: 0 2px #666;
  transform: translateY(1px);
}

.tkdn-carousel-container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;
}

.slider {
  width: 70%;
}

.slider img {
  width: 100%;
}

.swiper-pagination {
  position: relative;
  bottom: 0 !important;
}

.tkdn-footer-container {
  background-image: url("../images/tentang-icef/ttg-icef-footer.png");
  background-size: cover;
  padding: 1rem 5rem 0 5rem;
  color: white;
  background-repeat: no-repeat;
  background-position: bottom;
}

.footer-container {
  background-image: none !important;
}

.footer::after {
  background-image: none !important;
}

hr.line {
  border: 1px solid white;
  width: 95%;
}

/** mobile **/
@media (max-width: 700px) {
  .tkdn-header-container {
    margin-bottom: 1rem;
  }

  .tkdn-header-container>p:nth-child(1) {
    font-size: 30px;
  }

  .tkdn-body-container {
    padding: 0;
    background-repeat: no-repeat;
    background-position: top 2.5rem right 1rem, bottom 0.5rem left 0.5rem, bottom 6.5rem left -0.2rem, bottom 6.5rem right -0.2rem;
    background-size: 5%, 3%, 5%, 5%;
    padding-bottom: 2rem;
  }

  .tkdn-body-container>p:nth-child(1),
  .tkdn-body-container>p:nth-child(2) {
    font-size: 18px;
  }

  .tkdn-body-container img {
    width: 90%;
  }

  .tkdn-categories-img-wrapper img {
    width: 40%;
  }

  .tkdn-carousel-container {
    padding: 1rem 0;
  }

  .slider {
    width: 100%;
  }

  .swiper-button-prev-mobile,
  .swiper-button-next-mobile {
    display: none;
  }

  .tkdn-footer-container {
    padding: 1rem 0 0 0;
  }
}