/* brand variables (for non-tailwind bits) */
:root{
  --brand: #28C7BF; /* from your logo */
  --dark: #0f172a;
}

/* buttons & re-usable classes (using Tailwind-ish utility stacks) */
.btn-primary{
  @apply px-5 py-3 rounded-full bg-brand text-white font-medium shadow-sm hover:opacity-90 transition;
}
.btn-secondary{
  @apply px-5 py-3 rounded-full border border-slate-300 text-slate-700 hover:border-brand hover:text-brand transition;
}
.btn-outline{
  @apply inline-flex justify-center px-4 py-2 rounded-full border border-brand text-brand hover:bg-brand hover:text-white transition;
}

.section-title{
  @apply font-display text-3xl sm:text-4xl font-bold text-dark;
}

.nav-link{
  @apply text-slate-700 hover:text-brand transition;
}

.mobile-link{
  @apply block py-3 text-slate-700 hover:text-brand;
}
.mobile-cta{
  @apply mt-2 inline-flex items-center rounded-full bg-brand px-4 py-2 text-white font-medium hover:opacity-90 transition;
}

/* mobile menu animation helpers (paired with JS class toggles) */
#mobileMenu{
  transform-origin: top;
}
.scale-y-100{ transform: scaleY(1); }
.scale-y-0{ transform: scaleY(0); }

/* hamburger lines */
.hamburger-line{
  width: 18px; height: 2px; background: #0f172a; display: block; margin: 3px 0; transition: all .2s ease;
}

/* reveal-on-scroll base + in-view state */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: all .7s ease;
}
.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* cards & images */
.service-card{
  @apply rounded-2xl overflow-hidden border border-slate-200 bg-white hover:shadow-lg transition;
}
.service-img{
  @apply w-full h-52 object-cover;
}
.card-title{ @apply text-lg font-semibold text-dark; }
.card-text{ @apply mt-1 text-sm text-slate-600; }

.gallery-img{
  @apply w-full h-64 object-cover rounded-2xl border border-slate-200 shadow-sm;
}

.package-card{
  @apply p-6 rounded-2xl border border-slate-200 bg-white shadow-sm;
}

.faq{
  @apply rounded-xl border border-slate-200 bg-white p-4;
}
.faq summary{
  @apply cursor-pointer font-medium text-dark;
}
.faq p{
  @apply mt-2 text-sm text-slate-600;
}

.social-icon{
  @apply inline-flex items-center justify-center w-10 h-10 rounded-full border border-slate-200 hover:border-brand hover:bg-brand/5 transition;
}

/* add to style.css (optional) */
#mobileMenu .mobile-link { @apply py-2 rounded-lg hover:bg-slate-50; }

.slideshow img {
    opacity: 0;
    animation: fadeSlideshow 20s infinite;
  }
  .slideshow img:nth-child(1) { animation-delay: 0s; }
  .slideshow img:nth-child(2) { animation-delay: 5s; }
  .slideshow img:nth-child(3) { animation-delay: 10s; }
  .slideshow img:nth-child(4) { animation-delay: 15s; }

  @keyframes fadeSlideshow {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    30%  { opacity: 1; }
    40%  { opacity: 0; }
    100% { opacity: 0; }
  }

   .birthday-slideshow img {
    opacity: 0;
    animation: fadeBirthday 15s infinite;
  }
  .birthday-slideshow img:nth-child(1) { animation-delay: 0s; }
  .birthday-slideshow img:nth-child(2) { animation-delay: 5s; }
  .birthday-slideshow img:nth-child(3) { animation-delay: 10s; }
  .birthday-slideshow img:nth-child(4) { animation-delay: 15s; }

  @keyframes fadeBirthday {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    30%  { opacity: 1; }
    40%  { opacity: 0; }
    100% { opacity: 0; }
  }

  .filter-pill{ @apply px-4 py-2 rounded-full border border-slate-200 bg-white text-sm hover:border-brand transition; }
    .filter-pill.active{ @apply border-brand bg-brand/10; }

      @keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Adjust to cover half track length */
  }
  #galleryCarousel {
    width: max-content;
    animation: scroll 45s linear infinite;
  }
  #galleryCarousel:hover {
    animation-play-state: paused;
  }

  .form-label{ @apply block text-sm font-medium text-slate-700; }
  .form-input{ @apply mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-slate-700 placeholder-slate-400 outline-none focus:border-brand focus:ring-2 focus:ring-brand/20; }

  #bookingModal { transition: opacity .15s ease;}

    /* Hide scrollbar for the horizontal pill row (desktop/tablet only shows it) */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }