@import url('https://fonts.googleapis.com/css2?family=Capriola&family=Fauna+One&display=swap');

@font-face {
    font-family: cocon-reguler;
    src: url(fonts/cocon-regular-font.otf);
}

.coloring-text-logo{
    background: -webkit-linear-gradient(180deg,  #d46a13, #E3AF1C, #c21ce3, #03b5d4, #07cf9a,#07a178);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: contain;
    -webkit-animation: displace 10s linear infinite;
    animation: displace 10s linear infinite;
    transition:  .5s ease-out;
}

.title-text-single {
    font-weight: 600 !important;
    align-self: center;
    width: max-content;
    /* background: -webkit-linear-gradient(180deg,  #E3AF1C, #c21ce3, #03b5d4, #07cf9a); */
    text-align: center;
    font-family: 'cocon-reguler', 'Capriola', 'Fauna One', sans-serif;
    font-size: 2.5rem;
    letter-spacing: -1px;
}

.title-text-single .b {
    font-size: 6rem;
}

@-webkit-keyframes displace {
    from {
      background-position: 0 center;
    }
    to {
      background-position: 1000px center;
    }
  }
@keyframes displace {
    from {
      background-position: 0 center;
    }
    to {
      background-position: 1000px center;
    }
}

#nama-instansi {
    line-height: 1em;
    width: fit-content;
}

/* component berita */
.banner-top-wrp {
  overflow: hidden;
  height: 28rem;
  border-radius: 15px;
}

.banner-top-wrp:hover .banner-top-item,
.banner-top-wrp:focus .banner-top-item {
  transform: scale(1.1);
  transition: all ease-in-out .5s;

}

.banner-top-wrp:hover .sub-bti-title,
.banner-top-wrp:focus .sub-bti-title {
  transition: all ease-in-out .5s;
  color: #0088CC !important;
  background: white !important;
  padding: .2em;
  font-size: 1.2rem;
}


.banner-top-item {
  height: inherit;
  align-items: bottom start;
  align-content: bottom start;
  text-align: left;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 15px;
  overflow: hidden;
}

.bti-content {
  background: linear-gradient(to bottom, rgba(24, 24, 24, 0.63), rgba(61, 61, 61, 0));
  color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: left;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.bti-title {
  background: linear-gradient(to top, #363636ad 50%, rgba(61, 61, 61, 0));
  color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3rem 1rem 1rem 1rem;
  text-align: left;
  border-radius: 0px 0px 15px 15px;
}

.sub-bti-title {
  color: inherit;
  font-size: 1.3rem;
}

.ng-wrp-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
  background: #ffffff;
}

.sub-bti-title:hover,
.sub-bti-title:focus {
  transition: all ease-in-out .5s;
  color: #0088CC !important;
  background: white !important;
  padding: .2em;
  font-size: 1.2rem;
}

@media  all and (max-width:600px) {
  .sub-bti-title {
      font-size: 1rem;
  }
}

#gallery{
  min-height: 50vh;
  width: 100%;
  bottom: 0px;
  top: 0;
  left: 0;
  right: 0;
  position: relative;
  z-index: 0;
  background: url(../bg-gallery.jpg) no-repeat center center fixed;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

:root {
  --bg-color: linear-gradient(95deg, rgba(56, 163, 165, 1) 0%, rgb(44, 199, 132) 100%);
  --bg-berita: #f5f5f5;
  --text-white: #ffffff;
  --shadow: rgba(87, 204, 153, 0.5);
  --border-color: #8599ff;
  --transition: 0.4s all;
}
.text-berita {
  position: relative;
  padding-top: 20px;
  padding-bottom: 2rem;
  display: flex;
  color: var(--text-white);
}
.text-berita .icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.text-berita::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 8px;
  bottom: 30px;
  left: 2px;
  border-bottom: 3px solid var(--border-color);
}

@keyframes skeletonAnimation {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.8;
  }
}

.skeleton{
  background-color: #ccc !important; animation-name: skeletonAnimation; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear;
}