* {
    font-family: 'Montserrat', sans-serif;
    /* transition: 200ms; */
}

.material-symbols-outlined.full {
  font-variation-settings:
  'FILL' 1,
}

input[type="range"] {
  -webkit-appearance: none;
  /* Menghilangkan gaya default */
  width: 100%;
  /* Lebar penuh */
  height: 8px;
  /* Tinggi bar */
  background: transparent;
  /* Warna latar belakang */
  border-radius: 0px;
  /* Sudut membulat */
  }
  
  input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: linear-gradient(to right, #444 0%, #444 var(--value), #ddd var(--value), #ddd 100%);
  border-radius: 0px;
  }
  
  input[type="range"]::-moz-range-track {
  height: 5px;
  background: linear-gradient(to right, #444 0%, #444 var(--value), #ddd var(--value), #ddd 100%);
  border-radius: 0px;
  }
  
  input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Menghilangkan gaya default */
  width: 0px;
  /* Lebar thumb default */
  height: 0px;
  /* Tinggi thumb default */
  background: #444;
  /* Warna thumb */
  border-radius: 50%;
  /* Membuat thumb bulat */
  cursor: pointer;
  /* Kursor pointer saat hover */
  margin-top: -5px;
  /* Atur margin atas untuk memposisikan thumb */
  transition: width 0.2s, height 0.2s;
  /* Transisi untuk perubahan ukuran */
  }
  
  /* input[type="range"]:hover::-webkit-slider-thumb,
  input[type="range"]:active::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
  } */
  
  input[type="range"]::-moz-range-thumb {
  width: 0px;
  /* Lebar thumb default */
  height: 0px;
  /* Tinggi thumb default */
  background: #444;
  /* Warna thumb */
  border-radius: 50%;
  /* Membuat thumb bulat */
  cursor: pointer;
  /* Kursor pointer saat hover */
  transition: width 0.2s, height 0.2s;
  /* Transisi untuk perubahan ukuran */
  }
  
  /* input[type="range"]:hover::-moz-range-thumb,
  input[type="range"]:active::-moz-range-thumb {
    width: 15px;
    height: 15px;
  } */
  
  .controls .mute-button,
  .controls .progress-bar {
  display: none;
  opacity: 0;
  }
  
  .hovered.controls .mute-button,
  .hovered.controls .progress-bar {
  display: block;
  opacity: 1;
  }

::-webkit-scrollbar {
    background-color: #1E1E1E;
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background: #444444;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(360deg); /* Jika ingin teks dimulai dari bawah ke atas */
    text-align: right;
}

.icon-size {
  font-size: 15px !important;
}

@media (min-width: 900px) {
  .icon-size {
    font-size: 20px !important; /* Ukuran untuk md ke atas */
  }
}

.icon-res {
  font-size: 35px !important;
}

@media (min-width: 900px) {
  .icon-res {
    font-size: 45px !important; /* Ukuran untuk md ke atas */
  }
}

@media (min-width: 1536px) {
  .icon-res {
    font-size: 100px !important; /* Ukuran untuk md ke atas */
  }
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
    object-position: center; /* Centers the image */
    position: absolute;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shadow-inner-gradient {
    position: relative;
}
.shadow-inner-gradient::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* slide client */

.scroll, .Lscroll {
    position: relative;
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  }

  /* Menghentikan animasi saat hover */
  .scroll:hover .roll,
  .Lscroll:hover .roll {
    animation-play-state: paused;
  }

  /* Menghentikan animasi kedua saat hover */
  .scroll:hover .roll:nth-child(2),
  .Lscroll:hover .roll:nth-child(2) {
    animation-play-state: paused;
  }

  .scroll .roll, .Lscroll .roll {
    white-space: nowrap;
    animation: scroll var(--time) linear infinite;
    animation-delay: calc(var(--time)*-1);
  }

  .scroll .roll:nth-child(2), .Lscroll .roll:nth-child(2) {
    animation: scroll2 var(--time) linear infinite;
    animation-delay: calc(var(--time)/-2);
  }

  .Lscroll .roll {
    white-space: nowrap;
    animation: L_scroll var(--time) linear infinite;
    animation-delay: calc(var(--time)*-1);
  }

  .Lscroll .roll:nth-child(2) {
    animation: L_scroll2 var(--time) linear infinite;
    animation-delay: calc(var(--time)/-2);
  }

  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-200%);
    }
  }

  @keyframes L_scroll {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(100%);
    }
  }

  @keyframes L_scroll2 {
    0% {
      transform: translateX(-200%);
    }

    100% {
      transform: translateX(0);
    }
  }

  .scroll .roll span, .Lscroll .roll span {
    display: inline-flex;
    margin: 10px;
    letter-spacing: 0.2em;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    transition: 0.5s;
  }

  .scroll .roll span:hover, .Lscroll .roll:hover span {
    background: #3fd2f9;
    cursor: pointer;
  }

  .imgBox .roll, .bigImgBox .roll {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .imgBox .roll img, .bigImgBox .roll img {
    /* max-width: 208px; */
    scale: 0.8;
  }

/* slide client */

.fill {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}