@font-face {
  font-family: "Biko";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/biko_regular.otf") format("opentype");
}
/* 
#navbar .dropdown:hover>.dropdown-menu {
    display: block;
}

#navbar .dropdown>.dropdown-toggle:active {
      pointer-events: none;
  } */

.neuglass {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.neuglass2 {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  border-left: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  backdrop-filter: blur(5px);
}

.neuglass3 {
  padding: 20px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.home-section-heading {
  position: relative;
}

.home-section-heading .home-heading-title {
  display: flex;
  align-items: center;
}

.home-section-heading .home-heading-title .icon {
  margin-right: 20px;
  font-size: 20px;
  background: #e0e5ec;
  display: inline-flex;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  padding: 13px;
  border-radius: 5px;
  color: #02be66;
  text-align: center;
}

.home-section-heading .home-heading-title .sub-judul {
  font-family: "Montez", sans-serif;
  font-size: 30px;
  color: #555;
}

.home-section-heading .home-heading-title .sub-judul i {
  font-size: 18px;
  color: #02be66;
}

.home-section-heading .home-heading-title .judul {
  font-weight: bold;
}

.home-section-heading .home-heading-title .judul span {
  color: #02be66;
}

.home-section-heading .home-heading-title.mini {
  font-family: "Montez", sans-serif;
  font-weight: bold;
}

.neu-text {
  color: #ecf0f3;
  font-size: 6em;
  font-weight: bold;
  text-shadow: -8px -8px 12px rgba(255, 255, 255, 0.4),
    8px 8px 12px rgba(0, 0, 0, 0.08);
  caret-color: #262626;
}

.btn-neu {
  font-size: 12px;
  background: #e7e9ec;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  padding: 5px 10px;
  color: rgba(0, 60, 77, 1);
  border-radius: 10px;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  transition: all 1s;
}

.btn-neu:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
  transition: all 1s;
}

.link-btn {
  position: relative;
  /* margin: auto;
    padding: 12px 18px; */
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}
/* 
 .link-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50px;
    background: #e0e8ef;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
  } */

.link-btn span {
  position: relative;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  /* color: #02be66;; */
}

.link-btn svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #262626;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

/* .link-btn:hover:before {
    width: 100%;
    background: #e0e8ef;
  } */

.link-btn:hover svg {
  transform: translateX(0);
  stroke: #02be66;
}

.link-btn:active {
  transform: scale(0.95);
}

.owl-nav {
  align-self: center;
  color: rgb(0, 60, 77);
  font-size: 15px;
  letter-spacing: 2px;
}

.owl-nav .owl-next i,
.owl-nav .owl-prev i {
  background: #e0e5ec;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  padding: 5px 10px;
  color: rgba(0, 60, 77, 1);
  border-radius: 10px;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  transition: all 1s;
  text-shadow: -1px -1px 1px #d0d3d6, 1px 1px 1px #f2f7fa;
}

.owl-nav .owl-next:hover,
.owl-nav .owl-prev:hover {
  background: transparent !important;
}

.owl-nav .owl-next:hover i,
.owl-nav .owl-prev:hover i {
  color: #3bbb8b;
}

.owl-nav .owl-next:active i,
.owl-nav .owl-prev:active i {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
  transition: all 1s;
}

@keyframes video-animation {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1);
  }

  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0);
  }
}

.slider.slider-nav button {
  position: absolute !important;
  top: 0 !important;
  margin-top: -20px;
  font-family: initial !important;
  background: #e0e5ec;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  padding: 5px 10px;
  border-radius: 1000px;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  transition: all 1s;
  text-shadow: -1px -1px 1px #d0d3d6, 1px 1px 1px #f2f7fa;
  font-weight: bold;
}

.slider.slider-nav .slick-prev:before,
.slider.slider-nav .slick-next:before {
  color: #02be66;
}

.slider.slider-nav button:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3) !important;
  transition: all 1s;
}

.neubtn {
  background: #fff;
  font-size: 13px;
  display: inline-flex !important;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  padding: 7px 15px;
  border-radius: 5px;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}

