* {
  font-family: 'Poppins', sans-serif;
  /* font-size: 14px; */
}

p {
  font-size: 14px;
  line-height: 22px;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: transparent;
  height: 64px;
  vertical-align: middle;
}

/* h5 {
  color: #00688C !important;
} */


table thead tr th {
  color: #00688C !important;
  font-weight: 600;
}

.card {
  border: 1px solid rgba(101, 101, 101, 0.1)
}

.list-group .list-group-item {
  height: 64px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: ease 400ms;

  & span {
    color: #00688C;
    display: none;
    transform: translateX(20px);
    transition: ease 400ms;
  }

  &:hover span {
    display: block;
    transition: ease 400ms;
    transform: translateX(0);
  }

  &:hover i {
    display: none;
    transition: ease 400ms;
  }

}

.accordion-button:not(.collapsed) {
  color: #00688C;
  font-weight: 600;
  background-color: #00688C20;
}

.accordion-button {
  &:focus {
    box-shadow: none;
  }
}

.list-group .list-group-item i {
  font-size: large;
  transition: ease 400ms;
}

.text-muted {
  color: #8D959B !important;
}

#navcustom {
  color: #01668A;
}

#cardcustom {
  height: 100x;
}

#cardinfo {
  box-shadow: 20px 24px 20px -10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(101, 101, 101, 0.1);
  transition: 0.3s;
  background-color: white;
  transition: all 0.3s;
  border-radius: 10px;
  min-height: 150px;
  min-width: 150px;
  color: #00688C;
}

#cardinfo:hover {
  background: linear-gradient(90deg, #016588 0%, #05DEAF 100%);
  border: 1px solid rgba(101, 101, 101, 0.1);
  box-shadow: 20px 24px 20px -10px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  transform: scale(1.01);
  color: #ffffff;
}

/* card carousel */
#cardcaousel:hover {
  background-color: white !important;
  border: 2px solid #3E7DC0 !important;
  transition: ease 200ms;
}

@media screen and (max-width: 990px) {

  /* Whatever size you call "Mobile" */
  #illu img {
    display: none;
  }
}

/* tautan */

.layanan {
  width: 90%;
  border-radius: 16px;
  left: 30vw;
}

.layanan .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  padding: 18px;
  background-color: white;
  transition: ease-in-out 200ms;
  border: 2px solid #00688c;
  margin: -1px;
  flex: 0 0 128px;
}

.layanan .item p.deskripsi,
.layanan .item .title {
  display: none;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.layanan .item:hover .deskripsi,
.layanan .item:hover .title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
}

.layanan .item:hover i {
  display: none;
}

.layanan:hover>.item:not(:hover) i {
  display: block;
  color: #00688C;

}

.layanan:hover>.item:not(:hover) :where(.title, .deskripsi) {
  display: none;
}


.layanan .item:hover {
  flex: 1;
  color: white;
  background: linear-gradient(90deg,
      #00688c 30.73%,
      #06e4b1 100%,
      #005a8c 100%);

  flex-direction: column;
  align-items: start !important;
}

.layanan .item:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.layanan .item:last-child {
  flex: 1;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;

  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  color: white;
  background: linear-gradient(90deg,
      #00688c 30.73%,
      #06e4b1 100%,
      #005a8c 100%);
  flex-direction: column;
  align-items: start !important;
}

.item:hover:not(:last-child)~.item:last-child {

  display: flex;
  align-items: center !important;
  justify-content: center;
  height: 128px;
  padding: 18px;
  background: white;
  transition: ease-in-out 200ms;
  border: 2px solid #00688c;
  margin: -1px;
  flex: 0 0 128px;
}

.layanan .item:last-child h5,
.layanan .item:last-child p {
  display: block;
}

.layanan .item:last-child i {
  display: none;
}


#footer-illustrator {
  mix-blend-mode: luminosity;
}

#infopublik::before {
  width: 60%;
}

.title-section {
  display: inline-block;
  width: auto;
  min-width: 80px;
  position: relative;
  padding-bottom: 3px;
}

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

.title-section::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 15%;
  height: 3px;
  background: linear-gradient(90deg, #00688C -1.39%, #05DAAE 100%);
}

.title-section::before {
  background: linear-gradient(90deg, #00688C -1.39%, #05DAAE 100%);
  bottom: -6px;
  content: '';
  height: 3px;
  position: absolute;
  left: 20%;
  width: 90%;
}

.section-tab .left-side {
  border-right: 1px solid #E3E9EE;
}

.section-tab .left-side .nav-link {
  text-align: left;
  font-size: 16px;
  border-radius: 0;

  min-height: 64px;
  max-height: 100px;

  color: #8D959B;

  transition: ease 200ms;

  &:hover {
    background-color: #f8f8f8;
  }

}

.section-tab .left-side .nav-link.active {
  background-color: transparent;
  border-radius: 0;
  border-right: 2px solid #00688C;
  color: #00688C;
  font-weight: 600;
}

#herotitle {
  color: #00688C;
}

.tab-pane h5 {
  color: #00688C;
}