@import "tailwindcss";

@layer base {
  :root {
    --font-sans: var(--font-poppins), ui-sans-serif, system-ui;
  }

  html, body {
    max-width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-poppins), sans-serif;
    background-color: white;
    color: #0f172a; /* Warna slate-900 */
    -webkit-font-smoothing: antialiased;
  }
}

@layer components {
  
  .hero-pagination {
    position: absolute;
    bottom: 3rem; /* bottom-12 */
    z-index: 40;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 0.75rem; /* gap-3 */
  }

  .swiper-pagination-bullet {
    background-color: #cbd5e1 !important; /* slate-300 */
    opacity: 1 !important;
    transition: all 0.3s ease;
    width: 8px;
    height: 8px;
  }

  .swiper-pagination-bullet-active {
    background-color: #ec4899 !important; /* pink-500 */
    width: 28px !important;
    border-radius: 9999px !important;
  }
}