.neubtn.info {
  background-color: #41b983;
  color: #fff;
  border-radius: 5px;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0befb2, 4px 4px 5px 0px #0befb2,
    inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0befb2,
    inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0befb2;
}

.neubtn.info:hover {
  color: #fff;
  border-radius: 5px;
}

.neubtn.danger {
  transition: all 0.5s;
  background-color: #02be66;
  color: #fff;
  border-radius: 5px;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #fbc63f, 4px 4px 5px 0px #fbc63f,
    inset 0px 0px 0px 0px #fbc63f, inset 0px 0px 0px 0px #fbc63f,
    inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #fbc63f;
}

.neubtn.danger:hover {
  color: #fff;
  border-radius: 5px;
}

.neonbtn2 {
  display: inline-block;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #02be66;
  background-color: #e0e8ef;
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  border-color: rgba(255, 255, 255, 0.333);
  border-radius: 10px;
  padding: 7px 15px;
  font-size: 12px;
  transform: translate(0px, 0px) rotate(0deg);
  transition: 0.5s;
  box-shadow: -4px -2px 16px 0px #ffffff, 4px 2px 16px 0px rgb(95 157 231 / 48%);
}

.neonbtn2:hover {
  background: #02be66;
  border-color: #02be66;
  color: #fff;
  box-shadow: 0 0 5px #02be66, 0 0 25px #02be66, 0 0 50px #02be66,
    0 0 200px #02be66;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
  transform: translateY(-10px);
}

.neonbtn2.info {
  color: #41b983;
}

