/* Custom CSS for ICL Tours & Travels */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-container-low, #f6f3f2);
}

::-webkit-scrollbar-thumb {
  background: var(--primary, #000613);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary, #735c00);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 6, 19, 0.2);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 6, 19, 0.4);
}

/* Base styles for interactive elements */
button,
a {
  cursor: pointer;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Apple-style Easing & Transitions */
:root {
  --apple-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --apple-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.transition-apple {
  transition: all 0.6s var(--apple-ease);
}

/* Reveal on Scroll */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s var(--apple-ease);
  pointer-events: none;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Stagger Animation Utility */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s var(--apple-ease);
}

.active .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-item:nth-child(5) { transition-delay: 0.5s; }
.stagger-item:nth-child(6) { transition-delay: 0.6s; }

/* Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); }
}

@keyframes marquee-reverse {
  0% { transform: translateX(calc(-50% - 12px)); }
  100% { transform: translateX(0); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.animate-marquee-reverse {
  display: flex;
  width: max-content;
  animation: marquee-reverse 40s linear infinite;
}

/* Marquee hover pause removed */