@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Rubik:wght@400;500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

body {
  font-family: 'Rubik', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Poppins', sans-serif;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero slider */
.hero-slide {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

/* Mobile menu */
#mobile-menu-panel {
  transition: transform 0.3s ease-in-out;
  transform: translateX(100%);
}
#mobile-menu-panel.is-open {
  transform: translateX(0);
}
#mobile-menu-overlay {
  transition: opacity 0.3s ease-in-out;
}