.neonbtn2.info:hover {
  background: #41b983;
  border-color: #41b983;
  color: #fff;
  box-shadow: 0 0 5px #41b983, 0 0 25px #41b983, 0 0 50px #41b983,
    0 0 200px #41b983;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

.footer {
  margin-top: 50px;
  padding: 50px 0 0 0;
}

.footer .footer-top {
  padding: 0 50px;
}

.footer .footer-top .ft-konten {
  padding: 20px 50px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  border: none;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
}

.footer .footer-top .fot-text {
  padding: 50px 0;
}

.footer .footer-top .fot-text h3 {
  font-weight: bold;
  font-size: 23px;
  color: #2b3044;
}

.footer .footer-top .fot-text h3 span {
  color: #02be66;
}

.footer .footer-top .fot-text .neubtn {
  transition: all 0.5s;
}

footer .footer-top .fot-text .neubtn:hover {
  transform: translateY(15px);
}

.footer .footer-top .fot-cover {
  position: relative;
}

.footer .footer-top .fot-cover .cov1 {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -100px;
}

.footer-center {
  /* background-color: #fff; */
  margin-top: 25px;
  padding: 50px 100px;
  background-image: url(../img/footer/footer.bg.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: #ffffff;
  color: #f2f7fa;
}

.footer-center .fo-profil .name {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}

.footer-center .fo-profil .name .icon {
  width: 25px;
  margin-right: 10px;
}

.footer-center .fo-profil .name .nama {
  font-weight: 600;
}

.footer-center .fo-profil .name .nama span {
  color: #02be66;
}

.footer-center .fo-profil .moto {
  /* font-family: 'Montez', sans-serif; */
  font-size: 11px;
  margin-bottom: 15px;
  margin-top: -8px;
  margin-left: 35px;
}

.footer-center .fo-profil .misi {
  line-height: 20px;
  margin-bottom: 15px;
}

.footer-center .fo-profil .star .kepala {
  display: flex;
}

.footer-center .fo-profil .star .kepala i {
  font-size: 20px;
}

.footer-center .fo-profil .star .fa-star {
  color: #02be66;
}

.sosmed .fs {
  font-size: 11px;
  margin-bottom: 10px;
}

.sosmed ul li {
  position: relative;
  transition: all 0.5s;
}

.sosmed ul li:hover {
  transform: translateY(5px);
}

.sosmed .btn-sosmed {
  transition: all 0.5s;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  padding-block: 5px;
  padding-inline: 10px;
  background-color: rgba(153, 174, 187, 0);
  border-radius: 9999px;
  color: #ffff;
  font-weight: bold;
  border: 3px solid #ffffff4d;
}

.sosmed ul li:hover .btn-sosmed {
  background-color: rgba(153, 174, 187, 1);
}

.sosmed .btn-sosmed:hover {
  transform: translateY(15px);
}

.sosmed .btn-sosmed.fb {
  color: #0b5be6;
}

.sosmed .btn-sosmed.ig {
  color: #f403c5;
}

.sosmed .btn-sosmed.tw {
  color: #029eec;
}

.sosmed .btn-sosmed.yt {
  color: #f60002;
}

.fo-link {
  padding-left: 50px;
}

.fo-link h6 {
  font-weight: bold;
}

.footer-link a {
  padding-left: 21px;
  font-weight: 500;
  font-size: 13px;
  position: relative;
  color: #fff;
}
.footer-link a:before {
  line-height: 1em;
  font-size: 14px;
  content: "";
  background-color: #02be66;
  width: 11px;
  height: 1px;
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  display: block;
}

.footer-center .fo-kontak .fop-item {
  line-height: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 13px;
}

.footer-center .fo-kontak .fop-item .icon {
  margin-right: 10px;
}

.page {
  padding: 100px 0;
}

.pageHeader {
  position: relative;
  padding: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.pageHeader .header-heading {
  display: flex;
  align-items: center;
}

.pageHeader .header-heading .icon {
  font-size: 20px;
  padding: 10px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
  color: #02be66;
  background-color: rgba(255, 255, 255, 0.4);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.333);
}

.pageHeader .header-heading .text {
  padding-top: 15px;
}

.pageHeader .header-heading .text h2 {
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.pageHeader .header-heading .text h2 span {
  color: #02be66;
}

.pageHeader .header-heading .text p {
  margin-top: -8px;
}

.pageHeader .header-heading .text p.metaSub {
  margin-top: 0;
  margin-bottom: -3px;
  font-family: "Montez", sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #555;
}

.page-baner {
  margin-top: -70px;
  background-image: url(../../img/bg/pg-banner.jpg);
  background-size: cover;
  background-position: center;
  /* min-height: 200px; */
  padding: 50px;
  padding-top: 120px;
  position: relative;
}

.page-baner .baner-overlay {
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    120deg,
    rgba(0, 60, 77, 1),
    rgba(1, 214, 164, 0.664),
    rgba(0, 60, 77, 1)
  );
}

.page-baner .baner-konten {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: #fff;
}

.page-baner .baner-konten a {
  color: #fff;
}

.page-baner .baner-konten .baner-heading {
  display: flex;
  align-items: center;
}

.page-baner .baner-konten .baner-heading .icon {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: rgba(0, 60, 77, 0.5);
  /* color: #02be66; */
  font-size: 30px;
  padding: 15px;
  margin-right: 20px;
  margin-top: -10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.page-baner .baner-konten .baner-heading .text h2 {
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.page-baner .baner-konten .baner-heading .text h2 span {
  color: #02be66;
}

.page-baner .baner-konten .baner-heading .text p {
  margin-top: -10px;
}

.page-baner .baner-konten .baner-heading .text .breadcrumb .breadcrumb-item {
  font-weight: 500;
}

.page-baner
  .baner-konten
  .baner-heading
  .text
  .breadcrumb
  .breadcrumb-item.active {
  color: #02be66;
  font-weight: 600;
}

.page {
  padding: 100px 0 50px;
}

.page-heading {
  margin-bottom: 20px;
}

.page-heading .sub-judul {
  font-family: "Montez", sans-serif;
  font-size: 20px;
  color: #555;
  font-weight: 500;
}

.page-heading .judul {
  color: #0e0e0e;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 3px;
}

.page-heading .judul span {
  color: #02be66;
}

.heading-dots {
  display: flex;
  margin-top: 10px;
}

.heading-dots .doted {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.1),
    1px 1px 3px rgba(0, 0, 0, 0.8);
}

.heading-dots li:nth-child(1) .doted {
  background-color: rgb(0, 60, 77);
}

.heading-dots li:nth-child(2) .doted {
  background-color: #41b983;
}

.heading-dots li:nth-child(3) .doted {
  background-color: #02be66;
}

.neu-card {
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  position: relative;
}

.neu-card img {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.btnneu {
  font-size: 12px;
  background: #e0e8ef;
  display: inline-flex;
  /* flex-direction: column;
  justify-content: center; */
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -4px -2px 16px 0px #ffffff, 4px 2px 16px 0px rgb(95 157 231 / 48%);
  padding: 5px 10px;
  border-radius: 10px;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  border: 2px solid rgba(255, 255, 255, 0.333);
  transition: all 0.3s;
  color: #41b983;
}

.btnneu:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
}

.select2-selection__rendered {
  line-height: 32px !important;
}
.select2-container .select2-selection--single {
  height: 36px !important;
}
.select2-selection__arrow {
  height: 35px !important;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
[type="text"].form-control:focus,
[type="password"].form-control:focus,
[type="email"].form-control:focus,
[type="tel"].form-control:focus,
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

.layananHeader {
  position: relative;
  padding: 150px 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

.layananHeader .header-heading {
  display: flex;
  align-items: center;
}

.layananHeader .header-heading .icon {
  font-size: 20px;
  padding: 10px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
  color: #02be66;
  background-color: rgba(255, 255, 255, 0.4);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.333);
}

.layananHeader .header-heading .text {
  padding-top: 15px;
}

.layananHeader .header-heading .text h2 {
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.layananHeader .header-heading .text h2 span {
  color: #02be66;
}

.layananHeader .header-heading .text p.metaSub {
  margin-top: 0;
  margin-bottom: -3px;
  font-family: "Montez", sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #f0e7e7;
}

.layananHeader .header-heading.detail .text h2 {
  padding-top: 15px;
  margin-bottom: 0;
}

.layananHeader .header-heading.detail .text p.metaSub {
  font-weight: bold;
  margin-bottom: 0;
  margin-top: -3px;
  color: #171717;
}

.layananHeader .header-heading .icon.img {
  width: 50px;
  height: 50px;
}

.layananHeader .header-heading .icon.img img {
  width: 100%;
}

.sidebar {
  padding: 10px;
}

.sidebar .sidebar-konten .sidebar-judul {
  margin-left: 25px;
  font-size: 18px;
  position: relative;
  font-weight: 600;
  margin-bottom: 10px;
}

.sidebar .sidebar-konten .sidebar-judul.mini {
  font-size: 13px;
  color: #41b983;
}

.sidebar .sidebar-konten .sidebar-judul:before {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 3px;
  left: -25px;
  top: 45%;
  background: rgba(0, 60, 77, 1);
  transition: 1s;
}

.sidebar .sidebar-konten .sidebar-judul.mini:before {
  background: #41b983;
}

.sidebar .sidebar-konten .kategori ul.list-unstyled {
  margin-bottom: 0;
}

.sidebar .sidebar-konten .kategori .sk-item {
  font-size: 13px;
  padding: 15px 0;
  border-bottom: 1px dotted #fff;
}

.sidebar .sidebar-konten .kategori .sk-item ul li.jml {
  float: right;
  background-color: rgba(255, 255, 255, 0.1);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  border-radius: 50000px;
  font-size: 10px;
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
  transition: all 1s;
}

.sidebar .sidebar-konten .kategori .sk-item a:hover li.jml {
  transform: translateX(-50px);
  background-color: rgba(255, 255, 255, 0.9);
}

.sidebar .sidebar-konten .sidebar-recent {
  margin-top: 20px;
}

.sidebar .sidebar-konten .sidebar-recent .sr-item {
  padding: 15px 0;
  display: flex;
}

.sidebar .sidebar-konten .sidebar-recent .sr-item .sr-img {
  position: relative;
  width: 90px;
  height: 70px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-right: 10px;
}

.sidebar .sidebar-konten .sidebar-recent .sr-item .sr-img img {
  width: 90px;
  height: 70px;
  border-radius: 10px;
  transition: all 0.5s;
}

.sidebar .sidebar-konten .sidebar-recent .sr-item .sr-text .sr-meta {
  font-size: 12px;
}

.sidebar .sidebar-konten .sidebar-recent .sr-item .sr-text .sr-judul {
  font-size: 13px;
  font-weight: 600;
}

.sidebar .sidebar-konten .sidebar-recent .sr-item:hover .sr-img img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.search-widget.berita .sw-konten {
  padding: 30px 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin-bottom: -30px;
}

.search-mono input,
.search-widget.berita .form-area .select2-selection,
.search-widget.berita .form-area input {
  box-shadow: -8px -4px 8px #ffffff, 8px 4px 12px #d1d9e6,
    4px 4px 4px #d1d9e6 inset, -4px -4px 4px #ffffff inset;
  outline: none;
  border: none;
  background-color: transparent;
  font-size: 12px;
  padding: 10px 0 10px 20px;
  transition: 0.4s;
}

.search-widget.berita
  .form-area
  .select2-selection
  .select2-selection__rendered {
  line-height: 20px !important;
}
.search-widget.berita .form-area .select2-container .select2-selection--single {
  height: 38px !important;
}

.search-widget.berita .form-area .select2-selection:focus,
.search-widget.berita .form-area input:focus {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #ffffff;
}

.search-mono input.form-control:focus {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #ffffff;
}

.paginasi .pagination li {
  margin: 7px;
}

.paginasi .pagination li .page-link {
  background: #e0e5ec;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
  text-shadow: -1px -1px 1px #d0d3d6, 1px 1px 1px #f2f7fa;
  color: rgba(0, 60, 77, 1);
  font-weight: bold;
  transition: all 0.5s;
}

.paginasi .pagination li.page-item.active .page-link,
.paginasi .pagination li .page-link:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
  color: #02be66;
  transition: all 0.3s;
  border: none;
}

.btn-share {
  background: #e0e5ec;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  padding: 5px 10px;
  color: rgba(0, 60, 77, 1);
  border-radius: 10px;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  transition: all 0.5s;
}

.btn-share#fb {
  color: #0b5be6;
}

.btn-share#tw {
  color: #029eec;
}

.btn-share#ig {
  color: #f403c5;
}

.btn-share#wa {
  color: #2ba41a;
}

