@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&display=swap');

:root{
  --main-color: rgb(241 245 249);
  --dark-mode-color: rgb(15 23 42);
  --dark-mode-sec: rgb(30 41 59);
}


html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--main-color);
  color: var(--dark-mode-color);
  font-family: 'Montserrat', sans-serif;
}

li:after {
  display:auto;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
li:hover:after { transform: scaleX(1); }
li.fromRight:after{ transform-origin:100% 50%; }
li.fromLeft:after{  transform-origin:  0% 50%; }

/* preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.progress-container {
  width: 100%;
  background-color: transparent;
  height: 5px;
  display: block;
}
.progress-bar {
  background-color: #0dcaf0;
  width: 0%;
  display: block;
  height: inherit;
}

#cta:hover { 
    transition: all 0.6s ease;
    transform: translateY(-0.5rem) scale(1);
    transform-origin: center;
}

#go-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#go-top:hover {
  background-color: #555;
}

.dark-mode {
  background-color: var(--dark-mode-color) !important;
  color: var(--main-color) !important;
  /* transition: 0.7s ease-in-out;  */
}

.img-darkmode {
  width: 20px;
}

#provinsi{
    background-image: url('/assets/img/kuda-lumping.jpg');
    background-size: cover;
    
}

.disable {
  display: none;
}

.scrolled {
  -webkit-backdrop-filter: blur(10px); 
  /* Safari 9+ */ 
  backdrop-filter: blur(10px); 
  /* Chrome and Opera */
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 300ms linear; 
  /* background-color: #0dcaf0 !important; */
}

.mobile-navbar {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}



.main-img{
  width: 100%;
  transition: transform 0.4s ease;
  transform-origin: 50% 50%;
}

.main-img:hover{
  transform: scale(1.2);
  width: 100%;
}

.share-to {
  top: 70%;
  left: calc(50% - 100px);
}

/* 374151 */

.article-tittle{
  font-family: 'Lato', sans-serif;
}

.article {
  font-family: 'Lato', sans-serif;
}

.recomendation-item {
  cursor: pointer;
}

#ic-reaction {
  cursor: pointer;
  font-size: larger;
}

#ic-reaction:hover {
 font-size: x-large;
}