@font-face {
  font-family: "Roboto";
  src: url("../css/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* ================= HERO PAGINATION ================= */

.heroSwiper .swiper-pagination-bullet {
  background: #000; /* black bullet */
  opacity: 0.3;
}

.heroSwiper .swiper-pagination-bullet-active {
  background: #facc15; /* Tailwind yellow-400 */
  opacity: 1;
}

/* ================= CUSTOM SCROLLBAR ================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #facc15 #f4f4f5;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f4f4f5;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #facc15, #eab308);
  border-radius: 10px;
  border: 2px solid #f4f4f5;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #eab308, #ca8a04);
}