.btn-share:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
}

.noresult h2 {
  font-family: "Montez", sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.sidebar .sidebar-kat ul.list-unstyled {
  margin-bottom: 0;
}

.sidebar .sidebar-kat .skt-item {
  font-size: 13px;
  padding: 15px 0;
  border-bottom: 1px dotted #fff;
}

.sidebar .sidebar-kat .skt-item .link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar .sidebar-kat .skt-item .link .kategori {
  display: flex;
  align-items: center;
}

.sidebar .sidebar-kat .skt-item .link.selected {
  color: #02be66;
}

.sidebar .sidebar-kat .skt-item .link .kategori .icon {
  width: 40px;
  height: 40px;
  padding: 7px;
  background: #e0e5ec;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  padding: 7px 10px;
  border-radius: 10px;
  color: #41b983;
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  margin-right: 8px;
}

.sidebar .sidebar-kat .skt-item .link li.jml {
  float: right;
  background-color: rgba(255, 255, 255, 0.1);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  border-radius: 50000px;
  font-size: 10px;
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
  transition: all 1s;
}

.sidebar .sidebar-kat .skt-item .link:hover li.jml {
  transform: translateX(-50px);
  background-color: rgba(255, 255, 255, 0.9);
}

.load {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.load .pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
}

/* Animations */
@keyframes ringA {
  from,
  4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%,
  54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%,
  to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {
  from,
  12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%,
  62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%,
  to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%,
  58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {
  from,
  8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%,
  50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}