html {
  scroll-behavior: smooth;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #afb3b1;
}
::-webkit-scrollbar-thumb {
background: #062637;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(42, 42, 111);
}
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #2ad46c #1c9d5698; /* thumb color | track color */
  }

  .scrollbar-thumb {
    &::-webkit-scrollbar-thumb {
      background-color: #07441e; /* Thumb color */
      border-radius: 10px;
    }
  }
  .scrollbar-thumb {
    &::-webkit-scrollbar-thumb {
      background-color: #07441e; /* Thumb color */
      border-radius: 10px;
    }
  }

  .scrollbar-track {
    &::-webkit-scrollbar-track {
      background-color: #333333; /* Track color */
    }
  }

  .scrollbar {
    &::-webkit-scrollbar {
      width: 8px; /* Width of the scrollbar */
    }
  }
} 
  
  
  .matrix-text, .matrix-icon path {
    animation: flicker 6s infinite alternate, cascade 2s infinite alternate;
  }

  /* Flicker animation */
  @keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
      opacity: 1;
    }
    20%, 24%, 55% {
      opacity: 0.3;
    }
  }

  /* Slight movement for a cascading effect */
  @keyframes cascade {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(3px);
    }
  
  }
  nav {
    transition: background-color 0.5s ease, padding 0.5s ease;
  }
  

@media (max-width: 1032px) {
.navbar-scrolled {
  background-color: rgba(0, 0, 0, 0.7);
  padding: none !important; /* Adjust padding as desired */
  
  backdrop-filter: blur(8px) !important; /* Adjust the blur intensity as desired */


}

}@media (min-width: 1032px) {
.navbar-scrolled {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.2rem 2.5rem; /* Adjust padding as desired */
  backdrop-filter: blur(8px) !important; /* Adjust the blur intensity as desired */

}


}

#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 0; /* Hide any text inside the button */
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

#backToTopBtn:hover {
  opacity: 1;
}
.card-kelas{
  height: 400px;
}

@media (max-width: 425px) {
  .card-kelas{
    height: 200px;
  }
  }
  @media (max-width: 769px) {
    .card-kelas{
      height: 350px;
    }
    }