:root {
  --noel-dark: #44230e;
  --noel-gold: #d6992d;
  --noel-light: #fff;
  --noel-brown: #a97736;
}
.bg-noel-gold { background-color: var(--noel-gold);}
.bg-noel-dark { background-color: var(--noel-dark);}
.bg-noel-brown { background-color: var(--noel-brown);}
.text-noel-gold { color: var(--noel-gold);}
.text-noel-dark { color: var(--noel-dark);}
.text-noel-brown { color: var(--noel-brown);}
.text-noel-light { color: var(--noel-light);}

/* Animate float ONCE */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
  100% { transform: translateY(0); }
}
.animate-float {
  animation: float 2.8s ease-in-out infinite;
}

/* Fade-in animation */
@keyframes fadein {
  from { opacity: 0; transform: translateY(32px);}
  to { opacity: 1; transform: none; }
}
.animate-fadein { animation: fadein 0.9s cubic-bezier(.22,1,.36,1) both; }
.animate-fadein-slow { animation: fadein 1.4s 0.2s cubic-bezier(.22,1,.36,1) both; }
.animate-fadein-slow2 { animation: fadein 1.7s 0.35s cubic-bezier(.22,1,.36,1) both; }

/* Hide scrollbar (sliders) */
#coffeeSlider, #nutsSlider, #malbanSlider, #chocolatesSlider, #herbsSlider {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#coffeeSlider::-webkit-scrollbar,
#nutsSlider::-webkit-scrollbar,
#malbanSlider::-webkit-scrollbar,
#chocolatesSlider::-webkit-scrollbar,
#herbsSlider::-webkit-scrollbar {
  display: none;
}

/* Hero Slideshow transitions */
#heroSlideshow {
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1);
}
#heroSlideshow .slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s, transform 0.7s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
#heroSlideshow .active {
  opacity: 1 !important;
  transform: translateX(0) !important;
  z-index: 2 !important;
}
#heroSlideshow .prev {
  opacity: 0 !important;
  transform: translateX(-60%) !important;
  z-index: 1 !important;
}

/* Hide horizontal scrollbar but keep scroll functionality */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}
/* Hide horizontal scrollbar for sliders */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#mapTrack {
  display: flex;
  width: 300%; /* 3 slides */
}

#mapTrack > div {
  flex: 0 0 100%;
}